stuff
- background-color: unset;
- box-shadow: unset;
- margin: unset;
- animation: flicker 250ms alternate infinite;
+ 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
+ background-color: unset;
+ box-shadow: unset;
+ margin: unset;
+ animation: flicker 250ms alternate infinite;
- @keyframes flicker {
- from {
- opacity: 1;
- }
- 25% {
- opacity: 0.95;
- }
- 50% {
- opacity: 0.85;
- }
- 75% {
- opacity: 1;
- }
- to {
- opacity: 0.9;
- }
- }
+ @keyframes flicker {
+ from {
+ opacity: 1;
+ }
- @media (prefers-reduced-motion) {
- animation: none;
- }
- }
+ 25% {
+ opacity: 0.95;
+ }
+
+ 50% {
+ opacity: 0.85;
+ }
+
+ 75% {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0.9;
+ }
+ }
+
+ @media (prefers-reduced-motion) {
+ animation: none;
+ }
+ }
}
.scanlines {
- position: relative;
- overflow: hidden;
+ position: relative;
+ 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%;
- z-index: 1;
+ &::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%;
+ z-index: 1;
- @keyframes scanlines {
- from {
- transform: translateY(-0.5rem);
- }
- to {
- transform: translateY(0);
- }
- }
+ @keyframes scanlines {
+ from {
+ transform: translateY(-0.5rem);
+ }
- @media (prefers-reduced-motion) {
- animation: none;
- }
- }
+ to {
+ transform: translateY(0);
+ }
+ }
- &::after {
- 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%;
+ @media (prefers-reduced-motion) {
+ animation: none;
+ }
+ }
- @keyframes scanline {
- from {
- bottom: 100%;
- }
- 50% {
- bottom: 100%;
- }
- to {
- bottom: -8rem;
- }
- }
+ &::after {
+ 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%;
- @media (prefers-reduced-motion) {
- animation: none;
- }
- }
+ @keyframes scanline {
+ from {
+ bottom: 100%;
+ }
+
+ 50% {
+ bottom: 100%;
+ }
+
+ to {
+ bottom: -8rem;
+ }
+ }
+
+ @media (prefers-reduced-motion) {
+ animation: none;
+ }
+ }
}
.cursor {
- animation: cursor-blink 1s infinite;
+ animation: cursor-blink 1s infinite;
- @keyframes cursor-blink {
- from {
- opacity: 1;
- }
- 50% {
- opacity: 0;
- }
- 75% {
- opacity: 1;
- }
- }
+ @keyframes cursor-blink {
+ from {
+ opacity: 1;
+ }
- @media (prefers-reduced-motion) {
- animation: none;
- }
+ 50% {
+ opacity: 0;
+ }
+
+ 75% {
+ opacity: 1;
+ }
+ }
+
+ @media (prefers-reduced-motion) {
+ animation: none;
+ }
}
diff --git a/sass/_footer.scss b/sass/_footer.scss
index 0db977d..f94c4c6 100644
--- a/sass/_footer.scss
+++ b/sass/_footer.scss
@@ -1,12 +1,12 @@
#site-footer {
- text-align: center;
- padding: 3rem 0 3rem;
- font-size: 1rem;
- margin-top: 4rem;
+ text-align: center;
+ padding: 3rem 0 3rem;
+ font-size: 1rem;
+ margin-top: 4rem;
- details {
- all: unset;
- color: var(--fg-muted-5);
- font-size: 0.8rem;
- }
+ details {
+ all: unset;
+ color: var(--fg-muted-5);
+ font-size: 0.8rem;
+ }
}
diff --git a/sass/_johnvertisement.scss b/sass/_johnvertisement.scss
index 0ca1a2d..6b1c63f 100644
--- a/sass/_johnvertisement.scss
+++ b/sass/_johnvertisement.scss
@@ -1,7 +1,7 @@
#johnvertisement {
- margin: 0 auto;
- display: block;
- width: min(728px, 100vw);
- height: min(90px, 12.367vw);
- border: none;
+ margin: 0 auto;
+ display: block;
+ width: min(728px, 100vw);
+ height: min(90px, 12.367vw);
+ border: none;
}
diff --git a/sass/_links.scss b/sass/_links.scss
index 6ac7604..ee596f9 100644
--- a/sass/_links.scss
+++ b/sass/_links.scss
@@ -1,7 +1,7 @@
.link-page::after {
- content: " →";
+ content: " →";
}
.link-site::after {
- content: " ↗";
+ content: " ↗";
}
diff --git a/sass/_main.scss b/sass/_main.scss
index 5869e09..d2308dc 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -1,15 +1,15 @@
* {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
html {
- font-size: 16px;
- scroll-behavior: smooth;
- // scrollbar-color: var(--primary-color) transparent;
- accent-color: var(--primary-color);
- overflow-wrap: break-word;
+ font-size: 16px;
+ scroll-behavior: smooth;
+ // scrollbar-color: var(--primary-color) transparent;
+ accent-color: var(--primary-color);
+ overflow-wrap: break-word;
}
// Smaller font size on mobile
@@ -21,51 +21,51 @@ html {
html,
body {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
body {
- 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
+ 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
}
// Style text selection to use primary color
::selection {
- color: var(--fg-color);
- background-color: var(--primary-color);
+ color: var(--fg-color);
+ background-color: var(--primary-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;
- color: var(--primary-color);
- text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
+ scroll-margin-top: 15vh;
+ animation: var(--transition-long) 1s highlight-in-out;
+ color: var(--primary-color);
+ text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
- @keyframes highlight-in-out {
- 50% {
- letter-spacing: 0.125rem;
- }
- }
+ @keyframes highlight-in-out {
+ 50% {
+ letter-spacing: 0.125rem;
+ }
+ }
- @media (prefers-reduced-motion) {
- animation: none;
- }
+ @media (prefers-reduced-motion) {
+ animation: none;
+ }
}
// LAYOUT
.container {
- margin-left: auto;
- margin-right: auto;
- width: min(var(--content-width), 90%);
+ margin-left: auto;
+ margin-right: auto;
+ width: min(var(--content-width), 90%);
}
h1,
@@ -74,259 +74,259 @@ h3,
h4,
h5,
h6 {
- font-family: var(--font-serif);
- font-weight: lighter;
- line-height: 1.25;
- margin: 3rem 0 1rem;
+ font-family: var(--font-serif);
+ font-weight: lighter;
+ line-height: 1.25;
+ margin: 3rem 0 1rem;
- .zola-anchor {
- display: none;
- visibility: hidden;
- }
+ .zola-anchor {
+ display: none;
+ visibility: hidden;
+ }
- &:hover .zola-anchor {
- display: inline-block;
- text-decoration: none;
- visibility: visible;
- }
+ &:hover .zola-anchor {
+ display: inline-block;
+ text-decoration: none;
+ visibility: visible;
+ }
}
h1 {
- font-size: 3rem;
- font-weight: normal;
- letter-spacing: -0.15rem;
+ font-size: 3rem;
+ font-weight: normal;
+ letter-spacing: -0.15rem;
}
h2 {
- font-size: 2.4rem;
- letter-spacing: -0.15rem;
+ font-size: 2.4rem;
+ letter-spacing: -0.15rem;
}
h3 {
- font-size: 1.5rem;
- letter-spacing: -0.1rem;
+ font-size: 1.5rem;
+ letter-spacing: -0.1rem;
}
h4 {
- font-size: 1.25rem;
- letter-spacing: -0.05rem;
+ font-size: 1.25rem;
+ letter-spacing: -0.05rem;
}
h5 {
- font-size: 1rem;
- letter-spacing: -0.05rem;
+ font-size: 1rem;
+ letter-spacing: -0.05rem;
}
h6 {
- font-size: 0.75rem;
+ font-size: 0.75rem;
}
a {
- color: var(--primary-color);
- font-weight: bold;
+ color: var(--primary-color);
+ font-weight: bold;
- &:hover {
- text-decoration: underline wavy;
- -webkit-text-decoration: underline wavy;
- }
+ &:hover {
+ text-decoration: underline wavy;
+ -webkit-text-decoration: underline wavy;
+ }
}
small {
- color: var(--fg-muted-5);
- font-size: 0.8rem;
+ color: var(--fg-muted-5);
+ font-size: 0.8rem;
}
dl {
- padding: 0;
+ padding: 0;
- dt {
- padding: 0;
- margin-top: 1rem;
- font-size: 1rem;
- font-weight: bold;
- }
+ dt {
+ padding: 0;
+ margin-top: 1rem;
+ font-size: 1rem;
+ font-weight: bold;
+ }
- dd {
- padding: 0;
- margin-bottom: 1rem;
- }
+ dd {
+ padding: 0;
+ margin-bottom: 1rem;
+ }
}
hr {
- border: 0;
- border-top: 1px solid var(--fg-muted-2);
- margin: 2rem auto;
- width: 100%;
+ border: 0;
+ border-top: 1px solid var(--fg-muted-2);
+ margin: 2rem auto;
+ width: 100%;
}
.blog-list hr:last-of-type {
- display: none;
+ display: none;
}
blockquote {
- border-left: 0.25rem solid var(--primary-color);
- border-radius: 0.2rem;
- color: var(--fg-muted-5);
- margin: 0;
- padding: 0 0.75rem;
+ border-left: 0.25rem solid var(--primary-color);
+ border-radius: 0.2rem;
+ color: var(--fg-muted-5);
+ margin: 0;
+ padding: 0 0.75rem;
- & & {
- border-radius: 0;
- }
+ & & {
+ border-radius: 0;
+ }
}
abbr {
- cursor: help;
- text-decoration: underline;
- -webkit-text-decoration: underline;
+ cursor: help;
+ text-decoration: underline;
+ -webkit-text-decoration: underline;
}
aside {
- background-color: var(--primary-color-alpha);
- border-radius: var(--rounded-corner);
- box-shadow: var(--edge-highlight);
- float: right;
- margin-inline-start: 1rem;
- padding: 1rem;
- width: 30%;
+ background-color: var(--primary-color-alpha);
+ border-radius: var(--rounded-corner);
+ box-shadow: var(--edge-highlight);
+ float: right;
+ margin-inline-start: 1rem;
+ padding: 1rem;
+ width: 30%;
- @media only screen and (max-width: 720px) {
- & {
- width: 100%;
- float: none;
- margin-inline-start: 0;
- }
- }
+ @media only screen and (max-width: 720px) {
+ & {
+ width: 100%;
+ float: none;
+ margin-inline-start: 0;
+ }
+ }
}
// CODE
pre,
code,
kbd {
- font-family: var(--font-monospace);
+ font-family: var(--font-monospace);
}
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);
- padding: 0.125rem 0.375rem;
+ background-color: var(--fg-muted-2);
+ border-radius: var(--rounded-corner-small);
+ box-shadow: var(--edge-highlight);
+ color: var(--red-fg);
+ padding: 0.125rem 0.375rem;
}
pre {
- border-radius: var(--rounded-corner);
- box-shadow: var(--edge-highlight), var(--shadow);
- line-height: normal; // Unset line height
- margin: 1rem 0 1rem;
- max-width: 100vw;
- overflow: auto;
- padding: 1rem;
+ border-radius: var(--rounded-corner);
+ box-shadow: var(--edge-highlight), var(--shadow);
+ line-height: normal; // Unset line height
+ margin: 1rem 0 1rem;
+ max-width: 100vw;
+ overflow: auto;
+ padding: 1rem;
- table td {
- padding: 0;
- border: none;
- }
+ table td {
+ padding: 0;
+ border: none;
+ }
- // The line number cells
- table td:nth-of-type(1) {
- text-align: center;
- user-select: none;
- }
+ // The line number cells
+ table td:nth-of-type(1) {
+ text-align: center;
+ user-select: none;
+ }
- 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;
- padding: 0; // Unset mark padding
- }
+ 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;
+ padding: 0; // Unset mark padding
+ }
- table {
- width: 100%;
- border-collapse: collapse;
- }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ }
- // The line numbers already provide some kind of left/right padding
- &[data-linenos] {
- padding: 1rem 0;
- }
+ // The line numbers already provide some kind of left/right padding
+ &[data-linenos] {
+ padding: 1rem 0;
+ }
}
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;
- font-size: 0.8rem;
- line-height: normal;
- padding: 0.125rem 0.375rem;
- transition: var(--transition);
+ 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;
+ 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);
- }
+ // 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);
+ }
}
mark {
- background-color: var(--primary-color-alpha);
- border-radius: var(--rounded-corner-small);
- box-shadow: var(--edge-highlight);
- color: var(--primary-color);
- padding: 0.125rem 0.375rem;
+ background-color: var(--primary-color-alpha);
+ border-radius: var(--rounded-corner-small);
+ box-shadow: var(--edge-highlight);
+ color: var(--primary-color);
+ padding: 0.125rem 0.375rem;
}
figcaption {
- display: block;
- text-align: center;
- color: var(--fg-muted-4);
- font-size: 0.8rem;
+ display: block;
+ text-align: center;
+ color: var(--fg-muted-4);
+ font-size: 0.8rem;
}
details {
- background-color: var(--fg-muted-1);
- border-radius: var(--rounded-corner);
- padding: 1rem;
+ background-color: var(--fg-muted-1);
+ border-radius: var(--rounded-corner);
+ padding: 1rem;
- & > summary {
- cursor: pointer;
- }
+ &>summary {
+ cursor: pointer;
+ }
}
// TABLES
table {
- border-collapse: collapse;
- border-radius: var(--rounded-corner);
- box-shadow: var(--edge-highlight);
- overflow: hidden;
- table-layout: fixed;
- width: 100%;
+ border-collapse: collapse;
+ border-radius: var(--rounded-corner);
+ box-shadow: var(--edge-highlight);
+ overflow: hidden;
+ table-layout: fixed;
+ width: 100%;
- th {
- font-weight: bold;
- }
+ th {
+ font-weight: bold;
+ }
- th,
- td {
- padding: 0.5rem 1rem;
- }
+ th,
+ td {
+ padding: 0.5rem 1rem;
+ }
- tr {
- &:nth-child(even) {
- background-color: var(--fg-muted-1);
- }
+ tr {
+ &:nth-child(even) {
+ background-color: var(--fg-muted-1);
+ }
- th {
- background-color: var(--fg-muted-2);
- }
- }
+ th {
+ background-color: var(--fg-muted-2);
+ }
+ }
}
td,
th {
- padding: 0;
+ padding: 0;
}
diff --git a/sass/_media.scss b/sass/_media.scss
index 8eec2a5..01a80a1 100644
--- a/sass/_media.scss
+++ b/sass/_media.scss
@@ -1,36 +1,35 @@
img,
video {
- border-radius: var(--rounded-corner);
- box-shadow: var(--shadow);
- display: block;
- margin: 1rem auto;
- max-width: 100%;
+ border-radius: var(--rounded-corner);
+ box-shadow: var(--shadow);
+ display: block;
+ margin: 1rem auto;
+ max-width: 100%;
- &.full {
- width: 100%;
- }
-
- &.pixels {
- image-rendering: pixelated;
- }
-
- &.transparent {
- border-radius: 0;
- box-shadow: none;
- }
+ &.full {
+ width: 100%;
+ }
+
+ &.pixels {
+ image-rendering: pixelated;
+ }
+
+ &.transparent {
+ border-radius: 0;
+ box-shadow: none;
+ }
}
img {
- transition: var(--transition-longer);
+ transition: var(--transition-longer);
- &:not(.no-hover) {
- cursor: zoom-in;
- }
+ &:not(.no-hover) {
+ cursor: zoom-in;
+ }
- &:not(.no-hover):hover {
- border-radius: 0;
- box-shadow: var(--shadow-raised);
- transform: scale(1.1);
- }
+ &:not(.no-hover):hover {
+ border-radius: 0;
+ box-shadow: var(--shadow-raised);
+ transform: scale(1.1);
+ }
}
-
diff --git a/sass/_nav.scss b/sass/_nav.scss
index 511b080..46067b5 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -1,100 +1,100 @@
#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;
+ -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;
- nav {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- padding: 0.5rem;
+ nav {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ padding: 0.5rem;
- ul {
- display: flex;
- flex-wrap: wrap;
- gap: 0.25rem;
- justify-content: center;
- margin: 0;
- padding: 0;
- }
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.25rem;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+ }
- li {
- list-style: none;
- display: inline-flex;
- }
+ li {
+ list-style: none;
+ display: inline-flex;
+ }
- a {
- border-radius: 999px;
- color: var(--fg-muted-4);
- padding: 0.325rem 0.75rem;
- text-decoration: none;
- transition: var(--transition);
+ a {
+ border-radius: 999px;
+ color: var(--fg-muted-4);
+ padding: 0.325rem 0.75rem;
+ text-decoration: none;
+ transition: var(--transition);
- &:hover {
- background-color: var(--fg-muted-1);
- box-shadow: var(--edge-highlight);
- color: var(--primary-color);
- text-decoration: none;
- }
+ &:hover {
+ background-color: var(--fg-muted-1);
+ box-shadow: var(--edge-highlight);
+ color: var(--primary-color);
+ text-decoration: none;
+ }
- &:active {
- transform: scale(var(--active));
- }
- }
+ &:active {
+ transform: scale(var(--active));
+ }
+ }
- #main-content {
- background: var(--bg-color);
- position: absolute;
- transform: translateY(-200%);
- z-index: 999;
+ #main-content {
+ background: var(--bg-color);
+ position: absolute;
+ transform: translateY(-200%);
+ z-index: 999;
- &:focus {
- transform: translateY(0);
- }
- }
+ &:focus {
+ transform: translateY(0);
+ }
+ }
- #home {
- position: relative;
- margin-right: 0.625rem;
+ #home {
+ position: relative;
+ margin-right: 0.625rem;
- &::after {
- background-color: var(--fg-muted-2);
- content: "";
- height: 110%;
- position: absolute;
- right: -0.5rem;
- top: 0;
- width: 1px;
- }
+ &::after {
+ background-color: var(--fg-muted-2);
+ content: "";
+ height: 110%;
+ position: absolute;
+ right: -0.5rem;
+ top: 0;
+ width: 1px;
+ }
- a {
- font-weight: 800;
- color: var(--fg-muted-5);
+ a {
+ font-weight: 800;
+ color: var(--fg-muted-5);
- &:hover {
- color: var(--primary-color);
- }
- }
- }
+ &:hover {
+ color: var(--primary-color);
+ }
+ }
+ }
- #feed a {
- padding: 0.325rem 0.625rem;
+ #feed a {
+ padding: 0.325rem 0.625rem;
- svg {
- vertical-align: -0.125em;
- }
+ svg {
+ vertical-align: -0.125em;
+ }
- span {
- display: none;
- }
- }
- }
+ span {
+ display: none;
+ }
+ }
+ }
}
diff --git a/sass/_not-found.scss b/sass/_not-found.scss
index 92cf903..8b38109 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;
+ width: 100%;
+ padding-top: 1rem;
+ padding-right: 35%;
+ padding-left: 35%;
+ padding-bottom: 1rem;
}
diff --git a/sass/_post-nav.scss b/sass/_post-nav.scss
index 175e5ee..53a5a96 100644
--- a/sass/_post-nav.scss
+++ b/sass/_post-nav.scss
@@ -1,34 +1,34 @@
#post-nav {
- display: flex;
+ display: flex;
- .post-nav-item {
- width: 50%;
- text-decoration: none;
+ .post-nav-item {
+ width: 50%;
+ text-decoration: none;
- &:hover .post-title {
- color: var(--primary-color);
- }
+ &:hover .post-title {
+ color: var(--primary-color);
+ }
- &:nth-child(2n + 1) {
- padding-left: 0;
- padding-right: 1rem;
- }
+ &:nth-child(2n + 1) {
+ padding-left: 0;
+ padding-right: 1rem;
+ }
- &:nth-child(2n) {
- text-align: right;
- padding-left: 1rem;
- padding-right: 0;
- }
+ &:nth-child(2n) {
+ text-align: right;
+ padding-left: 1rem;
+ padding-right: 0;
+ }
- .nav-arrow {
- font-weight: normal;
- color: var(--fg-muted-5);
- margin-bottom: 0.5rem;
- }
+ .nav-arrow {
+ font-weight: normal;
+ color: var(--fg-muted-5);
+ margin-bottom: 0.5rem;
+ }
- .post-title {
- color: var(--fg-color);
- transition: var(--transition);
- }
- }
+ .post-title {
+ color: var(--fg-color);
+ transition: var(--transition);
+ }
+ }
}
diff --git a/sass/_qrcode.scss b/sass/_qrcode.scss
index 095f7cc..81a2a83 100644
--- a/sass/_qrcode.scss
+++ b/sass/_qrcode.scss
@@ -1,14 +1,14 @@
#qrcode {
- background-color: white;
- float: right;
- height: 155px;
- margin: 3rem 0 0 1rem;
- padding: 15px;
- width: 155px;
+ background-color: white;
+ float: right;
+ height: 155px;
+ margin: 3rem 0 0 1rem;
+ padding: 15px;
+ width: 155px;
- @media only screen and (max-width: 720px) {
- & {
- display: none;
- }
- }
+ @media only screen and (max-width: 720px) {
+ & {
+ display: none;
+ }
+ }
}
diff --git a/sass/_statements.scss b/sass/_statements.scss
index 8d7db93..66823a6 100644
--- a/sass/_statements.scss
+++ b/sass/_statements.scss
@@ -1,35 +1,35 @@
.statement-container {
- margin: 1rem 0 1rem;
- padding: 1rem 1rem 0.5rem 1rem;
- border-radius: var(--rounded-corner);
- box-shadow: var(--edge-highlight);
+ margin: 1rem 0 1rem;
+ padding: 1rem 1rem 0.5rem 1rem;
+ border-radius: var(--rounded-corner);
+ box-shadow: var(--edge-highlight);
- * {
- margin: 0;
- }
+ * {
+ margin: 0;
+ }
- p,
- ul,
- ol {
- margin: 0.5rem 0 0.5rem;
- }
+ p,
+ ul,
+ ol {
+ margin: 0.5rem 0 0.5rem;
+ }
- .big {
- font-size: 1.5rem;
- }
+ .big {
+ font-size: 1.5rem;
+ }
- &.archive {
- background-color: var(--purple-bg);
- color: var(--purple-fg);
- }
+ &.archive {
+ background-color: var(--purple-bg);
+ color: var(--purple-fg);
+ }
- &.disclaimer {
- background-color: var(--red-bg);
- color: var(--red-fg);
- }
+ &.disclaimer {
+ background-color: var(--red-bg);
+ color: var(--red-fg);
+ }
- &.trigger {
- background-color: var(--yellow-bg);
- color: var(--yellow-fg);
- }
+ &.trigger {
+ background-color: var(--yellow-bg);
+ color: var(--yellow-fg);
+ }
}
diff --git a/sass/_tags.scss b/sass/_tags.scss
index 9e8ac48..92be04f 100644
--- a/sass/_tags.scss
+++ b/sass/_tags.scss
@@ -1,35 +1,35 @@
.tags {
- list-style: none;
- padding: 0;
- display: inline-block;
+ list-style: none;
+ padding: 0;
+ display: inline-block;
- li {
- display: inline-block;
- margin: 0 0.25rem 0.5rem 0;
- transition: var(--transition);
+ li {
+ display: inline-block;
+ margin: 0 0.25rem 0.5rem 0;
+ transition: var(--transition);
- &:active {
- transform: scale(var(--active));
- }
- }
+ &:active {
+ transform: scale(var(--active));
+ }
+ }
- .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);
+ .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);
- &:hover {
- color: var(--primary-color);
- background-color: var(--primary-color-alpha);
- text-decoration: none;
- }
+ &:hover {
+ color: var(--primary-color);
+ background-color: var(--primary-color-alpha);
+ text-decoration: none;
+ }
- &::before {
- content: "#";
- }
- }
+ &::before {
+ content: "#";
+ }
+ }
}
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 33adea4..10cf997 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -1,71 +1,62 @@
:root {
- // COLORS
- --bg-color: var(--bg-color-l);
- --fg-color: rgba(0, 0, 0, 0.8);
- --fg-muted-1: rgba(0, 0, 0, 0.05);
- --fg-muted-2: rgba(0, 0, 0, 0.1);
- --fg-muted-3: rgba(0, 0, 0, 0.2);
- --fg-muted-4: rgba(0, 0, 0, 0.5);
- --fg-muted-5: rgba(0, 0, 0, 0.6);
- --nav-bg: rgba(242, 242, 242, 0.7);
- --orange-bg: rgba(255, 120, 0, 0.1);
- --orange-fg: rgb(255, 120, 0);
- --purple-bg: rgba(145, 65, 172, 0.1);
- --purple-fg: rgb(145, 65, 172);
- --red-bg: rgba(224, 27, 36, 0.1);
- --red-fg: rgb(224, 27, 36);
- --yellow-bg: rgba(156, 110, 3, 0.1);
- --yellow-fg: rgb(156, 110, 3);
+ // COLORS
+ --bg-color: var(--bg-color-l);
+ --fg-color: rgba(0, 0, 0, 0.8);
+ --fg-muted-1: rgba(0, 0, 0, 0.05);
+ --fg-muted-2: rgba(0, 0, 0, 0.1);
+ --fg-muted-3: rgba(0, 0, 0, 0.2);
+ --fg-muted-4: rgba(0, 0, 0, 0.5);
+ --fg-muted-5: rgba(0, 0, 0, 0.6);
+ --nav-bg: rgba(242, 242, 242, 0.7);
+ --orange-bg: rgba(255, 120, 0, 0.1);
+ --orange-fg: rgb(255, 120, 0);
+ --purple-bg: rgba(145, 65, 172, 0.1);
+ --purple-fg: rgb(145, 65, 172);
+ --red-bg: rgba(224, 27, 36, 0.1);
+ --red-fg: rgb(224, 27, 36);
+ --yellow-bg: rgba(156, 110, 3, 0.1);
+ --yellow-fg: rgb(156, 110, 3);
- // VARIABLES
- --active: 0.9;
- --bg-color-d: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
- var(--primary-color);
- --bg-color-l: linear-gradient(
- rgba(255, 255, 255, 0.8),
- rgba(255, 255, 255, 0.8)
- ),
- var(--primary-color);
- --blur: saturate(180%) blur(10px);
- --content-width: 720px;
- --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
- --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
- Consolas, "DejaVu Sans Mono", monospace;
- --font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
- "Sitka Small", serif;
- --font-system: system-ui, sans-serif;
- --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);
- --transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
- --transition-long: 800ms;
- --transition-longer: 400ms;
- --transition: 200ms;
+ // VARIABLES
+ --active: 0.9;
+ --bg-color-d: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color);
+ --bg-color-l: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), var(--primary-color);
+ --blur: saturate(180%) blur(10px);
+ --content-width: 720px;
+ --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+ --font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
+ --font-system: system-ui, sans-serif;
+ --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);
+ --transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
+ --transition-long: 800ms;
+ --transition-longer: 400ms;
+ --transition: 200ms;
}
@media (prefers-color-scheme: dark) {
- :root {
- color-scheme: dark;
+ :root {
+ color-scheme: dark;
- // COLORS
- --bg-color: var(--bg-color-d);
- --fg-color: rgb(255, 255, 255);
- --fg-muted-1: rgba(255, 255, 255, 0.05);
- --fg-muted-2: rgba(255, 255, 255, 0.1);
- --fg-muted-3: rgba(255, 255, 255, 0.2);
- --fg-muted-4: rgba(255, 255, 255, 0.5);
- --fg-muted-5: rgba(255, 255, 255, 0.6);
- --nav-bg: rgba(25, 25, 25, 0.7);
- --orange-bg: rgba(255, 190, 111, 0.1);
- --orange-fg: rgb(255, 190, 111);
- --purple-bg: rgba(220, 138, 221, 0.1);
- --purple-fg: rgb(220, 138, 221);
- --red-bg: rgba(226, 97, 81, 0.1);
- --red-fg: rgb(246, 97, 81);
- --yellow-bg: rgba(248, 228, 92, 0.1);
- --yellow-fg: rgb(248, 228, 92);
- }
+ // COLORS
+ --bg-color: var(--bg-color-d);
+ --fg-color: rgb(255, 255, 255);
+ --fg-muted-1: rgba(255, 255, 255, 0.05);
+ --fg-muted-2: rgba(255, 255, 255, 0.1);
+ --fg-muted-3: rgba(255, 255, 255, 0.2);
+ --fg-muted-4: rgba(255, 255, 255, 0.5);
+ --fg-muted-5: rgba(255, 255, 255, 0.6);
+ --nav-bg: rgba(25, 25, 25, 0.7);
+ --orange-bg: rgba(255, 190, 111, 0.1);
+ --orange-fg: rgb(255, 190, 111);
+ --purple-bg: rgba(220, 138, 221, 0.1);
+ --purple-fg: rgb(220, 138, 221);
+ --red-bg: rgba(226, 97, 81, 0.1);
+ --red-fg: rgb(246, 97, 81);
+ --yellow-bg: rgba(248, 228, 92, 0.1);
+ --yellow-fg: rgb(248, 228, 92);
+ }
}
diff --git a/templates/404.html b/templates/404.html
index f094e0b..a6e5e7c 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -2,8 +2,8 @@
{% block content %}
- ![]()
+ ![]()
Page Not Found
@@ -11,7 +11,7 @@
The requested page could not be found. If you feel this is not normal, then you can create an issue on the issue tracker.
{% endblock content %}
diff --git a/templates/base.html b/templates/base.html
index ecc88da..4631cb0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,11 +2,11 @@
{% include "partials/head.html" ignore missing -%}
- {% include "partials/nav.html" ignore missing -%}
-
- {% block custom %}{%- endblock -%}
- {% block content %}{%- endblock -%}
-
- {% include "partials/footer.html" ignore missing -%}
+ {% include "partials/nav.html" ignore missing -%}
+
+ {% block custom %}{%- endblock -%}
+ {% block content %}{%- endblock -%}
+
+ {% include "partials/footer.html" ignore missing -%}
diff --git a/templates/blog.html b/templates/blog.html
index e2b1920..9f971fd 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -4,98 +4,96 @@
{{ page.title }}
{%- if page.date %}
-
-
- {%- if page.authors %}
- •
- Author: {{ page.authors[0] }}
- {%- endif %}
- {%- if page.taxonomies %}
- {%- for name, taxon in page.taxonomies %}
- •
-
- {%- endfor %}
- {%- endif %}
-
+
+
+ {%- if page.authors %}
+ •
+ Author: {{ page.authors[0] }}
+ {%- endif %}
+ {%- if page.taxonomies %}
+ {%- for name, taxon in page.taxonomies %}
+ •
+
+ {%- endfor %}
+ {%- endif %}
+
{%- endif %}
{% if page.extra.archive %}
-
- ⚠ Archived
- {{ page.extra.archive | markdown | safe }}
-
+
+ ⚠ Archived
+ {{ page.extra.archive | markdown | safe }}
+
{% endif %}
{% if page.extra.trigger %}
-
- ⚠ Trigger Warning
- {{ page.extra.trigger | markdown | safe }}
-
+
+ ⚠ Trigger Warning
+ {{ page.extra.trigger | markdown | safe }}
+
{% endif %}
{% if page.extra.disclaimer %}
-
- ⚠ Disclaimer(s)
- {{ page.extra.disclaimer | markdown | safe }}
-
+
+ ⚠ Disclaimer(s)
+ {{ page.extra.disclaimer | markdown | safe }}
+
{% endif %}
{% if page.extra.toc %}
-
- Table of Contents
-
- {{ section.description }}
- Filter by tag -{{ page.description }}
- {%- endif %} - {%- if page.date %} - - - {%- if page.authors %} - • - Author: {{ page.authors[0] }} - {%- endif %} - {%- if page.taxonomies %} - {%- for name, taxon in page.taxonomies %} - • - - {%- endfor %} - {%- endif %} - - {%- endif %} -{{ page.description }}
+ {%- endif %} + {%- if page.date %} + + + {%- if page.authors %} + • + Author: {{ page.authors[0] }} + {%- endif %} + {%- if page.taxonomies %} + {%- for name, taxon in page.taxonomies %} + • + + {%- endfor %} + {%- endif %} + + {%- endif %} +{{ page.description }}
- {%- endif %} - - - {%- if page.taxonomies %} - {%- for name, taxon in page.taxonomies %} - • - - {%- endfor %} - {%- endif %} - - {% endfor %} + {% for page in term.pages %} +{{ page.description }}
+ {%- endif %} + + + {%- if page.taxonomies %} + {%- for name, taxon in page.taxonomies %} + • + + {%- endfor %} + {%- endif %} + + {% endfor %}
Comments
-- You can respond to this post with an account on the - Fediverse (e.g Mastodon, Akkoma, Sharkey or any Mastodon API compatible server). -
-- - Since Fediverse is decentralized, you can use your existing Mastodon API compatible account if you don't have an - account on this server. Known non-private replies are displayed below. - -
+Comments
++ You can respond to this post with an account on the + Fediverse (e.g Mastodon, Akkoma, Sharkey or any Mastodon API compatible server). +
++ + Since Fediverse is decentralized, you can use your existing Mastodon API compatible account if you don't + have an + account on this server. Known non-private replies are displayed below. + +
-- Load comments… -
-