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 { .dialog-buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline;
justify-content: space-between; justify-content: space-between;
align-items: baseline;
margin-top: 6rem; margin-top: 6rem;
} }
.inline-button { .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; display: inline-block;
font-size: 0.9rem;
padding: 0.5rem 1rem;
text-decoration: none;
transition: var(--transition); 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 { &:hover {
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);
@ -27,13 +27,13 @@
} }
&.colored { &.colored {
background-color: transparent;
box-shadow: none; box-shadow: none;
background-color: transparent;
color: var(--primary-color); color: var(--primary-color);
&:hover { &:hover {
background-color: var(--primary-color-alpha);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
} }
} }
} }

62
sass/_comments.scss
View File

@ -12,13 +12,13 @@ section#comments {
.comment { .comment {
display: grid; display: grid;
column-gap: 1rem; grid-template-columns: min-content;
grid-template-areas: grid-template-areas:
"avatar name " "avatar name "
"avatar time " "avatar time "
"avatar post " "avatar post "
"...... interactions"; "...... interactions";
grid-template-columns: min-content; column-gap: 1rem;
justify-items: start; justify-items: start;
&.comment-reply { &.comment-reply {
@ -28,51 +28,51 @@ section#comments {
} }
.avatar-link { .avatar-link {
grid-area: avatar;
height: 4rem;
position: relative; position: relative;
grid-area: avatar;
width: 4rem; width: 4rem;
height: 4rem;
.avatar { .avatar {
all: unset; 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-position: 50%;
background-size: cover; background-size: cover;
border-radius: var(--rounded-corner); background-color: var(--fg-muted-1);
box-shadow: var(--edge-highlight), var(--shadow); width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
transition: var(--transition);
width: 100%;
&:hover { &:hover {
box-shadow: var(--edge-highlight), var(--shadow-raised);
transform: rotate(10deg) scale(1.1); transform: rotate(10deg) scale(1.1);
box-shadow: var(--edge-highlight), var(--shadow-raised);
} }
&:active { &:active {
box-shadow: var(--edge-highlight), var(--shadow);
transform: scale(var(--active)); transform: scale(var(--active));
box-shadow: var(--edge-highlight), var(--shadow);
} }
} }
} }
.author { .author {
align-items: center;
display: flex; display: flex;
font-weight: bold;
gap: 0.25rem;
grid-area: name; grid-area: name;
align-items: center;
gap: 0.25rem;
font-weight: bold;
.instance { .instance {
background-color: var(--fg-muted-1); transition: var(--transition);
border-radius: 999px;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.25rem 0.75rem;
color: var(--fg-color); color: var(--fg-color);
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.25rem 0.75rem;
text-decoration: none; text-decoration: none;
transition: var(--transition);
&:hover { &:hover {
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);
@ -86,18 +86,18 @@ section#comments {
&.op { &.op {
-webkit-backdrop-filter: unset; -webkit-backdrop-filter: unset;
backdrop-filter: unset; backdrop-filter: unset;
background-color: transparent;
box-shadow: none; box-shadow: none;
background-color: transparent;
color: var(--primary-color); color: var(--primary-color);
&:hover { &:hover {
background-color: var(--primary-color-alpha);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
} }
&::before { &::before {
content: "✔";
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
content: "✔";
} }
} }
} }
@ -106,15 +106,15 @@ section#comments {
.emoji { .emoji {
all: unset; all: unset;
display: inline; display: inline;
height: 1.5em;
vertical-align: middle; vertical-align: middle;
width: 1.5em; width: 1.5em;
height: 1.5em;
} }
time { time {
grid-area: time;
color: var(--fg-muted-5); color: var(--fg-muted-5);
font-size: 0.8rem; font-size: 0.8rem;
grid-area: time;
} }
main { main {
@ -131,19 +131,19 @@ section#comments {
.boosts, .boosts,
.faves { .faves {
background-color: transparent;
border-radius: 999px;
display: inline-block; display: inline-block;
font-variant-numeric: tabular-nums;
margin-right: 0.25rem;
padding: 0.25rem 0.75rem;
text-decoration: none;
transition: var(--transition); 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 { svg {
margin-inline-end: 0.25rem;
transition: var(--transition-long);
vertical-align: -0.125em; vertical-align: -0.125em;
transition: var(--transition-long);
margin-inline-end: 0.25rem;
} }
&:hover { &:hover {

42
sass/_crt.scss
View File

@ -1,18 +1,18 @@
.crt { .crt {
margin: 1rem 0 1rem; 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); border-radius: var(--rounded-corner);
background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color); 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 { pre {
color: var(--primary-color); animation: flicker 250ms alternate infinite;
padding: 1rem 1rem; margin: unset;
text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; box-shadow: unset;
// Unset some <pre> stuff // Unset some <pre> stuff
background-color: unset; background-color: unset;
box-shadow: unset; padding: 1rem 1rem;
margin: unset; color: var(--primary-color);
animation: flicker 250ms alternate infinite; text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
@keyframes flicker { @keyframes flicker {
from { from {
@ -47,17 +47,17 @@
overflow: hidden; overflow: hidden;
&::before { &::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; display: block;
height: calc(100% + 0.5rem);
left: 0;
pointer-events: none;
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; left: 0;
z-index: 1; 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 { @keyframes scanlines {
from { from {
@ -75,16 +75,16 @@
} }
&::after { &::after {
display: block;
position: absolute;
bottom: 100%;
left: 0;
animation: scanline 5s linear infinite; animation: scanline 5s linear infinite;
background: linear-gradient(to top, transparent 0%, var(--primary-color-alpha) 10%, transparent 100%); 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%; width: 100%;
height: 8rem;
pointer-events: none;
content: "";
@keyframes scanline { @keyframes scanline {
from { from {

4
sass/_footer.scss
View File

@ -1,8 +1,8 @@
#site-footer { #site-footer {
text-align: center; margin-top: 4rem;
padding: 3rem 0 3rem; padding: 3rem 0 3rem;
font-size: 1rem; font-size: 1rem;
margin-top: 4rem; text-align: center;
details { details {
all: unset; all: unset;

4
sass/_johnvertisement.scss
View File

@ -1,7 +1,7 @@
#johnvertisement { #johnvertisement {
margin: 0 auto;
display: block; display: block;
margin: 0 auto;
border: none;
width: min(728px, 100vw); width: min(728px, 100vw);
height: min(90px, 12.367vw); height: min(90px, 12.367vw);
border: none;
} }

118
sass/_main.scss
View File

@ -5,12 +5,12 @@
} }
html { html {
font-size: 16px; overflow: hidden; // Disable scroll of html, scroll body instead
scroll-behavior: smooth; scroll-behavior: smooth;
// scrollbar-color: var(--primary-color) transparent; // scrollbar-color: var(--primary-color) transparent;
accent-color: var(--primary-color); accent-color: var(--primary-color);
font-size: 16px;
overflow-wrap: break-word; overflow-wrap: break-word;
overflow: hidden; // Disable scroll of html, scroll body instead
// Smaller font size on mobile // Smaller font size on mobile
// @media only screen and (max-width: 480px) { // @media only screen and (max-width: 480px) {
@ -25,29 +25,29 @@ body {
} }
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 // Put footer at the bottom for short pages, such as the 404
display: grid; display: grid;
min-height: 100vh;
grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer 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 // Style text selection to use primary color
::selection { ::selection {
color: var(--fg-color);
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--fg-color);
} }
// Make focused anchor not get covered by nav, // Make focused anchor not get covered by nav,
// and flash it with primary color when jumping to it // and flash it with primary color when jumping to it
:target:not(#main) { :target:not(#main) {
scroll-margin-top: 15vh;
animation: var(--transition-long) 1s highlight-in-out; animation: var(--transition-long) 1s highlight-in-out;
scroll-margin-top: 15vh;
color: var(--primary-color); color: var(--primary-color);
text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px; text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;
@ -64,8 +64,8 @@ body {
// LAYOUT // LAYOUT
.container { .container {
margin-left: auto;
margin-right: auto; margin-right: auto;
margin-left: auto;
width: min(var(--content-width), 90%); width: min(var(--content-width), 90%);
} }
@ -75,11 +75,11 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-serif);
font-weight: lighter;
letter-spacing: -0.05em;
line-height: 1.25;
margin: 3rem 0 1rem; margin: 3rem 0 1rem;
font-weight: lighter;
line-height: 1.25;
font-family: var(--font-serif);
letter-spacing: -0.05em;
.zola-anchor { .zola-anchor {
display: none; display: none;
@ -88,8 +88,8 @@ h6 {
&:hover .zola-anchor { &:hover .zola-anchor {
display: inline-block; display: inline-block;
text-decoration: none;
visibility: visible; visibility: visible;
text-decoration: none;
} }
} }
@ -110,8 +110,8 @@ a {
font-weight: bold; font-weight: bold;
&:hover { &:hover {
text-decoration: underline wavy;
-webkit-text-decoration: underline wavy; -webkit-text-decoration: underline wavy;
text-decoration: underline wavy;
} }
} }
@ -124,22 +124,22 @@ dl {
padding: 0; padding: 0;
dt { dt {
padding: 0;
margin-top: 1rem; margin-top: 1rem;
font-size: 1rem; padding: 0;
font-weight: bold; font-weight: bold;
font-size: 1rem;
} }
dd { dd {
padding: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0;
} }
} }
hr { hr {
margin: 2rem auto;
border: 0; border: 0;
border-top: 1px solid var(--fg-muted-2); border-top: 1px solid var(--fg-muted-2);
margin: 2rem auto;
width: 100%; width: 100%;
} }
@ -148,11 +148,11 @@ hr {
} }
blockquote { blockquote {
margin: 0;
border-left: 0.25rem solid var(--primary-color); border-left: 0.25rem solid var(--primary-color);
border-radius: 0.2rem; border-radius: 0.2rem;
color: var(--fg-muted-5);
margin: 0;
padding: 0 0.75rem; padding: 0 0.75rem;
color: var(--fg-muted-5);
& & { & & {
border-radius: 0; border-radius: 0;
@ -160,24 +160,24 @@ blockquote {
} }
abbr[title] { abbr[title] {
-webkit-text-decoration: underline dotted;
cursor: help; cursor: help;
text-decoration: underline dotted; text-decoration: underline dotted;
-webkit-text-decoration: underline dotted;
} }
aside { aside {
background-color: var(--primary-color-alpha);
border-radius: var(--rounded-corner);
box-shadow: var(--edge-highlight);
float: right; float: right;
margin-inline-start: 1rem; margin-inline-start: 1rem;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--primary-color-alpha);
padding: 1rem; padding: 1rem;
width: 30%; width: 30%;
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
width: 100%;
float: none; float: none;
margin-inline-start: 0; margin-inline-start: 0;
width: 100%;
} }
} }
@ -189,44 +189,44 @@ kbd {
} }
code:not(pre code) { code:not(pre code) {
background-color: var(--fg-muted-2);
border-radius: var(--rounded-corner-small);
box-shadow: var(--edge-highlight); 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; padding: 0.125rem 0.375rem;
color: var(--red-fg);
} }
pre { pre {
border-radius: var(--rounded-corner);
box-shadow: var(--edge-highlight), var(--shadow);
line-height: normal; // Unset line height
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner);
padding: 1rem;
max-width: 100vw; max-width: 100vw;
overflow: auto; overflow: auto;
padding: 1rem; line-height: normal; // Unset line height
table td { table td {
padding: 0;
border: none; border: none;
padding: 0;
} }
// The line number cells // The line number cells
table td:nth-of-type(1) { table td:nth-of-type(1) {
text-align: center;
user-select: none; user-select: none;
text-align: center;
} }
mark { 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; display: block;
border-radius: 0; // Unset code block border radius
background-color: var(--fg-muted-1);
padding: 0; // Unset mark padding padding: 0; // Unset mark padding
color: var(--fg-color); // Unset mark color from primary color to text color
} }
table { table {
width: 100%;
border-collapse: collapse; border-collapse: collapse;
width: 100%;
} }
// The line numbers already provide some kind of left/right padding // The line numbers already provide some kind of left/right padding
@ -236,42 +236,42 @@ pre {
} }
kbd { 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; 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; font-size: 0.8rem;
line-height: normal; line-height: normal;
padding: 0.125rem 0.375rem;
transition: var(--transition);
// Small nice thingy, keys can be pressed! // Small nice thingy, keys can be pressed!
&:active { &:active {
background-color: var(--fg-muted-3);
box-shadow: inset 0 1px 0 var(--fg-muted-2);
transform: translateY(2px); transform: translateY(2px);
box-shadow: inset 0 1px 0 var(--fg-muted-2);
background-color: var(--fg-muted-3);
} }
} }
mark { mark {
background-color: var(--primary-color-alpha);
border-radius: var(--rounded-corner-small);
box-shadow: var(--edge-highlight); 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; padding: 0.125rem 0.375rem;
color: var(--primary-color);
} }
figcaption { figcaption {
display: block; display: block;
text-align: center;
color: var(--fg-muted-4); color: var(--fg-muted-4);
font-size: 0.8rem; font-size: 0.8rem;
text-align: center;
} }
details { details {
background-color: var(--fg-muted-1);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem; padding: 1rem;
&>summary { &>summary {
@ -281,12 +281,12 @@ details {
// TABLES // TABLES
table { table {
border-collapse: collapse;
border-radius: var(--rounded-corner);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
overflow: hidden; border-radius: var(--rounded-corner);
table-layout: fixed; border-collapse: collapse;
width: 100%; width: 100%;
table-layout: fixed;
overflow: hidden;
th { th {
font-weight: bold; font-weight: bold;

10
sass/_media.scss
View File

@ -6,18 +6,18 @@ img {
} }
&:not(.no-hover):hover { &:not(.no-hover):hover {
border-radius: 0;
box-shadow: var(--shadow-raised);
transform: scale(1.1); transform: scale(1.1);
box-shadow: var(--shadow-raised);
border-radius: 0;
} }
} }
img, img,
video { video {
border-radius: var(--rounded-corner);
box-shadow: var(--shadow);
display: block; display: block;
margin: 1rem auto; margin: 1rem auto;
box-shadow: var(--shadow);
border-radius: var(--rounded-corner);
max-width: 100%; max-width: 100%;
&.full { &.full {
@ -29,8 +29,8 @@ video {
} }
&.transparent { &.transparent {
border-radius: 0;
box-shadow: none; box-shadow: none;
border-radius: 0;
&:hover { &:hover {
box-shadow: none; box-shadow: none;

38
sass/_nav.scss
View File

@ -1,14 +1,14 @@
#site-nav { #site-nav {
-webkit-backdrop-filter: var(--blur); -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; position: sticky;
top: 1rem; top: 1rem;
z-index: 999; 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 { nav {
display: flex; display: flex;
@ -20,27 +20,27 @@
ul { ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem;
justify-content: center; justify-content: center;
gap: 0.25rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
li { li {
list-style: none;
display: inline-flex; display: inline-flex;
list-style: none;
} }
a { a {
border-radius: 999px;
color: var(--fg-muted-4);
padding: 0.325rem 0.75rem;
text-decoration: none;
transition: var(--transition); transition: var(--transition);
border-radius: 999px;
padding: 0.325rem 0.75rem;
color: var(--fg-muted-4);
text-decoration: none;
&:hover { &:hover {
background-color: var(--fg-muted-1);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
background-color: var(--fg-muted-1);
color: var(--primary-color); color: var(--primary-color);
text-decoration: none; text-decoration: none;
} }
@ -51,10 +51,10 @@
} }
#main-content { #main-content {
background: var(--bg-color);
position: absolute; position: absolute;
transform: translateY(-300%); transform: translateY(-300%);
z-index: 999; z-index: 999;
background: var(--bg-color);
&:focus { &:focus {
transform: translateY(0); transform: translateY(0);
@ -66,18 +66,18 @@
margin-right: 0.625rem; margin-right: 0.625rem;
&::after { &::after {
background-color: var(--fg-muted-2);
content: "";
height: 110%;
position: absolute; position: absolute;
right: -0.5rem;
top: 0; top: 0;
right: -0.5rem;
background-color: var(--fg-muted-2);
width: 1px; width: 1px;
height: 110%;
content: "";
} }
a { a {
font-weight: 800;
color: var(--fg-muted-5); color: var(--fg-muted-5);
font-weight: 800;
&:hover { &:hover {
color: var(--primary-color); color: var(--primary-color);

4
sass/_not-found.scss
View File

@ -1,7 +1,7 @@
#not-found { #not-found {
width: 100%;
padding-top: 1rem; padding-top: 1rem;
padding-right: 35%; padding-right: 35%;
padding-left: 35%;
padding-bottom: 1rem; padding-bottom: 1rem;
padding-left: 35%;
width: 100%;
} }

12
sass/_post-nav.scss
View File

@ -10,25 +10,25 @@
} }
&:nth-child(2n + 1) { &:nth-child(2n + 1) {
padding-left: 0;
padding-right: 1rem; padding-right: 1rem;
padding-left: 0;
} }
&:nth-child(2n) { &:nth-child(2n) {
text-align: right;
padding-left: 1rem;
padding-right: 0; padding-right: 0;
padding-left: 1rem;
text-align: right;
} }
.nav-arrow { .nav-arrow {
font-weight: normal;
color: var(--fg-muted-5);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--fg-muted-5);
font-weight: normal;
} }
.post-title { .post-title {
color: var(--fg-color);
transition: var(--transition); transition: var(--transition);
color: var(--fg-color);
} }
} }
} }

4
sass/_qrcode.scss
View File

@ -1,10 +1,10 @@
#qrcode { #qrcode {
background-color: white;
float: right; float: right;
height: 150px;
margin: 3rem 0 0 1rem; margin: 3rem 0 0 1rem;
background-color: white;
padding: 12.5px; padding: 12.5px;
width: 150px; width: 150px;
height: 150px;
@media only screen and (max-width: 720px) { @media only screen and (max-width: 720px) {
display: none; display: none;

4
sass/_statements.scss
View File

@ -1,8 +1,8 @@
.statement-container { .statement-container {
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
padding: 1rem 1rem 0.5rem 1rem;
border-radius: var(--rounded-corner);
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
padding: 1rem 1rem 0.5rem 1rem;
* { * {
margin: 0; margin: 0;

20
sass/_tags.scss
View File

@ -1,12 +1,12 @@
.tags { .tags {
list-style: none;
padding: 0;
display: inline-block; display: inline-block;
padding: 0;
list-style: none;
li { li {
display: inline-block; display: inline-block;
margin: 0 0.25rem 0.5rem 0;
transition: var(--transition); transition: var(--transition);
margin: 0 0.25rem 0.5rem 0;
&:active { &:active {
transform: scale(var(--active)); transform: scale(var(--active));
@ -14,17 +14,17 @@
} }
.tag { .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); 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 { &:hover {
color: var(--primary-color);
background-color: var(--primary-color-alpha); background-color: var(--primary-color-alpha);
color: var(--primary-color);
text-decoration: none; text-decoration: none;
} }