diff --git a/content/_index.md b/content/_index.md index 7f891e9..6f5b7ad 100644 --- a/content/_index.md +++ b/content/_index.md @@ -113,7 +113,12 @@ $crt-bg: radial-gradient( ); $nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%); -$nav-bg-d: color.scale($bg-color-d, $alpha: -20%, $lightness: 5%, $saturation: -50%); +$nav-bg-d: color.scale( + $bg-color-d, + $alpha: -20%, + $lightness: 5%, + $saturation: -50% +); $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%), 0 2px 6px 2px color.scale($primary-color, $alpha: -95%), @@ -122,10 +127,10 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%), :root { --bg-color: #{$bg-color-l}; --crt-bg: #{$crt-bg}; + --glow: #{$glow}; --nav-bg: #{$nav-bg-l}; --primary-color-alpha: #{$primary-color-alpha}; --primary-color: #{$primary-color}; - --glow: #{$glow}; } @media (prefers-color-scheme: dark) { diff --git a/sass/_comments.scss b/sass/_comments.scss index 6472a2f..b7b1d71 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -160,7 +160,7 @@ section#comments { } } - // hide the card from the shared post + // Hide the card from the shared post &:first-of-type .card { display: none; } diff --git a/sass/_main.scss b/sass/_main.scss index 0775f50..4ba7c7a 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -12,7 +12,7 @@ html { overflow-wrap: break-word; } -// smaller font size on mobile +// Smaller font size on mobile // @media only screen and (max-device-width: 480px) { // html { // font-size: 14px; @@ -30,19 +30,19 @@ body { line-height: 1.6; color: var(--fg-color); background-color: var(--bg-color); - // put footer at the bottom for short pages, such as the 404 + // 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 + grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer } -// style text selection to use primary color +// Style text selection to use primary color ::selection { color: var(--bg-color); background-color: var(--primary-color); } -// make focused anchor not get covered by nav, +// Make focused anchor not get covered by nav, // and flash it with primary color when jumping to it :target { scroll-margin-top: 15vh; @@ -189,7 +189,7 @@ code:not(pre code) { } pre { - line-height: normal; // unset line height + line-height: normal; // Unset line height padding: 1rem; margin: 1rem 0 1rem; border-radius: var(--rounded-corner); @@ -202,7 +202,7 @@ pre { border: none; } - // the line number cells + // The line number cells table td:nth-of-type(1) { text-align: center; user-select: none; @@ -211,9 +211,9 @@ pre { mark { display: block; background-color: var(--fg-muted-1); - color: var(--fg-color); // unset mark color from primary color to text color - border-radius: 0; // unset code block border radius - padding: 0; // unset mark padding + color: var(--fg-color); // Unset mark color from primary color to text color + border-radius: 0; // Unset code block border radius + padding: 0; // Unset mark padding } table { @@ -221,7 +221,7 @@ pre { border-collapse: collapse; } - // the line numbers already provide some kind of left/right padding + // The line numbers already provide some kind of left/right padding &[data-linenos] { padding: 1rem 0; } @@ -237,7 +237,7 @@ kbd { line-height: normal; padding: 2px 6px; - // small nice thingy, keys can be pressed! + // Small nice thingy, keys can be pressed! &:active { background-color: var(--fg-muted-2); box-shadow: inset 0 1px 0 var(--fg-muted-2); @@ -336,7 +336,6 @@ img { } .pixels { - image-rendering: crisp-edges; // older firefox browsers image-rendering: pixelated; } @@ -486,8 +485,9 @@ img { pre { color: var(--primary-color); padding: 1rem 1rem; - text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; - // unset some
stuff + text-shadow: var(--primary-color-alpha) 0 0 4px, + var(--primary-color) 0 0 12px; + // Unset somestuff background-color: unset; box-shadow: unset; margin: unset; @@ -507,7 +507,7 @@ img { top: 0; left: 0; width: 100%; - height: 100%; + height: calc(100% + 8px); pointer-events: none; background: repeating-linear-gradient( 0deg, @@ -516,6 +516,16 @@ img { transparent 3px, transparent 4px ); + animation: scanlines 250ms linear infinite; + + @keyframes scanlines { + 0% { + transform: translateY(0px); + } + 100% { + transform: translateY(-8px); + } + } } .cursor { @@ -598,26 +608,14 @@ img { background-color: var(--fg-muted-1); &:hover { - color: rgb(255, 255, 255); - background-color: var(--purple3); - background-image: radial-gradient(at 0 0, var(--blue3) 0, transparent 50%), - radial-gradient(at 100% 100%, var(--red2) 0, transparent 50%); + color: var(--primary-color); + background-color: var(--primary-color-alpha); text-decoration: none; } &::before { content: "#"; } - - @media (prefers-color-scheme: dark) { - &:hover { - color: rgba(0, 0, 0, 0.8); - background-color: var(--purple2); - background-image: radial-gradient(at 0 0, var(--blue2) 0, transparent 50%), - radial-gradient(at 100% 100%, var(--red1) 0, transparent 50%); - text-decoration: none; - } - } } .post-nav { @@ -626,19 +624,16 @@ img { border-top: 1px solid var(--fg-muted-2); .post-nav-item { - border-bottom: 0; font-weight: 600; - padding-bottom: 0.5rem; width: 50%; padding-top: 1rem; text-decoration: none; - box-sizing: border-box; &:hover .post-title { color: var(--primary-color); } - &:nth-child(2n+1) { + &:nth-child(2n + 1) { padding-left: 0; padding-right: 1rem; } diff --git a/sass/_variables.scss b/sass/_variables.scss index 019db04..be23cac 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -12,7 +12,12 @@ $crt-bg: radial-gradient( ); $nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%); -$nav-bg-d: color.scale($bg-color-d, $alpha: -20%, $lightness: 5%, $saturation: -50%); +$nav-bg-d: color.scale( + $bg-color-d, + $alpha: -20%, + $lightness: 5%, + $saturation: -50% +); $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%), 0 2px 6px 2px color.scale($primary-color, $alpha: -95%), @@ -42,13 +47,16 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%), // VARIABLES --content-width: 720px; - --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); + --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) + drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); --glow: #{$glow}; --rounded-corner-big: 18px; --rounded-corner-small: 8px; --rounded-corner: 12px; - --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06); - --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03); + --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), + 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06); + --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), + 0 2px 6px 2px rgba(0, 0, 0, 0.03); --transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28); --transition-long: 800ms; --transition-longer: 400ms;