diff --git a/sass/main.scss b/sass/main.scss index 48056ab..a1edd75 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -1,25 +1,25 @@ @font-face { - /* Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter). Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ - font-family: 'Inter'; - src: local('Inter'), - url('fonts/Inter.ttf'); - font-display: swap; + /* Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter). Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ + font-family: 'Inter'; + src: local('Inter'), + url('fonts/Inter.ttf'); + font-display: swap; } @font-face { - /* Copyright 2014, 2015, 2016 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ - font-family: 'Source Serif Pro'; - src: local('Source Serif Pro'), - url('fonts/SourceSerifPro-Regular.ttf'); - font-display: swap; + /* Copyright 2014, 2015, 2016 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ + font-family: 'Source Serif Pro'; + src: local('Source Serif Pro'), + url('fonts/SourceSerifPro-Regular.ttf'); + font-display: swap; } @font-face { - /* Copyright 2019 - Present, Microsoft Corporation, with Reserved Font Name 'Cascadia Code'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ - font-family: 'Cascadia Code'; - src: local('Cascadia Code'), - url('fonts/CascadiaCode.ttf'); - font-display: swap; + /* Copyright 2019 - Present, Microsoft Corporation, with Reserved Font Name 'Cascadia Code'. Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ + font-family: 'Cascadia Code'; + src: local('Cascadia Code'), + url('fonts/CascadiaCode.ttf'); + font-display: swap; } @import 'parts/_archive.scss'; @@ -38,185 +38,191 @@ @import 'syntax/syntax-ayu-dark.scss'; :root { - --max-layout-width: 1000px; - --normal-layout-width: 600px; - --medium-layout-width: 400px; - --small-layout-width: 200px; - - --sans-serif-font: 'Inter', Helvetica, Arial, sans-serif; - --serif-font: 'Source Serif Pro', 'Georgia', serif; - --code-font: 'Cascadia Code'; - - font-family: var(--sans-serif-font); - line-height: 190%; - - --background-color: white; - --bg-0: #f0f0f0; - --bg-1: #e7e7e7; - --bg-2: #fefefe; - --hover-color: white; - --primary-color: #087E96; - --divider-color: #d7d7d7; - --text-color: #222226; - --text-color-high-contrast: #313333; - --quote-color: #355f62; - --border-color: #727272; - --meta-color: #5b5b65; - --table-header-color: #BFEAF5; + --max-layout-width: 1000px; + --normal-layout-width: 600px; + --medium-layout-width: 400px; + --small-layout-width: 200px; + + --sans-serif-font: 'Inter', Helvetica, Arial, sans-serif; + --serif-font: 'Source Serif Pro', 'Georgia', serif; + --code-font: 'Cascadia Code'; + + font-family: var(--sans-serif-font); + line-height: 190%; + + --background-color: white; + --bg-0: #f0f0f0; + --bg-1: #e7e7e7; + --bg-2: #fefefe; + --hover-color: white; + --primary-color: #087E96; + --divider-color: #d7d7d7; + --text-color: #222226; + --text-color-high-contrast: #313333; + --quote-color: #355f62; + --border-color: #727272; + --meta-color: #5b5b65; + --table-header-color: #BFEAF5; } + [data-theme='dark'] { - --background-color: #1f1f1f; - --bg-0: #2f2f2f; - --bg-1: #4c4d4d; - --bg-2: #171717; - --hover-color: black; - --primary-color: #91e0ee; - --divider-color: #4a4a4a; - --text-color: #D4D4D4; - --text-color-high-contrast: #eceeef; - --quote-color: #a9c5c7; - --border-color: black; - --meta-color: #B0B0B0; - --table-header-color: #b7e4e4; - - .invertible-image { - filter: invert(.88); - } - - .dimmable-image { - filter: brightness(.8) contrast(1.2); - } + --background-color: #1f1f1f; + --bg-0: #2f2f2f; + --bg-1: #4c4d4d; + --bg-2: #171717; + --hover-color: black; + --primary-color: #91e0ee; + --divider-color: #4a4a4a; + --text-color: #D4D4D4; + --text-color-high-contrast: #eceeef; + --quote-color: #a9c5c7; + --border-color: black; + --meta-color: #B0B0B0; + --table-header-color: #b7e4e4; + + .invertible-image { + filter: invert(.88); + } + + .dimmable-image { + filter: brightness(.8) contrast(1.2); + } } html { - background-color: var(--background-color); - color: var(--text-color); - line-height: 1.6em; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6em; } body { - display: flex; - flex-direction: column; - min-height: 100vh; - margin: 0 12px; - padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 0 12px; + padding: 0; } .content { - width: 100%; - max-width: var(--max-layout-width); - margin: 0 auto; - margin-top: 6vmin; - margin-bottom: 4rem; - word-wrap: break-word; + width: 100%; + max-width: var(--max-layout-width); + margin: 0 auto; + margin-top: 6vmin; + margin-bottom: 4rem; + word-wrap: break-word; } article { - max-width: calc(var(--max-layout-width) - 17rem); - margin: 0 auto; + max-width: calc(var(--max-layout-width) - 17rem); + margin: 0 auto; } .section-title { - display: block; - font-size: 2.2em; - margin-bottom: 0em; - margin-left: 0; - margin-right: 0; - font-weight: 550; - color: var(--text-color-high-contrast); + display: block; + font-size: 2.2em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: 550; + color: var(--text-color-high-contrast); } .last-updated { - margin-top: -5vmin; + margin-top: -5vmin; } h1 { - display: block; - font-size: 1.5em; - margin-top: 0.67em; - margin-bottom: 0em; - margin-left: 0; - margin-right: 0; - font-weight: 550; + display: block; + font-size: 1.5em; + margin-top: 0.67em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: 550; } h2 { - display: block; - font-size: 1.4em; - margin-top: 0.5em; - margin-bottom: 0em; - margin-left: 0; - margin-right: 0; - font-weight: 550; + display: block; + font-size: 1.4em; + margin-top: 0.5em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: 550; } h3 { - display: block; - font-size: 1.2em; - margin-top: 0.3em; - margin-bottom: 0em; - margin-left: 0; - margin-right: 0; - font-weight: 550; + display: block; + font-size: 1.2em; + margin-top: 0.3em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: 550; } h4 { - display: block; - font-size: 1em; - margin-top: 0.83em; - margin-bottom: 0em; - margin-left: 0; - margin-right: 0; - font-weight: 550; + display: block; + font-size: 1em; + margin-top: 0.83em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: 550; } h5 { - display: block; - font-size: 1em; - margin-top: 0.83em; - margin-bottom: 0em; - margin-left: 0; - margin-right: 0; - font-weight: normal; + display: block; + font-size: 1em; + margin-top: 0.83em; + margin-bottom: 0em; + margin-left: 0; + margin-right: 0; + font-weight: normal; } p { - font-family: var(--serif-font); - margin-top: 0.4rem; - margin-bottom: 2.3vmin; - line-height: 2rem; - font-size: 1em; + font-family: var(--serif-font); + margin-top: 0.4rem; + margin-bottom: 2.3vmin; + line-height: 2rem; + font-size: 1em; } @media only screen and (max-width: 1000px) { - .content { - max-width: var(--normal-layout-width); - } - body { - margin: 0 32px; - } + .content { + max-width: var(--normal-layout-width); + } + + body { + margin: 0 32px; + } } + @media only screen and (max-width: 600px) { - .content { - max-width: var(--medium-layout-width); - } - body { - margin: 0 16px; - } + .content { + max-width: var(--medium-layout-width); + } + + body { + margin: 0 16px; + } } + @media only screen and (max-width: 300px) { - .content { - max-width: var(--small-layout-width); - } + .content { + max-width: var(--small-layout-width); + } } + @media all and (min-width: 600px) { - html { - font-size: 16.5px; - } + html { + font-size: 16.5px; + } } @media all and (min-width: 960px) { - html { - font-size: 20px; - } + html { + font-size: 20px; + } } diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index a82328d..e1c914d 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -1,24 +1,26 @@ .archive { - .listing-title { - font-size: 1.5rem; - margin-bottom: 1rem; - } + .listing-title { + font-size: 1.5rem; + margin-bottom: 1rem; + } + + .listing-item { + padding: 0.2rem 1rem; + display: flex; + gap: 1rem; - .listing-item { - padding: 0.2rem 1rem; - display: flex; - gap: 1rem; - .post-time { - width: 4rem; - .date { - color: var(--meta-color); - } + .post-time { + width: 4rem; + + .date { + color: var(--meta-color); + } + } } - } - ul { - list-style: none; - padding: 0; - margin: 0; - } + ul { + list-style: none; + padding: 0; + margin: 0; + } } diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss index 069fd06..bbcd976 100644 --- a/sass/parts/_code.scss +++ b/sass/parts/_code.scss @@ -1,100 +1,100 @@ code { - background-color: var(--bg-1); - padding: 0.1em 0.2em; - font-family: var(--code-font); - font-weight: 350; - font-size: 0.92em; + background-color: var(--bg-1); + padding: 0.1em 0.2em; + font-family: var(--code-font); + font-weight: 350; + font-size: 0.92em; } pre { - border: 1px solid var(--border-color); - line-height: 1.4; - overflow-x: auto; - padding: 1em; - position: relative; - -webkit-overflow-scrolling: touch; + border: 1px solid var(--border-color); + line-height: 1.4; + overflow-x: auto; + padding: 1em; + position: relative; + -webkit-overflow-scrolling: touch; } pre code { - background-color: transparent; - color: inherit; - padding: 0; - border: 0; + background-color: transparent; + color: inherit; + padding: 0; + border: 0; } pre code[class*="language-"] { - -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: touch; } pre code[class*="language-"]::before { - font-size: 12px; - letter-spacing: 0.025rem; - padding: 0.1rem 0.5rem; - position: absolute; - right: 0.1rem; - margin-top: 0.1rem; - text-align: right; - text-transform: uppercase; - top: 0; + font-size: 12px; + letter-spacing: 0.025rem; + padding: 0.1rem 0.5rem; + position: absolute; + right: 0.1rem; + margin-top: 0.1rem; + text-align: right; + text-transform: uppercase; + top: 0; } pre code[class="language-javaScript"]::before, pre code[class="language-js"]::before { - content: "js"; - background: #f7df1e; - color: black; + content: "js"; + background: #f7df1e; + color: black; } pre code[class*="language-yml"]::before, pre code[class*="language-yaml"]::before { - content: "yaml"; - background: #C51117; - color: white; + content: "yaml"; + background: #C51117; + color: white; } pre code[class*="language-shell"]::before, pre code[class*="language-bash"]::before, pre code[class*="language-sh"]::before { - content: "shell"; - background: #33A841; - color: white; + content: "shell"; + background: #33A841; + color: white; } pre code[class*="language-json"]::before { - content: "json"; - color: black; - background: whitesmoke; + content: "json"; + color: black; + background: whitesmoke; } pre code[class*="language-python"]::before, pre code[class*="language-py"]::before { - content: "python"; - background: #306698; - color: #ffd343; + content: "python"; + background: #306698; + color: #ffd343; } pre code[class*="language-css"]::before { - content: "css"; - background: #215AEF; - color: white; + content: "css"; + background: #215AEF; + color: white; } pre code[class*="language-go"]::before { - content: "Go"; - background: #00ADD8; - color: white; + content: "Go"; + background: #00ADD8; + color: white; } pre code[class*="language-md"]::before, pre code[class*="language-md"]::before { - content: "Markdown"; - background: #159ADC; - color: white; + content: "Markdown"; + background: #159ADC; + color: white; } pre code[class*="language-rust"]::before, pre code[class*="language-rs"]::before { - content: "rust"; - background: #fff8f6; - color: #ff4647; + content: "rust"; + background: #fff8f6; + color: #ff4647; } diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index 1cd7edf..2235ecb 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -1,70 +1,68 @@ footer { - margin-top: auto; - margin-bottom: 1.4rem; - font-family: var(--post-font-family); + margin-top: auto; + margin-bottom: 1.4rem; + font-family: var(--post-font-family); } footer section { - display: flex; - flex-direction: column; - align-items: center; - gap: 0rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 0rem; } footer nav { - display: flex; - gap: 0rem; - margin: 0 0rem; + display: flex; + gap: 0rem; + margin: 0 0rem; } .socials { - justify-content: center; - /* flex-child */ - flex-grow: 0; - /* flex-container */ - display: flex; - flex-wrap: wrap; - align-items: flex-end; + justify-content: center; + flex-grow: 0; + display: flex; + flex-wrap: wrap; + align-items: flex-end; } .social { - background-image: unset; - padding: 0.5vmin; - display: flex; - justify-content: center; - align-items: center; + background-image: unset; + padding: 0.5vmin; + display: flex; + justify-content: center; + align-items: center; } -.social>img { - color: #000000; - aspect-ratio: 1/1; - width: 1.5rem; - height: auto; +.social > img { + color: #000000; + aspect-ratio: 1/1; + width: 1.5rem; + height: auto; } .social { - &:hover { - &>img { - filter: invert(1); + &:hover { + & > img { + filter: invert(1); + } } - } } [data-theme="dark"] { - .social { - &:hover { - &>img { - filter: invert(0); - } - } + .social { + &:hover { + & > img { + filter: invert(0); + } + } - &>img { - filter: invert(1); + & > img { + filter: invert(1); + } } - } } .credits { - font-size: 0.88rem; - color: var(--meta-color); + font-size: 0.88rem; + color: var(--meta-color); } diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index e669146..353365a 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,126 +1,129 @@ header { - width: 100%; - .main { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; - gap: 12px; - font-size: 1.5rem; - margin-bottom: 10px; - } + width: 100%; + + .main { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + gap: 12px; + font-size: 1.5rem; + margin-bottom: 10px; + } } .page-header { - font-size: 3em; - line-height: 100%; - font-family: var(--header-font); - margin: 4rem 0px 1rem 0px; + font-size: 3em; + line-height: 100%; + font-family: var(--header-font); + margin: 4rem 0px 1rem 0px; } .centered-header { - font-family: var(--header-font); - position: absolute; - top: 40%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - font-size: 1em; + font-family: var(--header-font); + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 1em; } .navbar { - max-width: var(--max-layout-width); - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - padding: 1em 0; - margin: 0 auto; + max-width: var(--max-layout-width); + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 1em 0; + margin: 0 auto; } .nav-navs { - display: flex; - gap: 5px; - img { - border: none; - } + display: flex; + gap: 5px; + + img { + border: none; + } } .nav-links { - font-size: 1em; - font-weight: 340; - text-decoration: none; - justify-content: right; - color: var(--text-color); - padding: 0.66rem; + font-size: 1em; + font-weight: 340; + text-decoration: none; + justify-content: right; + color: var(--text-color); + padding: 0.66rem; } .home-title { - font-size: 1.7em; - font-weight: 450; - padding: 0.12rem; - margin-left: -0.12rem; - border: none; - color: var(--primary-color); - text-decoration: none; + font-size: 1.7em; + font-weight: 450; + padding: 0.12rem; + margin-left: -0.12rem; + border: none; + color: var(--primary-color); + text-decoration: none; } .meta { - color: var(--meta-color); - letter-spacing: -0.5px; - font-size: 0.8rem; - font-weight: 300; - padding: 0; - padding-top: 0.7vmin; - padding-bottom: 3vmin; - line-height: 1.4rem; - - a { - color: var(--meta-color); - text-decoration-color: none; - font-weight: inherit; - text-decoration: none; - } - - ul, li { - list-style-type: none; - display: inline; - } + color: var(--meta-color); + letter-spacing: -0.5px; + font-size: 0.8rem; + font-weight: 300; + padding: 0; + padding-top: 0.7vmin; + padding-bottom: 3vmin; + line-height: 1.4rem; + + a { + color: var(--meta-color); + text-decoration-color: none; + font-weight: inherit; + text-decoration: none; + } + + ul, + li { + list-style-type: none; + display: inline; + } } .card-meta { - color: var(--meta-color); - font-size: 0.92rem; + color: var(--meta-color); + font-size: 0.92rem; } @media only screen and (max-width: 1000px) { - .navbar { - max-width: var(--normal-layout-width); - } + .navbar { + max-width: var(--normal-layout-width); + } - .nav-navs { - display: flex; - justify-content: flex-end; - } + .nav-navs { + display: flex; + justify-content: flex-end; + } } @media only screen and (max-width: 600px) { - .nav-navs { - margin-top: 0.8rem; - width: 100%; - justify-content: center; - } + .nav-navs { + margin-top: 0.8rem; + width: 100%; + justify-content: center; + } - .navbar { - flex-direction: column; - align-items: center; - } + .navbar { + flex-direction: column; + align-items: center; + } } @media only screen and (max-width: 300px) { - .navbar { - max-width: var(--small-layout-width); - } + .navbar { + max-width: var(--small-layout-width); + } } diff --git a/sass/parts/_image.scss b/sass/parts/_image.scss index 7afd913..90017fa 100644 --- a/sass/parts/_image.scss +++ b/sass/parts/_image.scss @@ -1,52 +1,53 @@ figure { - box-sizing: border-box; - display: inline-block; - margin: 0; - max-width: 100%; - height: auto; + box-sizing: border-box; + display: inline-block; + margin: 0; + max-width: 100%; + height: auto; } figcaption { - font-family: var(--serif-font); - font-size: 0.72rem; - color: var(--meta-color); - text-align: center; + font-family: var(--serif-font); + font-size: 0.72rem; + color: var(--meta-color); + text-align: center; } figure img { - max-height: 500px; + max-height: 500px; } img { - display: block; - margin: 0 auto; - max-width: 100%; - height: auto; + display: block; + margin: 0 auto; + max-width: 100%; + height: auto; } figure h4 { - font-size: 1rem; - margin: 0; - margin-bottom: 1em; + font-size: 1rem; + margin: 0; + margin-bottom: 1em; } figure h4::before { - content: "↳ "; + content: "↳ "; } svg { - max-height: 15px; + max-height: 15px; } .img-dark { - display: none; + display: none; } [data-theme="dark"] { - .img-dark { - display: block; - } - .img-light { - display: none; - } + .img-dark { + display: block; + } + + .img-light { + display: none; + } } diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index 6cc2774..17a2b43 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -1,37 +1,37 @@ .draft-label { - color: var(--hover-color); - text-decoration: none; - padding: 2px 4px; - margin-left: 6px; - background-color: var(--primary-color); + color: var(--hover-color); + text-decoration: none; + padding: 2px 4px; + margin-left: 6px; + background-color: var(--primary-color); } .article-title { - color: var(--text-color-high-contrast); - display: block; - font-size: 2rem; - font-weight: 550; - line-height: 3rem; + color: var(--text-color-high-contrast); + display: block; + font-size: 2rem; + font-weight: 550; + line-height: 3rem; } iframe { - border: none; - display: block; - aspect-ratio: 16/9; - width: 100vmin; - max-width: 70%; - margin-left: 15%; - margin-right: 15%; - margin-bottom: 3vmin; + border: none; + display: block; + aspect-ratio: 16/9; + width: 100vmin; + max-width: 70%; + margin-left: 15%; + margin-right: 15%; + margin-bottom: 3vmin; } .zola-anchor { - font-size: 1rem; - position: absolute; - margin-left: -1.9em; - padding-right: 0.45em; - padding-left: 0.4em; - opacity: 0; + font-size: 1rem; + position: absolute; + margin-left: -1.9em; + padding-right: 0.45em; + padding-left: 0.4em; + opacity: 0; } h1:hover .zola-anchor, @@ -40,123 +40,127 @@ h3:hover .zola-anchor, h4:hover .zola-anchor, h5:hover .zola-anchor, h6:hover .zola-anchor { - opacity: 1; + opacity: 1; } -h1, h2, h3, h4, h5, h6 { - a:hover { - background-color: transparent; - } +h1, +h2, +h3, +h4, +h5, +h6 { + a:hover { + background-color: transparent; + } } @media (max-width: 500px) { - .zola-anchor { - display: none; - } + .zola-anchor { + display: none; + } } ul { - margin-top: 0; + margin-top: 0; } .toc-container { - margin-bottom: 4vmin; + margin-bottom: 4vmin; } .title-container { - padding-bottom: 15px; + padding-bottom: 15px; } .bottom-divider { - border-bottom: var(--divider-color) solid 0.5px; + border-bottom: var(--divider-color) solid 0.5px; } ::-moz-selection { - background: var(--primary-color); - color: var(--hover-color); - text-shadow: none; + background: var(--primary-color); + color: var(--hover-color); + text-shadow: none; } ::selection { - background: var(--primary-color); - color: var(--hover-color); + background: var(--primary-color); + color: var(--hover-color); } .nav.tags { - display: inline-block; + display: inline-block; } p { - line-height: 1.5; + line-height: 1.5; } hr { - border: 0; - border-top: 3px solid var(--border-color); - margin: 1em 0; + border: 0; + border-top: 3px solid var(--border-color); + margin: 1em 0; } blockquote { - border-left: 0.2rem solid var(--primary-color); - color: var(--quote-color); - margin: 0; - padding-left: 1em; + border-left: 0.2rem solid var(--primary-color); + color: var(--quote-color); + margin: 0; + padding-left: 1em; } a { - color: var(--primary-color); - text-decoration: inherit; - font-weight: inherit; - position: relative; + color: var(--primary-color); + text-decoration: inherit; + font-weight: inherit; + position: relative; } a:hover { - background-color: var(--primary-color); - color: var(--hover-color); + background-color: var(--primary-color); + color: var(--hover-color); } a:not(.no-hover-padding, .zola-anchor)::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: -0.15em; - right: -0.15em; - z-index: -1; - background-color: var(--primary-color); - opacity: 0; + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: -0.15em; + right: -0.15em; + z-index: -1; + background-color: var(--primary-color); + opacity: 0; } a:not(.no-hover-padding):hover::before { - opacity: 1; + opacity: 1; } -/* Remove post list padding */ @media screen and (max-width: 600px) { - .list > ul { - margin: 0; - padding: 0; - } + .list > ul { + margin: 0; + padding: 0; + } } table { - justify-self: center; - font: inherit; - overflow: hidden; - border-style : hidden!important; - margin: 2rem 0; - font-family: sans-serif; - min-width: 400px; - border: none; - margin-left: auto; - margin-right: auto; - min-width: 13rem; + justify-self: center; + font: inherit; + overflow: hidden; + border-style: hidden !important; + margin: 2rem 0; + font-family: sans-serif; + min-width: 400px; + border: none; + margin-left: auto; + margin-right: auto; + min-width: 13rem; } table thead tr { - background-color: var(--table-header-color); - color: #1f1f1f; - text-align: left; + background-color: var(--table-header-color); + color: #1f1f1f; + text-align: left; } table th, @@ -166,29 +170,31 @@ table td { } table tbody tr:nth-child(even) { - background-color: var(--bg-0); + background-color: var(--bg-0); } .footnote-reference { - font-family: var(--serif-font); - font-size: 0.7rem; + font-family: var(--serif-font); + font-size: 0.7rem; } .footnote-definition { - margin-top: 3.5rem; - border-top: 1px solid var(--border-color); - padding-top: 1rem; - sup { - font-family: var(--serif-font); - font-size: 0.75rem; - margin-right: 0.15rem; - } - p { - display: inline; - } + margin-top: 3.5rem; + border-top: 1px solid var(--border-color); + padding-top: 1rem; + + sup { + font-family: var(--serif-font); + font-size: 0.75rem; + margin-right: 0.15rem; + } + + p { + display: inline; + } } .references p { - text-indent: -2.4rem; - margin-left: 2.4rem; + text-indent: -2.4rem; + margin-left: 2.4rem; } diff --git a/sass/parts/_posts_list.scss b/sass/parts/_posts_list.scss index cbf24f7..fff217a 100644 --- a/sass/parts/_posts_list.scss +++ b/sass/parts/_posts_list.scss @@ -30,7 +30,7 @@ .bloglist-content { flex: 1; - + .bloglist-title { font-size: 1.2em; font-weight: bold; diff --git a/sass/parts/_table.scss b/sass/parts/_table.scss index d380dc5..5422a9b 100644 --- a/sass/parts/_table.scss +++ b/sass/parts/_table.scss @@ -1,15 +1,15 @@ table { - border-spacing: 0; - border-collapse: collapse; + border-spacing: 0; + border-collapse: collapse; } table th { - padding: 6px 13px; - border: 1px solid #dfe2e5; - font-size: large; + padding: 6px 13px; + border: 1px solid #dfe2e5; + font-size: large; } table td { - padding: 6px 13px; - border: 1px solid #dfe2e5; + padding: 6px 13px; + border: 1px solid #dfe2e5; } diff --git a/sass/parts/_tags.scss b/sass/parts/_tags.scss index 598ed8c..f56b108 100644 --- a/sass/parts/_tags.scss +++ b/sass/parts/_tags.scss @@ -60,6 +60,7 @@ padding: 0; margin: 0; } + .tags-item { margin-top: 1rem; } diff --git a/sass/parts/_theme-switch.scss b/sass/parts/_theme-switch.scss index b4ac3a8..3388e62 100644 --- a/sass/parts/_theme-switch.scss +++ b/sass/parts/_theme-switch.scss @@ -1,41 +1,47 @@ .theme-switcher { - align-self: center; - margin-left: 0.5rem; - width: 1rem; - height: 1rem; - position: relative; - cursor: pointer; - - .switch { + align-self: center; + margin-left: 0.5rem; width: 1rem; height: 1rem; - position: absolute; - left: 0px; - display: flex; - justify-content: center; - align-items: center; - img { - width: 100%; - height: auto; - position: absolute; - border: none; - } - .sun { - opacity: 0; - } - .moon { - opacity: 1; + position: relative; + cursor: pointer; + + .switch { + width: 1rem; + height: 1rem; + position: absolute; + left: 0px; + display: flex; + justify-content: center; + align-items: center; + + img { + width: 100%; + height: auto; + position: absolute; + border: none; + } + + .sun { + opacity: 0; + } + + .moon { + opacity: 1; + } } - } - input { - display: none; - &:checked + .switch { - .sun { - opacity: 1; - } - .moon { - opacity: 0; - } + + input { + display: none; + + &:checked + .switch { + .sun { + opacity: 1; + } + + .moon { + opacity: 0; + } + } } - } }