diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e00a69..2d58371 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -47,6 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use PNG instead of GIF for comments QR code to reduce download size. - Use relative colors for `-bg` color variants. - Rewrite the homepage (#75). +- Improved CRT style, now looks a lot more like [cool-retro-term](https://github.com/Swordfish90/cool-retro-term). ### Removed diff --git a/sass/_crt.scss b/sass/_crt.scss index 492573c..a2ed5e8 100644 --- a/sass/_crt.scss +++ b/sass/_crt.scss @@ -6,19 +6,22 @@ 0 0.125rem 0.375rem 0.125rem var(--primary-color-alpha), 0 0.25rem 1.5rem 0.25rem var(--primary-color-alpha); border-radius: var(--rounded-corner); - background: radial-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.85)), - var(--primary-color); + background-image: radial-gradient(color-mix(in srgb, var(--primary-color) 30%, black), + color-mix(in srgb, var(--primary-color) 10%, black) 80%, + color-mix(in srgb, var(--primary-color) 5%, black)); pre { + --text-shadow-1: hsl(from var(--primary-color) h s l / 0.5); + --text-shadow-2: hsl(from var(--primary-color) h calc(s * 2) l); animation: flicker 0.25s alternate infinite; margin: 0; box-shadow: none; background-color: transparent !important; padding: 1rem 1rem; - color: var(--primary-color) !important; + color: var(--primary-color); text-shadow: - var(--primary-color-alpha) 0 0 0.25rem, - var(--primary-color) 0 0 0.75rem; + var(--text-shadow-1) 0 0 0.25rem, + var(--text-shadow-2) 0 0 0.75rem; @keyframes flicker { 25% { @@ -50,13 +53,11 @@ z-index: 1; animation: scanlines 0.1s linear infinite; inset: 0; - background-image: repeating-linear-gradient( - to bottom, - rgb(0 0 0 / 0.25), - rgb(0 0 0 / 0.25) 0.125rem, - transparent 0.125rem, - transparent 0.25rem - ); + background-image: repeating-linear-gradient(to bottom, + rgb(0 0 0 / 0.25), + rgb(0 0 0 / 0.25) 0.125rem, + transparent 0.125rem, + transparent 0.25rem); pointer-events: none; content: ""; @@ -68,6 +69,7 @@ } &::after { + --scanline-color: rgb(from var(--primary-color) r g b / 0.05); display: block; position: absolute; animation: scanline 5s linear infinite; @@ -75,19 +77,16 @@ background-image: linear-gradient( to bottom, transparent, - var(--primary-color-alpha) 7rem, - transparent 8rem - ); - background-size: auto 8rem; + var(--scanline-color) 16rem); + background-size: auto 16rem; background-repeat: no-repeat; - background-position-y: -8rem; + background-position-y: -16rem; pointer-events: none; content: ""; @keyframes scanline { - 50%, to { - background-position-y: calc(100% + 8rem); + background-position-y: calc(100% + 16rem); } } }