- commit
- c5deb2f
- parent
- d94d37a
- author
- Eric Bower
- date
- 2024-10-02 03:40:35 +0000 UTC
style(prose): moved tags block to bottom of page
6 files changed,
+42,
-31
+3,
-3
1@@ -639,7 +639,7 @@ h1 code, h2 code, h3 code, h4 code {
2 padding: 8px 10px 10px 10px;
3 border-radius: 10px;
4 background-size: 100%;
5- margin: 0:
6+ margin: 0;
7 -webkit-background-clip: text;
8 -moz-background-clip: text;
9 -webkit-text-fill-color: transparent;
10@@ -658,7 +658,7 @@ h1 code, h2 code, h3 code, h4 code {
11 .btn-link:visited {
12 border: 2px solid var(--link-color);
13 color: var(--link-color);
14- padding: var(--grid-height) 1rem;
15+ padding: var(--grid-height);
16 text-decoration: none;
17 font-weight: bold;
18 display: inline-block;
19@@ -666,7 +666,7 @@ h1 code, h2 code, h3 code, h4 code {
20
21 .box {
22 border: 2px solid var(--grey-light);
23- padding: var(--line-height);
24+ padding: var(--grid-height);
25 }
26
27 .box-sm {
+1,
-0
1@@ -859,6 +859,7 @@ func createStaticRoutes() []shared.Route {
2 return []shared.Route{
3 shared.NewRoute("GET", "/main.css", serveFile("main.css", "text/css")),
4 shared.NewRoute("GET", "/smol.css", serveFile("smol.css", "text/css")),
5+ shared.NewRoute("GET", "/smol-v2.css", serveFile("smol-v2.css", "text/css")),
6 shared.NewRoute("GET", "/syntax.css", serveFile("syntax.css", "text/css")),
7 shared.NewRoute("GET", "/card.png", serveFile("card.png", "image/png")),
8 shared.NewRoute("GET", "/favicon-16x16.png", serveFile("favicon-16x16.png", "image/png")),
+4,
-0
1@@ -79,6 +79,10 @@ header blockquote {
2 z-index: 1;
3 }
4
5+.text-grey {
6+ color: var(--grey-light);
7+}
8+
9 @media only screen and (max-width: 600px) {
10 .layout-aside main {
11 flex-direction: column;
+7,
-5
1@@ -60,16 +60,18 @@
2 <a href="{{.BlogURL}}">{{.BlogName}}</a>
3 </p>
4 {{if .Description}}<blockquote>{{.Description}}</blockquote>{{end}}
5- <div class="tags">
6- {{range .Tags}}
7- <a class="link-alt tag" href="{{$.BlogURL}}?tag={{.}}">#{{.}}</a>
8- {{end}}
9- </div>
10 <hr />
11 </header>
12 <main>
13 <article class="md">
14 {{.Contents}}
15+
16+ <div class="tags">
17+ {{range .Tags}}
18+ <code class="pill tag"><a href="{{$.BlogURL}}?tag={{.}}">#{{.}}</a></code>
19+ {{end}}
20+ </div>
21+
22 <div id="post-footer">{{.Footer}}</div>
23 </article>
24 </main>
+20,
-20
1@@ -25,8 +25,7 @@
2 <meta itemprop="image" content="https://{{.Site.Domain}}/card.png" />
3 <meta property="og:image" content="https://{{.Site.Domain}}/card.png" />
4
5-<link rel="stylesheet" href="/smol.css" />
6-<link rel="stylesheet" href="/main.css" />
7+<link rel="stylesheet" href="/smol-v2.css" />
8 {{end}}
9
10 {{define "attrs"}}{{end}}
11@@ -38,30 +37,15 @@
12 <div>
13 <a href="https://pico.sh/prose" class="btn-link mt inline-block">LEARN MORE</a>
14 </div>
15- <hr />
16+ <hr class="mt-2" />
17 </header>
18 <main>
19- <div class="flex items-center">
20- <div class="font-italic text-sm post-date">popular tags</div>
21- <div class="flex-1">
22- {{range .Tags}}
23- <span class="text-md"><a href="/read?tag={{.}}">#{{.}}</a></span>
24- {{end}}
25- </div>
26- </div>
27- {{if .HasFilter}}<a href="/read">clear filter</a>{{end}}
28-
29- <div class="mt">
30- {{if .PrevPage}}<a href="{{.PrevPage}}">prev</a>{{else}}<span class="text-grey">prev</span>{{end}}
31- {{if .NextPage}}<a href="{{.NextPage}}">next</a>{{else}}<span class="text-grey">next</span>{{end}}
32- </div>
33-
34 {{range .Posts}}
35- <article class="my-2">
36+ <article class="my">
37 <div class="flex items-center">
38 <time datetime="{{.PublishAtISO}}" class="font text-sm post-date">{{.PublishAt}}</time>
39 <div class="flex-1">
40- <span class="text-md"><a href="{{.URL}}">{{.Title}}</a></span>
41+ <a class="text-md transform-none" href="{{.URL}}" style="text-transform: lowercase;">{{.Title}}</a>
42 <address class="text-sm inline">
43 <a href="{{.BlogURL}}" class="link-grey">({{.Username}})</a>
44 </address>
45@@ -69,6 +53,22 @@
46 </div>
47 </article>
48 {{end}}
49+
50+ <div class="mt">
51+ {{if .PrevPage}}<a href="{{.PrevPage}}" class="link-alt">prev</a>{{else}}<span class="text-grey">prev</span>{{end}}
52+ {{if .NextPage}}<a href="{{.NextPage}}" class="link-alt">next</a>{{else}}<span class="text-grey">next</span>{{end}}
53+ </div>
54+
55+ <div class="flex items-center">
56+ <div class="post-date"></div>
57+ <div class="flex-1">
58+ {{range .Tags}}
59+ <code class="pill"><a href="/read?tag={{.}}">#{{.}}</a></code>
60+ {{end}}
61+ </div>
62+ </div>
63+ {{if .HasFilter}}<a href="/read">clear filter</a>{{end}}
64+
65 </main>
66 {{template "marketing-footer" .}}
67 {{end}}
+7,
-3
1@@ -639,7 +639,7 @@ h1 code, h2 code, h3 code, h4 code {
2 padding: 8px 10px 10px 10px;
3 border-radius: 10px;
4 background-size: 100%;
5- margin: 0:
6+ margin: 0;
7 -webkit-background-clip: text;
8 -moz-background-clip: text;
9 -webkit-text-fill-color: transparent;
10@@ -658,7 +658,7 @@ h1 code, h2 code, h3 code, h4 code {
11 .btn-link:visited {
12 border: 2px solid var(--link-color);
13 color: var(--link-color);
14- padding: var(--grid-height) 1rem;
15+ padding: var(--grid-height);
16 text-decoration: none;
17 font-weight: bold;
18 display: inline-block;
19@@ -666,7 +666,7 @@ h1 code, h2 code, h3 code, h4 code {
20
21 .box {
22 border: 2px solid var(--grey-light);
23- padding: var(--line-height);
24+ padding: var(--grid-height);
25 }
26
27 .box-sm {
28@@ -829,6 +829,10 @@ header blockquote {
29 z-index: 1;
30 }
31
32+.text-grey {
33+ color: var(--grey-light);
34+}
35+
36 @media only screen and (max-width: 600px) {
37 .layout-aside main {
38 flex-direction: column;