Among other things introduce new --fg-contrast color variable.
This commit is contained in:
daudix
@ -75,7 +75,7 @@ blockquote {
|
||||
}
|
||||
|
||||
.alert-title {
|
||||
margin-bottom: -0.75rem;
|
||||
margin-block-end: -0.75rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
|
||||
@ -1,66 +1,229 @@
|
||||
#article-list {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
transition: var(--transition-longer);
|
||||
outline-color: transparent;
|
||||
outline-style: dashed;
|
||||
outline-width: 0.125rem;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
border-start-end-radius: 2.125rem;
|
||||
border-end-end-radius: 1.8125rem;
|
||||
background-color: var(--primary-color-alpha);
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
&.draft,
|
||||
&.archive,
|
||||
&.featured {
|
||||
position: relative;
|
||||
&:hover {
|
||||
outline-color: var(--primary-color);
|
||||
outline-offset: 0.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-inline-end: 8rem;
|
||||
.heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--primary-color-alpha);
|
||||
color: var(--primary-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--contrast-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.draft {
|
||||
background-color: var(--fg-muted-1);
|
||||
|
||||
&::before {
|
||||
$icon: 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");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--fg-muted-1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline-color: var(--fg-muted-4);
|
||||
|
||||
&::before {
|
||||
transform: translateY(-50%) rotate(-10deg) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
h3 a {
|
||||
color: var(--fg-muted-4);
|
||||
}
|
||||
|
||||
.tags a:hover {
|
||||
.tags a {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-4);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--fg-muted-4);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.archive {
|
||||
background-color: var(--purple-bg);
|
||||
|
||||
&::before {
|
||||
// $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%3E%3C/svg%3E");
|
||||
$icon: 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");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--purple-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline-color: var(--purple-fg);
|
||||
|
||||
&::before {
|
||||
transform: translateY(-50%) rotate(-10deg) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
h3 a {
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
.tags a:hover {
|
||||
.tags a {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--purple-fg);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.featured {
|
||||
transition: var(--transition-longer);
|
||||
outline: 0.125rem dashed transparent;
|
||||
outline-offset: 0;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
border-start-end-radius: 2.125rem;
|
||||
border-end-end-radius: 1.8125rem;
|
||||
background-color: var(--yellow-bg);
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
$icon: 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");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--yellow-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline-color: var(--yellow-fg);
|
||||
|
||||
&::before {
|
||||
transform: translateY(-50%) rotate(72deg) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
h3 a {
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--yellow-fg);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hot {
|
||||
background-color: var(--red-bg);
|
||||
|
||||
&::before {
|
||||
$icon: 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: 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 9c0 3.313 2.688 6 6 6 5 0 8-5.465 4.09-9.32C8.094 1.742 9.184.973 9.184.973m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--red-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline-color: var(--red-fg);
|
||||
|
||||
&::before {
|
||||
transform: translateY(-50%) rotate(-10deg) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
h3 a {
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--red-fg);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.poor {
|
||||
background-color: var(--brown-bg);
|
||||
|
||||
&::before {
|
||||
$icon: 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");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--brown-bg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline-color: var(--brown-fg);
|
||||
|
||||
&::before {
|
||||
transform: translateY(-50%) rotate(-10deg) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
h3 a {
|
||||
color: var(--brown-fg);
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--brown-bg);
|
||||
color: var(--brown-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--brown-fg);
|
||||
color: var(--fg-contrast);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.draft,
|
||||
&.archive,
|
||||
&.featured,
|
||||
&.hot,
|
||||
&.poor {
|
||||
&::before {
|
||||
-webkit-mask-size: cover;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -3rem;
|
||||
transform: translateY(-50%) rotate(-10deg);
|
||||
transform: translateY(-50%);
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
mask-image: $icon;
|
||||
mask-size: cover;
|
||||
transition: var(--transition-longer);
|
||||
background-color: var(--star-featured);
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
content: "";
|
||||
@ -68,42 +231,9 @@
|
||||
:root[dir*="rtl"] & {
|
||||
right: unset;
|
||||
left: -3rem;
|
||||
transform: translateY(-50%) rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: 0.125rem dashed var(--yellow-fg);
|
||||
outline-offset: 0.5rem;
|
||||
|
||||
&::before {
|
||||
transform: translateY(-50%) rotate(62deg) scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
|
||||
a {
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-badge {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
right: unset;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tags a:hover {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] &:hover::before {
|
||||
transform: translateY(-50%) rotate(-62deg) scale(1.5);
|
||||
}
|
||||
@ -111,15 +241,17 @@
|
||||
|
||||
.draft-badge,
|
||||
.archive-badge,
|
||||
.featured-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
.featured-badge,
|
||||
.hot-badge,
|
||||
.poor-badge {
|
||||
display: block;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
height: fit-content;
|
||||
font-weight: bold;
|
||||
line-height: 1.25;
|
||||
white-space: nowrap;
|
||||
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
@ -171,15 +303,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
.hot-badge {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
|
||||
.icon {
|
||||
$icon: 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: 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 9c0 3.313 2.688 6 6 6 5 0 8-5.465 4.09-9.32C8.094 1.742 9.184.973 9.184.973m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--red-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.poor-badge {
|
||||
background-color: var(--brown-bg);
|
||||
color: var(--brown-fg);
|
||||
|
||||
.icon {
|
||||
$icon: 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");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--brown-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
hr:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-top: 4rem;
|
||||
margin-block-start: 4rem;
|
||||
}
|
||||
|
||||
.inline-button {
|
||||
|
||||
@ -21,14 +21,14 @@
|
||||
.dialog-buttons {
|
||||
justify-content: start;
|
||||
gap: 0.25rem;
|
||||
margin-top: 2rem;
|
||||
margin-block-start: 2rem;
|
||||
}
|
||||
|
||||
#comments-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
#comments-status {
|
||||
margin-block-start: 0;
|
||||
@ -156,14 +156,14 @@
|
||||
|
||||
main {
|
||||
grid-area: post;
|
||||
margin-top: 1rem;
|
||||
margin-block-start: 1rem;
|
||||
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -184,7 +184,7 @@
|
||||
display: flex;
|
||||
grid-area: interactions;
|
||||
gap: 0.25rem;
|
||||
margin-top: 1rem;
|
||||
margin-block-start: 1rem;
|
||||
|
||||
.boosts,
|
||||
.faves {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
#site-footer {
|
||||
margin-top: 4rem;
|
||||
margin-block-start: 4rem;
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
|
||||
|
||||
@ -49,8 +49,8 @@ body {
|
||||
// Make focused anchor not get covered by nav,
|
||||
// and flash it with primary color when jumping to it
|
||||
:target:not(#main) {
|
||||
transition: all var(--transition-longer), scroll-margin-top 0s;
|
||||
scroll-margin-top: 20vh;
|
||||
transition: all var(--transition-longer), scroll-margin-block-start 0s;
|
||||
scroll-margin-block-start: 20vh;
|
||||
color: var(--primary-color);
|
||||
text-shadow: var(--primary-color-alpha) 0 0 0.25rem, var(--primary-color) 0 0 0.75rem;
|
||||
}
|
||||
|
||||
@ -14,8 +14,8 @@ video {
|
||||
|
||||
&.full-bleed,
|
||||
&[src*="#full-bleed"] {
|
||||
margin-right: calc((-100vw + 100%) / 2);
|
||||
margin-left: calc((-100vw + 100%) / 2);
|
||||
margin-inline-start: calc((-100vw + 100%) / 2);
|
||||
margin-inline-end: calc((-100vw + 100%) / 2);
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
@ -444,9 +444,9 @@
|
||||
}
|
||||
|
||||
div {
|
||||
margin-top: 0.5rem;
|
||||
border-top: max(1px, 0.0625rem) solid var(--fg-muted-2);
|
||||
padding-top: 0.25rem;
|
||||
margin-block-start: 0.5rem;
|
||||
border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
|
||||
padding-block-start: 0.25rem;
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
strong {
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-block-end: 0.5rem;
|
||||
color: var(--fg-muted-5);
|
||||
font-weight: normal;
|
||||
line-height: 1.25;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
border-radius: 999px;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.375rem 0.75rem;
|
||||
color: var(--fg-color);
|
||||
color: var(--fg-muted-4);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
|
||||
@ -45,10 +45,6 @@
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.5rem 0.375rem 0.75rem;
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
padding: 0.25rem 0.75rem 0.25rem 0.5rem;
|
||||
}
|
||||
@ -60,7 +56,6 @@
|
||||
border-radius: 0 999px 999px 0;
|
||||
background-color: var(--fg-muted-1);
|
||||
padding: 0.375rem 0.625rem 0.375rem 0.5rem;
|
||||
color: var(--fg-muted-4);
|
||||
font-variant-numeric: tabular-nums;
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
|
||||
@ -165,7 +165,7 @@ a {
|
||||
hr {
|
||||
margin: 2rem auto;
|
||||
border: none;
|
||||
border-top: 0.1875rem double var(--fg-muted-2);
|
||||
border-block-start: 0.1875rem double var(--fg-muted-2);
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
|
||||
@ -188,7 +188,7 @@ dt {
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@mixin theme-variables($theme) {
|
||||
@if $theme == "dark" {
|
||||
@if $theme =="dark" {
|
||||
--bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
|
||||
--fg-color: rgb(255 255 255);
|
||||
--fg-muted-1: rgb(255 255 255 / 0.05);
|
||||
@ -7,9 +7,12 @@
|
||||
--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);
|
||||
--fg-contrast: rgb(0 0 0 / 0.8);
|
||||
--nav-bg: rgb(25 25 25 / 0.7);
|
||||
--blue-bg: rgb(153 193 241 / 0.1);
|
||||
--blue-fg: rgb(153 193 241);
|
||||
--brown-bg: rgb(205 171 143 / 0.1);
|
||||
--brown-fg: rgb(205 171 143);
|
||||
--green-bg: rgb(143 240 164 / 0.1);
|
||||
--green-fg: rgb(143 240 164);
|
||||
--purple-bg: rgb(220 138 221 / 0.1);
|
||||
@ -18,22 +21,23 @@
|
||||
--red-fg: rgb(246 97 81);
|
||||
--yellow-bg: rgb(248 228 92 / 0.1);
|
||||
--yellow-fg: rgb(248 228 92);
|
||||
--star-featured: rgb(248 228 92 / 0.05);
|
||||
color-scheme: dark;
|
||||
} @else {
|
||||
--bg-color: linear-gradient(
|
||||
rgb(255 255 255 / 0.8),
|
||||
rgb(255 255 255 / 0.8)
|
||||
);
|
||||
}
|
||||
|
||||
@else {
|
||||
--bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
|
||||
--fg-color: rgb(0 0 0 / 0.8);
|
||||
--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);
|
||||
--fg-contrast: rgb(255 255 255);
|
||||
--nav-bg: rgb(242 242 242 / 0.7);
|
||||
--blue-bg: rgb(53 132 228 / 0.1);
|
||||
--blue-fg: rgb(53 132 228);
|
||||
--brown-bg: rgb(99 69 44 / 0.1);
|
||||
--brown-fg: rgb(99 69 44);
|
||||
--green-bg: rgb(38 162 105 / 0.1);
|
||||
--green-fg: rgb(38 162 105);
|
||||
--purple-bg: rgb(145 65 172 / 0.1);
|
||||
@ -42,7 +46,6 @@
|
||||
--red-fg: rgb(224 27 36);
|
||||
--yellow-bg: rgb(156 110 3 / 0.1);
|
||||
--yellow-fg: rgb(156 110 3);
|
||||
--star-featured: rgb(156 110 3 / 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,48 +59,29 @@
|
||||
--edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
|
||||
--rounded-corner-small: 0.5rem;
|
||||
--rounded-corner: 0.75rem;
|
||||
--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: 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: 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);
|
||||
--transition-long: 0.8s;
|
||||
--transition-longer: 0.4s;
|
||||
--transition: 0.2s;
|
||||
|
||||
// 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-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";
|
||||
--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";
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
|
||||
Reference in New Issue
Block a user