adjust style
This commit is contained in:
parent
c9612d8a1d
commit
ad8718ba49
48 changed files with 4217 additions and 15 deletions
|
|
@ -37,7 +37,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-color);
|
||||
background: var(--bg-color);
|
||||
border: 2px solid white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
left: -160px;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
color: #ffffff;
|
||||
color: var(--fg-color);
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
/* Hover Effects */
|
||||
#timeline-content li.event:hover::before {
|
||||
background: var(--accent-color-dark);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
#timeline-content li.event:hover {
|
||||
|
|
@ -87,5 +87,5 @@
|
|||
|
||||
/* From + To Label Hover Effect */
|
||||
#timeline-content li.event:hover::after {
|
||||
color: var(--fg-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
81
sass/_alerts.scss
Normal file
81
sass/_alerts.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
blockquote {
|
||||
&.note {
|
||||
border-inline-start: 0.25rem solid var(--blue-fg);
|
||||
|
||||
.alert-title,
|
||||
li::marker {
|
||||
color: var(--blue-fg);
|
||||
}
|
||||
|
||||
.alert-title .icon {
|
||||
-webkit-mask-image: var(--icon-info);
|
||||
mask-image: var(--icon-info);
|
||||
}
|
||||
}
|
||||
|
||||
&.tip {
|
||||
border-inline-start: 0.25rem solid var(--green-fg);
|
||||
|
||||
.alert-title,
|
||||
li::marker {
|
||||
color: var(--green-fg);
|
||||
}
|
||||
|
||||
.alert-title .icon {
|
||||
-webkit-mask-image: var(--icon-lightbulb);
|
||||
mask-image: var(--icon-lightbulb);
|
||||
}
|
||||
}
|
||||
|
||||
&.important {
|
||||
border-inline-start: 0.25rem solid var(--purple-fg);
|
||||
|
||||
.alert-title,
|
||||
li::marker {
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
.alert-title .icon {
|
||||
-webkit-mask-image: var(--icon-important);
|
||||
mask-image: var(--icon-important);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-inline-start: 0.25rem solid var(--yellow-fg);
|
||||
|
||||
.alert-title,
|
||||
li::marker {
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
.alert-title .icon {
|
||||
-webkit-mask-image: var(--icon-warning);
|
||||
mask-image: var(--icon-warning);
|
||||
}
|
||||
}
|
||||
|
||||
&.caution {
|
||||
border-inline-start: 0.25rem solid var(--red-fg);
|
||||
|
||||
.alert-title,
|
||||
li::marker {
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
.alert-title .icon {
|
||||
-webkit-mask-image: var(--icon-caution);
|
||||
mask-image: var(--icon-caution);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
margin-block-end: -0.75rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
445
sass/_article-list.scss
Normal file
445
sass/_article-list.scss
Normal file
|
|
@ -0,0 +1,445 @@
|
|||
#article-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
article {
|
||||
--bg-overlay: var(--accent-color-alpha);
|
||||
position: relative;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: var(--rounded-corner);
|
||||
border-start-end-radius: 2.125rem;
|
||||
border-end-end-radius: 1.8125rem;
|
||||
background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)),
|
||||
linear-gradient(var(--glass-bg), var(--glass-bg)), var(--blurnail);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-color: var(--bg-overlay);
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
h3::after {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not(:has(.tag:active)) {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&:has(> a:focus-visible) {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
&:has(> a:focus) {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--rounded-corner);
|
||||
border-start-end-radius: 2.125rem;
|
||||
border-end-end-radius: 1.8125rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
font-family: var(--font-system-ui);
|
||||
|
||||
&::after {
|
||||
-webkit-mask-image: var(--icon-right);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transform: translateX(-0.25rem);
|
||||
opacity: 0;
|
||||
mask-image: var(--icon-right);
|
||||
transition: var(--transition);
|
||||
margin-inline-start: 0.25rem;
|
||||
background-color: currentColor;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1) translateX(-0.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
background-color: var(--accent-color-alpha);
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.draft,
|
||||
&.archive,
|
||||
&.featured,
|
||||
&.hot,
|
||||
&.poor {
|
||||
&::before {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
opacity: var(--disabled-opacity);
|
||||
mask-size: cover;
|
||||
transition: var(--transition-longer);
|
||||
inset-block-start: 50%;
|
||||
inset-inline-end: -3rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
transform: translateY(-50%) rotate(-10deg) scale(1.5);
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] &:hover::before {
|
||||
transform: translateY(-50%) rotate(10deg) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.draft {
|
||||
--bg-overlay: var(--fg-muted-1);
|
||||
|
||||
&::before {
|
||||
-webkit-mask-image: var(--icon-pencil);
|
||||
mask-image: var(--icon-pencil);
|
||||
background-color: var(--fg-muted-1);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--fg-muted-4);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-pencil);
|
||||
mask-image: var(--icon-pencil);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-5);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.archive {
|
||||
--bg-overlay: var(--purple-bg);
|
||||
|
||||
&::before {
|
||||
-webkit-mask-image: var(--icon-archive);
|
||||
mask-image: var(--icon-archive);
|
||||
background-color: var(--purple-bg);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-archive);
|
||||
mask-image: var(--icon-archive);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--purple-fg);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.featured {
|
||||
--bg-overlay: var(--yellow-bg);
|
||||
|
||||
&::before {
|
||||
-webkit-mask-image: var(--icon-star);
|
||||
mask-image: var(--icon-star);
|
||||
background-color: var(--yellow-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: translateY(-50%) rotate(62deg) scale(1.5);
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] &::before {
|
||||
transform: translateY(-50%) rotate(-62deg) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-star);
|
||||
mask-image: var(--icon-star);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--yellow-fg);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hot {
|
||||
--bg-overlay: var(--red-bg);
|
||||
|
||||
&::before {
|
||||
-webkit-mask-image: var(--icon-fire);
|
||||
mask-image: var(--icon-fire);
|
||||
background-color: var(--red-bg);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-fire);
|
||||
mask-image: var(--icon-fire);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--red-fg);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.poor {
|
||||
--bg-overlay: var(--brown-bg);
|
||||
|
||||
&::before {
|
||||
-webkit-mask-image: var(--icon-poop);
|
||||
mask-image: var(--icon-poop);
|
||||
background-color: var(--brown-bg);
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--brown-fg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--brown-bg);
|
||||
color: var(--brown-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-poop);
|
||||
mask-image: var(--icon-poop);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--brown-bg);
|
||||
color: var(--brown-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--brown-fg);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: inline-end;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
height: fit-content;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 1rem;
|
||||
border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
|
||||
padding-block-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#paginator {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 4rem;
|
||||
|
||||
#paginator-first,
|
||||
#paginator-previous,
|
||||
#paginator-next,
|
||||
#paginator-last {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 1rem;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.5rem;
|
||||
color: var(--fg-muted-4);
|
||||
line-height: 0;
|
||||
|
||||
.icon {
|
||||
transition: var(--transition);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a#paginator-first,
|
||||
a#paginator-previous,
|
||||
a#paginator-next,
|
||||
a#paginator-last {
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
span#paginator-first,
|
||||
span#paginator-previous,
|
||||
span#paginator-next,
|
||||
span#paginator-last {
|
||||
opacity: var(--disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#paginator-previous {
|
||||
border-start-end-radius: var(--rounded-corner-small);
|
||||
border-end-end-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
#paginator-next {
|
||||
border-start-start-radius: var(--rounded-corner-small);
|
||||
border-end-start-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
#paginator-first .icon {
|
||||
-webkit-mask-image: var(--icon-first);
|
||||
mask-image: var(--icon-first);
|
||||
}
|
||||
|
||||
#paginator-previous .icon {
|
||||
-webkit-mask-image: var(--icon-previous);
|
||||
mask-image: var(--icon-previous);
|
||||
}
|
||||
|
||||
#paginator-next .icon {
|
||||
-webkit-mask-image: var(--icon-next);
|
||||
mask-image: var(--icon-next);
|
||||
}
|
||||
|
||||
#paginator-last .icon {
|
||||
-webkit-mask-image: var(--icon-last);
|
||||
mask-image: var(--icon-last);
|
||||
}
|
||||
|
||||
#paginator-counter {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--accent-color-alpha);
|
||||
padding: 0.5rem 0.625rem;
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
&:has(a#paginator-previous:active) #paginator-counter {
|
||||
border-start-start-radius: 1rem;
|
||||
border-end-start-radius: 1rem;
|
||||
}
|
||||
|
||||
&:has(a#paginator-next:active) #paginator-counter {
|
||||
border-start-end-radius: 1rem;
|
||||
border-end-end-radius: 1rem;
|
||||
}
|
||||
}
|
||||
248
sass/_article.scss
Normal file
248
sass/_article.scss
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
#banner-container {
|
||||
--mask: linear-gradient(black, transparent);
|
||||
-webkit-user-select: none;
|
||||
-webkit-mask-image: var(--mask);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
mask-image: var(--mask);
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
aspect-ratio: 2 / 1;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
|
||||
#banner {
|
||||
position: fixed;
|
||||
transition: none;
|
||||
margin: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
& + #heading {
|
||||
margin-block-start: calc(50vw - 7rem);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
body:has(&) #site-nav:not(#handle + #site-nav) {
|
||||
margin-block-start: calc(50vw + 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#heading {
|
||||
margin: 2rem 0 1rem;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
-webkit-background-clip: text;
|
||||
margin: 0;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--fg-muted-4),
|
||||
var(--fg-color),
|
||||
var(--fg-muted-4)
|
||||
);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
& + p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#buttons-container {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
inset-block-end: 1rem;
|
||||
inset-inline-end: 1rem;
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
position: static;
|
||||
flex-direction: row-reverse;
|
||||
// justify-content: center;
|
||||
margin-block-start: 2rem;
|
||||
}
|
||||
|
||||
summary,
|
||||
#go-to-top,
|
||||
#share,
|
||||
#issue {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.5rem;
|
||||
color: var(--fg-muted-4);
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
.icon {
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
&[open] summary ~ * {
|
||||
transform-origin: bottom right;
|
||||
animation: button-dropdown-open var(--transition);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: bottom left;
|
||||
animation: button-dropdown-open-rtl var(--transition);
|
||||
}
|
||||
|
||||
@keyframes button-dropdown-open {
|
||||
from {
|
||||
transform: scale(0.5) translate(1rem, 1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes button-dropdown-open-rtl {
|
||||
from {
|
||||
transform: scale(0.5) translate(-1rem, 1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
summary + div {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 3rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--glass-bg);
|
||||
padding: 1rem;
|
||||
width: min(calc(var(--container-width) / 3), calc(90vw - 3rem));
|
||||
max-height: 50vh;
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
inset-inline-end: 2.5rem;
|
||||
width: min(calc(var(--container-width) / 3), calc(90vw - 2.5rem));
|
||||
}
|
||||
|
||||
strong.title {
|
||||
color: var(--fg-muted-4);
|
||||
}
|
||||
|
||||
div {
|
||||
--mask: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
black 1rem,
|
||||
black calc(100% - 1rem),
|
||||
transparent
|
||||
);
|
||||
-webkit-mask-image: var(--mask);
|
||||
flex: 1;
|
||||
mask-image: var(--mask);
|
||||
margin: 0 -1rem -1rem;
|
||||
padding: 1rem;
|
||||
padding-block-start: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-inline-start: 0.75rem;
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
&:first-child {
|
||||
margin-block-start: 0.75rem;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toc .icon {
|
||||
-webkit-mask-image: var(--icon-toc);
|
||||
mask-image: var(--icon-toc);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
#backlinks {
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-backlink);
|
||||
mask-image: var(--icon-backlink);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
summary + div {
|
||||
width: min(calc(var(--container-width) / 3), calc(90vw - 5rem));
|
||||
}
|
||||
}
|
||||
|
||||
#go-to-top {
|
||||
@media only screen and (max-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-top);
|
||||
mask-image: var(--icon-top);
|
||||
}
|
||||
}
|
||||
|
||||
#share .icon {
|
||||
-webkit-mask-image: var(--icon-share);
|
||||
mask-image: var(--icon-share);
|
||||
}
|
||||
|
||||
#issue .icon {
|
||||
-webkit-mask-image: var(--icon-bug);
|
||||
mask-image: var(--icon-bug);
|
||||
}
|
||||
}
|
||||
72
sass/_buttons.scss
Normal file
72
sass/_buttons.scss
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-block-start: 4rem;
|
||||
|
||||
&.centered {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--fg-muted-5);
|
||||
font-weight: bold;
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&.colored {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color-alpha);
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
border-radius: 999px;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
74
sass/_code.scss
Normal file
74
sass/_code.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// CODE
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--font-monospace-code);
|
||||
}
|
||||
|
||||
code:not(pre code) {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.125rem 0.375rem;
|
||||
color: var(--red-fg);
|
||||
font-size: var(--font-size-small-em);
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 1rem;
|
||||
max-width: 100vw;
|
||||
overflow: auto;
|
||||
line-height: normal;
|
||||
|
||||
table {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
table-layout: auto;
|
||||
overflow: hidden;
|
||||
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: transparent;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The line number cells
|
||||
table td:nth-of-type(1) {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
mark {
|
||||
display: block;
|
||||
box-shadow: none;
|
||||
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 accent color to text color
|
||||
}
|
||||
|
||||
// The line numbers already provide some kind of left/right padding
|
||||
&[data-linenos] {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
471
sass/_comments.scss
Normal file
471
sass/_comments.scss
Normal file
|
|
@ -0,0 +1,471 @@
|
|||
#comments {
|
||||
#qrcode {
|
||||
float: inline-end;
|
||||
transform-origin: right;
|
||||
box-sizing: content-box;
|
||||
margin-inline-start: 1rem;
|
||||
margin-block-start: 3rem;
|
||||
margin-block-end: 0;
|
||||
background-color: white;
|
||||
padding: 0.75rem;
|
||||
width: 7.8125rem; // 125px
|
||||
height: 7.8125rem; // 125px
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
justify-content: start;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
#load-comments:disabled {
|
||||
--shimmer: rgb(
|
||||
from var(--accent-color) r g b / calc(var(--color-opacity) * 2)
|
||||
);
|
||||
animation: loading-shimmer var(--transition-long) ease-in-out
|
||||
alternate infinite;
|
||||
transition: none;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--fg-muted-1) 50%,
|
||||
var(--shimmer) 75%,
|
||||
var(--fg-muted-1) 100%
|
||||
);
|
||||
background-size: 200%;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes loading-shimmer {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#comments-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
#comments-status {
|
||||
color: var(--fg-muted-4);
|
||||
font-weight: bold;
|
||||
font-size: var(--font-size-x-large);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: grid;
|
||||
grid-template-columns: min-content;
|
||||
grid-template-areas:
|
||||
"avatar name "
|
||||
"avatar time "
|
||||
"avatar post "
|
||||
"...... media "
|
||||
"...... card "
|
||||
"...... interactions";
|
||||
column-gap: 1rem;
|
||||
justify-items: start;
|
||||
|
||||
&.comment-reply {
|
||||
position: relative;
|
||||
border-radius: 0.25rem;
|
||||
border-inline-start: 0.25rem solid var(--fg-muted-2);
|
||||
padding-inline-start: 1rem;
|
||||
|
||||
&:has(+ .comment-reply) {
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
& + .comment-reply {
|
||||
margin-block-start: -2rem;
|
||||
border-start-start-radius: 0;
|
||||
padding-block-start: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
position: relative;
|
||||
grid-area: avatar;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
.avatar {
|
||||
transition: var(--transition);
|
||||
margin: 0;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(10deg) var(--hover);
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
grid-area: name;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-weight: bold;
|
||||
|
||||
.instance {
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.375rem 0.75rem;
|
||||
color: var(--fg-muted-5);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-5);
|
||||
color: var(--fg-contrast);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&.op {
|
||||
background-color: var(--accent-color-alpha);
|
||||
padding-inline-start: 0.4375rem;
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
|
||||
&::before {
|
||||
background-color: var(--contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
-webkit-mask-image: var(--icon-verified);
|
||||
display: inline-block;
|
||||
vertical-align: -0.1875rem;
|
||||
mask-image: var(--icon-verified);
|
||||
mask-size: cover;
|
||||
transition: var(--transition);
|
||||
margin-inline-end: 0.25rem;
|
||||
background-color: var(--accent-color);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: "";
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
padding: 0.375rem 0.5rem 0.375rem 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mention {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--accent-color-alpha);
|
||||
padding: 0.25rem 0.375rem;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&.hashtag {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-5);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
grid-area: time;
|
||||
margin-block-start: 0.5rem;
|
||||
font-size: var(--font-size-small);
|
||||
|
||||
a {
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
&:after {
|
||||
background-color: var(--fg-muted-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
&[open] {
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent 0.5rem,
|
||||
var(--fg-muted-1) 0.5rem,
|
||||
var(--fg-muted-1) calc(100% - 0.5rem),
|
||||
transparent calc(100% - 0.5rem),
|
||||
transparent
|
||||
),
|
||||
linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent 0.5rem,
|
||||
var(--bg-color) 0.5rem,
|
||||
var(--bg-color) calc(100% - 0.5rem),
|
||||
transparent calc(100% - 0.5rem),
|
||||
transparent
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--contrast-color),
|
||||
var(--contrast-color) 0.25rem,
|
||||
var(--accent-color) 0.25rem,
|
||||
var(--accent-color) 0.5rem
|
||||
);
|
||||
|
||||
summary {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
summary {
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent 0.5rem,
|
||||
var(--fg-muted-1) 0.5rem,
|
||||
var(--fg-muted-1) calc(100% - 0.5rem),
|
||||
transparent calc(100% - 0.5rem),
|
||||
transparent
|
||||
),
|
||||
linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
transparent 0.5rem,
|
||||
var(--bg-color) 0.5rem,
|
||||
var(--bg-color) calc(100% - 0.5rem),
|
||||
transparent calc(100% - 0.5rem),
|
||||
transparent
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--contrast-color),
|
||||
var(--contrast-color) 0.25rem,
|
||||
var(--accent-color) 0.25rem,
|
||||
var(--accent-color) 0.5rem
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: post;
|
||||
margin: 1rem 0 0;
|
||||
width: 100%;
|
||||
|
||||
:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
grid-area: media;
|
||||
gap: 0.5rem;
|
||||
margin-block-start: 1rem;
|
||||
|
||||
img,
|
||||
video {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
grid-area: card;
|
||||
transition: var(--transition);
|
||||
margin-block-start: 1rem;
|
||||
width: min(calc(var(--container-width) / 2), 100%);
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover:not(:active) {
|
||||
img {
|
||||
transform: var(--hover);
|
||||
box-shadow: var(--edge-highlight), var(--shadow-raised);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
border-radius: var(--rounded-corner)
|
||||
var(--rounded-corner) var(--rounded-corner-small)
|
||||
var(--rounded-corner-small);
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
|
||||
& + figcaption {
|
||||
border-radius: var(--rounded-corner-small)
|
||||
var(--rounded-corner-small)
|
||||
var(--rounded-corner) var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 1rem;
|
||||
color: var(--fg-color);
|
||||
font-size: var(--font-size-medium);
|
||||
text-align: start;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--fg-muted-5);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
grid-area: interactions;
|
||||
gap: 0.25rem;
|
||||
margin-block-start: 1rem;
|
||||
|
||||
.boosts,
|
||||
.faves {
|
||||
transition: var(--transition);
|
||||
border-radius: 999px;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding-inline-start: 0.625rem;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-decoration: none;
|
||||
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
transition: var(--transition-longer);
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
.boosts {
|
||||
color: var(--purple-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--purple-bg);
|
||||
|
||||
.icon {
|
||||
transform: rotate(180deg);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1) rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-boosts);
|
||||
mask-image: var(--icon-boosts);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faves {
|
||||
color: var(--yellow-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--yellow-bg);
|
||||
|
||||
.icon {
|
||||
transform: rotate(72deg);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: rotate(-72deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-star);
|
||||
mask-image: var(--icon-star);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
104
sass/_crt.scss
Normal file
104
sass/_crt.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.crt {
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-image: radial-gradient(
|
||||
color-mix(in srgb, var(--accent-color) 30%, black),
|
||||
color-mix(in srgb, var(--accent-color) 10%, black) 80%,
|
||||
color-mix(in srgb, var(--accent-color) 5%, black)
|
||||
);
|
||||
|
||||
pre {
|
||||
--text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
|
||||
--text-shadow-2: hsl(from var(--accent-color) h calc(s * 2) l);
|
||||
animation: flicker 0.25s alternate infinite;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent !important;
|
||||
padding: 1rem 1rem;
|
||||
color: var(--accent-color) !important;
|
||||
text-shadow:
|
||||
var(--text-shadow-1) 0 0 0.25rem,
|
||||
var(--text-shadow-2) 0 0 0.75rem;
|
||||
|
||||
@keyframes flicker {
|
||||
25% {
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scanlines {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
animation: scanlines 0.1s linear infinite;
|
||||
inset: 0;
|
||||
background-image: repeating-linear-gradient(
|
||||
to bottom,
|
||||
rgb(0 0 0 / 0.25),
|
||||
rgb(0 0 0 / 0.25) 0.125rem,
|
||||
transparent 0.125rem,
|
||||
transparent 0.25rem
|
||||
);
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
|
||||
@keyframes scanlines {
|
||||
to {
|
||||
background-position-y: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
--scanline-color: rgb(from var(--accent-color) r g b / 0.05);
|
||||
display: block;
|
||||
position: absolute;
|
||||
animation: scanline 5s linear infinite;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
var(--scanline-color) 16rem
|
||||
);
|
||||
background-size: auto 16rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: -16rem;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
|
||||
@keyframes scanline {
|
||||
to {
|
||||
background-position-y: calc(100% + 16rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cursor {
|
||||
animation: cursor-blink 1s infinite;
|
||||
|
||||
@keyframes cursor-blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
sass/_emoji.scss
Normal file
16
sass/_emoji.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.emoji {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
transition: var(--transition);
|
||||
cursor: zoom-in;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
|
||||
&:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
16
sass/_external.scss
Normal file
16
sass/_external.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
a.external::after {
|
||||
-webkit-mask-image: var(--icon-external);
|
||||
display: inline-block;
|
||||
opacity: var(--dim-opacity);
|
||||
mask-image: var(--icon-external);
|
||||
mask-size: cover;
|
||||
margin-inline-start: 0.25rem;
|
||||
background-color: currentColor;
|
||||
width: max(0.75rem, 0.75em);
|
||||
height: max(0.75rem, 0.75em);
|
||||
content: "";
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
12
sass/_feed.scss
Normal file
12
sass/_feed.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
h1 a:has(.icon.feed) {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
h1 .icon.feed {
|
||||
-webkit-mask-image: var(--icon-feed);
|
||||
vertical-align: -0.375rem;
|
||||
mask-image: var(--icon-feed);
|
||||
margin-inline-start: 0.5rem;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
137
sass/_footer.scss
Normal file
137
sass/_footer.scss
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
#site-footer {
|
||||
grid-area: footer;
|
||||
margin-block-end: 2rem;
|
||||
text-align: center;
|
||||
|
||||
nav {
|
||||
display: inline-block;
|
||||
margin: 0 auto 1rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 1.375rem;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.25rem;
|
||||
max-width: 90%;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
transition: var(--transition);
|
||||
border-radius: 999px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
color: var(--fg-muted-4);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
&.active {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color-alpha);
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#socials {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin: 1rem auto 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
transition: var(--transition);
|
||||
border-radius: 999px;
|
||||
padding: 0.5rem;
|
||||
color: var(--fg-muted-4);
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
transition: var(--transition);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--accent-color-alpha);
|
||||
padding: 0.25rem 0.375rem;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
6
sass/_footnotes-list.scss
Normal file
6
sass/_footnotes-list.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.footnotes-list {
|
||||
p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
140
sass/_general.scss
Normal file
140
sass/_general.scss
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-color: var(--accent-color) transparent;
|
||||
accent-color: var(--accent-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
text-wrap: pretty;
|
||||
display: grid; // Put footer at the bottom for short pages, such as the 404
|
||||
grid-template-rows: auto minmax(auto, 1fr) auto; // Header, stuff, footer
|
||||
grid-template-areas:
|
||||
"nav"
|
||||
"main"
|
||||
"footer";
|
||||
margin: 0;
|
||||
background-color: var(--bg-color);
|
||||
min-height: 100vh;
|
||||
color: var(--fg-color);
|
||||
line-height: 1.5;
|
||||
font-family: var(--font-system-ui), var(--font-emoji);
|
||||
overflow-wrap: break-word;
|
||||
|
||||
&:has(#sidebar) {
|
||||
grid-template-columns: 1fr min(var(--container-width), 90%) 1fr;
|
||||
grid-template-areas:
|
||||
"nav nav nav"
|
||||
"sidebar main ."
|
||||
"footer footer footer";
|
||||
@media only screen and (max-width: 1200px) {
|
||||
grid-template-areas:
|
||||
"nav nav nav"
|
||||
". sidebar ."
|
||||
". main ."
|
||||
"footer footer footer";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style text selection to use accent color
|
||||
::selection {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
|
||||
// Make focused anchor not get covered by nav,
|
||||
// and flash it with accent color when jumping to it
|
||||
:target:not(#main-content) {
|
||||
transition:
|
||||
all var(--transition),
|
||||
scroll-margin-block-start 0s;
|
||||
scroll-margin-block-start: 15vh;
|
||||
color: var(--accent-color);
|
||||
text-shadow: var(--text-shadow-glow);
|
||||
}
|
||||
|
||||
// Custom focus indicator
|
||||
:focus-visible {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
|
||||
// Fallback for older browsers
|
||||
@supports not selector(:focus-visible) {
|
||||
:focus {
|
||||
animation: focus-in var(--transition);
|
||||
outline: 0.125rem solid var(--accent-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes focus-in {
|
||||
from {
|
||||
outline: 0.5rem solid transparent;
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 4.25rem auto 4rem;
|
||||
width: min(var(--container-width), 90%);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
grid-area: sidebar;
|
||||
opacity: 0.2;
|
||||
transition: var(--transition);
|
||||
height: 100vh;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
margin-block-start: 4.25rem;
|
||||
margin-block-end: -4.25rem;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
& > div {
|
||||
--mask: linear-gradient(to bottom,
|
||||
transparent,
|
||||
black 1rem,
|
||||
black calc(100% - 1rem),
|
||||
transparent);
|
||||
-webkit-mask-image: var(--mask);
|
||||
mask-image: var(--mask);
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
& + main {
|
||||
grid-area: main;
|
||||
margin: 0;
|
||||
margin-block-start: 4.25rem;
|
||||
margin-block-end: 4rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0s !important;
|
||||
transition-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
4
sass/_hidden.scss
Normal file
4
sass/_hidden.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
11
sass/_icon.scss
Normal file
11
sass/_icon.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
i.icon {
|
||||
display: inline-block;
|
||||
mask-size: cover;
|
||||
background-color: currentColor;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 0;
|
||||
text-rendering: auto;
|
||||
}
|
||||
30
sass/_iframe.scss
Normal file
30
sass/_iframe.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
iframe {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
&.mastodon-embed {
|
||||
aspect-ratio: 3 / 4;
|
||||
width: min(calc(var(--container-width) / 2), 100%);
|
||||
}
|
||||
|
||||
&.vimeo-embed,
|
||||
&.youtube-embed {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
&:fullscreen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:-webkit-full-screen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
203
sass/_input.scss
Normal file
203
sass/_input.scss
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
input[type="radio"],
|
||||
input[type="checkbox"],
|
||||
input[type="color"] {
|
||||
position: relative;
|
||||
appearance: none;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
border: 0.15rem solid var(--fg-muted-2);
|
||||
background-color: var(--fg-muted-1);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-2);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: var(--disabled-opacity);
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-1);
|
||||
|
||||
&:checked {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
background-color: var(--contrast-color);
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border: 0.15rem solid transparent;
|
||||
background-color: var(--accent-color);
|
||||
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
vertical-align: -0.1875em;
|
||||
border-radius: 50%;
|
||||
|
||||
&::before {
|
||||
inset-block-start: 0.125rem;
|
||||
inset-inline-start: 0.125rem;
|
||||
border-radius: 50%;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
vertical-align: -0.1875em;
|
||||
border-radius: calc(var(--rounded-corner-small) / 2);
|
||||
|
||||
&::before {
|
||||
-webkit-mask-image: var(--icon-checkmark);
|
||||
transform-origin: bottom left;
|
||||
mask-image: var(--icon-checkmark);
|
||||
mask-size: cover;
|
||||
inset-block-start: -0.125rem;
|
||||
inset-inline-start: -0.125rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&.switch {
|
||||
vertical-align: -0.375rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
width: 2.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&.big {
|
||||
vertical-align: -0.625rem;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
|
||||
&::before {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: none;
|
||||
transform-origin: center;
|
||||
opacity: 1;
|
||||
mask-image: none;
|
||||
transition: var(--transition);
|
||||
inset-block-start: 0.25rem;
|
||||
inset-inline-start: 0.25rem;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: var(--accent-color);
|
||||
|
||||
&::before {
|
||||
transform: translateX(1rem);
|
||||
background-color: var(--contrast-color);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateX(-1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
&::before {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
vertical-align: -0.375em;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
padding: 0.25rem;
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
|
||||
&::-moz-color-swatch {
|
||||
border: none;
|
||||
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border-radius: calc(var(--rounded-corner-small) - 0.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
appearance: none;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
background: var(--accent-color);
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
filter: brightness(0.9);
|
||||
transition: var(--transition);
|
||||
cursor: grab;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 999px;
|
||||
background-color: white;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
appearance: none;
|
||||
transition: var(--transition);
|
||||
cursor: grab;
|
||||
box-shadow: var(--shadow);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background-color: white;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
}
|
||||
164
sass/_media.scss
Normal file
164
sass/_media.scss
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
img,
|
||||
video {
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
max-width: 100%;
|
||||
|
||||
&.full,
|
||||
&[src*="#full"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.full-bleed,
|
||||
&[src*="#full-bleed"] {
|
||||
margin-inline-start: calc((-100vw + 100%) / 2);
|
||||
margin-inline-end: calc((-100vw + 100%) / 2);
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
&.start,
|
||||
&.end,
|
||||
&[src*="#start"],
|
||||
&[src*="#end"] {
|
||||
margin: 0;
|
||||
width: 30%;
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
float: none;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-block-start: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.start,
|
||||
&[src*="#start"] {
|
||||
float: inline-start;
|
||||
transform-origin: left;
|
||||
margin-inline-end: 1rem;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.end,
|
||||
&[src*="#end"] {
|
||||
float: inline-end;
|
||||
transform-origin: right;
|
||||
margin-inline-start: 1rem;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.pixels,
|
||||
&[src*="#pixels"] {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
&.transparent,
|
||||
&.full-bleed,
|
||||
&[src*="#transparent"],
|
||||
&[src*="#full-bleed"] {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.spoiler,
|
||||
&[src*="#spoiler"] {
|
||||
opacity: var(--dim-opacity);
|
||||
clip-path: inset(0 0 0 0 round var(--rounded-corner));
|
||||
filter: blur(1rem);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
clip-path: inset(
|
||||
-0.75rem -0.75rem -0.75rem -0.75rem round
|
||||
var(--rounded-corner-small)
|
||||
);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&.solid,
|
||||
&[src*="#solid"] {
|
||||
clip-path: none;
|
||||
filter: brightness(0) contrast(0.5);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
transition: var(--transition-longer);
|
||||
|
||||
&:not(
|
||||
.no-hover,
|
||||
.full-bleed,
|
||||
[src*="#no-hover"],
|
||||
[src*="#full-bleed"],
|
||||
.emoji
|
||||
) {
|
||||
cursor: zoom-in;
|
||||
|
||||
&:hover {
|
||||
position: relative;
|
||||
transform: var(--hover);
|
||||
z-index: 1;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-raised);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
}
|
||||
|
||||
&.start,
|
||||
&.end,
|
||||
&[src*="#start"],
|
||||
&[src*="#end"] {
|
||||
&:hover {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
transform-origin: center;
|
||||
|
||||
&:hover {
|
||||
transform: var(--hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.transparent,
|
||||
&[src*="#transparent"] {
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
video:fullscreen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
video:-webkit-full-screen {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
478
sass/_nav.scss
Normal file
478
sass/_nav.scss
Normal file
|
|
@ -0,0 +1,478 @@
|
|||
#handle {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
transition: var(--transition);
|
||||
margin: 0 auto;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
width: min(var(--container-width), 90%);
|
||||
height: 4.25rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
transition: var(--transition);
|
||||
margin: 0 auto;
|
||||
inset-block-start: 0.5rem;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
background-color: var(--accent-color);
|
||||
width: min(calc(var(--container-width) / 4), 100%);
|
||||
height: 0.5rem;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:hover::before,
|
||||
&:has(+ #site-nav:hover)::before,
|
||||
&:has(+ #site-nav *:focus-visible, + #site-nav *:focus)::before {
|
||||
transform: translateY(-1rem) scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover + #site-nav,
|
||||
& + #site-nav:hover,
|
||||
& + #site-nav:has(*:focus-visible, *:focus) {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
||||
&::before {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
backdrop-filter: var(--blur);
|
||||
}
|
||||
}
|
||||
|
||||
& + #site-nav {
|
||||
position: fixed;
|
||||
transform: translateY(-1rem) scale(0.5);
|
||||
transform-origin: top;
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
margin: 0 auto;
|
||||
width: max-content;
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
-webkit-backdrop-filter: saturate(1) blur(0);
|
||||
backdrop-filter: saturate(1) blur(0);
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-nav {
|
||||
position: sticky;
|
||||
grid-area: nav;
|
||||
z-index: 999;
|
||||
margin: 1rem auto 0;
|
||||
inset-block-start: 1rem;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
border-radius: 1.625rem;
|
||||
max-width: min(var(--container-width), 90%);
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&::before {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
backdrop-filter: var(--blur);
|
||||
inset: 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: 1.625rem;
|
||||
background-color: var(--glass-bg);
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0.5rem;
|
||||
|
||||
& > a {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
backdrop-filter: var(--blur);
|
||||
transition: var(--transition);
|
||||
inset-block-start: 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: 999px;
|
||||
background-color: var(--glass-bg);
|
||||
padding: 0.625rem 0.75rem;
|
||||
pointer-events: none;
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
inset-block-start: calc(100% + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
&:not(:has(.circle)) {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
summary {
|
||||
flex: 1;
|
||||
transition: var(--transition);
|
||||
box-shadow: none;
|
||||
border-radius: 999px;
|
||||
background-color: transparent;
|
||||
padding: 0.625rem 0.75rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.active {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color-alpha);
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
#home a {
|
||||
color: var(--fg-muted-5);
|
||||
font-weight: 800;
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-home);
|
||||
vertical-align: -0.125em;
|
||||
mask-image: var(--icon-home);
|
||||
transition: var(--transition);
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
align-self: stretch;
|
||||
margin: 0 0.25rem;
|
||||
background-color: var(--fg-muted-2);
|
||||
width: max(1px, 0.0625em);
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
#search button,
|
||||
#language-switcher summary,
|
||||
#theme-switcher summary,
|
||||
#theme-switcher button,
|
||||
summary {
|
||||
color: var(--fg-muted-4);
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
padding: 0.625rem 0.625rem;
|
||||
line-height: 0;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background-color: transparent;
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
|
||||
details {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
&[open] ul {
|
||||
animation: dropdown-open var(--transition);
|
||||
|
||||
@keyframes dropdown-open {
|
||||
from {
|
||||
transform: scale(0.5) translate(-50%, -1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
flex-direction: column;
|
||||
transform: translateX(-50%);
|
||||
transform-origin: top left;
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
inset-block-start: 3.25rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: calc(var(--rounded-corner) + 0.25rem);
|
||||
background-color: var(--glass-bg);
|
||||
padding: 0.25rem;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
border-radius: var(--rounded-corner);
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
&:has(summary:not(.circle)) ul {
|
||||
inset-block-start: 2.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search .icon {
|
||||
-webkit-mask-image: var(--icon-search);
|
||||
mask-image: var(--icon-search);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
#feed .icon {
|
||||
-webkit-mask-image: var(--icon-feed);
|
||||
mask-image: var(--icon-feed);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
#repo .icon {
|
||||
-webkit-mask-image: var(--icon-git);
|
||||
mask-image: var(--icon-git);
|
||||
}
|
||||
|
||||
#language-switcher .icon {
|
||||
-webkit-mask-image: var(--icon-languages);
|
||||
mask-image: var(--icon-languages);
|
||||
}
|
||||
|
||||
#theme-switcher {
|
||||
ul {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.active {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color-alpha);
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
#theme-system .icon,
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-theme-system);
|
||||
mask-image: var(--icon-theme-system);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
#theme-light .icon,
|
||||
.icon.light {
|
||||
-webkit-mask-image: var(--icon-theme-light);
|
||||
mask-image: var(--icon-theme-light);
|
||||
}
|
||||
|
||||
#theme-dark .icon,
|
||||
.icon.dark {
|
||||
-webkit-mask-image: var(--icon-theme-dark);
|
||||
mask-image: var(--icon-theme-dark);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-container {
|
||||
transform: scale(0.5) translateY(-2.75rem);
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
padding: 0 0.5rem 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&.active {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
padding: 0 0.5rem 0.5rem;
|
||||
height: 2.75rem;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
||||
#search-bar {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: var(--fg-muted-1);
|
||||
padding: 0 0.75rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
color: inherit;
|
||||
font-size: var(--font-size-medium);
|
||||
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
color: var(--fg-muted-4);
|
||||
}
|
||||
}
|
||||
|
||||
#search-results-container {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
display: flex;
|
||||
position: absolute;
|
||||
backdrop-filter: var(--blur);
|
||||
inset-block-start: calc(100% + 0.5rem);
|
||||
inset-inline-start: 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: calc(var(--rounded-corner) + 0.5rem);
|
||||
background-color: var(--glass-bg);
|
||||
width: 100%;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
--mask: linear-gradient(to bottom,
|
||||
transparent,
|
||||
black 1rem,
|
||||
black calc(100% - 1rem),
|
||||
transparent);
|
||||
-webkit-mask-image: var(--mask);
|
||||
display: none;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
mask-image: var(--mask);
|
||||
padding: 0.5rem;
|
||||
overflow: auto;
|
||||
|
||||
.item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.5rem;
|
||||
|
||||
a {
|
||||
width: fit-content;
|
||||
|
||||
&::after {
|
||||
content: " →";
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
content: " ←";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
&:first-of-type,
|
||||
&.more-matches {
|
||||
margin-block-start: 0.5rem;
|
||||
border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
|
||||
padding-block-start: 0.25rem;
|
||||
}
|
||||
|
||||
&.more-matches {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
276
sass/_normalize.scss
Normal file
276
sass/_normalize.scss
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
// Document
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// 1. Correct the line height in all browsers.
|
||||
// 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
//
|
||||
|
||||
:where(html) {
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
text-size-adjust: 100%; // 2
|
||||
line-height: 1.15; // 1
|
||||
}
|
||||
|
||||
// Sections
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Correct the font size and margin on `h1` elements within `section` and
|
||||
// `article` contexts in Chrome, Edge, Firefox, and Safari.
|
||||
//
|
||||
|
||||
:where(h1) {
|
||||
margin-block-start: 0.67em;
|
||||
margin-block-end: 0.67em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
// Grouping content
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove the margin on nested lists in Chrome, Edge, and Safari.
|
||||
//
|
||||
|
||||
:where(dl, ol, ul) :where(dl, ol, ul) {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Add the correct box sizing in Firefox.
|
||||
// 2. Correct the inheritance of border color in Firefox.
|
||||
//
|
||||
|
||||
:where(hr) {
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
color: inherit; // 2
|
||||
}
|
||||
|
||||
// Text-level semantics
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Add the correct text decoration in Safari.
|
||||
//
|
||||
|
||||
:where(abbr[title]) {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct font weight in Chrome, Edge, and Safari.
|
||||
//
|
||||
|
||||
:where(b, strong) {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
// 2. Correct the odd `em` font sizing in all browsers.
|
||||
//
|
||||
|
||||
:where(code, kbd, pre, samp) {
|
||||
font-size: 1em; // 2
|
||||
font-family: monospace, monospace; // 1
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct font size in all browsers.
|
||||
//
|
||||
|
||||
:where(small) {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// Tabular data
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// 1. Correct table border color in Chrome, Edge, and Safari.
|
||||
// 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
|
||||
//
|
||||
|
||||
:where(table) {
|
||||
border-color: currentColor; // 1
|
||||
text-indent: 0; // 2
|
||||
}
|
||||
|
||||
// Forms
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Remove the margin on controls in Safari.
|
||||
//
|
||||
|
||||
:where(button, input, select) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inheritance of text transform in Firefox.
|
||||
//
|
||||
|
||||
:where(button) {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct the inability to style buttons in iOS and Safari.
|
||||
//
|
||||
|
||||
:where(
|
||||
button,
|
||||
input:is([type="button" i], [type="reset" i], [type="submit" i])
|
||||
) {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct vertical alignment in Chrome, Edge, and Firefox.
|
||||
//
|
||||
|
||||
:where(progress) {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inheritance of text transform in Firefox.
|
||||
//
|
||||
|
||||
:where(select) {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the margin in Firefox and Safari.
|
||||
//
|
||||
|
||||
:where(textarea) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
||||
// 2. Correct the outline style in Safari.
|
||||
//
|
||||
|
||||
:where(input[type="search" i]) {
|
||||
-webkit-appearance: textfield; // 1
|
||||
outline-offset: -2px; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Correct the cursor style of increment and decrement buttons in Safari.
|
||||
//
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
//
|
||||
// Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
//
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 0.54;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
||||
//
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct the inability to style upload buttons in iOS and Safari.
|
||||
// 2. Change font properties to `inherit` in Safari.
|
||||
//
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // 1
|
||||
font: inherit; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inner border and padding of focus outlines in Firefox.
|
||||
//
|
||||
|
||||
:where(
|
||||
button,
|
||||
input:is(
|
||||
[type="button" i],
|
||||
[type="color" i],
|
||||
[type="reset" i],
|
||||
[type="submit" i]
|
||||
)
|
||||
)::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Restore the focus outline styles unset by the previous rule in Firefox.
|
||||
//
|
||||
|
||||
:where(
|
||||
button,
|
||||
input:is(
|
||||
[type="button" i],
|
||||
[type="color" i],
|
||||
[type="reset" i],
|
||||
[type="submit" i]
|
||||
)
|
||||
)::-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the additional :invalid styles in Firefox.
|
||||
//
|
||||
|
||||
:where(:-moz-ui-invalid) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Interactive
|
||||
// ==========================================================================
|
||||
|
||||
//
|
||||
// Add the correct styles in Safari.
|
||||
//
|
||||
|
||||
:where(dialog) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
border: solid;
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:where(dialog:not([open])) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Add the correct display in all browsers.
|
||||
//
|
||||
|
||||
:where(summary) {
|
||||
display: list-item;
|
||||
}
|
||||
3
sass/_not-found.scss
Normal file
3
sass/_not-found.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
#not-found {
|
||||
width: min(calc(var(--container-width) / 5), 100%);
|
||||
}
|
||||
69
sass/_post-nav.scss
Normal file
69
sass/_post-nav.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
#post-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.25rem;
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-nav-item {
|
||||
flex: 1;
|
||||
transition: var(--transition);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 1rem;
|
||||
padding-block-end: 0.75rem;
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color-alpha);
|
||||
|
||||
.post-title {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&.post-nav-prev .nav-arrow::before {
|
||||
content: "← ";
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
content: "→ ";
|
||||
}
|
||||
}
|
||||
|
||||
&.post-nav-next {
|
||||
text-align: end;
|
||||
|
||||
.nav-arrow::after {
|
||||
content: " →";
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
content: " ←";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
margin-block-end: 0.75rem;
|
||||
color: var(--fg-muted-5);
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
display: block;
|
||||
transition: var(--transition);
|
||||
max-width: 90vw;
|
||||
overflow: hidden;
|
||||
color: var(--fg-color);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
98
sass/_pre-container.scss
Normal file
98
sass/_pre-container.scss
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
.pre-container {
|
||||
margin: 1rem 0 1rem;
|
||||
box-shadow: var(--edge-highlight), var(--shadow);
|
||||
border-radius: var(--rounded-corner);
|
||||
|
||||
.header {
|
||||
--shimmer: rgb(
|
||||
from var(--accent-color) r g b / calc(var(--color-opacity) * 2)
|
||||
);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--fg-muted-1) 50%,
|
||||
var(--shimmer) 75%,
|
||||
var(--fg-muted-1) 100%
|
||||
);
|
||||
background-size: 200%;
|
||||
padding: 0.25rem;
|
||||
height: 2.5rem;
|
||||
|
||||
span {
|
||||
margin-inline-start: 0.75rem;
|
||||
color: var(--fg-muted-5);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
color: var(--fg-muted-4);
|
||||
line-height: 0;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-copy);
|
||||
mask-image: var(--icon-copy);
|
||||
transition: var(--transition);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
animation: active-shimmer var(--transition-long);
|
||||
|
||||
button {
|
||||
box-shadow: var(--edge-highlight);
|
||||
background-color: var(--accent-color-alpha);
|
||||
color: var(--accent-color);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-done);
|
||||
mask-image: var(--icon-done);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes active-shimmer {
|
||||
to {
|
||||
background-position-x: -200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
26
sass/_sparkline.scss
Normal file
26
sass/_sparkline.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.sparkline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
float: inline-end;
|
||||
gap: 0.25rem;
|
||||
margin: 1rem 0;
|
||||
width: 6rem;
|
||||
height: 2rem;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
transform-origin: bottom;
|
||||
transition: var(--transition);
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
var(--accent-color) var(--bar-height),
|
||||
transparent var(--bar-height)
|
||||
);
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
height: 200%;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
sass/_spoiler.scss
Normal file
22
sass/_spoiler.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
span.spoiler {
|
||||
filter: blur(0.25rem);
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
&.solid {
|
||||
filter: none;
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-4);
|
||||
color: transparent;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
60
sass/_statements.scss
Normal file
60
sass/_statements.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
.statement-container {
|
||||
margin: 1rem 0;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
padding: 1rem;
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
& > :nth-child(2) {
|
||||
margin-block-start: 0.5rem;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: inherit;
|
||||
|
||||
.icon {
|
||||
margin-inline-end: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.archive {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-archive);
|
||||
mask-image: var(--icon-archive);
|
||||
}
|
||||
}
|
||||
|
||||
&.disclaimer {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-warning);
|
||||
mask-image: var(--icon-warning);
|
||||
}
|
||||
}
|
||||
|
||||
&.trigger {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-warning);
|
||||
mask-image: var(--icon-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
24
sass/_table.scss
Normal file
24
sass/_table.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
table {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
border-collapse: collapse;
|
||||
background-color: var(--fg-muted-1);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
tr {
|
||||
&:nth-child(even) {
|
||||
background-color: var(--fg-muted-1);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--fg-muted-2);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
69
sass/_tags.scss
Normal file
69
sass/_tags.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin: 0;
|
||||
margin-block-start: 2rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
transition: var(--transition);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.375rem 0.75rem;
|
||||
color: var(--fg-muted-5);
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-color-alpha);
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
|
||||
.count {
|
||||
background-color: var(--accent-color-alpha);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.tag) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding-inline-start: 0.75rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
padding-block-start: 0.375rem;
|
||||
padding-block-end: 0.375rem;
|
||||
}
|
||||
|
||||
.count {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
border-start-end-radius: 999px;
|
||||
border-end-end-radius: 999px;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding-inline-start: 0.5rem;
|
||||
padding-inline-end: 0.625rem;
|
||||
padding-block-start: 0.375rem;
|
||||
padding-block-end: 0.375rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
sass/_title.scss
Normal file
5
sass/_title.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
strong.title {
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-x-large);
|
||||
line-height: 1;
|
||||
}
|
||||
312
sass/_typography.scss
Normal file
312
sass/_typography.scss
Normal file
|
|
@ -0,0 +1,312 @@
|
|||
// HEADINGS
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-wrap: balance;
|
||||
margin: 2rem 0 1rem;
|
||||
font-weight: lighter;
|
||||
line-height: normal;
|
||||
font-family: var(--font-antique);
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-xxx-large);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-xx-large);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-x-large);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
small {
|
||||
color: var(--fg-muted-5);
|
||||
font-size: var(--font-size-small-em);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: max(1px, 0.0625em);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
color: var(--fg-muted-4);
|
||||
font-size: var(--font-size-small-em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
border-radius: 0.25rem;
|
||||
border-inline-start: 0.25rem solid var(--accent-color);
|
||||
padding-inline-start: 0.75rem;
|
||||
color: var(--fg-muted-5);
|
||||
}
|
||||
|
||||
mark,
|
||||
del,
|
||||
ins,
|
||||
samp,
|
||||
q {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
padding: 0.125rem 0.375rem;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: var(--accent-color-alpha);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
del {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: max(1px, 0.0625em);
|
||||
}
|
||||
|
||||
ins {
|
||||
background-color: var(--green-bg);
|
||||
color: var(--green-fg);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: max(1px, 0.0625em);
|
||||
}
|
||||
|
||||
samp {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
font-size: var(--font-size-small-em);
|
||||
}
|
||||
|
||||
q {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: var(--red-fg);
|
||||
text-decoration-thickness: max(1px, 0.0625em);
|
||||
}
|
||||
|
||||
progress {
|
||||
appearance: none;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background-color: var(--fg-muted-1);
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
color: var(--accent-color);
|
||||
|
||||
&:indeterminate {
|
||||
background-color: var(--fg-muted-1);
|
||||
}
|
||||
|
||||
&:indeterminate::-moz-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 999px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 999px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
var(--edge-highlight),
|
||||
inset 0 -0.125rem 0 var(--fg-muted-2);
|
||||
border-radius: var(--rounded-corner-small);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.125rem 0.375rem;
|
||||
font-size: var(--font-size-small-em);
|
||||
|
||||
// Small nice thingy, keys can be pressed!
|
||||
&:active {
|
||||
transform: translateY(0.125rem);
|
||||
box-shadow: inset 0 0.0625rem 0 var(--fg-muted-2);
|
||||
background-color: var(--fg-muted-2);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
text-decoration-thickness: max(1px, 0.0625em);
|
||||
|
||||
&:hover {
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 2rem auto;
|
||||
border: none;
|
||||
border-block-start: 0.1875rem double var(--fg-muted-2);
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
position: relative;
|
||||
inset-block-start: -1.25rem;
|
||||
content: "❦";
|
||||
color: var(--fg-muted-4);
|
||||
font-size: var(--font-size-x-large);
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-inline-start: 1.5rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
float: right;
|
||||
margin-inline-start: 1rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--accent-color-alpha);
|
||||
padding: 1rem;
|
||||
width: 30%;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
float: none;
|
||||
margin-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
summary {
|
||||
cursor: pointer;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 1rem;
|
||||
color: var(--fg-muted-5);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
list-style: none;
|
||||
|
||||
&::marker,
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
-webkit-mask-image: var(--icon-down);
|
||||
display: inline-block;
|
||||
vertical-align: -0.125em;
|
||||
mask-image: var(--icon-down);
|
||||
transition: var(--transition);
|
||||
margin-inline-end: 0.25rem;
|
||||
background-color: currentColor;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 1rem;
|
||||
|
||||
summary {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
&::before {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
& ~ * {
|
||||
animation: details-open var(--transition);
|
||||
|
||||
@keyframes details-open {
|
||||
from {
|
||||
transform: translateY(-1rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-inline-start: 1.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.125rem 0;
|
||||
padding-inline-start: 0.25rem;
|
||||
|
||||
&::marker {
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
204
sass/_variables.scss
Normal file
204
sass/_variables.scss
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
@mixin theme-variables {
|
||||
:root {
|
||||
@content ("light");
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@content ("dark");
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
@content ("dark");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include theme-variables using ($theme) {
|
||||
@if $theme == "dark" {
|
||||
// COLORS
|
||||
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
|
||||
--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
--fg-color: rgb(255 255 255);
|
||||
--fg-contrast: rgb(0 0 0 / 0.8);
|
||||
--fg-muted-1: rgb(255 255 255 / 0.05);
|
||||
--fg-muted-2: rgb(255 255 255 / 0.1);
|
||||
--fg-muted-3: rgb(255 255 255 / 0.2);
|
||||
--fg-muted-4: rgb(255 255 255 / 0.5);
|
||||
--fg-muted-5: rgb(255 255 255 / 0.6);
|
||||
--glass-bg: rgb(25 25 25 / 0.7);
|
||||
--blue-fg: rgb(153 193 241);
|
||||
--brown-fg: rgb(205 171 143);
|
||||
--green-fg: rgb(143 240 164);
|
||||
--purple-fg: rgb(220 138 221);
|
||||
--red-fg: rgb(246 97 81);
|
||||
--yellow-fg: rgb(248 228 92);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@else {
|
||||
// COLORS
|
||||
--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
|
||||
--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
|
||||
--fg-color: rgb(0 0 0 / 0.8);
|
||||
--fg-contrast: rgb(255 255 255);
|
||||
--fg-muted-1: rgb(0 0 0 / 0.05);
|
||||
--fg-muted-2: rgb(0 0 0 / 0.1);
|
||||
--fg-muted-3: rgb(0 0 0 / 0.2);
|
||||
--fg-muted-4: rgb(0 0 0 / 0.5);
|
||||
--fg-muted-5: rgb(0 0 0 / 0.6);
|
||||
--glass-bg: rgb(242 242 242 / 0.7);
|
||||
--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
|
||||
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
|
||||
--blue-fg: rgb(53 132 228);
|
||||
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
|
||||
--brown-fg: rgb(99 69 44);
|
||||
--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
|
||||
--green-fg: rgb(38 162 105);
|
||||
--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
|
||||
--purple-fg: rgb(145 65 172);
|
||||
--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));
|
||||
--red-fg: rgb(224 27 36);
|
||||
--yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity));
|
||||
--yellow-fg: rgb(156 110 3);
|
||||
|
||||
// CONTRAST COLOR
|
||||
--l: clamp(0, (l / 0.623 - 1) * -infinity, 1);
|
||||
--a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l))));
|
||||
--contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a));
|
||||
|
||||
// CONTAINERS
|
||||
--container-width: 1024px;
|
||||
|
||||
// CORNERS
|
||||
--rounded-corner: 0.75rem;
|
||||
--rounded-corner-small: 0.5rem;
|
||||
|
||||
// FILTERS
|
||||
--blur: saturate(1.8) blur(0.75rem);
|
||||
|
||||
// FONT SIZES
|
||||
--font-size-xx-small: 0.625rem;
|
||||
--font-size-x-small: 0.75rem;
|
||||
--font-size-small: 0.875rem;
|
||||
--font-size-medium: 1rem;
|
||||
--font-size-large: 1.25rem;
|
||||
--font-size-x-large: 1.5rem;
|
||||
--font-size-xx-large: 2rem;
|
||||
--font-size-xxx-large: 3rem;
|
||||
|
||||
// FONT SIZES (RELATIVE)
|
||||
--font-size-xx-small-em: 0.625em;
|
||||
--font-size-x-small-em: 0.75em;
|
||||
--font-size-small-em: 0.875em;
|
||||
--font-size-medium-em: 1em;
|
||||
--font-size-large-em: 1.25em;
|
||||
--font-size-x-large-em: 1.5em;
|
||||
--font-size-xx-large-em: 2em;
|
||||
--font-size-xxx-large-em: 3em;
|
||||
|
||||
// FONTS
|
||||
--font-system-ui: system-ui, sans-serif;
|
||||
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
|
||||
serif;
|
||||
--font-old-style: "Iowan Old Style", "Palatino Linotype",
|
||||
"URW Palladio L", P052, serif;
|
||||
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri,
|
||||
"DejaVu Sans", source-sans-pro, sans-serif;
|
||||
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
|
||||
source-sans-pro, sans-serif;
|
||||
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
|
||||
sans-serif;
|
||||
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
|
||||
"Nimbus Sans", Arial, sans-serif;
|
||||
--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
|
||||
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
|
||||
Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
--font-industrial: Bahnschrift, "DIN Alternate",
|
||||
"Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed,
|
||||
sans-serif;
|
||||
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
|
||||
Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold",
|
||||
Calibri, source-sans-pro, sans-serif;
|
||||
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
|
||||
"DejaVu Serif", "Sitka Small", serif;
|
||||
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
|
||||
"URW Bookman L", "Georgia Pro", Georgia, serif;
|
||||
--font-didone: Didot, "Bodoni MT", "Noto Serif Display",
|
||||
"URW Palladio L", P052, Sylfaen, serif;
|
||||
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
|
||||
casual, cursive;
|
||||
--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
// OPACITY
|
||||
--color-opacity: 0.1;
|
||||
--dim-opacity: 0.8;
|
||||
--disabled-opacity: 0.6;
|
||||
|
||||
// SHADOWS
|
||||
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
|
||||
--shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
|
||||
0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
|
||||
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
|
||||
--shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
|
||||
0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
|
||||
0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
|
||||
--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
|
||||
--shadow-glow: 0 0 0 0.0625rem var(--accent-color-alpha),
|
||||
0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
|
||||
0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
|
||||
--text-shadow-glow: var(--accent-color-alpha) 0 0 0.25rem,
|
||||
var(--accent-color) 0 0 0.75rem;
|
||||
|
||||
// STATES
|
||||
--hover: scale(1.1);
|
||||
--active: scale(0.9);
|
||||
|
||||
// TRANSITIONS
|
||||
--transition: 0.2s;
|
||||
--transition-longer: 0.4s;
|
||||
--transition-long: 0.8s;
|
||||
|
||||
// ICONS (16px)
|
||||
--icon-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 1C.89 1 0 1.89 0 3v2c0 .751.41 1.402 1.018 1.744A2 2 0 0 0 1 7v7c0 1.11.89 2 2 2h10c1.11 0 2-.89 2-2V7a2 2 0 0 0-.018-.256A2 2 0 0 0 16 5V3c0-1.11-.89-2-2-2zm0 2h12v2H2zm1 4h10v7H3zm3 1v1h4V8z'/%3E%3C/svg%3E");
|
||||
--icon-backlink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 14a1 1 0 0 1-.707-.293l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 1 1 1.414 1.414L3.414 8H12c1.117 0 2-.883 2-2s-.883-2-2-2c-.55 0-1-.45-1-1s.45-1 1-1c2.2 0 4 1.8 4 4s-1.8 4-4 4H3.414l2.293 2.293A1 1 0 0 1 5 14m0 0'/%3E%3C/svg%3E");
|
||||
--icon-boosts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E");
|
||||
--icon-bug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0c-.55 0-1 .45-1 1 0 .691.39 1.285.8 1.605C4.298 3.277 4 4.105 4 5H3V4H1v1c0 .832.563 1.523 1.05 1.77.493.246.95.23.95.23h1v1H1v2h3v1H3s-.457-.016-.95.23C1.563 11.477 1 12.168 1 13v3h2v-3h1.129c.45 1.719 2.016 3 3.871 3s3.422-1.281 3.871-3H13v3h2v-3c0-.832-.562-1.523-1.05-1.77-.493-.246-.95-.23-.95-.23h-1v-1h3V8h-3V7h1s.457.016.95-.23C14.437 6.523 15 5.832 15 5V4h-2v1h-1c0-.895-.297-1.723-.8-2.395.41-.32.8-.914.8-1.605 0-.55-.45-1-1-1s-1 .45-1 1a1 1 0 0 0-.645.238C8.93 1.086 8.473 1 8 1s-.93.086-1.355.238A1 1 0 0 0 6 1c0-.55-.45-1-1-1m2.969 5.031h.062A.97.97 0 0 1 9 6v3.063a.97.97 0 0 1-.969.968H7.97A.97.97 0 0 1 7 9.062V6a.97.97 0 0 1 .969-.969m0 6h.062A.97.97 0 0 1 9 12v.063a.97.97 0 0 1-.969.968H7.97a.97.97 0 0 1-.97-.969V12a.97.97 0 0 1 .969-.969m0 0'/%3E%3C/svg%3E");
|
||||
--icon-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 5v6a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h6a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 16 11V5a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 11 0zm.414 2h5.172L14 5.414v5.172L10.586 14H5.414L2 10.586V5.414zM8 4c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V5c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
--icon-checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M13.754 4.668c.176-.2.262-.461.246-.723a1 1 0 0 0-.34-.687 1 1 0 0 0-.726-.246 1 1 0 0 0-.688.34L5.95 10.547 3.707 8.3A1 1 0 0 0 2 9.01a1 1 0 0 0 .293.708l3 3c.195.195.465.3.742.293.278-.012.535-.133.719-.344zm0 0'/%3E%3C/svg%3E");
|
||||
--icon-copy: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E");
|
||||
--icon-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E");
|
||||
--icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m2.293 6.707 5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414L8 9.586 3.707 5.293a1 1 0 1 0-1.414 1.414m0 0'/%3E%3C/svg%3E");
|
||||
--icon-feed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
|
||||
--icon-fire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M9.184.973C4.957 3.113 5.586 6.273 7 9 5.762 7.36 5.016 5.48 5 4 3.375 5 2 7 2 9a6.005 6.005 0 0 0 3.969 5.648c-.492-.84-.367-1.96.703-3.015 2.14-2.11 1.558-2.735 1.558-2.735 2.266 1.149-.32 3.137.418 3.88.563.558 1.758-1.391 1.77-2.184.848.96 1.246 1.676 1.246 2.75q0 .273-.035.52c2.512-1.805 3.273-5.41.46-8.184C8.095 1.742 9.185.973 9.185.973m0 0'/%3E%3C/svg%3E");
|
||||
--icon-first: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 2v12h2V8.414l5.293 5.293a1 1 0 1 0 1.414-1.414L7.414 8l4.293-4.293a1 1 0 1 0-1.414-1.414L5 7.586V2zm0 0'/%3E%3C/svg%3E");
|
||||
--icon-git: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.707.293L5.707 1.875l5.238 5.234c.176-.07.364-.109.555-.109A1.5 1.5 0 1 1 10 8.5q0-.276.102-.535L8.05 5.915v4.19a1.5 1.5 0 1 1-1-.035V4.914L4.859 2.727.293 7.293a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414 0l7-7a1.007 1.007 0 0 0 0-1.414l-7-7A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
|
||||
--icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .361a2.2 2.2 0 0 0-1.41.51L2.129 4.59A3.14 3.14 0 0 0 1 7v6c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V7c0-.93-.414-1.813-1.129-2.41L9.411.87A2.2 2.2 0 0 0 8 .361m0 2.002a.2.2 0 0 1 .129.047l4.46 3.719c.263.215.411.535.411.871v6c0 .547-.453 1-1 1h-2V9c0-.55-.45-1-1-1H7c-.55 0-1 .45-1 1v5H4c-.547 0-1-.453-1-1V7c0-.336.148-.656.41-.871L7.871 2.41A.2.2 0 0 1 8 2.363'/%3E%3C/svg%3E");
|
||||
--icon-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 0C1.355 0 0 1.355 0 3v7c0 1.256.893 2.14 2 2.584V15a1 1 0 0 0 1.707.707L6.414 13H13c1.645 0 3-1.355 3-3V3c0-1.645-1.355-3-3-3zm0 2h10c.571 0 1 .429 1 1v7c0 .571-.429 1-1 1H6a1 1 0 0 0-.707.293L4 12.586V12a1 1 0 0 0-1-1c-.571 0-1-.429-1-1V3c0-.571.429-1 1-1m5 1c-.554 0-1 .446-1 1v2c0 .554.446 1 1 1s1-.446 1-1V4c0-.554-.446-1-1-1m0 5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.59 0 0 3.59 0 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8m0 2c3.332 0 6 2.668 6 6s-2.668 6-6 6-6-2.668-6-6 2.668-6 6-6m0 1.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25M6.477 7A.5.5 0 0 0 6.5 8H7v3h-.5a.499.499 0 1 0 0 1h3a.499.499 0 1 0 0-1H9V7zm0 0'/%3E%3C/svg%3E");
|
||||
--icon-languages: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.98 1v3H1v2h2.947a4.8 4.8 0 0 1-.592 1.871c-.425.758-1.101 1.488-2.062 2.45l1.414 1.413c.92-.92 1.703-1.728 2.283-2.697.38.632.844 1.196 1.377 1.768l.668-2.309a6 6 0 0 1-.41-.625A4.75 4.75 0 0 1 6.033 6h1.53l.511-2H6V1zm5.24 1L6 15h2l.781-3h4.438L14 15h2L12.781 2zm1.562 2h.438l1.5 6H9.28z'/%3E%3C/svg%3E");
|
||||
--icon-last: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M11 2v5.586L5.707 2.293a1 1 0 1 0-1.414 1.414L8.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414L11 8.414V14h2V2zm0 0'/%3E%3C/svg%3E");
|
||||
--icon-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.996 0C5.16 0 2.703 2 2.125 4.777c-.527 2.535.688 5.036 2.871 6.325L5 12a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-.898c2.184-1.293 3.402-3.797 2.871-6.332A6.01 6.01 0 0 0 7.996 0m0 2a3.994 3.994 0 0 1 3.918 3.18 3.99 3.99 0 0 1-2.312 4.484 1.01 1.01 0 0 0-.602.914V11H6.996v-.418a1 1 0 0 0-.598-.914 3.994 3.994 0 0 1-2.316-4.484A3.99 3.99 0 0 1 7.996 2m-.998 4a.5.5 0 0 0-.354.852l1 1a.5.5 0 0 0 .708 0l1-1a.5.5 0 0 0 0-.707.507.507 0 0 0-.707 0l-.649.648-.644-.648A.5.5 0 0 0 6.998 6M6 14v1c0 .555.445 1 1 1h2c.555 0 1-.445 1-1v-1z'/%3E%3C/svg%3E");
|
||||
--icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 4C1.8 4 0 5.8 0 8s1.8 4 4 4v-2c-1.125 0-2-.875-2-2s.875-2 2-2h3c1.125 0 2 .875 2 2 0 .84-.496 1.535-1.207 1.84l.785 1.84A4 4 0 0 0 11 8c0-2.2-1.8-4-4-4zm8 2v2c1.125 0 2 .875 2 2s-.875 2-2 2H9c-1.125 0-2-.875-2-2 0-.828.484-1.516 1.184-1.828l-.817-1.828A4.01 4.01 0 0 0 5 10c0 2.2 1.8 4 4 4h3c2.2 0 4-1.8 4-4s-1.8-4-4-4'/%3E%3C/svg%3E");
|
||||
--icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m6.707 13.707 5-5a1 1 0 0 0 0-1.414l-5-5a1 1 0 1 0-1.414 1.414L9.586 8l-4.293 4.293a1 1 0 1 0 1.414 1.414m0 0'/%3E%3C/svg%3E");
|
||||
--icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M12.277.832c-.578.008-1.168.23-1.691.754l-9 9A2 2 0 0 0 1 12v3h3c.531 0 1.04-.21 1.414-.586l9-9c1.79-1.789.082-4.39-1.89-4.57-.083-.012-.165-.012-.247-.012M10.5 4.437 11.563 5.5 4.5 12.563 3.438 11.5zm0 0'/%3E%3C/svg%3E");
|
||||
--icon-poop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.963 1.514A4 4 0 0 1 5 5H4c-1.108 0-2 .892-2 2s.892 2 2 2H3c-1.662 0-3 1.338-3 3s1.338 3 3 3h10c1.662 0 3-1.338 3-3s-1.338-3-3-3h-1c1.108 0 2-.892 2-2s-.892-2-2-2h-1a4 4 0 0 0-2.037-3.486'/%3E%3C/svg%3E");
|
||||
--icon-previous: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m9.293 13.707-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 1 1 1.414 1.414L6.414 8l4.293 4.293a1 1 0 1 1-1.414 1.414m0 0'/%3E%3C/svg%3E");
|
||||
--icon-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m5.707 1.293 6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L9.586 8 4.293 2.707a1 1 0 1 1 1.414-1.414m0 0'/%3E%3C/svg%3E");
|
||||
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.57.063c-3.578 0-6.5 2.921-6.5 6.5 0 3.578 2.922 6.5 6.5 6.5a6.46 6.46 0 0 0 3.83-1.256l2.975 2.974c.957.938 2.363-.5 1.406-1.437l-2.96-2.961a6.46 6.46 0 0 0 1.25-3.82c0-3.579-2.923-6.5-6.5-6.5m0 2c2.5 0 4.5 2.003 4.5 4.5 0 2.5-2 4.5-4.5 4.5-2.496 0-4.5-2-4.5-4.5 0-2.497 2.004-4.5 4.5-4.5'/%3E%3C/svg%3E");
|
||||
--icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1a1 1 0 0 0-.5.135 1 1 0 0 0-.207.158l-3 3a1 1 0 0 0 0 1.414 1 1 0 0 0 1.414 0L7 4.414V10a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4.414l1.293 1.293a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414L8.738 1.326 8.7 1.287a1 1 0 0 0-.195-.15l-.008-.004a1 1 0 0 0-.236-.098h-.004A1 1 0 0 0 8 1M4 7c-1.645 0-3 1.355-3 3v2c0 1.645 1.355 3 3 3h8c1.645 0 3-1.355 3-3v-2c0-1.645-1.355-3-3-3a1 1 0 0 0 0 2c.564 0 1 .436 1 1v2c0 .564-.436 1-1 1H4c-.564 0-1-.436-1-1v-2c0-.564.436-1 1-1a1 1 0 0 0 0-2'/%3E%3C/svg%3E");
|
||||
--icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
|
||||
--icon-theme-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M.918 8.004a7.072 7.072 0 0 0 14.102.793 1.01 1.01 0 0 0-.457-.957 1 1 0 0 0-1.063-.004 3.9 3.9 0 0 1-2.031.578 3.89 3.89 0 0 1-3.883-3.883c0-.715.203-1.422.578-2.031a1 1 0 0 0-.004-1.062c-.207-.32-.578-.5-.957-.458A7.07 7.07 0 0 0 .918 8.004M5.586 4.53a5.877 5.877 0 0 0 8.965 5.004l-1.52-.96a5.09 5.09 0 0 1-5.035 4.507 5.09 5.09 0 0 1-5.078-5.078 5.09 5.09 0 0 1 4.508-5.035l-.961-1.52a5.9 5.9 0 0 0-.88 3.082m0 0'/%3E%3C/svg%3E");
|
||||
--icon-theme-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.004-.008a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0v-1c0-.554-.445-1-1-1M3.053 2.035a1 1 0 0 0-.26.035.994.994 0 0 0-.45 1.672l.708.707a1 1 0 1 0 1.414-1.414l-.707-.707a1 1 0 0 0-.705-.293m9.9.012a1 1 0 0 0-.707.293l-.707.707a1 1 0 1 0 1.414 1.414l.707-.707a1 1 0 0 0-.707-1.707M8 4C5.785 4 4 5.785 4 8s1.785 4 4 4 4-1.785 4-4-1.785-4-4-4m0 2c1.098 0 2 .902 2 2s-.902 2-2 2-2-.902-2-2 .902-2 2-2m-7.004.984a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM14 7c-.55 0-1 .45-1 1s.45 1 1 1h1c.55 0 1-.45 1-1s-.45-1-1-1zM3.748 11.234a1 1 0 0 0-.705.293l-.711.707a1.007 1.007 0 0 0 0 1.414c.39.391 1.027.391 1.418 0l.707-.707a1 1 0 0 0-.709-1.707m8.49.006q-.131 0-.261.033a1.01 1.01 0 0 0-.707.711 1 1 0 0 0 .261.965l.707.707a.995.995 0 0 0 1.672-.445 1 1 0 0 0-.258-.969l-.707-.707a1 1 0 0 0-.707-.295m-4.246 1.756c-.554 0-1 .445-1 1v1a1 1 0 1 0 2 0v-1a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
--icon-theme-system: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.594 0 0 3.594 0 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8m0 1.941c3.36 0 6.059 2.7 6.059 6.059s-2.7 6.059-6.059 6.059zm0 0'/%3E%3C/svg%3E");
|
||||
--icon-toc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1ZM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1z'/%3E%3C/svg%3E");
|
||||
--icon-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1 11a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l6 6a1 1 0 1 1-1.414 1.414L8 6.414l-5.293 5.293A1 1 0 0 1 1 11m0 0'/%3E%3C/svg%3E");
|
||||
--icon-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5.21 1.27A3.7 3.7 0 0 1 8 0c1.113 0 2.11.492 2.79 1.27a3.68 3.68 0 0 1 2.866 1.074A3.68 3.68 0 0 1 14.73 5.21C15.54 5.914 16 6.93 16 8s-.46 2.086-1.27 2.79a3.68 3.68 0 0 1-1.074 2.866 3.68 3.68 0 0 1-2.867 1.074C10.086 15.54 9.07 16 8 16s-2.086-.46-2.79-1.27a3.68 3.68 0 0 1-2.866-1.074A3.68 3.68 0 0 1 1.27 10.79 3.7 3.7 0 0 1 0 8c0-1.113.492-2.11 1.27-2.79a3.68 3.68 0 0 1 1.074-2.866A3.68 3.68 0 0 1 5.21 1.27m5.75 5.242a.613.613 0 0 0-.437-.98.61.61 0 0 0-.562.265L7.305 9.512 5.973 8.18a.616.616 0 0 0-.868.87l1.844 1.845a.61.61 0 0 0 .485.18.63.63 0 0 0 .453-.255zm0 0'/%3E%3C/svg%3E");
|
||||
--icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
|
||||
// MINI ICONS (12px)
|
||||
--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
9
sass/_visually-hidden.scss
Normal file
9
sass/_visually-hidden.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.visually-hidden {
|
||||
clip: rect(0 0 0 0);
|
||||
position: absolute !important;
|
||||
clip-path: inset(100%);
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
62
sass/_zola-anchor.scss
Normal file
62
sass/_zola-anchor.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&:hover .zola-anchor {
|
||||
transform: translateY(-0.125em);
|
||||
opacity: 1;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateY(-0.125em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zola-anchor {
|
||||
position: absolute;
|
||||
transform: translateX(0.5rem) translateY(-0.125em);
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
margin-inline-start: calc(-1em + -0.5rem);
|
||||
color: var(--fg-muted-4);
|
||||
line-height: 1;
|
||||
|
||||
@media only screen and (max-width: 832px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: translateX(-0.5rem) translateY(-0.125em);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon-link);
|
||||
mask-image: var(--icon-link);
|
||||
mask-size: cover;
|
||||
transition: var(--transition);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:target .zola-anchor {
|
||||
color: var(--accent-color-alpha);
|
||||
}
|
||||
56
sass/fonts.scss
Normal file
56
sass/fonts.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
@font-face {
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url("fonts/InterVariable.woff2") format("woff2");
|
||||
font-family: "Inter Variable";
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
src: url("fonts/InterVariable-Italic.woff2") format("woff2");
|
||||
font-family: "Inter Variable";
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
src: url("fonts/JetBrainsMono.woff2") format("woff2");
|
||||
font-family: "JetBrains Mono";
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-style: italic;
|
||||
font-weight: 100 900;
|
||||
src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
|
||||
font-family: "JetBrains Mono";
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter Variable", var(--font-system-ui), var(--font-emoji);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
font-family: "Inter Variable", var(--font-system-ui), var(--font-emoji);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: "JetBrains Mono", var(--font-monospace-code);
|
||||
}
|
||||
45
sass/mods/_classic-article-list.scss
Normal file
45
sass/mods/_classic-article-list.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
#article-list {
|
||||
gap: 2rem;
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
transition: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
border-block-end: max(1px, 0.0625rem) solid var(--fg-muted-2);
|
||||
background: none;
|
||||
padding: 0;
|
||||
padding-block-end: 1rem;
|
||||
overflow: visible;
|
||||
|
||||
&:last-of-type {
|
||||
border-block-end: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
& > a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.draft,
|
||||
&.archive,
|
||||
&.featured,
|
||||
&.hot,
|
||||
&.poor {
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-block-start: 0;
|
||||
border-block-start: none;
|
||||
padding-block-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
sass/mods/_classic-del.scss
Normal file
7
sass/mods/_classic-del.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
del {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
42
sass/mods/_classic-nav.scss
Normal file
42
sass/mods/_classic-nav.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
#site-nav {
|
||||
margin-block-start: 0;
|
||||
inset-block-start: 0;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
&::before {
|
||||
box-shadow: var(--shadow-glass);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
nav,
|
||||
#search-container {
|
||||
margin: 0 auto;
|
||||
width: min(var(--container-width), 90%);
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
a,
|
||||
summary,
|
||||
&#search button,
|
||||
&#language-switcher details summary,
|
||||
&#theme-switcher details summary {
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
||||
#home {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-container {
|
||||
#search-bar {
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
}
|
||||
13
sass/mods/_modern-headings.scss
Normal file
13
sass/mods/_modern-headings.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: bold;
|
||||
font-family: var(--font-system-ui);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
}
|
||||
12
sass/mods/_modern-hr.scss
Normal file
12
sass/mods/_modern-hr.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
hr {
|
||||
box-shadow: var(--edge-highlight);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background-color: var(--fg-muted-2);
|
||||
width: 50%;
|
||||
height: 0.25rem;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
7
sass/mods/_no-edge-highlight.scss
Normal file
7
sass/mods/_no-edge-highlight.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
@import "../_variables.scss";
|
||||
|
||||
@include theme-variables using ($theme) {
|
||||
@if $theme == "light" {
|
||||
--edge-highlight: 0 0 transparent;
|
||||
}
|
||||
}
|
||||
28
sass/mods/_sticked-nav.scss
Normal file
28
sass/mods/_sticked-nav.scss
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
#site-nav {
|
||||
margin-block-start: 0;
|
||||
inset-block-start: 0;
|
||||
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem)
|
||||
calc(var(--rounded-corner) + 0.5rem);
|
||||
|
||||
&::before {
|
||||
box-shadow: var(--shadow-glass);
|
||||
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem)
|
||||
calc(var(--rounded-corner) + 0.5rem);
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
a,
|
||||
summary,
|
||||
&#search button,
|
||||
&#language-switcher details summary,
|
||||
&#theme-switcher details summary {
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
|
||||
#search-container {
|
||||
#search-bar {
|
||||
border-radius: var(--rounded-corner);
|
||||
}
|
||||
}
|
||||
}
|
||||
41
sass/style.scss
Normal file
41
sass/style.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/*!
|
||||
* Duckquill v6.3.0 (https://duckquill.daudix.one)
|
||||
* Copyright 2024-2025 David "Daudix" Lapshin
|
||||
* Licensed under MIT (https://codeberg.org/daudix/duckquill/src/branch/main/LICENSE)
|
||||
*/
|
||||
|
||||
@use "normalize";
|
||||
|
||||
@use "variables";
|
||||
|
||||
@use "alerts";
|
||||
@use "article-list";
|
||||
@use "article";
|
||||
@use "buttons";
|
||||
@use "code";
|
||||
@use "comments";
|
||||
@use "crt";
|
||||
@use "emoji";
|
||||
@use "external";
|
||||
@use "feed";
|
||||
@use "footer";
|
||||
@use "footnotes-list";
|
||||
@use "general";
|
||||
@use "hidden";
|
||||
@use "icon";
|
||||
@use "iframe";
|
||||
@use "input";
|
||||
@use "media";
|
||||
@use "nav";
|
||||
@use "not-found";
|
||||
@use "post-nav";
|
||||
@use "pre-container";
|
||||
@use "sparkline";
|
||||
@use "spoiler";
|
||||
@use "statements";
|
||||
@use "table";
|
||||
@use "tags";
|
||||
@use "title";
|
||||
@use "typography";
|
||||
@use "visually-hidden";
|
||||
@use "zola-anchor";
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-color);
|
||||
background: var(--bg-color);
|
||||
border: 2px solid white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
left: -160px;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
color: #ffffff;
|
||||
color: var(--fg-color);
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
/* Hover Effects */
|
||||
#timeline-content li.event:hover::before {
|
||||
background: var(--accent-color-dark);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
#timeline-content li.event:hover {
|
||||
|
|
@ -87,5 +87,5 @@
|
|||
|
||||
/* From + To Label Hover Effect */
|
||||
#timeline-content li.event:hover::after {
|
||||
color: var(--fg-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
<ul class="timeline">
|
||||
{% for d in dt %}
|
||||
<li class="event" data-from="{{ d.from }}" data-to="{{ d.to }}">
|
||||
{% if d.icon %}
|
||||
<i class="{{ d.icon }} timeline-icon"></i>
|
||||
{% endif %}
|
||||
|
||||
<h3>{{ d.title | markdown | safe }}</h3>
|
||||
|
||||
{% if d.location %}
|
||||
<p><strong>{{ d.location }}</strong></p>
|
||||
{% if d.icon %}
|
||||
<p> <i class="{{ d.icon }} timeline-icon"></i> <strong>{{ d.location }}</strong></p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<p>{{ d.body | safe }}</p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue