feat: Improved tags; get rid of bootstrap icons and scanlines
- Tags now use horizontal unordered list and have dope hover effect (shoutout to https://libreivan.com) - Get rid of Bootstrap Icons and Scanlines scss files, the former added extra ~90kb to the stylesheet which I think is bloat, one can use emojis for this, and the scanlines were replaced by much simpler code from https://aroace.space - Replace fg09 with fg10; it just makes more sense - Simplify anchor styling - Update woodpecker.yml to work with Woodpecker 2.0
This commit is contained in:
daudix-UFO
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,4 @@
|
||||
/* GNOME HIG Colors */
|
||||
:root {
|
||||
--blue1: rgb(153, 193, 241);
|
||||
--blue2: rgb(98, 160, 234);
|
||||
|
||||
@ -82,17 +82,13 @@ h6 {
|
||||
line-height: 1.25;
|
||||
|
||||
.zola-anchor {
|
||||
color: inherit;
|
||||
|
||||
.bi {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
color: var(--fg50);
|
||||
}
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover .zola-anchor .bi {
|
||||
&:hover .zola-anchor {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@ -138,10 +134,9 @@ a {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline wavy;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@ -255,18 +250,19 @@ pre {
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: var(--fg05);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
box-shadow: inset 0 -2px 0 var(--fg10), 0 -1px 0 var(--fg10);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 0.8rem;
|
||||
line-height: normal;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg05);
|
||||
box-shadow: inset 0 -2px 0 var(--fg09), 0 -1px 0 var(--fg09);
|
||||
cursor: pointer;
|
||||
|
||||
// small nice thingy, keys can be pressed!
|
||||
&:active {
|
||||
background-color: var(--fg09);
|
||||
box-shadow: inset 0 1px 0 var(--fg09);
|
||||
background-color: var(--fg10);
|
||||
box-shadow: inset 0 1px 0 var(--fg10);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
@ -401,11 +397,11 @@ img {
|
||||
background-color: transparent;
|
||||
color: var(--fg50);
|
||||
transition: var(--transition);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg05);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -474,12 +470,11 @@ img {
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 1rem;
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.inline-button:hover {
|
||||
background-color: var(--fg09);
|
||||
background-color: var(--fg10);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -491,18 +486,38 @@ img {
|
||||
background: var(--crt-bg);
|
||||
|
||||
pre {
|
||||
text-shadow: var(--primary-color) 0 0 12px;
|
||||
color: var(--primary-color);
|
||||
padding: 1rem 1rem;
|
||||
text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
|
||||
// unset some <pre> stuff
|
||||
margin: unset;
|
||||
background-color: unset;
|
||||
box-shadow: unset;
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.scanlines {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scanlines::after {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.25),
|
||||
rgba(0, 0, 0, 0.25) 1px,
|
||||
transparent 3px,
|
||||
transparent 4px
|
||||
);
|
||||
}
|
||||
|
||||
.cursor {
|
||||
@ -566,17 +581,43 @@ img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.pill {
|
||||
background-color: var(--fg05);
|
||||
.tags {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 0.2rem 0.4rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: 9999px;
|
||||
color: var(--fg-color);
|
||||
padding: 0.25rem 0.75rem;
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
background-color: var(--fg05);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg09);
|
||||
color: var(--primary-color);
|
||||
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%);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,107 +0,0 @@
|
||||
/*! scanlines.scss | MIT License | https://codepen.io/meduzen/pen/zxbwRV */
|
||||
|
||||
// REGULAR SCANLINES SETTINGS
|
||||
|
||||
// width of 1 scanline (min.: 1px)
|
||||
$scan-width: 2px;
|
||||
|
||||
// emulates a damage-your-eyes bad pre-2000 CRT screen ♥ (true, false)
|
||||
$scan-crt: true;
|
||||
|
||||
// frames-per-second (should be > 1), only applies if $scan-crt: true;
|
||||
$scan-fps: 60;
|
||||
|
||||
// scanline-color (rgba)
|
||||
$scan-color: rgba(black, 0.2);
|
||||
|
||||
// set z-index on 8, like in ♥ 8-bits ♥, or…
|
||||
// set z-index on 2147483648 or more to enable scanlines on Chrome fullscreen (doesn't work in Firefox or IE);
|
||||
// $scan-z-index: 2147483648;
|
||||
|
||||
// MOVING SCANLINE SETTINGS
|
||||
|
||||
// moving scanline (true, false)
|
||||
$scan-moving-line: true;
|
||||
|
||||
// opacity of the moving scanline
|
||||
$scan-opacity: 0.75;
|
||||
|
||||
// MIXINS
|
||||
|
||||
// apply CRT animation: @include scan-crt($scan-crt);
|
||||
@mixin scan-crt($scan-crt) {
|
||||
@if $scan-crt == true {
|
||||
animation: scanlines 1s steps($scan-fps) infinite;
|
||||
} @else {
|
||||
animation: none;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
// apply CRT animation: @include scan-crt($scan-crt);
|
||||
@mixin scan-moving($scan-moving-line) {
|
||||
@if $scan-moving-line == true {
|
||||
animation: scanline 6s linear infinite;
|
||||
} @else {
|
||||
animation: none;
|
||||
}
|
||||
@media (prefers-reduced-motion) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
// CSS .scanlines CLASS
|
||||
.scanlines {
|
||||
position: relative;
|
||||
overflow: hidden; // only to animate the unique scanline
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// unique scanline travelling on the screen
|
||||
&:before {
|
||||
// position: absolute;
|
||||
// bottom: 100%;
|
||||
width: 100%;
|
||||
height: $scan-width * 1;
|
||||
// z-index: $scan-z-index + 1;
|
||||
background: $scan-color;
|
||||
opacity: $scan-opacity;
|
||||
// animation: scanline 6s linear infinite;
|
||||
@include scan-moving($scan-moving-line);
|
||||
}
|
||||
|
||||
// the scanlines, so!
|
||||
&:after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
// z-index: $scan-z-index;
|
||||
background: linear-gradient(to bottom, transparent 50%, $scan-color 51%);
|
||||
background-size: 100% $scan-width * 2;
|
||||
@include scan-crt($scan-crt);
|
||||
}
|
||||
}
|
||||
|
||||
// ANIMATE UNIQUE SCANLINE
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
transform: translate3d(0, 200000%, 0);
|
||||
// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
// bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
|
||||
}
|
||||
}
|
||||
@ -32,7 +32,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
||||
|
||||
// CUSTOM COLOR PALETTE
|
||||
--fg05: rgba(0, 0, 0, 0.05);
|
||||
--fg09: rgba(0, 0, 0, 0.09);
|
||||
--fg10: rgba(0, 0, 0, 0.1);
|
||||
--fg50: rgba(0, 0, 0, 0.5);
|
||||
--nav-bg: #{$nav-bg-l};
|
||||
|
||||
@ -70,7 +70,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
|
||||
|
||||
// CUSTOM COLOR PALETTE
|
||||
--fg05: rgba(255, 255, 255, 0.05);
|
||||
--fg09: rgba(255, 255, 255, 0.09);
|
||||
--fg10: rgba(255, 255, 255, 0.1);
|
||||
--fg50: rgba(255, 255, 255, 0.5);
|
||||
--nav-bg: #{$nav-bg-d};
|
||||
|
||||
|
||||
@ -9,14 +9,11 @@
|
||||
*/
|
||||
|
||||
@use "normalize";
|
||||
|
||||
@use "variables";
|
||||
@use "gnome-hig";
|
||||
@use "fonts";
|
||||
@use "main";
|
||||
@use "comments";
|
||||
@use "scanlines";
|
||||
@use "bootstrap-icons";
|
||||
|
||||
@import url("syntax-theme-dark.css") (prefers-color-scheme: dark);
|
||||
@import url("syntax-theme-light.css") (prefers-color-scheme: light);
|
||||
|
||||
Reference in New Issue
Block a user