diff --git a/sass/main.scss b/sass/main.scss index b8576d0a4..060c4f37f 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -21,31 +21,30 @@ @use 'parts/_theme-switch.scss'; @font-face { - /* Copyright 2016 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/Inter4.woff2') format("woff2"); + /* Copyright 2016 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'; font-display: swap; } @font-face { - /* Copyright 2014 - 2023 Adobe (http://www.adobe.com/), with Reserved Font Name ‘Source’.adobe.com/). Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ - font-family: 'Source Serif'; src: local('Source Serif'), url('fonts/SourceSerif4Variable-Roman.ttf.woff2') format("woff2"); + /* Copyright 2014 - 2023 Adobe (http://www.adobe.com/), with Reserved Font Name ‘Source’.adobe.com/). Licensed under the SIL Open Font License, Version 1.1. More information available at: http://scripts.sil.org/OFL */ + font-family: 'Source Serif'; 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-SemiLight.woff2') format("woff2"); + /* 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'; font-display: swap; } :root { - color-scheme: light; --max-layout-width: 1000px; --normal-layout-width: 600px; @@ -56,9 +55,6 @@ --serif-font: 'Source Serif', 'Georgia', serif; --code-font: 'Cascadia Code'; - font-family: var(--sans-serif-font); - line-height: 190%; - --background-color: white; --bg-0: #f0f0f0; --bg-1: #e7e7e7; @@ -74,10 +70,13 @@ --codeblock-highlight: #383444; --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3E%3C/svg%3E%0A"); + color-scheme: light; + line-height: 190%; + + font-family: var(--sans-serif-font); } [data-theme='dark'] { - color-scheme: dark; --background-color: #1f1f1f; --bg-0: #2f2f2f; @@ -94,6 +93,7 @@ --codeblock-highlight: #282834; --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960' %3E%3Cpath d='M480 776q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM80 616q-17 0-28.5-11.5T40 576q0-17 11.5-28.5T80 536h80q17 0 28.5 11.5T200 576q0 17-11.5 28.5T160 616H80Zm720 0q-17 0-28.5-11.5T760 576q0-17 11.5-28.5T800 536h80q17 0 28.5 11.5T920 576q0 17-11.5 28.5T880 616h-80ZM480 296q-17 0-28.5-11.5T440 256v-80q0-17 11.5-28.5T480 136q17 0 28.5 11.5T520 176v80q0 17-11.5 28.5T480 296Zm0 720q-17 0-28.5-11.5T440 976v-80q0-17 11.5-28.5T480 856q17 0 28.5 11.5T520 896v80q0 17-11.5 28.5T480 1016ZM226 378l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226 378Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734 774l43 42q12 11 11.5 28T777 873q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678 322l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183 873q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282 830l-42 43q-11 12-28 11.5T183 873Z'/%3E%3C/svg%3E"); + color-scheme: dark; .invertible-image { filter: invert(.88); @@ -114,25 +114,25 @@ html { body { display: flex; flex-direction: column; - min-height: 100vh; margin: 0 5vmin; padding: 0; + min-height: 100vh; } .content { - width: 100%; - max-width: var(--max-layout-width); + word-wrap: break-word; margin: 0 auto; margin-top: 6vmin; margin-bottom: 4rem; - word-wrap: break-word; + width: 100%; + max-width: var(--max-layout-width); } article { $base-margin: 6rem; + margin: 0 auto; max-width: calc(var(--max-layout-width) - 2*$base-margin); - margin: 0 auto; p, li, @@ -146,9 +146,9 @@ article { } .full-width { - max-width: calc(100% + 2*$base-margin); - margin-left: -$base-margin; margin-right: -$base-margin; + margin-left: -$base-margin; + max-width: calc(100% + 2*$base-margin); } } @@ -175,59 +175,59 @@ h6 { h1 { display: block; - font-size: 1.5em; margin-top: 0.67em; + margin-right: 0; margin-bottom: 0em; margin-left: 0; - margin-right: 0; font-weight: 550; + font-size: 1.5em; } h2 { display: block; - font-size: 1.4em; margin-top: 0.5em; + margin-right: 0; margin-bottom: 0em; margin-left: 0; - margin-right: 0; font-weight: 550; + font-size: 1.4em; } h3 { display: block; - font-size: 1.2em; margin-top: 0.3em; + margin-right: 0; margin-bottom: 0em; margin-left: 0; - margin-right: 0; font-weight: 550; + font-size: 1.2em; } h4 { display: block; - font-size: 1em; margin-top: 0.83em; + margin-right: 0; margin-bottom: 0em; margin-left: 0; - margin-right: 0; font-weight: 550; + font-size: 1em; } h5 { display: block; - font-size: 1em; margin-top: 0.83em; + margin-right: 0; margin-bottom: 0em; margin-left: 0; - margin-right: 0; font-weight: normal; + font-size: 1em; } p { margin-top: 0.4rem; margin-bottom: max(2.3vmin, 24px); - line-height: 2rem; font-size: 1em; + line-height: 2rem; } strong { @@ -252,18 +252,18 @@ strong { } article .full-width { - max-width: none; - margin-left: 0; - margin-right: 0; display: block; + margin-right: 0; + margin-left: 0; + max-width: none; overflow-x: auto; } } @media only screen and (max-width: 600px) { .content { - max-width: var(--medium-layout-width); margin-top: 0rem; + max-width: var(--medium-layout-width); } article { diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index 5ad74bbe7..5f4b80611 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -2,20 +2,20 @@ margin-top: 4vmin; .listing-title { - font-size: 1.5rem; margin-bottom: 1rem; + font-size: 1.5rem; } .listing-item { - padding: 0.2rem 1rem; - margin-bottom: 0.5rem; display: flex; gap: 1rem; + margin-bottom: 0.5rem; + padding: 0.2rem 1rem; .post-time { + padding-left: 1vmin; min-width: 5rem; text-align: left; - padding-left: 1vmin; .date { color: var(--meta-color); @@ -25,9 +25,9 @@ } ul { - list-style: none; - padding: 0; margin: 0; + padding: 0; + list-style: none; } li { diff --git a/sass/parts/_cards.scss b/sass/parts/_cards.scss index 295cc7634..50253fbf5 100644 --- a/sass/parts/_cards.scss +++ b/sass/parts/_cards.scss @@ -1,16 +1,16 @@ .cards { display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-rows: auto; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; - padding: 12px 0; margin-top: 4vmin; + padding: 12px 0; } .card { - min-height: 100px; - background: var(--bg-2); box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; + background: var(--bg-2); + min-height: 100px; overflow: hidden; } @@ -28,8 +28,8 @@ } .card-image-placeholder { - height: 12px; width: 100%; + height: 12px; } .card-description { diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss index 21a9d538d..c37b2fb5b 100644 --- a/sass/parts/_code.scss +++ b/sass/parts/_code.scss @@ -2,21 +2,21 @@ code { border-radius: 5px; background-color: var(--bg-1); padding: 0.1em 0.2em; - font-family: var(--code-font); font-size: 0.9rem; + font-family: var(--code-font); mark { + display: block; + filter: brightness(110%); background-color: var(--codeblock-highlight); color: inherit; - filter: brightness(110%); - display: block; } table { - width: 100%; margin: 0rem; border-collapse: collapse; border-spacing: 0rem; + width: 100%; text-align: left; td, @@ -27,8 +27,8 @@ code { } tbody td:first-child { - user-select: none; width: 2rem; + user-select: none; text-align: left; } @@ -43,63 +43,63 @@ a:hover code { } pre { - overflow: hidden; - position: relative; display: block; - line-height: 1.4; - overflow-x: auto; - padding: 2.4rem 1rem 1rem; + position: relative; border-radius: 5px; + padding: 2.4rem 1rem 1rem; + overflow: hidden; + overflow-x: auto; + line-height: 1.4; code { display: block; - overflow-x: auto; - white-space: pre; - font-size: 0.8rem; // Fits ~77 characters. - background-color: transparent; - color: inherit; - padding: 0rem; border: 0rem; border-radius: 5px; + background-color: transparent; + padding: 0rem; + overflow-x: auto; + color: inherit; + font-size: 0.8rem; // Fits ~77 characters. + white-space: pre; &::before { - content: attr(data-lang); display: block; + position: absolute; + top: 0; + left: 0; background-color: var(--primary-color); - color: var(--hover-color); padding: 0.3rem; padding-left: 1rem; width: calc(100% - 1.3rem); height: 0.9rem; + content: attr(data-lang); + color: var(--hover-color); font-size: 0.65rem; - position: absolute; text-align: left; text-transform: uppercase; - top: 0; - left: 0; } } } .copy-code { - z-index: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M217.002-67.694q-37.732 0-64.02-26.288-26.287-26.287-26.287-64.019V-707.69h77.999v549.689q0 4.615 3.846 8.462 3.846 3.846 8.462 3.846h451.689v77.999H217.002Zm175.999-175.999q-37.733 0-64.02-26.287T302.694-334v-463.383q0-37.732 26.287-64.02 26.287-26.287 64.02-26.287h365.383q37.732 0 64.019 26.287 26.288 26.288 26.288 64.02V-334q0 37.733-26.288 64.02-26.287 26.287-64.019 26.287H393.001Zm0-77.998h365.383q4.615 0 8.462-3.847 3.846-3.846 3.846-8.462v-463.383q0-4.616-3.846-8.462-3.847-3.846-8.462-3.846H393.001q-4.616 0-8.462 3.846-3.847 3.846-3.847 8.462V-334q0 4.616 3.847 8.462 3.846 3.847 8.462 3.847Zm-12.309 0v-488V-321.691Z'/%3E%3C/svg%3E"); - background: var(--hover-color); - cursor: pointer; position: absolute; - height: 0.9rem; - width: 0.9rem; - background-size: contain; - color: white; - right: 0.7rem; top: 0.3rem; + right: 0.7rem; align-self: center; + z-index: 1; + cursor: pointer; + background: var(--hover-color); + background-size: contain; + width: 0.9rem; + height: 0.9rem; + color: white; } .copy-code.checked { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M395-253 194-455l83-83 118 117 288-287 83 84-371 371Z'/%3E%3C/svg%3E"); - height: 1rem; width: 1rem; + height: 1rem; } .copy-code.error { diff --git a/sass/parts/_comments.scss b/sass/parts/_comments.scss index d1ccf0b60..2b3d8d280 100644 --- a/sass/parts/_comments.scss +++ b/sass/parts/_comments.scss @@ -3,30 +3,30 @@ } .comments { + margin-top: 2rem; border-top: var(--divider-color) solid 0.5px; border-bottom: var(--divider-color) solid 0.5px; - margin-top: 2rem; padding-top: 2rem; padding-bottom: 2rem; iframe { + margin: 0; border: none; + aspect-ratio: inherit; width: 100%; - margin: 0; max-width: 100%; - aspect-ratio: inherit; } .load-comments-button { display: block; - font-family: var(--sans-serif-font); - color: inherit; - font-size: 0.95rem; - background: none; + cursor: pointer; + margin: 0.5em auto; border: none; + background: none; padding: 0.5em 1em; - margin: 0.5em auto; - cursor: pointer; + color: inherit; + font-size: 0.95rem; + font-family: var(--sans-serif-font); text-decoration: none; } } diff --git a/sass/parts/_footer.scss b/sass/parts/_footer.scss index 3a8455631..c4a950728 100644 --- a/sass/parts/_footer.scss +++ b/sass/parts/_footer.scss @@ -17,10 +17,10 @@ footer nav { } .socials { - justify-content: center; - flex-grow: 0; display: flex; + flex-grow: 0; flex-wrap: wrap; + justify-content: center; align-items: flex-end; svg { @@ -33,18 +33,18 @@ footer nav { } .social { - background-image: unset; - padding: 0.5vmin; display: flex; justify-content: center; align-items: center; + background-image: unset; + padding: 0.5vmin; } .social > img { - color: #000000; aspect-ratio: 1/1; width: 1.5rem; height: auto; + color: #000000; } .social { @@ -70,8 +70,8 @@ footer nav { } .credits { - font-size: 0.88rem; color: var(--meta-color); + font-size: 0.88rem; text-align: center; p { diff --git a/sass/parts/_header-anchor.scss b/sass/parts/_header-anchor.scss index c57057547..97df65410 100644 --- a/sass/parts/_header-anchor.scss +++ b/sass/parts/_header-anchor.scss @@ -1,14 +1,14 @@ .header-anchor { display: inline-flex; - align-items: center; - justify-content: center; position: absolute; - width: 1.9rem; + justify-content: center; + align-items: center; + opacity: 0; margin-left: -2rem; padding-right: 0.3rem; - opacity: 0; - user-select: none; + width: 1.9rem; height: 100%; + user-select: none; @media (max-width: 500px) { display: none; @@ -17,9 +17,9 @@ .link-icon { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.78 3.653a3.936 3.936 0 1 1 5.567 5.567l-3.627 3.627a3.936 3.936 0 0 1-5.88-.353.75.75 0 0 0-1.18.928 5.436 5.436 0 0 0 8.12.486l3.628-3.628a5.436 5.436 0 1 0-7.688-7.688l-3 3a.75.75 0 0 0 1.06 1.061l3-3Z'%3E%3C/path%3E%3Cpath d='M7.28 11.153a3.936 3.936 0 0 1 5.88.353.75.75 0 0 0 1.18-.928 5.436 5.436 0 0 0-8.12-.486L2.592 13.72a5.436 5.436 0 1 0 7.688 7.688l3-3a.75.75 0 1 0-1.06-1.06l-3 3a3.936 3.936 0 0 1-5.567-5.568l3.627-3.627Z'%3E%3C/path%3E%3C/svg%3E"); - background: var(--text-color); align-self: center; cursor: pointer; + background: var(--text-color); width: 1rem; height: 1rem; } diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index fd9c20401..021043a03 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,24 +1,24 @@ header { - font-family: 'Inter Subset', var(--sans-serif-font); width: 100%; + font-family: 'Inter Subset', var(--sans-serif-font); } .page-header { + margin: 4rem 0px 1rem 0px; font-size: 3em; line-height: 100%; font-family: var(--header-font); - margin: 4rem 0px 1rem 0px; } .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; + align-items: center; margin: 0 auto; + padding: 1em 0; + max-width: var(--max-layout-width); } .nav-navs { @@ -28,76 +28,76 @@ header { ul { display: flex; flex-wrap: wrap; - align-items: center; justify-content: center; + align-items: center; gap: 1px; - list-style: none; - padding: 0; margin: 0; + padding: 0; + list-style: none; } } .nav-links { - font-size: 1em; - font-weight: 340; - text-decoration: none; justify-content: right; - color: var(--text-color); padding: 0.66rem; + color: var(--text-color); + font-weight: 340; + font-size: 1em; line-height: 2.5; + text-decoration: none; } .home-title { - font-size: 1.7em; - font-weight: 450; - padding: 0.12rem; margin-left: -0.12rem; border: none; + padding: 0.12rem; color: var(--primary-color); + font-weight: 450; + font-size: 1.7em; text-decoration: none; } .meta { - color: var(--meta-color); - letter-spacing: -0.4px; - font-size: 0.8rem; - font-weight: 300; padding: 0; padding-top: 0.7vmin; padding-bottom: 3vmin; + color: var(--meta-color); + font-weight: 300; + font-size: 0.8rem; line-height: 1.4rem; + letter-spacing: -0.4px; a { color: var(--meta-color); - text-decoration-color: none; font-weight: inherit; text-decoration: none; + text-decoration-color: none; } ul, li { + display: inline; font-family: var(--sans-serif-font); list-style-type: none; - display: inline; } } .language-switcher { - margin-left: 0.5rem; - margin-right: 0.5rem; display: flex; - align-items: center; justify-content: center; + align-items: center; + margin-right: 0.5rem; + margin-left: 0.5rem; } .language-switcher-icon { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960'>