feat(css): abstracted common css into single file for all services

It was becoming tedious to make the same change in three different css files, so I abstracted the main styling into a single file and am now copying the css into each service's public directory with `make css`.
picosh · Aug 8, 2022 · fb68af2 · fb68af2
1 parent ed3a7c3
commit fb68af2
Show file tree

Hide file tree

Showing 13 changed files with 2,617 additions and 496 deletions.
diff --git a/Makefile b/Makefile
@@ -7,6 +7,15 @@ DOCKER_TAG?=$(shell git log --format="%H" -n 1)
 DOCKER_PLATFORM?=linux/amd64,linux/arm64
 DOCKER_BUILDX_BUILD?=docker buildx build --push --platform $(DOCKER_PLATFORM)
 
+css:
+	cp ./smol.css lists/public/main.css
+	cp ./smol.css prose/public/main.css
+	cp ./smol.css pastes/public/main.css
+
+	cp ./syntax.css pastes/public/syntax.css
+	cp ./syntax.css prose/public/syntax.css
+.PHONY: css
+
 lint:
 	docker run --rm -v $(shell pwd):/app -w /app golangci/golangci-lint:latest golangci-lint run -E goimports -E godot
 .PHONY: lint

diff --git a/lists/html/blog.page.tmpl b/lists/html/blog.page.tmpl
@@ -55,7 +55,7 @@
         <article>
             <div class="flex items-center">
                 <time datetime="{{.UpdatedAtISO}}" class="font-italic text-sm post-date">{{.UpdatedTimeAgo}}</time>
-                <h2 class="font-bold flex-1"><a href="{{.URL}}">{{.Title}}</a></h2>
+                <div class="font-bold flex-1"><a href="{{.URL}}">{{.Title}}</a></div>
             </div>
         </article>
         {{end}}

diff --git a/lists/html/read.page.tmpl b/lists/html/read.page.tmpl
@@ -22,7 +22,7 @@
         <div class="flex items-center">
             <time datetime="{{.UpdatedAtISO}}" class="font-italic text-sm post-date">{{.UpdatedTimeAgo}}</time>
             <div class="flex-1">
-                <h2 class="inline"><a href="{{.URL}}">{{.Title}}</a></h2>
+                <div class="inline"><a href="{{.URL}}">{{.Title}}</a></div>
                 <address class="text-sm inline">
                     <a href="{{.BlogURL}}" class="link-grey">({{.Username}})</a>
                 </address>

diff --git a/lists/public/main.css b/lists/public/main.css
@@ -1,24 +1,31 @@
-*, ::before, ::after {
+*,
+::before,
+::after {
   box-sizing: border-box;
 }
 
 ::-moz-focus-inner {
-	border-style: none;
-	padding: 0;
+  border-style: none;
+  padding: 0;
+}
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
 }
-:-moz-focusring { outline: 1px dotted ButtonText; }
-:-moz-ui-invalid { box-shadow: none; }
 
 @media (prefers-color-scheme: light) {
   :root {
     --white: #6a737d;
-    --code: rgba(255, 229, 100, 0.2);
+    --code: #fff8d3;
+    --code-border: #f0d547;
     --pre: #f6f8fa;
     --bg-color: #fff;
     --text-color: #24292f;
     --link-color: #005cc5;
     --visited: #6f42c1;
-    --blockquote: #785840;
+    --blockquote: #005cc5;
     --blockquote-bg: #fff;
     --hover: #d73a49;
     --grey: #ccc;
@@ -28,7 +35,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --white: #f2f2f2;
-    --code: #252525;
+    --code: #414558;
+    --code-border: #252525;
     --pre: #252525;
     --bg-color: #282a36;
     --text-color: #f2f2f2;
@@ -45,52 +53,62 @@ html {
   background-color: var(--bg-color);
   color: var(--text-color);
   line-height: 1.5;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-    "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol";
-	-webkit-text-size-adjust: 100%;
-	-moz-tab-size: 4;
-	tab-size: 4;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-size: 17px;
 }
 
 body {
   margin: 0 auto;
-  max-width: 35rem;
+  max-width: 42rem;
 }
 
 img {
   max-width: 100%;
   height: auto;
 }
 
-b, strong {
+b,
+strong {
   font-weight: bold;
 }
 
-code, kbd, samp, pre {
-	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-	font-size: 0.8rem;
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
+    monospace;
+  font-size: 0.8rem;
 }
 
-code, kbd, samp {
+code,
+kbd,
+samp {
   background-color: var(--code);
+  border: 1px solid var(--code-border);
 }
 
 pre > code {
   background-color: inherit;
   padding: 0;
+  border: none;
 }
 
 code {
   border-radius: 0.3rem;
-  padding: .15rem .2rem .05rem;
+  padding: 0.15rem 0.2rem 0.05rem;
 }
 
 pre {
   border-radius: 5px;
   padding: 1rem;
+  margin: 1rem 0;
   overflow-x: auto;
-  margin: 0;
   background-color: var(--pre) !important;
 }
 
@@ -102,10 +120,12 @@ summary {
   display: list-item;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   margin: 0;
-	padding: 0;
-	border: 0;
+  padding: 0.6rem 0 0 0;
+  border: 0;
   font-style: normal;
   font-weight: inherit;
   font-size: inherit;
@@ -126,7 +146,8 @@ a {
   color: var(--link-color);
 }
 
-a:hover, a:visited:hover {
+a:hover,
+a:visited:hover {
   color: var(--hover);
 }
 
@@ -144,7 +165,7 @@ a.link-grey:visited {
 }
 
 section {
-  margin-bottom: 2rem;
+  margin-bottom: 1.4rem;
 }
 
 section:last-child {
@@ -166,11 +187,16 @@ article {
 blockquote {
   border-left: 5px solid var(--blockquote);
   background-color: var(--blockquote-bg);
-  padding: 0.5rem;
-  margin: 0.5rem 0;
+  padding: 0.8rem;
+  margin: 1rem 0;
+}
+
+blockquote > p {
+  margin: 0;
 }
 
-ul, ol {
+ul,
+ol {
   padding: 0 0 0 2rem;
   list-style-position: outside;
 }
@@ -201,7 +227,7 @@ dd {
 }
 
 dd:not(:last-child) {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 .post-date {
@@ -213,17 +239,17 @@ dd:not(:last-child) {
 }
 
 .text-2xl {
-  font-size: 1.5rem;
+  font-size: 1.85rem;
   line-height: 1.15;
 }
 
 .text-xl {
-  font-size: 1.25rem;
+  font-size: 1.45rem;
   line-height: 1.15;
 }
 
 .text-lg {
-  font-size: 1.125rem;
+  font-size: 1.25rem;
   line-height: 1.15;
 }