diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 5642570..9fda3b1 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -13,6 +13,7 @@ display: inline-block; font-size: 0.9rem; padding: 0.4rem 1rem; + text-decoration: none; transition: var(--transition); &:hover { @@ -20,6 +21,10 @@ text-decoration: none; } + &:active { + transform: scale(var(--active)); + } + &.colored { color: var(--primary-color); background-color: transparent; diff --git a/sass/_comments.scss b/sass/_comments.scss index d722158..6b75cbd 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -33,6 +33,11 @@ section#comments { box-shadow: var(--shadow-raised); transform: rotate(10deg) scale(1.1); } + + &:active { + box-shadow: var(--shadow); + transform: scale(var(--active)); + } } &.op::after { @@ -63,7 +68,7 @@ section#comments { .instance { background-color: var(--fg-muted-1); - border-radius: 9999px; + border-radius: 999px; color: var(--fg-color); font-size: 0.8rem; font-weight: 600; diff --git a/sass/_crt.scss b/sass/_crt.scss index fc0464d..476ef85 100644 --- a/sass/_crt.scss +++ b/sass/_crt.scss @@ -4,10 +4,6 @@ box-shadow: var(--glow); background: var(--crt-bg); - a { - text-decoration: underline; - } - pre { color: var(--primary-color); padding: 1rem 1rem; @@ -44,10 +40,10 @@ width: 100%; @keyframes scanlines { - 0% { + from { transform: translateY(0px); } - 100% { + to { transform: translateY(-8px); } } @@ -57,7 +53,7 @@ animation: blicking 1s infinite; @keyframes blicking { - 0% { + from { opacity: 1; } 50% { diff --git a/sass/_main.scss b/sass/_main.scss index ab8cac9..f13a0c1 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -130,7 +130,7 @@ a { color: var(--primary-color); cursor: pointer; font-weight: 600; - text-decoration: none; + text-decoration: underline dotted; &:hover { text-decoration: underline; @@ -236,18 +236,18 @@ pre { } kbd { - background-color: var(--fg-muted-1); + 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-2); + box-shadow: inset 0 -2px 0 var(--fg-muted-2), 0 -1px 0 var(--fg-muted-3); cursor: pointer; display: inline-block; font-size: 0.8rem; line-height: normal; padding: 2px 6px; - + transition: var(--transition); // Small nice thingy, keys can be pressed! &:active { - background-color: var(--fg-muted-2); + background-color: var(--fg-muted-3); box-shadow: inset 0 1px 0 var(--fg-muted-2); transform: translateY(2px); } @@ -312,4 +312,3 @@ td, th { padding: 0; } - diff --git a/sass/_nav.scss b/sass/_nav.scss index b6897ba..4a45099 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -38,6 +38,7 @@ display: inline-block; font-weight: 400; padding: 0.4rem 1rem; + text-decoration: none; transform: scale(1); transition: var(--transition); @@ -46,6 +47,10 @@ color: var(--primary-color); text-decoration: none; } + + &:active { + transform: scale(var(--active)); + } } @media only screen and (max-device-width: 480px) { @@ -57,7 +62,7 @@ @media (min-width: 600px) { & { - border-radius: 9999px; + border-radius: 999px; &-container { text-align: left; @@ -70,7 +75,7 @@ } a { - border-radius: 9999px; + border-radius: 999px; } } } diff --git a/sass/_tags.scss b/sass/_tags.scss index 6293b06..f77dd02 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -6,23 +6,29 @@ li { display: inline-block; margin: 0 0.2rem 0.4rem 0; + transition: var(--transition); + + &:active { + transform: scale(var(--active)); + } } -} -.tag { - background-color: var(--fg-muted-1); - border-radius: 9999px; - color: var(--fg-color); - padding: 0.25rem 0.75rem; - transition: var(--transition); - - &:hover { - color: var(--primary-color); - background-color: var(--primary-color-alpha); + .tag { + background-color: var(--fg-muted-1); + border-radius: 999px; + color: var(--fg-color); + padding: 0.25rem 0.75rem; text-decoration: none; - } + transition: var(--transition); - &::before { - content: "#"; + &:hover { + color: var(--primary-color); + background-color: var(--primary-color-alpha); + text-decoration: none; + } + + &::before { + content: "#"; + } } } diff --git a/sass/_variables.scss b/sass/_variables.scss index be23cac..29adc50 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -46,6 +46,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%), --yellow-fg: rgb(156, 110, 3); // VARIABLES + --active: 0.9; --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)); diff --git a/templates/includes/footer.html b/templates/includes/footer.html index 95523fb..11439d2 100644 --- a/templates/includes/footer.html +++ b/templates/includes/footer.html @@ -1,6 +1,6 @@