diff --git a/sass/_buttons.scss b/sass/_buttons.scss index d09f037..ecd6114 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -1,21 +1,21 @@ .dialog-buttons { display: flex; flex-direction: row; - align-items: baseline; justify-content: space-between; + align-items: baseline; margin-top: 6rem; } .inline-button { - background-color: var(--fg-muted-1); - border-radius: var(--rounded-corner); - box-shadow: var(--edge-highlight); - color: var(--fg-color); display: inline-block; - font-size: 0.9rem; - padding: 0.5rem 1rem; - text-decoration: none; transition: var(--transition); + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--fg-muted-1); + padding: 0.5rem 1rem; + color: var(--fg-color); + font-size: 0.9rem; + text-decoration: none; &:hover { background-color: var(--fg-muted-2); @@ -27,13 +27,13 @@ } &.colored { - background-color: transparent; box-shadow: none; + background-color: transparent; color: var(--primary-color); &:hover { - background-color: var(--primary-color-alpha); box-shadow: var(--edge-highlight); + background-color: var(--primary-color-alpha); } } } diff --git a/sass/_comments.scss b/sass/_comments.scss index 51286c8..675c7b5 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -12,13 +12,13 @@ section#comments { .comment { display: grid; - column-gap: 1rem; + grid-template-columns: min-content; grid-template-areas: "avatar name " "avatar time " "avatar post " "...... interactions"; - grid-template-columns: min-content; + column-gap: 1rem; justify-items: start; &.comment-reply { @@ -28,51 +28,51 @@ section#comments { } .avatar-link { - grid-area: avatar; - height: 4rem; position: relative; + grid-area: avatar; width: 4rem; + height: 4rem; .avatar { all: unset; - background-color: var(--fg-muted-1); + transition: var(--transition); + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); background-position: 50%; background-size: cover; - border-radius: var(--rounded-corner); - box-shadow: var(--edge-highlight), var(--shadow); + background-color: var(--fg-muted-1); + width: 100%; height: 100%; overflow: hidden; - transition: var(--transition); - width: 100%; &:hover { - box-shadow: var(--edge-highlight), var(--shadow-raised); transform: rotate(10deg) scale(1.1); + box-shadow: var(--edge-highlight), var(--shadow-raised); } &:active { - box-shadow: var(--edge-highlight), var(--shadow); transform: scale(var(--active)); + box-shadow: var(--edge-highlight), var(--shadow); } } } .author { - align-items: center; display: flex; - font-weight: bold; - gap: 0.25rem; grid-area: name; + align-items: center; + gap: 0.25rem; + font-weight: bold; .instance { - background-color: var(--fg-muted-1); - border-radius: 999px; + transition: var(--transition); box-shadow: var(--edge-highlight); + border-radius: 999px; + background-color: var(--fg-muted-1); + padding: 0.25rem 0.75rem; color: var(--fg-color); font-size: 0.8rem; - padding: 0.25rem 0.75rem; text-decoration: none; - transition: var(--transition); &:hover { background-color: var(--fg-muted-2); @@ -86,18 +86,18 @@ section#comments { &.op { -webkit-backdrop-filter: unset; backdrop-filter: unset; - background-color: transparent; box-shadow: none; + background-color: transparent; color: var(--primary-color); &:hover { - background-color: var(--primary-color-alpha); box-shadow: var(--edge-highlight); + background-color: var(--primary-color-alpha); } &::before { - content: "✔"; margin-inline-end: 0.25rem; + content: "✔"; } } } @@ -106,15 +106,15 @@ section#comments { .emoji { all: unset; display: inline; - height: 1.5em; vertical-align: middle; width: 1.5em; + height: 1.5em; } time { + grid-area: time; color: var(--fg-muted-5); font-size: 0.8rem; - grid-area: time; } main { @@ -131,19 +131,19 @@ section#comments { .boosts, .faves { - background-color: transparent; - border-radius: 999px; display: inline-block; - font-variant-numeric: tabular-nums; - margin-right: 0.25rem; - padding: 0.25rem 0.75rem; - text-decoration: none; transition: var(--transition); + margin-right: 0.25rem; + border-radius: 999px; + background-color: transparent; + padding: 0.25rem 0.75rem; + font-variant-numeric: tabular-nums; + text-decoration: none; svg { - margin-inline-end: 0.25rem; - transition: var(--transition-long); vertical-align: -0.125em; + transition: var(--transition-long); + margin-inline-end: 0.25rem; } &:hover { diff --git a/sass/_crt.scss b/sass/_crt.scss index b5ba700..f047152 100644 --- a/sass/_crt.scss +++ b/sass/_crt.scss @@ -1,18 +1,18 @@ .crt { margin: 1rem 0 1rem; + box-shadow: 0 0 0 1px var(--primary-color-alpha), 0 2px 6px 2px var(--primary-color-alpha), 0 4px 24px 4px var(--primary-color-alpha); border-radius: var(--rounded-corner); background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color); - box-shadow: 0 0 0 1px var(--primary-color-alpha), 0 2px 6px 2px var(--primary-color-alpha), 0 4px 24px 4px var(--primary-color-alpha); pre { - color: var(--primary-color); - padding: 1rem 1rem; - text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; + animation: flicker 250ms alternate infinite; + margin: unset; + box-shadow: unset; // Unset some
stuff background-color: unset; - box-shadow: unset; - margin: unset; - animation: flicker 250ms alternate infinite; + padding: 1rem 1rem; + color: var(--primary-color); + text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; @keyframes flicker { from { @@ -47,17 +47,17 @@ overflow: hidden; &::before { - animation: scanlines 250ms linear infinite; - background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 3px, transparent 4px); - content: ""; display: block; - height: calc(100% + 0.5rem); - left: 0; - pointer-events: none; position: absolute; top: 0; - width: 100%; + left: 0; z-index: 1; + animation: scanlines 250ms linear infinite; + background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 3px, transparent 4px); + width: 100%; + height: calc(100% + 0.5rem); + pointer-events: none; + content: ""; @keyframes scanlines { from { @@ -75,16 +75,16 @@ } &::after { + display: block; + position: absolute; + bottom: 100%; + left: 0; animation: scanline 5s linear infinite; background: linear-gradient(to top, transparent 0%, var(--primary-color-alpha) 10%, transparent 100%); - bottom: 100%; - content: ""; - display: block; - height: 8rem; - left: 0; - pointer-events: none; - position: absolute; width: 100%; + height: 8rem; + pointer-events: none; + content: ""; @keyframes scanline { from { diff --git a/sass/_footer.scss b/sass/_footer.scss index f94c4c6..1ab7d78 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -1,8 +1,8 @@ #site-footer { - text-align: center; + margin-top: 4rem; padding: 3rem 0 3rem; font-size: 1rem; - margin-top: 4rem; + text-align: center; details { all: unset; diff --git a/sass/_johnvertisement.scss b/sass/_johnvertisement.scss index 6b1c63f..ff5581a 100644 --- a/sass/_johnvertisement.scss +++ b/sass/_johnvertisement.scss @@ -1,7 +1,7 @@ #johnvertisement { - margin: 0 auto; display: block; + margin: 0 auto; + border: none; width: min(728px, 100vw); height: min(90px, 12.367vw); - border: none; } diff --git a/sass/_main.scss b/sass/_main.scss index cbb6574..46a1a3e 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -5,12 +5,12 @@ } html { - font-size: 16px; + overflow: hidden; // Disable scroll of html, scroll body instead scroll-behavior: smooth; // scrollbar-color: var(--primary-color) transparent; accent-color: var(--primary-color); + font-size: 16px; overflow-wrap: break-word; - overflow: hidden; // Disable scroll of html, scroll body instead // Smaller font size on mobile // @media only screen and (max-width: 480px) { @@ -25,29 +25,29 @@ body { } body { - overflow: scroll; // Scroll body instead of html - height: 100vh; - font-family: var(--font-system); - line-height: 1.6; - color: var(--fg-color); - background: var(--bg-color); // Put footer at the bottom for short pages, such as the 404 display: grid; - min-height: 100vh; grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer + background: var(--bg-color); + height: 100vh; + min-height: 100vh; + overflow: scroll; // Scroll body instead of html + color: var(--fg-color); + line-height: 1.6; + font-family: var(--font-system); } // Style text selection to use primary color ::selection { - color: var(--fg-color); background-color: var(--primary-color); + color: var(--fg-color); } // Make focused anchor not get covered by nav, // and flash it with primary color when jumping to it :target:not(#main) { - scroll-margin-top: 15vh; animation: var(--transition-long) 1s highlight-in-out; + scroll-margin-top: 15vh; color: var(--primary-color); text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; @@ -64,8 +64,8 @@ body { // LAYOUT .container { - margin-left: auto; margin-right: auto; + margin-left: auto; width: min(var(--content-width), 90%); } @@ -75,11 +75,11 @@ h3, h4, h5, h6 { - font-family: var(--font-serif); - font-weight: lighter; - letter-spacing: -0.05em; - line-height: 1.25; margin: 3rem 0 1rem; + font-weight: lighter; + line-height: 1.25; + font-family: var(--font-serif); + letter-spacing: -0.05em; .zola-anchor { display: none; @@ -88,8 +88,8 @@ h6 { &:hover .zola-anchor { display: inline-block; - text-decoration: none; visibility: visible; + text-decoration: none; } } @@ -110,8 +110,8 @@ a { font-weight: bold; &:hover { - text-decoration: underline wavy; -webkit-text-decoration: underline wavy; + text-decoration: underline wavy; } } @@ -124,22 +124,22 @@ dl { padding: 0; dt { - padding: 0; margin-top: 1rem; - font-size: 1rem; + padding: 0; font-weight: bold; + font-size: 1rem; } dd { - padding: 0; margin-bottom: 1rem; + padding: 0; } } hr { + margin: 2rem auto; border: 0; border-top: 1px solid var(--fg-muted-2); - margin: 2rem auto; width: 100%; } @@ -148,11 +148,11 @@ hr { } blockquote { + margin: 0; border-left: 0.25rem solid var(--primary-color); border-radius: 0.2rem; - color: var(--fg-muted-5); - margin: 0; padding: 0 0.75rem; + color: var(--fg-muted-5); & & { border-radius: 0; @@ -160,24 +160,24 @@ blockquote { } abbr[title] { + -webkit-text-decoration: underline dotted; cursor: help; text-decoration: underline dotted; - -webkit-text-decoration: underline dotted; } aside { - background-color: var(--primary-color-alpha); - border-radius: var(--rounded-corner); - box-shadow: var(--edge-highlight); float: right; margin-inline-start: 1rem; + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--primary-color-alpha); padding: 1rem; width: 30%; @media only screen and (max-width: 720px) { - width: 100%; float: none; margin-inline-start: 0; + width: 100%; } } @@ -189,44 +189,44 @@ kbd { } code:not(pre code) { - background-color: var(--fg-muted-2); - border-radius: var(--rounded-corner-small); box-shadow: var(--edge-highlight); - color: var(--red-fg); + border-radius: var(--rounded-corner-small); + background-color: var(--fg-muted-2); padding: 0.125rem 0.375rem; + color: var(--red-fg); } pre { - border-radius: var(--rounded-corner); - box-shadow: var(--edge-highlight), var(--shadow); - line-height: normal; // Unset line height margin: 1rem 0 1rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + padding: 1rem; max-width: 100vw; overflow: auto; - padding: 1rem; + line-height: normal; // Unset line height table td { - padding: 0; border: none; + padding: 0; } // The line number cells table td:nth-of-type(1) { - text-align: center; user-select: none; + text-align: center; } mark { - background-color: var(--fg-muted-1); - border-radius: 0; // Unset code block border radius - color: var(--fg-color); // Unset mark color from primary color to text color display: block; + border-radius: 0; // Unset code block border radius + background-color: var(--fg-muted-1); padding: 0; // Unset mark padding + color: var(--fg-color); // Unset mark color from primary color to text color } table { - width: 100%; border-collapse: collapse; + width: 100%; } // The line numbers already provide some kind of left/right padding @@ -236,42 +236,42 @@ pre { } kbd { - background-color: var(--fg-muted-2); - border-radius: var(--rounded-corner-small); - box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); - cursor: pointer; display: inline-block; + transition: var(--transition); + cursor: pointer; + box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); + border-radius: var(--rounded-corner-small); + background-color: var(--fg-muted-2); + padding: 0.125rem 0.375rem; font-size: 0.8rem; line-height: normal; - padding: 0.125rem 0.375rem; - transition: var(--transition); // Small nice thingy, keys can be pressed! &:active { - background-color: var(--fg-muted-3); - box-shadow: inset 0 1px 0 var(--fg-muted-2); transform: translateY(2px); + box-shadow: inset 0 1px 0 var(--fg-muted-2); + background-color: var(--fg-muted-3); } } mark { - background-color: var(--primary-color-alpha); - border-radius: var(--rounded-corner-small); box-shadow: var(--edge-highlight); - color: var(--primary-color); + border-radius: var(--rounded-corner-small); + background-color: var(--primary-color-alpha); padding: 0.125rem 0.375rem; + color: var(--primary-color); } figcaption { display: block; - text-align: center; color: var(--fg-muted-4); font-size: 0.8rem; + text-align: center; } details { - background-color: var(--fg-muted-1); border-radius: var(--rounded-corner); + background-color: var(--fg-muted-1); padding: 1rem; &>summary { @@ -281,12 +281,12 @@ details { // TABLES table { - border-collapse: collapse; - border-radius: var(--rounded-corner); box-shadow: var(--edge-highlight); - overflow: hidden; - table-layout: fixed; + border-radius: var(--rounded-corner); + border-collapse: collapse; width: 100%; + table-layout: fixed; + overflow: hidden; th { font-weight: bold; diff --git a/sass/_media.scss b/sass/_media.scss index 1976442..e27a200 100644 --- a/sass/_media.scss +++ b/sass/_media.scss @@ -6,18 +6,18 @@ img { } &:not(.no-hover):hover { - border-radius: 0; - box-shadow: var(--shadow-raised); transform: scale(1.1); + box-shadow: var(--shadow-raised); + border-radius: 0; } } img, video { - border-radius: var(--rounded-corner); - box-shadow: var(--shadow); display: block; margin: 1rem auto; + box-shadow: var(--shadow); + border-radius: var(--rounded-corner); max-width: 100%; &.full { @@ -29,8 +29,8 @@ video { } &.transparent { - border-radius: 0; box-shadow: none; + border-radius: 0; &:hover { box-shadow: none; diff --git a/sass/_nav.scss b/sass/_nav.scss index ec2b6f3..7c2042a 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -1,14 +1,14 @@ #site-nav { -webkit-backdrop-filter: var(--blur); - backdrop-filter: var(--blur); - background-color: var(--nav-bg); - border-radius: 26px; - box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5); - margin: 1rem auto; - max-width: min(calc(var(--content-width) + 10rem), 90%); position: sticky; top: 1rem; z-index: 999; + backdrop-filter: var(--blur); + margin: 1rem auto; + box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5); + border-radius: 26px; + background-color: var(--nav-bg); + max-width: min(calc(var(--content-width) + 10rem), 90%); nav { display: flex; @@ -20,27 +20,27 @@ ul { display: flex; flex-wrap: wrap; - gap: 0.25rem; justify-content: center; + gap: 0.25rem; margin: 0; padding: 0; } li { - list-style: none; display: inline-flex; + list-style: none; } a { - border-radius: 999px; - color: var(--fg-muted-4); - padding: 0.325rem 0.75rem; - text-decoration: none; transition: var(--transition); + border-radius: 999px; + padding: 0.325rem 0.75rem; + color: var(--fg-muted-4); + text-decoration: none; &:hover { - background-color: var(--fg-muted-1); box-shadow: var(--edge-highlight); + background-color: var(--fg-muted-1); color: var(--primary-color); text-decoration: none; } @@ -51,10 +51,10 @@ } #main-content { - background: var(--bg-color); position: absolute; transform: translateY(-300%); z-index: 999; + background: var(--bg-color); &:focus { transform: translateY(0); @@ -66,18 +66,18 @@ margin-right: 0.625rem; &::after { - background-color: var(--fg-muted-2); - content: ""; - height: 110%; position: absolute; - right: -0.5rem; top: 0; + right: -0.5rem; + background-color: var(--fg-muted-2); width: 1px; + height: 110%; + content: ""; } a { - font-weight: 800; color: var(--fg-muted-5); + font-weight: 800; &:hover { color: var(--primary-color); diff --git a/sass/_not-found.scss b/sass/_not-found.scss index 8b38109..80110d9 100644 --- a/sass/_not-found.scss +++ b/sass/_not-found.scss @@ -1,7 +1,7 @@ #not-found { - width: 100%; padding-top: 1rem; padding-right: 35%; - padding-left: 35%; padding-bottom: 1rem; + padding-left: 35%; + width: 100%; } diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss index 53a5a96..33022bc 100644 --- a/sass/_post-nav.scss +++ b/sass/_post-nav.scss @@ -10,25 +10,25 @@ } &:nth-child(2n + 1) { - padding-left: 0; padding-right: 1rem; + padding-left: 0; } &:nth-child(2n) { - text-align: right; - padding-left: 1rem; padding-right: 0; + padding-left: 1rem; + text-align: right; } .nav-arrow { - font-weight: normal; - color: var(--fg-muted-5); margin-bottom: 0.5rem; + color: var(--fg-muted-5); + font-weight: normal; } .post-title { - color: var(--fg-color); transition: var(--transition); + color: var(--fg-color); } } } diff --git a/sass/_qrcode.scss b/sass/_qrcode.scss index ab2a60a..0236bec 100644 --- a/sass/_qrcode.scss +++ b/sass/_qrcode.scss @@ -1,10 +1,10 @@ #qrcode { - background-color: white; float: right; - height: 150px; margin: 3rem 0 0 1rem; + background-color: white; padding: 12.5px; width: 150px; + height: 150px; @media only screen and (max-width: 720px) { display: none; diff --git a/sass/_statements.scss b/sass/_statements.scss index 66823a6..59842b6 100644 --- a/sass/_statements.scss +++ b/sass/_statements.scss @@ -1,8 +1,8 @@ .statement-container { margin: 1rem 0 1rem; - padding: 1rem 1rem 0.5rem 1rem; - border-radius: var(--rounded-corner); box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + padding: 1rem 1rem 0.5rem 1rem; * { margin: 0; diff --git a/sass/_tags.scss b/sass/_tags.scss index 92be04f..6bc48b4 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -1,12 +1,12 @@ .tags { - list-style: none; - padding: 0; display: inline-block; + padding: 0; + list-style: none; li { display: inline-block; - margin: 0 0.25rem 0.5rem 0; transition: var(--transition); + margin: 0 0.25rem 0.5rem 0; &:active { transform: scale(var(--active)); @@ -14,17 +14,17 @@ } .tag { - background-color: var(--fg-muted-1); - border-radius: 999px; - box-shadow: var(--edge-highlight); - color: var(--fg-color); - padding: 0.25rem 0.75rem; - text-decoration: none; transition: var(--transition); + box-shadow: var(--edge-highlight); + border-radius: 999px; + background-color: var(--fg-muted-1); + padding: 0.25rem 0.75rem; + color: var(--fg-color); + text-decoration: none; &:hover { - color: var(--primary-color); background-color: var(--primary-color-alpha); + color: var(--primary-color); text-decoration: none; }