Skip to content

Commit 22dcc82

Browse files
hedyhlihedyhli
committed
Fix responsive font sizes and layout
1 parent 2032081 commit 22dcc82

File tree

9 files changed

+288
-231
lines changed

9 files changed

+288
-231
lines changed

‎assets/main.css‎

Lines changed: 45 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,85 @@
11
body {
22
font-family: serif;
33
color: #333333;
4-
font-size: 100%;
4+
font-size: 16px;
55
background-color: #ffffff;
66
}
77

8+
*, *::before, *::after {
9+
box-sizing: border-box;
10+
}
11+
12+
main {
13+
margin: 0 .5rem;
14+
font-size: 1.2rem;
15+
}
16+
817
h1 {
918
font-style: italic;
1019
text-align:center;
11-
font-size: 5em;
20+
font-size: 3rem;
1221
margin-bottom: 0;
1322
}
1423

1524
h2 {
1625
font-style: italic;
1726
text-align:center;
18-
font-size: 2em;
27+
font-size: 1.5rem;
1928
margin-left: 5%;
2029
margin-right: 5%;
2130
}
2231

32+
ul {
33+
padding: 0;
34+
}
35+
2336
li {
24-
font-family: serif;
25-
font-size: 1.2em;
26-
text-align:center;
27-
list-style:none;
37+
text-align: center;
38+
list-style: none;
2839
font-style: italic;
2940
margin-bottom: 0.5em;
3041
}
3142

32-
.mono {
33-
font-family: monospace;
34-
font-size: 1.2em;
35-
background-color: #eeeeee;
36-
}
37-
3843
.code {
39-
margin: auto;
40-
display: block;
41-
width: 40em;
42-
}
43-
44-
p {
45-
font-family: serif;
46-
font-size: 1.2em;
44+
margin-left: 1.5rem;
4745
display: block;
48-
width: 70%;
49-
margin: auto;
50-
margin-block-start: 1em;
51-
margin-block-end: 1em;
5246
}
5347

54-
a {
55-
font-family: inherit;
56-
font-size: inherit;
48+
pre {
49+
overflow-x: scroll;
5750
}
5851

5952
code {
6053
font-family: monospace;
61-
font-size: 1.2rem;
54+
font-size: 1rem;
6255
background-color: #eeeeee;
6356
}
6457

6558
pre code {
66-
font-size: 1.6rem;
67-
font-family: monospace;
59+
font-size: 1.25rem;
6860
color: #333333;
6961
background-color: #ffffff;
7062
margin-bottom: 0;
7163
}
64+
65+
@media (min-width: 850px) {
66+
main {
67+
max-width: 70%;
68+
margin: auto;
69+
}
70+
h1 {
71+
font-size: 5rem;
72+
}
73+
h2 {
74+
font-size: 2rem;
75+
}
76+
code {
77+
font-size: 1.2rem;
78+
}
79+
pre code {
80+
font-size: 1.6rem;
81+
}
82+
.code {
83+
margin-left: 5rem;
84+
}
85+
}

‎content/learn.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,6 @@ Begin (
412412
This essentially allows any control flow to have a break statement, not just loops. `Begin` can also be used to implement a return statement to break out of a function early.
413413

414414
```cognate
415-
416415
~~ Inefficiently decrements a number 100 times
417416
~~ If it reaches zero, returns zero instead.
418417
Def F (

‎layouts/_default/_markup/render-codeblock.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
<div class="code">
2-
<pre><code>
3-
{{- .Inner | safeHTML -}}
4-
</code></pre>
2+
<pre><code>{{- .Inner | safeHTML -}}</code></pre>
53
</div>

‎layouts/_default/baseof.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<html>
44
<head>
55
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
{{ $css := resources.Get "main.css" | minify -}}
78
<link rel="stylesheet" href="{{ $css.RelPermalink }}" />
89
{{ if eq .RelPermalink "/" -}}
@@ -13,7 +14,9 @@
1314
</head>
1415
<body>
1516
{{/* Allows child templates to define this block */}}
16-
{{ block "main" . }}{{ end }}
17+
<main>
18+
{{ block "main" . }}{{ end }}
19+
</main>
1720
<br /><br /><br />
1821
</body>
1922
</html>

‎public/index.html‎

Lines changed: 49 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,79 @@
22
<!doctype html>
33
<html>
44
<head>
5-
<meta name="generator" content="Hugo 0.130.0">
5+
<meta name="generator" content="Hugo 0.133.1"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
66
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<link rel="stylesheet" href="/main.min.css" />
89
<title>Cognate: Readable and concise concatenative programming</title>
910
</head>
1011
<body>
1112

12-
13+
<main>
14+
1315
<h1 id="cognate">Cognate</h1>
1416
<h2 id="readable-and-concise-concatenative-programming">Readable and concise concatenative programming</h2>
15-
<div class="code"><pre><code><span style='font-style: italic;color: #969896'>~~ Fizzbuzz in Cognate</span>
17+
<!--cognate--><div class="code"><pre><code>
18+
~~ Fizzbuzz in Cognate
1619

17-
<span style='color: #0086b3'>Def</span> <span style='color: #795da3'>Multiple</span> <span style='color: #333333'>as</span> <span style='color: #4e4e4e'>(</span><span style='color: #183691'>Zero?</span> <span style='color: #183691'>Modulo</span><span style='color: #4e4e4e'>)</span>;
20+
Def Multiple as (Zero? Modulo);
1821

19-
<span style='color: #0086b3'>Def</span> <span style='color: #795da3'>Fizzbuzz</span>
20-
<span style='color: #a71d5d'>Case</span> <span style='color: #4e4e4e'>(</span><span style='color: #795da3'>Multiple</span> <span style='color: #333333'>of</span> <span style='color: #0086b3'>15</span><span style='color: #4e4e4e'>)</span> <span style='color: #333333'>is</span> <span style='color: #183691'>&quot;fizzbuzz&quot;</span>
21-
<span style='color: #a71d5d'>Case</span> <span style='color: #4e4e4e'>(</span><span style='color: #795da3'>Multiple</span> <span style='color: #333333'>of</span> <span style='color: #0086b3'>3</span><span style='color: #4e4e4e'>)</span> <span style='color: #333333'>is</span> <span style='color: #183691'>&quot;fizz&quot;</span>
22-
<span style='color: #a71d5d'>Case</span> <span style='color: #4e4e4e'>(</span><span style='color: #795da3'>Multiple</span> <span style='color: #333333'>of</span> <span style='color: #0086b3'>5</span><span style='color: #4e4e4e'>)</span> <span style='color: #333333'>is</span> <span style='color: #183691'>&quot;buzz&quot;</span>
23-
<span style='color: #333333'>otherwise</span> <span style='color: #4e4e4e'>(</span><span style='color: #4e4e4e'>)</span>;
22+
Def Fizzbuzz
23+
Case (Multiple of 15) is "fizzbuzz"
24+
Case (Multiple of 3) is "fizz"
25+
Case (Multiple of 5) is "buzz"
26+
otherwise ();
2427

25-
<span style='color: #a71d5d'>For</span> <span style='color: #333333'>each</span> <span style='color: #333333'>in</span> <span style='color: #183691'>Range</span> <span style='color: #0086b3'>1</span> <span style='color: #333333'>to</span> <span style='color: #0086b3'>100</span> <span style='color: #4e4e4e'>(</span><span style='color: #183691'>Print</span> <span style='color: #795da3'>Fizzbuzz</span><span style='color: #4e4e4e'>)</span>
28+
For each in Range 1 to 100 (Print Fizzbuzz)
2629
</code></pre></div>
2730
<p>Cognate is a project aiming to create a human readable programming language with as little syntax as possible. Where natural language programming usually uses many complex syntax rules, instead Cognate takes them away. What it adds is simple, a way to embed comments into statements.</p>
28-
<div class="code"><pre><code><span style='font-style: italic;color: #969896'>~~ Towers of Hanoi in Cognate</span>
31+
<!--cognate--><div class="code"><pre><code>
32+
~~ Towers of Hanoi in Cognate
2933

30-
<span style='color: #0086b3'>Def</span> <span style='color: #795da3'>Move</span> <span style='color: #333333'>discs</span> <span style='color: #333333'>as</span> <span style='color: #4e4e4e'>(</span>
34+
Def Move discs as (
3135

32-
<span style='color: #0086b3'>Let</span> <span style='color: #795da3'>N</span> <span style='color: #333333'>be</span> <span style='color: #333333'>number</span> <span style='color: #333333'>of</span> <span style='color: #333333'>discs</span>;
33-
<span style='color: #0086b3'>Let</span> <span style='color: #795da3'>A</span> <span style='color: #333333'>be</span> <span style='color: #333333'>first</span> <span style='color: #333333'>rod</span>;
34-
<span style='color: #0086b3'>Let</span> <span style='color: #795da3'>B</span> <span style='color: #333333'>be</span> <span style='color: #333333'>second</span> <span style='color: #333333'>rod</span>;
35-
<span style='color: #0086b3'>Let</span> <span style='color: #795da3'>C</span> <span style='color: #333333'>be</span> <span style='color: #333333'>third</span> <span style='color: #333333'>rod</span>;
36+
Let N be number of discs;
37+
Let A be first rod;
38+
Let B be second rod;
39+
Let C be third rod;
3640

37-
<span style='color: #a71d5d'>Unless</span> <span style='color: #183691'>Zero?</span> <span style='color: #795da3'>N</span> <span style='color: #4e4e4e'>(</span>
38-
<span style='color: #795da3'>Move</span> <span style='font-weight: bold;color: #4e4e4e'>-</span> <span style='color: #0086b3'>1</span> <span style='color: #795da3'>N</span> <span style='color: #333333'>discs</span> <span style='color: #333333'>from</span> <span style='color: #795da3'>A</span> <span style='color: #333333'>via</span> <span style='color: #795da3'>C</span> <span style='color: #333333'>to</span> <span style='color: #795da3'>B</span>;
39-
<span style='color: #183691'>Prints</span> <span style='color: #4e4e4e'>(</span><span style='color: #183691'>&quot;Move disc &quot;</span> <span style='color: #795da3'>N</span> <span style='color: #183691'>&quot; from &quot;</span> <span style='color: #795da3'>A</span> <span style='color: #183691'>&quot; to &quot;</span> <span style='color: #795da3'>C</span><span style='color: #4e4e4e'>)</span>;
40-
<span style='color: #795da3'>Move</span> <span style='font-weight: bold;color: #4e4e4e'>-</span> <span style='color: #0086b3'>1</span> <span style='color: #795da3'>N</span> <span style='color: #333333'>discs</span> <span style='color: #333333'>from</span> <span style='color: #795da3'>B</span> <span style='color: #333333'>via</span> <span style='color: #795da3'>A</span> <span style='color: #333333'>to</span> <span style='color: #795da3'>C</span>;
41-
<span style='color: #4e4e4e'>)</span>
42-
<span style='color: #4e4e4e'>)</span>;
41+
Unless Zero? N (
42+
Move - 1 N discs from A via C to B;
43+
Prints ("Move disc " N " from " A " to " C);
44+
Move - 1 N discs from B via A to C;
45+
)
46+
);
4347

44-
<span style='color: #795da3'>Move</span> <span style='color: #0086b3'>5</span> <span style='color: #333333'>discs</span> <span style='color: #333333'>from</span> <span style='color: #183691'>&quot;a&quot;</span> <span style='color: #333333'>via</span> <span style='color: #183691'>&quot;b&quot;</span> <span style='color: #333333'>to</span> <span style='color: #183691'>&quot;c&quot;</span>
48+
Move 5 discs from "a" via "b" to "c"
4549
</code></pre></div>
4650
<p>As you can see, Cognate ignores words starting with lowercase letters, allowing them to be used to describe functionality and enhance readability. This makes Cognate codebases intuitive and maintainable.</p>
47-
<div class="code"><pre><code><span style='font-style: italic;color: #969896'>~~ Square numbers in Cognate</span>
51+
<!--cognate--><div class="code"><pre><code>
52+
~~ Square numbers in Cognate
4853

49-
<span style='color: #0086b3'>Def</span> <span style='color: #795da3'>Square</span> <span style='color: #333333'>as</span> <span style='color: #4e4e4e'>(</span><span style='font-weight: bold;color: #4e4e4e'>*</span> <span style='color: #183691'>Twin</span><span style='color: #4e4e4e'>)</span>;
50-
<span style='color: #183691'>Map</span> <span style='color: #4e4e4e'>(</span><span style='color: #795da3'>Square</span><span style='color: #4e4e4e'>)</span> <span style='color: #333333'>over</span> <span style='color: #183691'>Range</span> <span style='color: #0086b3'>1</span> <span style='color: #333333'>to</span> <span style='color: #0086b3'>10</span>;
51-
<span style='color: #183691'>Print</span>
54+
Def Square as (* Twin);
55+
Map (Square) over Range 1 to 10;
56+
Print
5257
</code></pre></div>
5358
<p>Cognate is a stack-oriented programming language similar to Forth or Factor, except statements are evaluated right to left. This gives the expressiveness of concatenative programming as well as the readability of prefix notation. Statements can be delimited at arbitrary points, allowing them to read as sentences would in English.</p>
54-
<div class="code"><pre><code><span style='font-style: italic;color: #969896'>~~ Prime numbers in Cognate</span>
59+
<!--cognate--><div class="code"><pre><code>
60+
~~ Prime numbers in Cognate
5561

56-
<span style='color: #0086b3'>Def</span> <span style='color: #795da3'>Factor</span> <span style='color: #4e4e4e'>(</span><span style='color: #183691'>Zero?</span> <span style='color: #183691'>Modulo</span> <span style='color: #183691'>Swap</span><span style='color: #4e4e4e'>)</span>;
62+
Def Factor (Zero? Modulo Swap);
5763

58-
<span style='color: #0086b3'>Def</span> <span style='color: #795da3'>Primes</span> <span style='color: #4e4e4e'>(</span>
59-
<span style='color: #0086b3'>Let</span> <span style='color: #795da3'>U</span> <span style='color: #333333'>is</span> <span style='color: #333333'>upper</span> <span style='color: #333333'>bound</span>;
60-
<span style='color: #333333'>initially</span> <span style='color: #794da3'>List</span> <span style='color: #4e4e4e'>(</span><span style='color: #4e4e4e'>)</span>;
61-
<span style='color: #a71d5d'>For</span> <span style='color: #183691'>Range</span> <span style='color: #0086b3'>2</span> <span style='color: #333333'>to</span> <span style='color: #795da3'>U</span> <span style='color: #4e4e4e'>(</span>
62-
<span style='color: #0086b3'>Let</span> <span style='color: #795da3'>P</span> <span style='color: #333333'>is</span> <span style='color: #333333'>potential</span> <span style='color: #333333'>prime</span>;
63-
<span style='color: #0086b3'>Let</span> <span style='color: #795da3'>Found</span> <span style='color: #333333'>be</span> <span style='color: #333333'>list</span> <span style='color: #333333'>of</span> <span style='color: #333333'>found</span> <span style='color: #333333'>primes</span>;
64-
<span style='color: #0086b3'>Let</span> <span style='color: #795da3'>To-check</span> <span style='color: #333333'>be</span> <span style='color: #a71d5d'>Take-while</span> <span style='color: #4e4e4e'>(</span><span style='font-weight: bold;color: #4e4e4e'>&lt;=</span> <span style='color: #183691'>Sqrt</span> <span style='color: #795da3'>P</span><span style='color: #4e4e4e'>)</span> <span style='color: #795da3'>Found</span>;
65-
<span style='color: #a71d5d'>When</span> <span style='color: #183691'>All</span> <span style='color: #4e4e4e'>(</span><span style='font-weight: bold;color: #4e4e4e'>Not</span> <span style='color: #795da3'>Factor</span> <span style='color: #333333'>of</span> <span style='color: #795da3'>P</span><span style='color: #4e4e4e'>)</span> <span style='color: #795da3'>To-check</span> <span style='color: #4e4e4e'>(</span>
66-
<span style='color: #183691'>Append</span> <span style='color: #795da3'>P</span>
67-
<span style='color: #4e4e4e'>)</span> <span style='color: #333333'>to</span> <span style='color: #795da3'>Found</span>
68-
<span style='color: #4e4e4e'>)</span>
69-
<span style='color: #4e4e4e'>)</span>;
64+
Def Primes (
65+
Let U is upper bound;
66+
initially List ();
67+
For Range 2 to U (
68+
Let P is potential prime;
69+
Let Found be list of found primes;
70+
Let To-check be Take-while (<= Sqrt P) Found;
71+
When All (Not Factor of P) To-check (
72+
Append P
73+
) to Found
74+
)
75+
);
7076

71-
<span style='color: #183691'>Print</span> <span style='color: #795da3'>Primes</span> <span style='color: #333333'>up</span> <span style='color: #333333'>to</span> <span style='color: #0086b3'>1000</span>;
77+
Print Primes up to 1000;
7278
</code></pre></div>
7379
<p>Cognate borrows from other concatenative languages, but also adds unique features of its own.</p>
7480
<ul>
@@ -82,6 +88,7 @@ <h2 id="readable-and-concise-concatenative-programming">Readable and concise con
8288
<p>Interested? Read the <a href="/learn/">tutorial</a>, check out the <a href="https://cognate-playground.hedy.dev/">interactive web playground</a>, or visit our <a href="https://github.com/cognate-lang/cognate">GitHub repository</a>.</p>
8389

8490

91+
</main>
8592
<br /><br /><br />
8693
</body>
8794
</html>

‎public/index.xml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
33
<channel>
44
<title>About on Cognate: Readable and concise concatenative programming</title>
5-
<link>https://cognate-lang.github.io/</link>
5+
<link>http://localhost:1313/</link>
66
<description>Recent content in About on Cognate: Readable and concise concatenative programming</description>
77
<generator>Hugo</generator>
88
<language>en-us</language>
9-
<atom:link href="https://cognate-lang.github.io/index.xml" rel="self" type="application/rss+xml" />
9+
<atom:link href="http://localhost:1313/index.xml" rel="self" type="application/rss+xml" />
1010
<item>
1111
<title>Learn Cognate</title>
12-
<link>https://cognate-lang.github.io/learn/</link>
12+
<link>http://localhost:1313/learn/</link>
1313
<pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
14-
<guid>https://cognate-lang.github.io/learn/</guid>
14+
<guid>http://localhost:1313/learn/</guid>
1515
<description>Learn Cognate A brief introduction to the language Install First install CognaC the Cognate Compiler from here using the provided instructions. Currently CognaC will run on recent Linux or Mac systems. Windows users can install it onto the Windows Subsystem for Linux &amp;ndash; native Windows support is planned.&#xA;Invoking CognaC is simple. If you have a file named foo.cog containing a Cognate program, it can be compiled into an executable named foo with the following command.</description>
1616
</item>
1717
</channel>

0 commit comments

Comments
 (0)