You've already forked AstralRinth
forked from didirus/AstralRinth
Update prettier config + Run pnpm format
This commit is contained in:
venashial
@@ -1,20 +1,20 @@
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
min-width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
min-width: fit-content;
|
||||
|
||||
> *:last-child {
|
||||
margin-top: auto;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
> *:last-child {
|
||||
margin-top: auto;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
@media (width <= 1000px) {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
margin-left: unset;
|
||||
}
|
||||
@media (width <= 1000px) {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
.base {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-standard);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight-regular);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-standard);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight-regular);
|
||||
|
||||
scrollbar-color: var(--color-scrollbar) var(--color-bg);
|
||||
scrollbar-color: var(--color-scrollbar) var(--color-bg);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar);
|
||||
border-radius: 999px;
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-scrollbar);
|
||||
border-radius: 999px;
|
||||
border: 3px solid var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.button-group {
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -1,101 +1,101 @@
|
||||
.card {
|
||||
--padding: 1rem;
|
||||
--padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--rounded-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-raised), var(--shadow-inset);
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--rounded-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-raised), var(--shadow-inset);
|
||||
|
||||
padding: var(--padding);
|
||||
grid-gap: 1rem;
|
||||
max-width: 100%;
|
||||
padding: var(--padding);
|
||||
grid-gap: 1rem;
|
||||
max-width: 100%;
|
||||
|
||||
.profile-picture {
|
||||
z-index: 1;
|
||||
}
|
||||
.profile-picture {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&--gap {
|
||||
&-compressed {
|
||||
grid-gap: 0.6rem;
|
||||
}
|
||||
&--gap {
|
||||
&-compressed {
|
||||
grid-gap: 0.6rem;
|
||||
}
|
||||
|
||||
&-none {
|
||||
grid-gap: 0;
|
||||
}
|
||||
}
|
||||
&-none {
|
||||
grid-gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--pad {
|
||||
&-top {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
&--pad {
|
||||
&-top {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--overflow-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
&--overflow-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&__banner {
|
||||
--inverse-padding: calc(var(--padding) * -1);
|
||||
margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
|
||||
z-index: 0;
|
||||
background-color: var(--color-divider);
|
||||
&__banner {
|
||||
--inverse-padding: calc(var(--padding) * -1);
|
||||
margin: var(--inverse-padding) var(--inverse-padding) 0 var(--inverse-padding);
|
||||
z-index: 0;
|
||||
background-color: var(--color-divider);
|
||||
|
||||
&:-moz-loading {
|
||||
visibility: hidden;
|
||||
}
|
||||
&:-moz-loading {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&--short {
|
||||
height: 6.5rem;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
&--short {
|
||||
height: 6.5rem;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
}
|
||||
&--dark {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
grid-gap: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
grid-gap: 0.5rem;
|
||||
|
||||
z-index: 1;
|
||||
z-index: 1;
|
||||
|
||||
&--row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
&--row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&--row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
&--row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--strip {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
&--strip {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--pad-x {
|
||||
--padding: 1rem 1.3rem;
|
||||
}
|
||||
&--pad-x {
|
||||
--padding: 1rem 1.3rem;
|
||||
}
|
||||
|
||||
&.markdown {
|
||||
--padding: 1.5rem;
|
||||
}
|
||||
&.markdown {
|
||||
--padding: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 130%;
|
||||
}
|
||||
p {
|
||||
line-height: 130%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.divider {
|
||||
margin: 0.25rem 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-divider);
|
||||
width: 100%;
|
||||
margin: 0.25rem 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-divider);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
.illustration {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
grid-gap: 2rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
grid-gap: 2rem;
|
||||
|
||||
&__image {
|
||||
max-width: 300px;
|
||||
}
|
||||
&__image {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
&__description {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.info-table {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 0.25rem 2rem;
|
||||
width: fit-content;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 0.25rem 2rem;
|
||||
width: fit-content;
|
||||
|
||||
&__label {
|
||||
color: var(--color-text-lightest);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
&__label {
|
||||
color: var(--color-text-lightest);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
.link {
|
||||
color: var(--color-link);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
line-height: 100%;
|
||||
color: var(--color-link);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
line-height: 100%;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.link-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-gap: 0.75rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
grid-gap: 0.75rem;
|
||||
|
||||
.link {
|
||||
color: var(--color-text);
|
||||
.link {
|
||||
color: var(--color-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-link);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,137 +1,137 @@
|
||||
.markdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 1rem;
|
||||
|
||||
blockquote,
|
||||
details,
|
||||
dl,
|
||||
ol,
|
||||
p,
|
||||
code,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
blockquote,
|
||||
details,
|
||||
dl,
|
||||
ol,
|
||||
p,
|
||||
code,
|
||||
pre,
|
||||
table,
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
p {
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
padding-bottom: 0.2em;
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
padding-bottom: 0.2em;
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0 1rem;
|
||||
color: var(--color-text);
|
||||
border-left: 0.25rem solid var(--color-divider);
|
||||
}
|
||||
blockquote {
|
||||
padding: 0 1rem;
|
||||
color: var(--color-text);
|
||||
border-left: 0.25rem solid var(--color-divider);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
a {
|
||||
color: var(--color-link);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
img,
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--rounded-sm);
|
||||
}
|
||||
img,
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--rounded-sm);
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 35rem;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
iframe {
|
||||
width: 35rem;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 80%;
|
||||
border-radius: var(--rounded-sm);
|
||||
background-color: var(--color-code-bg);
|
||||
color: var(--color-code-text);
|
||||
}
|
||||
code {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 80%;
|
||||
border-radius: var(--rounded-sm);
|
||||
background-color: var(--color-code-bg);
|
||||
color: var(--color-code-text);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
border-radius: var(--rounded-sm);
|
||||
overflow-x: auto;
|
||||
pre {
|
||||
padding: 1rem;
|
||||
border-radius: var(--rounded-sm);
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
code {
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
color: var(--color-divider);
|
||||
}
|
||||
hr {
|
||||
margin: 0;
|
||||
color: var(--color-divider);
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
border-collapse: collapse;
|
||||
line-height: 1.5;
|
||||
table {
|
||||
display: block;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
border-collapse: collapse;
|
||||
line-height: 1.5;
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0.4rem 0.85rem;
|
||||
border: 0.1rem solid var(--color-table-border);
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 0.4rem 0.85rem;
|
||||
border: 0.1rem solid var(--color-table-border);
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: var(--color-table-alternate-row);
|
||||
}
|
||||
}
|
||||
tr:nth-child(2n) {
|
||||
background-color: var(--color-table-alternate-row);
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
border: 0.15rem solid var(--color-button-bg);
|
||||
border-radius: var(--rounded-sm);
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
overflow: hidden;
|
||||
details {
|
||||
border: 0.15rem solid var(--color-button-bg);
|
||||
border-radius: var(--rounded-sm);
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
overflow: hidden;
|
||||
|
||||
summary {
|
||||
font-weight: bold;
|
||||
margin: -0.5rem -0.5rem 0;
|
||||
padding: 0.5rem 0.8rem;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-button-bg);
|
||||
summary {
|
||||
font-weight: bold;
|
||||
margin: -0.5rem -0.5rem 0;
|
||||
padding: 0.5rem 0.8rem;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-button-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-bg-hover);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-button-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&[open] {
|
||||
padding: 0.5rem;
|
||||
&[open] {
|
||||
padding: 0.5rem;
|
||||
|
||||
summary {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
summary {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li:has(> input) {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li:has(> input) {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
.member {
|
||||
display: flex;
|
||||
grid-gap: 0.75rem;
|
||||
display: flex;
|
||||
grid-gap: 0.75rem;
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__link {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
&__link {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
grid-gap: 0.4rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
grid-gap: 0.4rem;
|
||||
|
||||
&--light {
|
||||
color: var(--color-text-lightest);
|
||||
}
|
||||
&--light {
|
||||
color: var(--color-text-lightest);
|
||||
}
|
||||
|
||||
.icon {
|
||||
align-self: center;
|
||||
}
|
||||
.icon {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 20px;
|
||||
}
|
||||
strong {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-group {
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-gap: 0.25rem;
|
||||
color: var(--color-text-lightest);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-gap: 0.25rem;
|
||||
color: var(--color-text-lightest);
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: auto;
|
||||
}
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
grid-gap: 0.25rem 0.6rem;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: auto;
|
||||
grid-gap: 0.25rem 0.6rem;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
.title-primary {
|
||||
font-size: 24px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 24px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.title-secondary {
|
||||
font-size: 20px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 20px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.title-tertiary {
|
||||
font-size: 16px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: 16px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
@@ -5,38 +5,38 @@
|
||||
/* Overrides */
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
[tabindex='0']:focus-visible {
|
||||
outline: 0.2rem solid var(--color-brand);
|
||||
outline: 0.2rem solid var(--color-brand);
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#svelte {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -46,17 +46,17 @@ h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
line-height: 100%;
|
||||
margin: 0;
|
||||
line-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0 0 0 1.5rem;
|
||||
padding: 0 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: auto;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
:root {
|
||||
--rounded: 1rem;
|
||||
--rounded-top: 1rem 1rem 0 0;
|
||||
--rounded-bottom: 0 0 1rem 1rem;
|
||||
--rounded-sm: 0.6rem;
|
||||
--rounded-max: 999999999px;
|
||||
--rounded: 1rem;
|
||||
--rounded-top: 1rem 1rem 0 0;
|
||||
--rounded-bottom: 0 0 1rem 1rem;
|
||||
--rounded-sm: 0.6rem;
|
||||
--rounded-max: 999999999px;
|
||||
|
||||
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
|
||||
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
|
||||
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
|
||||
--font-size-nm: 1rem; /* 16px */
|
||||
--font-size-xl: 1.5rem; /* 24px */
|
||||
--font-size-nm: 1rem; /* 16px */
|
||||
--font-size-xl: 1.5rem; /* 24px */
|
||||
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 600;
|
||||
--font-weight-bold: 700;
|
||||
}
|
||||
|
||||
@@ -1,63 +1,63 @@
|
||||
.theme-dark {
|
||||
/* Brand colors */
|
||||
--color-brand: hsl(145, 78%, 48%);
|
||||
--color-brand-light: hsl(155, 54%, 35%);
|
||||
--color-brand-dark: hsl(155, 58%, 25%);
|
||||
--color-brand-contrast: hsl(0, 0%, 0%);
|
||||
/* Brand colors */
|
||||
--color-brand: hsl(145, 78%, 48%);
|
||||
--color-brand-light: hsl(155, 54%, 35%);
|
||||
--color-brand-dark: hsl(155, 58%, 25%);
|
||||
--color-brand-contrast: hsl(0, 0%, 0%);
|
||||
|
||||
--color-secondary: hsl(231, 5%, 80%);
|
||||
--color-tertiary: hsl(231, 3%, 45%);
|
||||
--color-secondary: hsl(231, 5%, 80%);
|
||||
--color-tertiary: hsl(231, 3%, 45%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
|
||||
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
|
||||
--shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
|
||||
/* Shadows */
|
||||
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
|
||||
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
|
||||
--shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
|
||||
|
||||
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
|
||||
--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
|
||||
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
|
||||
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
|
||||
--shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
|
||||
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
|
||||
--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
|
||||
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
|
||||
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
|
||||
--shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
|
||||
|
||||
/* Text colors */
|
||||
--color-text: hsl(221, 39%, 90%);
|
||||
--color-text-light: hsl(215, 14%, 74%);
|
||||
--color-text-lightest: hsl(220, 9%, 70%);
|
||||
--color-heading: hsl(222, 16%, 80%);
|
||||
--color-link: hsl(215, 100%, 75%);
|
||||
/* Text colors */
|
||||
--color-text: hsl(221, 39%, 90%);
|
||||
--color-text-light: hsl(215, 14%, 74%);
|
||||
--color-text-lightest: hsl(220, 9%, 70%);
|
||||
--color-heading: hsl(222, 16%, 80%);
|
||||
--color-link: hsl(215, 100%, 75%);
|
||||
|
||||
/* Container colors */
|
||||
--color-bg: hsl(220, 13%, 15%);
|
||||
--color-bg-contrast: hsl(0, 0%, 100%);
|
||||
--color-raised-bg: hsl(220, 13%, 25%);
|
||||
--color-divider: hsl(220, 13%, 50%);
|
||||
--color-button-bg: hsl(222, 13%, 35%);
|
||||
/* Container colors */
|
||||
--color-bg: hsl(220, 13%, 15%);
|
||||
--color-bg-contrast: hsl(0, 0%, 100%);
|
||||
--color-raised-bg: hsl(220, 13%, 25%);
|
||||
--color-divider: hsl(220, 13%, 50%);
|
||||
--color-button-bg: hsl(222, 13%, 35%);
|
||||
|
||||
/* Label colors */
|
||||
--color-badge-gray-text: hsl(0, 2%, 69%);
|
||||
--color-badge-gray-dot: hsl(0, 6%, 77%);
|
||||
--color-badge-red-text: hsl(343, 63%, 67%);
|
||||
--color-badge-red-dot: hsl(342, 70%, 53%);
|
||||
--color-badge-green-text: hsl(156, 53%, 50%);
|
||||
--color-badge-green-dot: hsl(140, 64%, 40%);
|
||||
--color-badge-yellow-text: hsl(40, 57%, 60%);
|
||||
--color-badge-yellow-dot: hsl(40, 92%, 62%);
|
||||
/* Label colors */
|
||||
--color-badge-gray-text: hsl(0, 2%, 69%);
|
||||
--color-badge-gray-dot: hsl(0, 6%, 77%);
|
||||
--color-badge-red-text: hsl(343, 63%, 67%);
|
||||
--color-badge-red-dot: hsl(342, 70%, 53%);
|
||||
--color-badge-green-text: hsl(156, 53%, 50%);
|
||||
--color-badge-green-dot: hsl(140, 64%, 40%);
|
||||
--color-badge-yellow-text: hsl(40, 57%, 60%);
|
||||
--color-badge-yellow-dot: hsl(40, 92%, 62%);
|
||||
|
||||
/* Markdown colors */
|
||||
--color-table-border: hsl(214, 12%, 35%);
|
||||
--color-table-alternate-row: hsl(216, 12%, 17%);
|
||||
--color-code-bg: hsl(217, 12%, 29%);
|
||||
/* Markdown colors */
|
||||
--color-table-border: hsl(214, 12%, 35%);
|
||||
--color-table-alternate-row: hsl(216, 12%, 17%);
|
||||
--color-code-bg: hsl(217, 12%, 29%);
|
||||
|
||||
/* Ad colors */
|
||||
--color-ad-bg: hsl(200, 70%, 25%);
|
||||
--color-ad-link: hsl(200, 70%, 50%);
|
||||
/* Ad colors */
|
||||
--color-ad-bg: hsl(200, 70%, 25%);
|
||||
--color-ad-link: hsl(200, 70%, 50%);
|
||||
|
||||
/* Popup colors */
|
||||
--color-popup-danger-bg: hsl(355, 70%, 20%);
|
||||
--color-popup-danger-text: hsl(342, 70%, 75%);
|
||||
/* Popup colors */
|
||||
--color-popup-danger-bg: hsl(355, 70%, 20%);
|
||||
--color-popup-danger-text: hsl(342, 70%, 75%);
|
||||
|
||||
--color-input-light: hsl(220, 13%, 20%);
|
||||
--color-input-light: hsl(220, 13%, 20%);
|
||||
|
||||
/* Scrollbar color */
|
||||
--color-scrollbar-thumb: hsl(220, 13%, 40%);
|
||||
/* Scrollbar color */
|
||||
--color-scrollbar-thumb: hsl(220, 13%, 40%);
|
||||
}
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
.theme-light {
|
||||
/* Brand colors */
|
||||
--color-brand: hsl(155, 58%, 44%);
|
||||
--color-brand-light: hsl(135, 50%, 78%);
|
||||
--color-brand-dark: hsl(155, 58%, 38%);
|
||||
--color-brand-contrast: hsl(0, 0%, 100%);
|
||||
/* Brand colors */
|
||||
--color-brand: hsl(155, 58%, 44%);
|
||||
--color-brand-light: hsl(135, 50%, 78%);
|
||||
--color-brand-dark: hsl(155, 58%, 38%);
|
||||
--color-brand-contrast: hsl(0, 0%, 100%);
|
||||
|
||||
--color-secondary: hsl(231, 5%, 45%);
|
||||
--color-tertiary: hsl(231, 3%, 75%);
|
||||
--color-secondary: hsl(231, 5%, 45%);
|
||||
--color-tertiary: hsl(231, 3%, 75%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
|
||||
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
|
||||
--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
|
||||
/* Shadows */
|
||||
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
|
||||
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
|
||||
--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
|
||||
|
||||
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
|
||||
--shadow-raised: 0px 2px 4px hsla(221, 39%, 11%, 0.1);
|
||||
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
|
||||
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
|
||||
--shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
|
||||
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
|
||||
--shadow-raised: 0px 2px 4px hsla(221, 39%, 11%, 0.1);
|
||||
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
|
||||
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
|
||||
--shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
|
||||
|
||||
/* Text colors */
|
||||
--color-text: hsl(221, 39%, 11%);
|
||||
--color-text-light: hsl(215, 14%, 34%);
|
||||
--color-text-lightest: hsl(220, 9%, 46%);
|
||||
--color-heading: hsl(222, 16%, 20%);
|
||||
--color-link: hsl(221, 55%, 50%);
|
||||
/* Text colors */
|
||||
--color-text: hsl(221, 39%, 11%);
|
||||
--color-text-light: hsl(215, 14%, 34%);
|
||||
--color-text-lightest: hsl(220, 9%, 46%);
|
||||
--color-heading: hsl(222, 16%, 20%);
|
||||
--color-link: hsl(221, 55%, 50%);
|
||||
|
||||
/* Container colors */
|
||||
--color-bg: hsl(220, 13%, 91%);
|
||||
--color-bg-contrast: hsl(0, 0%, 0%);
|
||||
--color-raised-bg: hsl(0, 0%, 100%);
|
||||
--color-divider: hsl(220, 13%, 91%);
|
||||
--color-button-bg: hsl(220, 13%, 91%);
|
||||
--color-input-text-light: hsl(0, 0%, 94%);
|
||||
/* Container colors */
|
||||
--color-bg: hsl(220, 13%, 91%);
|
||||
--color-bg-contrast: hsl(0, 0%, 0%);
|
||||
--color-raised-bg: hsl(0, 0%, 100%);
|
||||
--color-divider: hsl(220, 13%, 91%);
|
||||
--color-button-bg: hsl(220, 13%, 91%);
|
||||
--color-input-text-light: hsl(0, 0%, 94%);
|
||||
|
||||
/* Label colors */
|
||||
--color-badge-gray-text: hsl(0, 2%, 39%);
|
||||
--color-badge-gray-dot: hsl(0, 6%, 77%);
|
||||
--color-badge-red-text: hsl(343, 63%, 27%);
|
||||
--color-badge-red-dot: hsl(342, 70%, 53%);
|
||||
--color-badge-green-text: hsl(156, 53%, 20%);
|
||||
--color-badge-green-dot: hsl(140, 64%, 40%);
|
||||
--color-badge-yellow-text: hsl(40, 57%, 29%);
|
||||
--color-badge-yellow-dot: hsl(40, 92%, 62%);
|
||||
/* Label colors */
|
||||
--color-badge-gray-text: hsl(0, 2%, 39%);
|
||||
--color-badge-gray-dot: hsl(0, 6%, 77%);
|
||||
--color-badge-red-text: hsl(343, 63%, 27%);
|
||||
--color-badge-red-dot: hsl(342, 70%, 53%);
|
||||
--color-badge-green-text: hsl(156, 53%, 20%);
|
||||
--color-badge-green-dot: hsl(140, 64%, 40%);
|
||||
--color-badge-yellow-text: hsl(40, 57%, 29%);
|
||||
--color-badge-yellow-dot: hsl(40, 92%, 62%);
|
||||
|
||||
/* Markdown colors */
|
||||
--color-table-border: hsl(210, 10%, 89%);
|
||||
--color-table-alternate-row: hsl(210, 29%, 97%);
|
||||
--color-code-bg: hsl(210, 29%, 96%);
|
||||
/* Markdown colors */
|
||||
--color-table-border: hsl(210, 10%, 89%);
|
||||
--color-table-alternate-row: hsl(210, 29%, 97%);
|
||||
--color-code-bg: hsl(210, 29%, 96%);
|
||||
|
||||
/* Ad colors */
|
||||
--color-ad-bg: hsl(200, 70%, 82%);
|
||||
--color-ad-link: hsl(200, 80%, 40%);
|
||||
/* Ad colors */
|
||||
--color-ad-bg: hsl(200, 70%, 82%);
|
||||
--color-ad-link: hsl(200, 80%, 40%);
|
||||
|
||||
/* Popup colors */
|
||||
--color-popup-danger-bg: hsl(355, 70%, 88%);
|
||||
--color-popup-danger-text: hsl(342, 70%, 35%);
|
||||
/* Popup colors */
|
||||
--color-popup-danger-bg: hsl(355, 70%, 88%);
|
||||
--color-popup-danger-text: hsl(342, 70%, 35%);
|
||||
|
||||
/* Scrollbar color */
|
||||
--color-scrollbar-thumb: hsl(220, 13%, 70%);
|
||||
/* Scrollbar color */
|
||||
--color-scrollbar-thumb: hsl(220, 13%, 70%);
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
.theme-oled {
|
||||
@extend .dark-theme;
|
||||
@extend .dark-theme;
|
||||
|
||||
/* Container colors */
|
||||
--color-bg: hsl(220, 13%, 0%);
|
||||
--color-raised-bg: hsl(220, 13%, 10%);
|
||||
--color-raised-bg-hover: hsl(220, 13%, 20%);
|
||||
--color-divider: hsl(220, 13%, 35%);
|
||||
--color-button-bg: hsl(220, 13%, 20%);
|
||||
/* Container colors */
|
||||
--color-bg: hsl(220, 13%, 0%);
|
||||
--color-raised-bg: hsl(220, 13%, 10%);
|
||||
--color-raised-bg-hover: hsl(220, 13%, 20%);
|
||||
--color-divider: hsl(220, 13%, 35%);
|
||||
--color-button-bg: hsl(220, 13%, 20%);
|
||||
|
||||
/* Ad colors */
|
||||
--color-ad-bg: hsl(200, 70%, 15%);
|
||||
--color-ad-link: hsl(200, 70%, 45%);
|
||||
/* Ad colors */
|
||||
--color-ad-bg: hsl(200, 70%, 15%);
|
||||
--color-ad-link: hsl(200, 70%, 45%);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
:root {
|
||||
/* Borders */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border: var(--border-width) var(--border-style);
|
||||
/* Borders */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border: var(--border-width) var(--border-style);
|
||||
|
||||
/* Rounded radii */
|
||||
--rounded-sm: 8px;
|
||||
--rounded: 10px;
|
||||
--rounded-lg: 14px;
|
||||
--rounded-max: 100px;
|
||||
--rounded-top: var(--rounded) var(--rounded) 0 0;
|
||||
--rounded-bottom: 0 0 var(--rounded) var(--rounded);
|
||||
--rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
|
||||
--rounded-sm-bottom: 0 0 var(--rounded-sm) var(--rounded-sm);
|
||||
/* Rounded radii */
|
||||
--rounded-sm: 8px;
|
||||
--rounded: 10px;
|
||||
--rounded-lg: 14px;
|
||||
--rounded-max: 100px;
|
||||
--rounded-top: var(--rounded) var(--rounded) 0 0;
|
||||
--rounded-bottom: 0 0 var(--rounded) var(--rounded);
|
||||
--rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
|
||||
--rounded-sm-bottom: 0 0 var(--rounded-sm) var(--rounded-sm);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
:root {
|
||||
/* these are values for the display CSS property */
|
||||
/*
|
||||
/* these are values for the display CSS property */
|
||||
/*
|
||||
--display-values: (
|
||||
block,
|
||||
flex,
|
||||
@@ -21,7 +21,7 @@
|
||||
);
|
||||
*/
|
||||
|
||||
/*
|
||||
/*
|
||||
These are our margin and padding utility spacers. The default step size we
|
||||
use is 8px. This gives us a key of:
|
||||
0 => 0px
|
||||
@@ -31,18 +31,18 @@
|
||||
4 => 24px
|
||||
5 => 32px
|
||||
6 => 40px */
|
||||
--spacer: 8px;
|
||||
--spacer: 8px;
|
||||
|
||||
/* Our spacing scale */
|
||||
--spacer-0: 0; /* 0 */
|
||||
--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
|
||||
--spacer-2: --spacer; /* 8px */
|
||||
--spacer-3: calc(var(--spacer) * 2); /* 16px */
|
||||
--spacer-4: calc(var(--spacer) * 3); /* 24px */
|
||||
--spacer-5: calc(var(--spacer) * 4); /* 32px */
|
||||
--spacer-6: calc(var(--spacer) * 5); /* 40px */
|
||||
/* Our spacing scale */
|
||||
--spacer-0: 0; /* 0 */
|
||||
--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
|
||||
--spacer-2: --spacer; /* 8px */
|
||||
--spacer-3: calc(var(--spacer) * 2); /* 16px */
|
||||
--spacer-4: calc(var(--spacer) * 3); /* 24px */
|
||||
--spacer-5: calc(var(--spacer) * 4); /* 32px */
|
||||
--spacer-6: calc(var(--spacer) * 5); /* 40px */
|
||||
|
||||
/*
|
||||
/*
|
||||
/* The list of spacer values
|
||||
--spacers: (
|
||||
--spacer-0,
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
:root {
|
||||
/* Heading sizes - mobile */
|
||||
/* h4-h6 remain the same size on both mobile & desktop */
|
||||
--h00-size-mobile: 40px;
|
||||
--h0-size-mobile: 32px;
|
||||
--h1-size-mobile: 26px;
|
||||
--h2-size-mobile: 22px;
|
||||
--h3-size-mobile: 18px;
|
||||
/* Heading sizes - mobile */
|
||||
/* h4-h6 remain the same size on both mobile & desktop */
|
||||
--h00-size-mobile: 40px;
|
||||
--h0-size-mobile: 32px;
|
||||
--h1-size-mobile: 26px;
|
||||
--h2-size-mobile: 22px;
|
||||
--h3-size-mobile: 18px;
|
||||
|
||||
/* Heading sizes - desktop */
|
||||
--h00-size: 48px;
|
||||
--h0-size: 40px;
|
||||
--h1-size: 32px;
|
||||
--h2-size: 24px;
|
||||
--h3-size: 20px;
|
||||
--h4-size: 16px;
|
||||
--h5-size: 14px;
|
||||
--h6-size: 12px;
|
||||
/* Heading sizes - desktop */
|
||||
--h00-size: 48px;
|
||||
--h0-size: 40px;
|
||||
--h1-size: 32px;
|
||||
--h2-size: 24px;
|
||||
--h3-size: 20px;
|
||||
--h4-size: 16px;
|
||||
--h5-size: 14px;
|
||||
--h6-size: 12px;
|
||||
|
||||
--font-size-lg: 19px;
|
||||
--font-size-sm: 13px;
|
||||
--font-size: 16px;
|
||||
--font-size-lg: 19px;
|
||||
--font-size-sm: 13px;
|
||||
--font-size: 16px;
|
||||
|
||||
/* Line heights */
|
||||
--lh-condensed-ultra: 1;
|
||||
--lh-condensed: 1.25;
|
||||
--lh-default: 1.5;
|
||||
/* Line heights */
|
||||
--lh-condensed-ultra: 1;
|
||||
--lh-condensed: 1.25;
|
||||
--lh-default: 1.5;
|
||||
|
||||
/* Font weights */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-semibold: 500;
|
||||
--font-weight-bold: 600;
|
||||
/* Font weights */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-semibold: 500;
|
||||
--font-weight-bold: 600;
|
||||
|
||||
/* Font stacks */
|
||||
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
/* Font stacks */
|
||||
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user