🎨 refactor: turn macros into partials & sort CSS (#146)
This commit is contained in:
Óscar
@@ -2,20 +2,20 @@
|
||||
margin-top: 4vmin;
|
||||
|
||||
.listing-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.listing-item {
|
||||
padding: 0.2rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.2rem 1rem;
|
||||
|
||||
.post-time {
|
||||
padding-left: 1vmin;
|
||||
min-width: 5rem;
|
||||
text-align: left;
|
||||
padding-left: 1vmin;
|
||||
|
||||
.date {
|
||||
color: var(--meta-color);
|
||||
@@ -25,9 +25,9 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
padding: 12px 0;
|
||||
margin-top: 4vmin;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
min-height: 100px;
|
||||
background: var(--bg-2);
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
|
||||
background: var(--bg-2);
|
||||
min-height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -28,8 +28,8 @@
|
||||
}
|
||||
|
||||
.card-image-placeholder {
|
||||
height: 12px;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
|
||||
@@ -2,21 +2,21 @@ code {
|
||||
border-radius: 5px;
|
||||
background-color: var(--bg-1);
|
||||
padding: 0.1em 0.2em;
|
||||
font-family: var(--code-font);
|
||||
font-size: 0.9rem;
|
||||
font-family: var(--code-font);
|
||||
|
||||
mark {
|
||||
display: block;
|
||||
filter: brightness(110%);
|
||||
background-color: var(--codeblock-highlight);
|
||||
color: inherit;
|
||||
filter: brightness(110%);
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin: 0rem;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0rem;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
td,
|
||||
@@ -27,8 +27,8 @@ code {
|
||||
}
|
||||
|
||||
tbody td:first-child {
|
||||
user-select: none;
|
||||
width: 2rem;
|
||||
user-select: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -43,63 +43,63 @@ a:hover code {
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
overflow-x: auto;
|
||||
padding: 2.4rem 1rem 1rem;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
padding: 2.4rem 1rem 1rem;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
line-height: 1.4;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
font-size: 0.8rem; // Fits ~77 characters.
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
padding: 0rem;
|
||||
border: 0rem;
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
padding: 0rem;
|
||||
overflow-x: auto;
|
||||
color: inherit;
|
||||
font-size: 0.8rem; // Fits ~77 characters.
|
||||
white-space: pre;
|
||||
|
||||
&::before {
|
||||
content: attr(data-lang);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--hover-color);
|
||||
padding: 0.3rem;
|
||||
padding-left: 1rem;
|
||||
width: calc(100% - 1.3rem);
|
||||
height: 0.9rem;
|
||||
content: attr(data-lang);
|
||||
color: var(--hover-color);
|
||||
font-size: 0.65rem;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-code {
|
||||
z-index: 1;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M217.002-67.694q-37.732 0-64.02-26.288-26.287-26.287-26.287-64.019V-707.69h77.999v549.689q0 4.615 3.846 8.462 3.846 3.846 8.462 3.846h451.689v77.999H217.002Zm175.999-175.999q-37.733 0-64.02-26.287T302.694-334v-463.383q0-37.732 26.287-64.02 26.287-26.287 64.02-26.287h365.383q37.732 0 64.019 26.287 26.288 26.288 26.288 64.02V-334q0 37.733-26.288 64.02-26.287 26.287-64.019 26.287H393.001Zm0-77.998h365.383q4.615 0 8.462-3.847 3.846-3.846 3.846-8.462v-463.383q0-4.616-3.846-8.462-3.847-3.846-8.462-3.846H393.001q-4.616 0-8.462 3.846-3.847 3.846-3.847 8.462V-334q0 4.616 3.847 8.462 3.846 3.847 8.462 3.847Zm-12.309 0v-488V-321.691Z'/%3E%3C/svg%3E");
|
||||
background: var(--hover-color);
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
height: 0.9rem;
|
||||
width: 0.9rem;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
right: 0.7rem;
|
||||
top: 0.3rem;
|
||||
right: 0.7rem;
|
||||
align-self: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
background: var(--hover-color);
|
||||
background-size: contain;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copy-code.checked {
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M395-253 194-455l83-83 118 117 288-287 83 84-371 371Z'/%3E%3C/svg%3E");
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.copy-code.error {
|
||||
|
||||
@@ -3,30 +3,30 @@
|
||||
}
|
||||
|
||||
.comments {
|
||||
margin-top: 2rem;
|
||||
border-top: var(--divider-color) solid 0.5px;
|
||||
border-bottom: var(--divider-color) solid 0.5px;
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
border: none;
|
||||
aspect-ratio: inherit;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.load-comments-button {
|
||||
display: block;
|
||||
font-family: var(--sans-serif-font);
|
||||
cursor: pointer;
|
||||
margin: 0.5em auto;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0.5em 1em;
|
||||
color: inherit;
|
||||
font-size: 0.95rem;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.5em 1em;
|
||||
margin: 0.5em auto;
|
||||
cursor: pointer;
|
||||
font-family: var(--sans-serif-font);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,10 +17,10 @@ footer nav {
|
||||
}
|
||||
|
||||
.socials {
|
||||
justify-content: center;
|
||||
flex-grow: 0;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
|
||||
svg {
|
||||
@@ -33,18 +33,18 @@ footer nav {
|
||||
}
|
||||
|
||||
.social {
|
||||
background-image: unset;
|
||||
padding: 0.5vmin;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: unset;
|
||||
padding: 0.5vmin;
|
||||
}
|
||||
|
||||
.social > img {
|
||||
color: #000000;
|
||||
aspect-ratio: 1/1;
|
||||
width: 1.5rem;
|
||||
height: auto;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.social {
|
||||
@@ -70,8 +70,8 @@ footer nav {
|
||||
}
|
||||
|
||||
.credits {
|
||||
font-size: 0.88rem;
|
||||
color: var(--meta-color);
|
||||
font-size: 0.88rem;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
.header-anchor {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 1.9rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
margin-left: -2rem;
|
||||
padding-right: 0.3rem;
|
||||
opacity: 0;
|
||||
user-select: none;
|
||||
width: 1.9rem;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: none;
|
||||
@@ -17,9 +17,9 @@
|
||||
|
||||
.link-icon {
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.78 3.653a3.936 3.936 0 1 1 5.567 5.567l-3.627 3.627a3.936 3.936 0 0 1-5.88-.353.75.75 0 0 0-1.18.928 5.436 5.436 0 0 0 8.12.486l3.628-3.628a5.436 5.436 0 1 0-7.688-7.688l-3 3a.75.75 0 0 0 1.06 1.061l3-3Z'%3E%3C/path%3E%3Cpath d='M7.28 11.153a3.936 3.936 0 0 1 5.88.353.75.75 0 0 0 1.18-.928 5.436 5.436 0 0 0-8.12-.486L2.592 13.72a5.436 5.436 0 1 0 7.688 7.688l3-3a.75.75 0 1 0-1.06-1.06l-3 3a3.936 3.936 0 0 1-5.567-5.568l3.627-3.627Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
background: var(--text-color);
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
background: var(--text-color);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
header {
|
||||
font-family: 'Inter Subset', var(--sans-serif-font);
|
||||
width: 100%;
|
||||
font-family: 'Inter Subset', var(--sans-serif-font);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin: 4rem 0px 1rem 0px;
|
||||
font-size: 3em;
|
||||
line-height: 100%;
|
||||
font-family: var(--header-font);
|
||||
margin: 4rem 0px 1rem 0px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
max-width: var(--max-layout-width);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1em 0;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
padding: 1em 0;
|
||||
max-width: var(--max-layout-width);
|
||||
}
|
||||
|
||||
.nav-navs {
|
||||
@@ -28,76 +28,76 @@ header {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
font-size: 1em;
|
||||
font-weight: 340;
|
||||
text-decoration: none;
|
||||
justify-content: right;
|
||||
color: var(--text-color);
|
||||
padding: 0.66rem;
|
||||
color: var(--text-color);
|
||||
font-weight: 340;
|
||||
font-size: 1em;
|
||||
line-height: 2.5;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 1.7em;
|
||||
font-weight: 450;
|
||||
padding: 0.12rem;
|
||||
margin-left: -0.12rem;
|
||||
border: none;
|
||||
padding: 0.12rem;
|
||||
color: var(--primary-color);
|
||||
font-weight: 450;
|
||||
font-size: 1.7em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: var(--meta-color);
|
||||
letter-spacing: -0.4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
padding: 0;
|
||||
padding-top: 0.7vmin;
|
||||
padding-bottom: 3vmin;
|
||||
color: var(--meta-color);
|
||||
font-weight: 300;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4rem;
|
||||
letter-spacing: -0.4px;
|
||||
|
||||
a {
|
||||
color: var(--meta-color);
|
||||
text-decoration-color: none;
|
||||
font-weight: inherit;
|
||||
text-decoration: none;
|
||||
text-decoration-color: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
display: inline;
|
||||
font-family: var(--sans-serif-font);
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.language-switcher {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.language-switcher-icon {
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960'><path d='M480 976q-84 0-157-31.5T196 859q-54-54-85-127.5T80 574q0-84 31-156.5T196 291q54-54 127-84.5T480 176q84 0 157 30.5T764 291q54 54 85 126.5T880 574q0 84-31 157.5T764 859q-54 54-127 85.5T480 976Zm0-58q35-36 58.5-82.5T577 725H384q14 60 37.5 108t58.5 85Zm-85-12q-25-38-43-82t-30-99H172q38 71 88 111.5T395 906Zm171-1q72-23 129.5-69T788 725H639q-13 54-30.5 98T566 905ZM152 665h159q-3-27-3.5-48.5T307 574q0-25 1-44.5t4-43.5H152q-7 24-9.5 43t-2.5 45q0 26 2.5 46.5T152 665Zm221 0h215q4-31 5-50.5t1-40.5q0-20-1-38.5t-5-49.5H373q-4 31-5 49.5t-1 38.5q0 21 1 40.5t5 50.5Zm275 0h160q7-24 9.5-44.5T820 574q0-26-2.5-45t-9.5-43H649q3 35 4 53.5t1 34.5q0 22-1.5 41.5T648 665Zm-10-239h150q-33-69-90.5-115T565 246q25 37 42.5 80T638 426Zm-254 0h194q-11-53-37-102.5T480 236q-32 27-54 71t-42 119Zm-212 0h151q11-54 28-96.5t43-82.5q-75 19-131 64t-91 115Z'/%3E%3C/svg%3E%0A");
|
||||
background: var(--text-color);
|
||||
position: relative;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
background: var(--text-color);
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@@ -110,13 +110,13 @@ header {
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
background: var(--background-color);
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
@@ -141,16 +141,16 @@ header {
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.nav-navs {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin-top: 0.8rem;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.image-hover-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.image-default {
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
}
|
||||
|
||||
.image-toggled {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.image-toggler-toggle {
|
||||
@@ -14,11 +14,11 @@
|
||||
}
|
||||
|
||||
.image-toggler-toggle:checked ~ .image-label .image-toggled {
|
||||
visibility: visible;
|
||||
position: static;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.image-toggler-toggle:checked ~ .image-label .image-default {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
figure {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-family: var(--serif-font);
|
||||
font-size: 0.72rem;
|
||||
color: var(--meta-color);
|
||||
font-size: 0.72rem;
|
||||
font-family: var(--serif-font);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -21,9 +21,9 @@ img {
|
||||
}
|
||||
|
||||
figure h4 {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
figure h4::before {
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
.draft-label {
|
||||
color: var(--hover-color);
|
||||
margin-right: 0.3rem;
|
||||
background-color: var(--primary-color);
|
||||
padding: 2px 4px;
|
||||
margin-right: 0.3rem;
|
||||
color: var(--hover-color);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: var(--text-color-high-contrast);
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 550;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
display: block;
|
||||
margin-right: 15%;
|
||||
margin-bottom: 3vmin;
|
||||
margin-left: 15%;
|
||||
border: none;
|
||||
aspect-ratio: 16/9;
|
||||
width: 100vmin;
|
||||
max-width: 70%;
|
||||
margin-left: 15%;
|
||||
margin-right: 15%;
|
||||
margin-bottom: 3vmin;
|
||||
}
|
||||
|
||||
ul {
|
||||
@@ -61,16 +61,16 @@ ul {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 0.3rem solid var(--primary-color);
|
||||
margin: 0;
|
||||
border-left: 0.3rem solid var(--primary-color);
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: inherit;
|
||||
font-weight: inherit;
|
||||
position: relative;
|
||||
color: var(--primary-color);
|
||||
font-weight: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@@ -79,15 +79,15 @@ a:hover {
|
||||
}
|
||||
|
||||
a:not(.no-hover-padding)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -0.15em;
|
||||
bottom: 0;
|
||||
left: -0.15em;
|
||||
right: -0.15em;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
background-color: var(--primary-color);
|
||||
opacity: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
a:not(.no-hover-padding):hover::before {
|
||||
@@ -102,24 +102,24 @@ a:not(.no-hover-padding):hover::before {
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
margin: 3.5rem 0 1rem;
|
||||
border: none;
|
||||
background-color: var(--divider-color);
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.footnote-reference {
|
||||
font-family: var(--serif-font);
|
||||
font-size: 0.7rem;
|
||||
font-family: var(--serif-font);
|
||||
}
|
||||
|
||||
.footnote-definition {
|
||||
margin-bottom: 0.6rem;
|
||||
|
||||
sup {
|
||||
font-family: var(--serif-font);
|
||||
font-size: 0.75rem;
|
||||
margin-right: 0.15rem;
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--serif-font);
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -128,21 +128,21 @@ hr {
|
||||
}
|
||||
|
||||
.footnote-backlink {
|
||||
font-size: 0.8rem;
|
||||
margin-left: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.references p {
|
||||
text-indent: -2.4rem;
|
||||
margin-left: 2.4rem;
|
||||
text-indent: -2.4rem;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
border: 1px solid var(--primary-color);
|
||||
border-left-width: 0.3rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-left-width: 0.3rem;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -7,14 +7,14 @@
|
||||
}
|
||||
|
||||
.quote-label {
|
||||
font-family: var(--sans-serif-font);
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
color: var(--meta-color);
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--sans-serif-font);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quote-toggle:not(:checked) ~ .quote .translated .quote-label-original,
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 2rem;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
.page-item .disabled {
|
||||
opacity: 0.5;
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
font-size: 0.9rem;
|
||||
color: var(--meta-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
}
|
||||
|
||||
.bloglist-row {
|
||||
background-color: var(--navbar-color);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: var(--navbar-color);
|
||||
padding: 2.5rem 0;
|
||||
|
||||
.date {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 300;
|
||||
color: var(--meta-color);
|
||||
width: 13.5rem;
|
||||
color: var(--meta-color);
|
||||
font-weight: 300;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.bloglist-tags {
|
||||
@@ -21,8 +21,8 @@
|
||||
|
||||
.tag {
|
||||
margin-right: 0.7rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
@@ -33,8 +33,8 @@
|
||||
|
||||
.bloglist-title {
|
||||
margin: 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
|
||||
a {
|
||||
color: var(--text-color-high-contrast);
|
||||
@@ -49,16 +49,16 @@
|
||||
.description p {
|
||||
margin: 0.5rem 0 1rem;
|
||||
color: var(--text-color);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 250;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.all-posts {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 350;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
}
|
||||
|
||||
.spoiler-content {
|
||||
cursor: help; // Indicate interactive element.
|
||||
display: inline-block; // Allow content to only take up its own width.
|
||||
cursor: help; // Indicate interactive element.
|
||||
|
||||
.spoiler-hidden {
|
||||
filter: blur(6px);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
filter: blur(6px);
|
||||
user-select: none;
|
||||
|
||||
a {
|
||||
pointer-events: none; // Make links unclickable.
|
||||
@@ -32,9 +32,9 @@
|
||||
|
||||
.spoiler-container.fixed-blur {
|
||||
.spoiler-content:before {
|
||||
content: 'SPOILER'; // Display the word "SPOILER".
|
||||
filter: blur(6px);
|
||||
display: inline-block; // Block display within the inline flow.
|
||||
filter: blur(6px);
|
||||
content: 'SPOILER'; // Display the word "SPOILER".
|
||||
}
|
||||
|
||||
.spoiler-content .spoiler-hidden {
|
||||
|
||||
@@ -3,290 +3,290 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
--rosewater: #f2d5cf;
|
||||
--flamingo: #eebebe;
|
||||
--pink: #f4b8e4;
|
||||
--mauve: #ca9ee6;
|
||||
--red: #e78284;
|
||||
--maroon: #ea999c;
|
||||
--peach: #ef9f76;
|
||||
--yellow: #e5c890;
|
||||
--green: #a6d189;
|
||||
--teal: #81c8be;
|
||||
--sky: #99d1db;
|
||||
--blue: #8caaee;
|
||||
--lavender: #b4befe;
|
||||
--text: #cdd6f4;
|
||||
--overlay0: #737994;
|
||||
--rosewater: #f2d5cf;
|
||||
--flamingo: #eebebe;
|
||||
--pink: #f4b8e4;
|
||||
--mauve: #ca9ee6;
|
||||
--red: #e78284;
|
||||
--maroon: #ea999c;
|
||||
--peach: #ef9f76;
|
||||
--yellow: #e5c890;
|
||||
--green: #a6d189;
|
||||
--teal: #81c8be;
|
||||
--sky: #99d1db;
|
||||
--blue: #8caaee;
|
||||
--lavender: #b4befe;
|
||||
--text: #cdd6f4;
|
||||
--overlay0: #737994;
|
||||
}
|
||||
|
||||
.z-code {
|
||||
color: var(--text);
|
||||
background-color: var(--codeblock-bg);
|
||||
background-color: var(--codeblock-bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.z-comment {
|
||||
color: var(--overlay0);
|
||||
font-style: italic;
|
||||
color: var(--overlay0);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.z-string {
|
||||
color: var(--green);
|
||||
color: var(--green);
|
||||
|
||||
&.z-regexp {
|
||||
color: var(--sky);
|
||||
}
|
||||
&.z-regexp {
|
||||
color: var(--sky);
|
||||
}
|
||||
}
|
||||
|
||||
.z-constant.z-numeric,
|
||||
.z-string.z-regexp {
|
||||
color: var(--sky);
|
||||
color: var(--sky);
|
||||
}
|
||||
|
||||
.z-constant {
|
||||
&.z-character.z-escape {
|
||||
color: var(--sky);
|
||||
}
|
||||
&.z-character.z-escape {
|
||||
color: var(--sky);
|
||||
}
|
||||
|
||||
&.z-language {
|
||||
color: var(--lavender);
|
||||
}
|
||||
&.z-language {
|
||||
color: var(--lavender);
|
||||
}
|
||||
}
|
||||
|
||||
.z-support.z-function.z-builtin.z-variable.z-other.z-constant {
|
||||
color: var(--sky);
|
||||
color: var(--sky);
|
||||
}
|
||||
|
||||
.z-keyword {
|
||||
color: var(--red);
|
||||
color: var(--red);
|
||||
|
||||
&.z-control {
|
||||
&.z-control {
|
||||
|
||||
&.z-loop,
|
||||
&.z-conditional,
|
||||
&.z-c + + {
|
||||
color: var(--mauve);
|
||||
&.z-loop,
|
||||
&.z-conditional,
|
||||
&.z-c + + {
|
||||
color: var(--mauve);
|
||||
}
|
||||
|
||||
&.z-return,
|
||||
&.z-flow.z-return {
|
||||
color: var(--pink);
|
||||
}
|
||||
}
|
||||
|
||||
&.z-return,
|
||||
&.z-flow.z-return {
|
||||
color: var(--pink);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.z-support.z-type.z-exception {
|
||||
color: var(--sky);
|
||||
color: var(--sky);
|
||||
}
|
||||
|
||||
.z-keyword.z-operator {
|
||||
color: var(--teal);
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.z-punctuation {
|
||||
&.z-accessor {
|
||||
color: var(--teal);
|
||||
}
|
||||
&.z-accessor {
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
&.z-section {
|
||||
color: var(--text);
|
||||
}
|
||||
&.z-section {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.z-keyword.z-control.z-import.z-include {
|
||||
color: var(--peach);
|
||||
color: var(--peach);
|
||||
}
|
||||
|
||||
.z-storage {
|
||||
color: var(--red);
|
||||
|
||||
&.z-type {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
&.z-modifier {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
&.z-type {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
&.z-modifier {
|
||||
color: var(--red);
|
||||
}
|
||||
}
|
||||
|
||||
.z-entity.z-name.z-namespace,
|
||||
.z-meta.z-path,
|
||||
.z-storage.z-type.z-class {
|
||||
color: var(--rosewater);
|
||||
color: var(--rosewater);
|
||||
}
|
||||
|
||||
.z-entity.z-name.z-label {
|
||||
color: var(--blue);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.z-keyword.z-declaration.z-class {
|
||||
color: var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.z-entity.z-name.z-class,
|
||||
.z-meta.z-toc-list.z-full-identifier {
|
||||
color: var(--teal);
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
.z-entity {
|
||||
&.z-other.z-inherited-class {
|
||||
color: var(--teal);
|
||||
}
|
||||
&.z-other.z-inherited-class {
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
&.z-name.z-function {
|
||||
color: var(--blue);
|
||||
font-style: italic;
|
||||
}
|
||||
&.z-name.z-function {
|
||||
color: var(--blue);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.z-variable.z-function {
|
||||
color: var(--blue);
|
||||
font-style: italic;
|
||||
color: var(--blue);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.z-entity.z-name.z-function.z-preprocessor,
|
||||
.z-keyword.z-control.z-import {
|
||||
color: var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.z-entity.z-name.z-function {
|
||||
|
||||
&.z-constructor,
|
||||
&.z-destructor {
|
||||
color: var(--lavender);
|
||||
}
|
||||
&.z-constructor,
|
||||
&.z-destructor {
|
||||
color: var(--lavender);
|
||||
}
|
||||
}
|
||||
|
||||
.z-variable.z-parameter.z-function {
|
||||
color: var(--rosewater);
|
||||
color: var(--rosewater);
|
||||
}
|
||||
|
||||
.z-keyword.z-declaration.z-function {
|
||||
color: var(--maroon);
|
||||
color: var(--maroon);
|
||||
}
|
||||
|
||||
.z-support {
|
||||
&.z-function {
|
||||
color: var(--teal);
|
||||
}
|
||||
&.z-function {
|
||||
color: var(--teal);
|
||||
}
|
||||
|
||||
&.z-constant {
|
||||
color: var(--blue);
|
||||
}
|
||||
&.z-constant {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
&.z-type,
|
||||
&.z-class {
|
||||
color: var(--blue);
|
||||
font-style: italic;
|
||||
}
|
||||
&.z-type,
|
||||
&.z-class {
|
||||
color: var(--blue);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.z-variable {
|
||||
&.z-function {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
&.z-parameter {
|
||||
color: var(--rosewater);
|
||||
}
|
||||
|
||||
&.z-other {
|
||||
color: var(--text);
|
||||
|
||||
&.z-member {
|
||||
color: var(--rosewater);
|
||||
&.z-function {
|
||||
color: var(--blue);
|
||||
}
|
||||
}
|
||||
|
||||
&.z-language {
|
||||
color: var(--peach);
|
||||
}
|
||||
&.z-parameter {
|
||||
color: var(--rosewater);
|
||||
}
|
||||
|
||||
&.z-other {
|
||||
color: var(--text);
|
||||
|
||||
&.z-member {
|
||||
color: var(--rosewater);
|
||||
}
|
||||
}
|
||||
|
||||
&.z-language {
|
||||
color: var(--peach);
|
||||
}
|
||||
}
|
||||
|
||||
.z-entity {
|
||||
&.z-name.z-tag {
|
||||
color: var(--sky);
|
||||
}
|
||||
&.z-name.z-tag {
|
||||
color: var(--sky);
|
||||
}
|
||||
|
||||
&.z-other.z-attribute-name {
|
||||
color: var(--mauve);
|
||||
font-style: italic;
|
||||
}
|
||||
&.z-other.z-attribute-name {
|
||||
color: var(--mauve);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.z-punctuation.z-definition.z-tag {
|
||||
color: var(--maroon);
|
||||
color: var(--maroon);
|
||||
}
|
||||
|
||||
.z-markup.z-underline.z-link.z-markdown {
|
||||
color: var(--rosewater);
|
||||
font-style: underline;
|
||||
font-style: italic;
|
||||
color: var(--rosewater);
|
||||
font-style: underline;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.z-comment.z-block.z-markdown,
|
||||
.z-meta.z-code-fence {
|
||||
color: var(--peach);
|
||||
font-style: italic;
|
||||
color: var(--peach);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.z-markup.z-raw {
|
||||
|
||||
&.z-code-fence,
|
||||
&.z-inline {
|
||||
color: var(--peach);
|
||||
font-style: italic;
|
||||
}
|
||||
&.z-code-fence,
|
||||
&.z-inline {
|
||||
color: var(--peach);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.z-punctuation.z-definition.z-heading,
|
||||
.z-entity.z-name.z-section {
|
||||
color: var(--blue);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.z-markup {
|
||||
&.z-italic {
|
||||
color: var(--maroon);
|
||||
font-style: italic;
|
||||
}
|
||||
&.z-italic {
|
||||
color: var(--maroon);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.z-bold {
|
||||
color: var(--maroon);
|
||||
font-weight: bold;
|
||||
}
|
||||
&.z-bold {
|
||||
color: var(--maroon);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.z-constant.z-character.z-escape,
|
||||
.z-source.z-shell.z-bash .z-meta.z-function.z-shell .z-meta.z-compound.z-shell .z-meta.z-function-call.z-identifier.z-shell {
|
||||
color: var(--pink);
|
||||
color: var(--pink);
|
||||
}
|
||||
|
||||
.z-variable.z-language.z-shell {
|
||||
color: var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.z-source.z-lua .z-meta.z-function.z-lua .z-meta.z-block.z-lua .z-meta.z-mapping {
|
||||
&.z-value.z-lua .z-meta.z-mapping.z-key.z-lua .z-string.z-unquoted.z-key.z-lua {
|
||||
color: var(--lavender);
|
||||
}
|
||||
&.z-value.z-lua .z-meta.z-mapping.z-key.z-lua .z-string.z-unquoted.z-key.z-lua {
|
||||
color: var(--lavender);
|
||||
}
|
||||
|
||||
&.z-key.z-lua .z-string.z-unquoted.z-key.z-lua {
|
||||
color: var(--flamingo);
|
||||
}
|
||||
&.z-key.z-lua .z-string.z-unquoted.z-key.z-lua {
|
||||
color: var(--flamingo);
|
||||
}
|
||||
}
|
||||
|
||||
.z-entity.z-name.z-constant.z-java {
|
||||
color: var(--peach);
|
||||
color: var(--peach);
|
||||
}
|
||||
|
||||
.z-support {
|
||||
&.z-type.z-property-name.z-css {
|
||||
color: var(--flamingo);
|
||||
}
|
||||
&.z-type.z-property-name.z-css {
|
||||
color: var(--flamingo);
|
||||
}
|
||||
|
||||
&.z-constant.z-property-value.z-css {
|
||||
color: var(--text);
|
||||
}
|
||||
&.z-constant.z-property-value.z-css {
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.z-constant.z-numeric.z-suffix.z-css,
|
||||
@@ -294,49 +294,49 @@
|
||||
.z-variable.z-other.z-custom-property.z-name.z-css,
|
||||
.z-support.z-type.z-custom-property.z-name.z-css,
|
||||
.z-punctuation.z-definition.z-custom-property.z-css {
|
||||
color: var(--peach);
|
||||
color: var(--peach);
|
||||
}
|
||||
|
||||
.z-entity.z-name.z-tag.z-css {
|
||||
color: var(--lavender);
|
||||
color: var(--lavender);
|
||||
}
|
||||
|
||||
.z-variable.z-other.z-sass {
|
||||
color: var(--peach);
|
||||
color: var(--peach);
|
||||
}
|
||||
|
||||
.z-invalid {
|
||||
color: var(--text);
|
||||
background-color: var(--red);
|
||||
|
||||
&.z-deprecated {
|
||||
background-color: var(--red);
|
||||
color: var(--text);
|
||||
background-color: var(--mauve);
|
||||
}
|
||||
|
||||
&.z-deprecated {
|
||||
background-color: var(--mauve);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
.z-meta.z-diff {
|
||||
color: --OVERLAY0;
|
||||
|
||||
&.z-header {
|
||||
color: --OVERLAY0;
|
||||
}
|
||||
|
||||
&.z-header {
|
||||
color: --OVERLAY0;
|
||||
}
|
||||
}
|
||||
|
||||
.z-markup {
|
||||
&.z-deleted {
|
||||
color: var(--red);
|
||||
}
|
||||
&.z-deleted {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
&.z-inserted {
|
||||
color: var(--green);
|
||||
}
|
||||
&.z-inserted {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
&.z-changed {
|
||||
color: var(--yellow);
|
||||
}
|
||||
&.z-changed {
|
||||
color: var(--yellow);
|
||||
}
|
||||
}
|
||||
|
||||
.z-message.z-error {
|
||||
color: var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
font: inherit;
|
||||
overflow: hidden;
|
||||
border-style: hidden !important;
|
||||
margin: 1rem auto;
|
||||
border-style: hidden !important;
|
||||
border-radius: 5px;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
overflow: hidden;
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid var(--bg-1);
|
||||
padding: 6px 13px;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
margin-top: 4vmin;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tags-item {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.theme-switcher {
|
||||
-webkit-mask: var(--theme-switcher-svg);
|
||||
position: relative;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
background: var(--text-color);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
-webkit-mask: var(--theme-switcher-svg);
|
||||
background: var(--text-color);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user