hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sort styles using "Sort CSS" VSCode extension

Browse Source
This commit is contained in:
daudix
2024-04-03 02:19:54 +03:00
parent c0a43b83f9
commit 0fa24c2d7c
13 changed files with 171 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
sass/_buttons.scss
View File

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

62
sass/_comments.scss
View File

@ -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 {

42
sass/_crt.scss
View File

@ -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 <pre> 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 {

4
sass/_footer.scss
View File

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

4
sass/_johnvertisement.scss
View File

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

118
sass/_main.scss
View File

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

10
sass/_media.scss
View File

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

38
sass/_nav.scss
View File

@ -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);

4
sass/_not-found.scss
View File

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

12
sass/_post-nav.scss
View File

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

4
sass/_qrcode.scss
View File

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

4
sass/_statements.scss
View File

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

20
sass/_tags.scss
View File

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