diff --git a/public/self.jpg b/public/self.jpg deleted file mode 100644 index 669ad0f..0000000 Binary files a/public/self.jpg and /dev/null differ diff --git a/public/site.css b/public/site.css index 69133f7..0bc5644 100644 --- a/public/site.css +++ b/public/site.css @@ -1 +1 @@ -@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono");:root{--default-serif-font: "Noto Serif", serif;--default-sans-font: "Noto Sans", sans-serif;--default-mono-font: "Noto Sans Mono", monospace;--default-font-size: 16px;--header-font-size: 2.0em;--default-line-height: 1.5;--background-color: #1d2021;--foreground-color: #ebdbb2;--link-color: #458588;--muted-color: #928374;--primary-accent-color: #b16286;--secondary-accent-color: #689d6a;--code-background-color: #282828;--inline-code-background-color: #3c3836}.accent{color:var(--primary-accent-color)}html,body{height:100%}body{display:flex;flex-direction:column;margin:0;line-height:var(--default-line-height);font-size:var(--default-font-size);font-family:var(--default-serif-font);background-color:var(--background-color);color:var(--foreground-color);border-top:.5em solid var(--primary-accent-color)}main{flex:1 0 auto;}#content{max-width:48em;margin-left:auto;margin-right:auto;padding-right:1.4em;padding-left:1.4em;padding-bottom:1.4em}header{overflow:hidden;margin-top:1.4em;margin-bottom:1.4em;margin-left:1em;margin-right:1em}header>h1{text-align:center;font-size:var(--header-font-size);font-family:var(--default-sans-font);padding-top:2.8rem;margin-top:0;margin-bottom:.7rem}header .post-meta{text-align:center;padding-top:.5em;padding-bottom:.9em;margin-bottom:0}.post-meta time{color:var(--muted-color)}h2,h3,h4,h5,h6{padding-top:1.2rem;margin-bottom:.2rem}p{padding-top:.4em;margin-bottom:1em}blockquote{font-family:var(--default-sans-font);font-style:italic;margin:0 1.25rem;padding-left:1.25rem;padding-right:1.25rem;border-left:3px solid var(--secondary-accent-color)}a{color:var(--link-color);text-decoration:none}:where(h2,h3,h4,h5,h6)>a[href^="#"]::before{content:"#";display:inline-block;width:1.2rem;margin-left:-1.2rem;opacity:0}:where(h2,h3,h4,h5,h6):hover>a[href^="#"]::before{opacity:1}:where(h2,h3,h4,h5,h6):target>a[href^="#"]::before{opacity:1;color:var(--primary-accent-color)}img,video{width:100%;height:auto}figure{margin:0}figcaption{font-size:.85rem;color:var(--muted-color)}pre{display:block;padding:.25rem 1.25rem;font-size:85%;border-left:.25rem solid var(--primary-accent-color)}code{padding:0 .4rem;background-color:var(--inline-code-background-color);border-radius:2px}pre,code{overflow:auto;font-family:var(--default-mono-font)}pre>code{padding:0;background-color:var(--code-background-color);border-radius:unset}table{display:block;overflow-x:auto;margin-left:auto;margin-right:auto;text-align:left;border-collapse:collapse}th[scope=col]{padding-top:.4em;border-bottom:3px solid var(--secondary-accent-color)}th[scope=row]{border-right:3px solid var(--secondary-accent-color)}td{text-align:center;border:1px solid var(--muted-color)}th,td{vertical-align:bottom;padding-left:.4em;padding-right:.4em;border:1px solid var(--muted-color)}footer{border-top:.5em solid var(--primary-accent-color);text-align:center;background-color:var(--code-background-color);padding:1.4em;flex-shrink:0;}footer a{color:var(--secondary-accent-color)}footer>nav>a{margin:0 .4em}footer p{padding-top:0}footer p,footer a{font-family:var(--default-sans-font);font-variant-caps:all-small-caps}@media (min-width: 470px){:root{--default-font-size: 17px}header{margin-left:2.8em;margin-right:2.8em}}@media (min-width: 625px){:root{--default-font-size: 18px}}@media (min-width: 802px){:root{--default-font-size: 19px}}@media (min-width: 1003px){:root{--default-font-size: 20px}}@media (min-width: 1225px){:root{--default-font-size: 21px}:where(h2,h3,h4,h5,h6)>a[href^="#"]::before{width:1.8rem;margin-left:-1.8rem}}@media (min-width: 1496px){:root{--default-font-size: 22px}} \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono");:root{--default-serif-font: "Noto Serif", serif;--default-sans-font: "Noto Sans", sans-serif;--default-mono-font: "Noto Sans Mono", monospace;--default-font-size: 14px;--header-font-size: 2.0em;--default-line-height: 1.5;--background-color: #1d2021;--foreground-color: #ebdbb2;--link-color: #458588;--muted-color: #928374;--primary-accent-color: #b16286;--secondary-accent-color: #689d6a;--code-background-color: #282828;--inline-code-background-color: #3c3836}.accent{color:var(--primary-accent-color)}html,body{height:100%}body{display:flex;flex-direction:column;margin:0;line-height:var(--default-line-height);font-size:var(--default-font-size);font-family:var(--default-serif-font);background-color:var(--background-color);color:var(--foreground-color);border-top:.5em solid var(--primary-accent-color)}main{flex:1 0 auto;}#content{max-width:48em;margin-left:auto;margin-right:auto;padding-right:1.4em;padding-left:1.4em;padding-bottom:1.4em}header{overflow:hidden;margin-top:1.4em;margin-bottom:1.4em;margin-left:1em;margin-right:1em}header>div.logo{display:flex;flex-direction:column;align-items:center;justify-content:center}header>h1{text-align:center;font-size:var(--header-font-size);font-family:var(--default-sans-font);padding-top:2.8rem;margin-top:0;margin-bottom:.7rem}header .post-meta{text-align:center;padding-top:.5em;padding-bottom:.9em;margin-bottom:0}.post-meta time{color:var(--muted-color)}h2,h3,h4,h5,h6{padding-top:1.2rem;margin-bottom:.2rem}p{padding-top:.4em;margin-bottom:1em}blockquote{font-family:var(--default-sans-font);font-style:italic;margin:0 1.25rem;padding-left:1.25rem;padding-right:1.25rem;border-left:3px solid var(--secondary-accent-color)}a{color:var(--link-color);text-decoration:none}:where(h2,h3,h4,h5,h6)>a[href^="#"]::before{content:"#";display:inline-block;width:1.2rem;margin-left:-1.2rem;opacity:0}:where(h2,h3,h4,h5,h6):hover>a[href^="#"]::before{opacity:1}:where(h2,h3,h4,h5,h6):target>a[href^="#"]::before{opacity:1;color:var(--primary-accent-color)}img.logo{width:64px;height:64px}img,video{width:100%;height:auto}figure{margin:0}figcaption{font-size:.85rem;color:var(--muted-color)}pre{display:block;padding:.25rem 1.25rem;font-size:85%;border-left:.25rem solid var(--primary-accent-color)}code{padding:0 .4rem;background-color:var(--inline-code-background-color);border-radius:2px}pre,code{overflow:auto;font-family:var(--default-mono-font)}pre>code{padding:0;background-color:var(--code-background-color);border-radius:unset}table{display:block;overflow-x:auto;margin-left:auto;margin-right:auto;text-align:left;border-collapse:collapse}th[scope=col]{padding-top:.4em;border-bottom:3px solid var(--secondary-accent-color)}th[scope=row]{border-right:3px solid var(--secondary-accent-color)}td{text-align:center;border:1px solid var(--muted-color)}th,td{vertical-align:bottom;padding-left:.4em;padding-right:.4em;border:1px solid var(--muted-color)}footer{border-top:.5em solid var(--primary-accent-color);text-align:center;background-color:var(--code-background-color);padding:1.4em;flex-shrink:0;}footer a{color:var(--secondary-accent-color)}footer>nav>a{margin:0 .4em}footer p{padding-top:0}footer p,footer a{font-family:var(--default-sans-font);font-variant-caps:all-small-caps}@media (min-width: 427px){:root{--default-font-size: 16px }}@media (min-width: 470px){:root{--default-font-size: 17px}header{margin-left:2.8em;margin-right:2.8em}header>div.logo{flex-direction:row}img.logo{margin-right:.8em}}@media (min-width: 625px){:root{--default-font-size: 18px}}@media (min-width: 802px){:root{--default-font-size: 19px}}@media (min-width: 1003px){:root{--default-font-size: 20px}}@media (min-width: 1225px){:root{--default-font-size: 21px}:where(h2,h3,h4,h5,h6)>a[href^="#"]::before{width:1.8rem;margin-left:-1.8rem}}@media (min-width: 1496px){:root{--default-font-size: 22px}} \ No newline at end of file diff --git a/sass/site.scss b/sass/site.scss index 987b125..f4a5ef2 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -14,10 +14,10 @@ --default-serif-font: "Noto Serif", serif; --default-sans-font: "Noto Sans", sans-serif; --default-mono-font: "Noto Sans Mono", monospace; - --default-font-size: 16px; + --default-font-size: 14px; --header-font-size: 2.0em; /* Not sure I like this as the default, but it keeps inline code blocks from - overlapping. */ + overlapping. */ --default-line-height: 1.5; /* Gruvbox Dark Colors */ @@ -36,13 +36,16 @@ } /* Required for sticky footer. */ -html, body { +html, +body { height: 100%; } body { - display: flex; /* Required for sticky footer. */ - flex-direction: column; /* Required for sticky footer. */ + display: flex; + /* Required for sticky footer. */ + flex-direction: column; + /* Required for sticky footer. */ margin: 0; line-height: var(--default-line-height); font-size: var(--default-font-size); @@ -53,12 +56,13 @@ body { } main { - flex: 1 0 auto; /* Required for sticky footer. */ + flex: 1 0 auto; + /* Required for sticky footer. */ } /* FIXME: For reasons that utterly bewilder me, an
with this id needs - to be inside a
with no id. I have a strong feeling I've done - something wrong here. */ + to be inside a
with no id. I have a strong feeling I've done + something wrong here. */ #content { max-width: 48em; margin-left: auto; @@ -69,14 +73,22 @@ main { } header { - overflow: hidden; /* FIXME: This WILL cut off titles that are too long! */ + overflow: hidden; + /* FIXME: This WILL cut off titles that are too long! */ margin-top: 1.4em; margin-bottom: 1.4em; margin-left: 1em; margin-right: 1em; } -header > h1 { +header>div.logo { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +header>h1 { text-align: center; font-size: var(--header-font-size); font-family: var(--default-sans-font); @@ -97,7 +109,11 @@ header .post-meta { color: var(--muted-color); } -h2, h3, h4, h5, h6 { +h2, +h3, +h4, +h5, +h6 { padding-top: 1.2rem; margin-bottom: 0.2rem; } @@ -127,7 +143,7 @@ a { /* ---- Anchor links --------------------------------------------------------*/ /* Add a # to the left of a subheading when it references an internal link... */ -:where(h2, h3, h4, h5, h6) > a[href^="#"]::before { +:where(h2, h3, h4, h5, h6)>a[href^="#"]::before { content: "#"; display: inline-block; width: 1.2rem; @@ -136,19 +152,25 @@ a { } /* ... but only display the internal anchor link when hovered over. */ -:where(h2, h3, h4, h5, h6):hover > a[href^="#"]::before { +:where(h2, h3, h4, h5, h6):hover>a[href^="#"]::before { opacity: 1; } /* When internal links are linked directly, display with the accent color. */ -:where(h2, h3, h4, h5, h6):target > a[href^="#"]::before { +:where(h2, h3, h4, h5, h6):target>a[href^="#"]::before { opacity: 1; color: var(--primary-accent-color); } /* ---- Media ---------------------------------------------------------------*/ -img, video { +img.logo { + width: 64px; + height: 64px; +} + +img, +video { /* Media should fill the width of its container if possible. */ width: 100%; height: auto; @@ -182,14 +204,15 @@ code { border-radius: 2px; } -pre, code { +pre, +code { overflow: auto; font-family: var(--default-mono-font); } /* Without this the tag gains a little padding that offsets text by like - 2 pixels. Let's *not* do that. */ -pre > code { + 2 pixels. Let's *not* do that. */ +pre>code { padding: 0; background-color: var(--code-background-color); // Code inside a pre block doesn't need rounded borders. @@ -200,9 +223,9 @@ pre > code { table { /* FIXME: Use flexbox for centering? Frankly, this is still bad on mobile. - display: flex; - justify-content: center; - */ + display: flex; + justify-content: center; + */ display: block; overflow-x: auto; margin-left: auto; @@ -227,7 +250,8 @@ td { border: 1px solid var(--muted-color); } -th, td { +th, +td { vertical-align: bottom; padding-left: 0.4em; padding-right: 0.4em; @@ -240,10 +264,11 @@ footer { border-top: 0.5em solid var(--primary-accent-color); text-align: center; /* FIXME: Using the code background color could look awkward if a post ends - in a code snippet. */ + in a code snippet. */ background-color: var(--code-background-color); padding: 1.4em; - flex-shrink: 0; /* Required for sticky footer. */ + flex-shrink: 0; + /* Required for sticky footer. */ } footer a { @@ -251,7 +276,7 @@ footer a { } /* Give footer nav links some breathing room. */ -footer > nav > a { +footer>nav>a { // margin: 0 1.4em; margin: 0 0.4em; } @@ -261,48 +286,77 @@ footer p { padding-top: 0; } -footer p, footer a { +footer p, +footer a { font-family: var(--default-sans-font); /* It doesn't seem as though Google fonts support direct usage of OpenType - features like 'c2sc' and 'smcp'. - - FIXME: It's not clear why numerals don't seem to obey this property. */ + features like 'c2sc' and 'smcp'. + + FIXME: It's not clear why numerals don't seem to obey this property. */ font-variant-caps: all-small-caps; } /* ---- Media Queries ------------------------------------------------------ */ +@media(min-width: 427px) { + :root { + --default-font-size: 16px + } +} + @media(min-width: 470px) { - :root { --default-font-size: 17px; } + :root { + --default-font-size: 17px; + } + /* Above this size, increase the header margins. Smaller sizes benefit from - extra breathing room in the title. */ + extra breathing room in the title. */ header { margin-left: 2.8em; margin-right: 2.8em; } + + header>div.logo { + flex-direction: row; + } + + img.logo { + margin-right: 0.8em; + } } @media(min-width: 625px) { - :root { --default-font-size: 18px; } + :root { + --default-font-size: 18px; + } } @media(min-width: 802px) { - :root { --default-font-size: 19px; } + :root { + --default-font-size: 19px; + } } @media(min-width: 1003px) { - :root { --default-font-size: 20px; } + :root { + --default-font-size: 20px; + } } @media(min-width: 1225px) { - :root { --default-font-size: 21px; } + :root { + --default-font-size: 21px; + } + /* On larger devices, give the anchor link some more space. */ - :where(h2, h3, h4, h5, h6) > a[href^="#"]::before { + :where(h2, h3, h4, h5, h6)>a[href^="#"]::before { width: 1.8rem; margin-left: -1.8rem; } } @media(min-width: 1496px) { - :root { --default-font-size: 22px; } -} + :root { + --default-font-size: 22px; + } +} \ No newline at end of file