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;
}