blog

commit

924c21cb1f99cdf447dc8dba634c67aab1f9b9e6

parent

2173c3a733d8ce7b77b5375e493e91febdf6e5b3

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2024-04-10 05:35

css: inline code

Diffstat

6 files changed, 101 insertions, 105 deletions

diff --git a/Makefile b/Makefile

@@ -54,7 +54,7 @@ build/static/%: static/%
   54    54 	@mkdir -p $$(dirname $@)
   55    55 	ln -f $< $@
   56    56 
   57    -1 build/static/style.css: style/*.scss style/components/*.scss
   -1    57 build/static/style.css: style/*.scss
   58    58 	npx sass --no-source-map style/style.scss $@
   59    59 
   60    60 .PHONY: clean

diff --git a/style/_base.scss b/style/_base.scss

@@ -1,18 +0,0 @@
    1    -1 h1, h2, h3, h4, h5, h6, legend {
    2    -1 	font-family: serif;
    3    -1 	font-weight: normal;
    4    -1 }
    5    -1 
    6    -1 .figure {
    7    -1 	margin-block: 0 $spacer;
    8    -1 	margin-inline: $spacer;
    9    -1 	text-align: center;
   10    -1 }
   11    -1 
   12    -1 .footnote {
   13    -1 	font-size: smaller;
   14    -1 }
   15    -1 
   16    -1 pre {
   17    -1 	border-radius: 0.2em;
   18    -1 }

diff --git a/style/components/_blog.scss b/style/components/_blog.scss

@@ -1,18 +0,0 @@
    1    -1 .blog {
    2    -1 	margin-block: 0 3em;
    3    -1 }
    4    -1 
    5    -1 .blog__post {
    6    -1 	margin-block-end: $spacer * 0.5;
    7    -1 }
    8    -1 
    9    -1 .post__meta {
   10    -1 	margin-block-end: 1em;
   11    -1 }
   12    -1 
   13    -1 .tag {
   14    -1 	font-size: 70%;
   15    -1 }
   16    -1 .tag:before {
   17    -1 	content: "#";
   18    -1 }

diff --git a/style/components/_code.scss b/style/components/_code.scss

@@ -1,16 +0,0 @@
    1    -1 .sourceCode .cf,
    2    -1 .sourceCode .kw,
    3    -1 .sourceCode .bu,
    4    -1 .sourceCode .im {
    5    -1 	font-weight: bold;
    6    -1 }
    7    -1 .sourceCode .dv,
    8    -1 .sourceCode .ot,
    9    -1 .sourceCode .st,
   10    -1 .sourceCode .fl,
   11    -1 .sourceCode .ch {
   12    -1 	opacity: 0.8;
   13    -1 }
   14    -1 .sourceCode .co {
   15    -1 	opacity: 0.6;
   16    -1 }

diff --git a/style/components/_header.scss b/style/components/_header.scss

@@ -1,33 +0,0 @@
    1    -1 .header__nav {
    2    -1 	text-transform: lowercase;
    3    -1 }
    4    -1 .header__nav ul {
    5    -1 	margin: 0;
    6    -1 	padding: 0;
    7    -1 }
    8    -1 .header__nav li {
    9    -1 	display: inline;
   10    -1 }
   11    -1 .header__nav li:not(:first-child)::before {
   12    -1 	content: " | ";
   13    -1 }
   14    -1 
   15    -1 .header__title {
   16    -1 	font-size: 150%;
   17    -1 	line-height: 1.2;
   18    -1 	margin: 0;
   19    -1 	font-family: sans-serif;
   20    -1 	font-weight: bold;
   21    -1 }
   22    -1 .header__title a {
   23    -1 	color: inherit;
   24    -1 	text-decoration: none;
   25    -1 }
   26    -1 
   27    -1 @media (min-width: 20em) {
   28    -1 	.header {
   29    -1 		display: flex;
   30    -1 		justify-content: space-between;
   31    -1 		align-items: center;
   32    -1 	}
   33    -1 }

diff --git a/style/style.scss b/style/style.scss

@@ -10,25 +10,6 @@ $color-link-focus: var(--color-link-focus);
   10    10 @import "../node_modules/mfbs/sass/layout";
   11    11 @import "../node_modules/mfbs/sass/fontsize";
   12    12 
   13    -1 @import "base";
   14    -1 
   15    -1 @import "components/blog";
   16    -1 @import "components/header";
   17    -1 @import "components/code";
   18    -1 
   19    -1 .l-main {
   20    -1 	margin-block: 5em 4em;
   21    -1 }
   22    -1 
   23    -1 .footnotes :target {
   24    -1 	background-color: $color-bg-tint;
   25    -1 }
   26    -1 
   27    -1 /* work around awkward browser styles */
   28    -1 img {
   29    -1 	block-size: auto;
   30    -1 }
   31    -1 
   32    13 :root {
   33    14 	--color-fg: #222;
   34    15 	--color-bg: #fff;
@@ -50,3 +31,103 @@ img {
   50    31 		--color-link-focus: #38f;
   51    32 	}
   52    33 }
   -1    34 
   -1    35 .l-main {
   -1    36 	margin-block: 5em 4em;
   -1    37 }
   -1    38 
   -1    39 h1, h2, h3, h4, h5, h6, legend {
   -1    40 	font-family: serif;
   -1    41 	font-weight: normal;
   -1    42 }
   -1    43 
   -1    44 img {
   -1    45 	block-size: auto;
   -1    46 }
   -1    47 
   -1    48 pre {
   -1    49 	border-radius: 0.2em;
   -1    50 }
   -1    51 
   -1    52 .figure {
   -1    53 	margin-block: 0 $spacer;
   -1    54 	margin-inline: $spacer;
   -1    55 	text-align: center;
   -1    56 }
   -1    57 
   -1    58 .footnote {
   -1    59 	font-size: smaller;
   -1    60 }
   -1    61 .footnotes :target {
   -1    62 	background-color: $color-bg-tint;
   -1    63 }
   -1    64 
   -1    65 .header__nav {
   -1    66 	text-transform: lowercase;
   -1    67 }
   -1    68 .header__nav ul {
   -1    69 	margin: 0;
   -1    70 	padding: 0;
   -1    71 }
   -1    72 .header__nav li {
   -1    73 	display: inline;
   -1    74 }
   -1    75 .header__nav li:not(:first-child)::before {
   -1    76 	content: " | ";
   -1    77 }
   -1    78 
   -1    79 .header__title {
   -1    80 	font-size: 150%;
   -1    81 	line-height: 1.2;
   -1    82 	margin: 0;
   -1    83 	font-family: sans-serif;
   -1    84 	font-weight: bold;
   -1    85 }
   -1    86 .header__title a {
   -1    87 	color: inherit;
   -1    88 	text-decoration: none;
   -1    89 }
   -1    90 
   -1    91 @media (min-width: 20em) {
   -1    92 	.header {
   -1    93 		display: flex;
   -1    94 		justify-content: space-between;
   -1    95 		align-items: center;
   -1    96 	}
   -1    97 }
   -1    98 
   -1    99 .blog {
   -1   100 	margin-block: 0 3em;
   -1   101 }
   -1   102 
   -1   103 .blog__post {
   -1   104 	margin-block-end: $spacer * 0.5;
   -1   105 }
   -1   106 
   -1   107 .post__meta {
   -1   108 	margin-block-end: 1em;
   -1   109 }
   -1   110 
   -1   111 .tag {
   -1   112 	font-size: 70%;
   -1   113 }
   -1   114 .tag:before {
   -1   115 	content: "#";
   -1   116 }
   -1   117 
   -1   118 .sourceCode .cf,
   -1   119 .sourceCode .kw,
   -1   120 .sourceCode .bu,
   -1   121 .sourceCode .im {
   -1   122 	font-weight: bold;
   -1   123 }
   -1   124 .sourceCode .dv,
   -1   125 .sourceCode .ot,
   -1   126 .sourceCode .st,
   -1   127 .sourceCode .fl,
   -1   128 .sourceCode .ch {
   -1   129 	opacity: 0.8;
   -1   130 }
   -1   131 .sourceCode .co {
   -1   132 	opacity: 0.6;
   -1   133 }