website/_includes/styles/base.scss

337 lines
6.2 KiB
SCSS
Raw Normal View History

2023-07-23 20:21:43 -04:00
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
}
2023-08-04 20:50:49 -04:00
html {
line-height: 1.5;
2023-08-04 20:50:49 -04:00
}
2023-07-23 20:21:43 -04:00
body {
color: var(--color-fg);
background: var(--color-bg);
transition: color 0.5s, background-color 0.5s;
font-family: var(--font--sans-serif);
2023-07-23 20:21:43 -04:00
font-size: var(--text-base);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-content {
2023-08-03 19:31:43 -04:00
padding: 0 1rem;
margin: 0 auto;
max-width: var(--page--max-width);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font--sans-serif-alt);
2023-08-03 21:39:44 -04:00
color: var(--color-headings);
2023-08-03 19:31:43 -04:00
font-weight: bold;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
// `.header-anchor` is added to `<a>` tags inside headings
// by the TOC plugin:
// https://deno.land/x/lume_markdown_plugins/toc.ts
a.header-anchor {
color: var(--color-headings);
text-decoration: none;
}
2023-08-03 19:31:43 -04:00
}
h2 {
margin-top: 3rem;
&:first-child {
margin-top: 0;
}
2023-08-03 19:31:43 -04:00
}
2023-07-26 23:03:23 -04:00
p {
2023-08-03 19:31:43 -04:00
margin-top: 1rem;
2023-07-26 23:03:23 -04:00
margin-bottom: 1rem;
}
2023-07-23 20:21:43 -04:00
a {
color: var(--color-links);
2023-12-03 13:11:01 -05:00
&.footnote-ref {
text-decoration: none;
}
&.footnote-ref:hover {
text-decoration: underline;
}
&.footnote-ref::before {
content: "[";
}
&.footnote-ref::after {
content: "]";
}
&.footnote-backref {
}
2023-07-23 20:21:43 -04:00
}
img {
background-color: var(--color-bg--layer-01);
2023-07-23 20:21:43 -04:00
width: 100%;
border-radius: 5px;
object-fit: contain;
aspect-ratio: 16 / 9;
margin-top: 1rem;
margin-bottom: 1rem;
2023-07-23 20:21:43 -04:00
}
ol, ul {
2023-10-23 06:55:14 -04:00
margin-top: 1rem;
margin-bottom: 1rem;
2023-07-25 02:59:32 -04:00
li {
margin-bottom: 0.4rem;
&:last-of-type {
margin-bottom: 0;
}
p:first-of-type {
margin-top: 0;
margin-bottom: 0;
}
2023-07-25 02:59:32 -04:00
}
}
ul {
list-style: disc;
}
2023-07-25 02:59:32 -04:00
hr {
height: 1px;
background-color: var(--color-black);
border: none;
margin-top: 1rem;
margin-bottom: 1rem;
}
code {
2023-12-03 20:10:49 -05:00
padding: 0.3em 0.4em;
color: var(--color-fg);
font-size: 0.9em;
border-radius: 3px;
background-color: var(--color-bg--layer-01);
font-family: var(--font--mono);
}
2023-07-25 02:59:32 -04:00
pre {
margin-top: 1rem;
margin-bottom: 1rem;
2023-07-25 02:59:32 -04:00
border-radius: 5px;
display: block;
overflow: auto;
page-break-inside: avoid;
word-wrap: break-word;
font-family: var(--font--mono);
background-color: var(--color-bg--layer-01);
2023-07-25 02:59:32 -04:00
code {
background-color: transparent !important;
font-size: 1rem;
padding: 0;
border-radius: 0;
background-color: transparent;
2023-12-03 18:31:25 -05:00
.hljs-comment {
font-family: var(--font--mono--code-comments);
}
2023-07-25 02:59:32 -04:00
}
}
2023-07-26 21:50:00 -04:00
.inline {
display: inline;
}
2023-08-02 20:13:41 -04:00
blockquote {
position: relative;
border-radius: 5px;
border: 1px solid var(--color-black);
border-left: 3rem solid var(--color-black);
padding: 1em;
margin: 1em 0;
&::before {
display: block;
position: absolute;
2023-12-03 20:05:41 -05:00
height: 1.5rem;
width: 1.5rem;
top: 50%;
2023-12-03 20:05:41 -05:00
margin-top: -0.75rem;
left: calc(-0.75rem - 1.5rem);
filter: var(--filter-bg);
content: "";
background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/quote.svg");
background-repeat: no-repeat !important;
background-size: contain !important;
}
&.info {
&::before {
background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/info-circle.svg");
}
color: var(--color-blue);
border-color: var(--color-blue);
}
&.success {
&::before {
background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/check.svg");
}
color: var(--color-success);
border-color: var(--color-success);
2023-08-02 20:13:41 -04:00
}
&.warning {
&::before {
background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/alert-triangle.svg");
2023-08-02 20:13:41 -04:00
}
color: var(--color-warn);
border-color: var(--color-warn);
2023-08-02 20:13:41 -04:00
}
&.danger {
&::before {
background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/circle-x.svg");
2023-08-02 20:13:41 -04:00
}
color: var(--color-error);
border-color: var(--color-error);
}
> p:first-child {
margin-top: 0;
}
> p:last-child {
margin-bottom: 0;
2023-08-02 20:13:41 -04:00
}
}
2023-08-03 22:37:20 -04:00
table {
margin: 0.5rem 0;
border-radius: 5px;
border: 1px solid var(--color-black);
border-spacing: 0;
thead {
tr {
th {
border-bottom: 2px solid var(--color-black);
border-right: 1px solid var(--color-black);
padding: 0.75rem;
font-weight: bold;
&:last-child {
border-right: none;
}
}
}
}
tbody {
tr {
&:nth-child(odd) {
background-color: var(--color-table-stripe);
}
td {
border-bottom: 1px solid var(--color-black);
border-right: 1px solid var(--color-black);
padding: 0.75rem;
&:last-child {
border-right: none;
}
}
&:last-child {
td {
border-bottom: none;
}
}
}
}
}
img.icon {
background-color: initial;
border-radius: initial;
object-fit: initial;
object-position: initial;
aspect-ratio: initial;
margin: initial;
width: 1em;
height: 1em;
user-select: none;
}
2023-08-05 14:45:16 -04:00
.tag-list {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
padding-left: 0;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
> li {
margin: 0;
}
}
2023-08-05 14:45:16 -04:00
.tag {
padding: 0.1em 0.3em;
font-size: 0.9em;
2023-08-05 14:45:16 -04:00
border: 1px solid var(--color-fg);
border-radius: 3px;
}
figure {
margin-top: 2rem;
margin-bottom: 2rem;
img {
margin: 0;
}
figcaption {
text-align: center;
font-style: italic;
}
}
nav.toc {
line-height: normal;
margin-bottom: 3rem;
h2 {
border: none;
text-transform: uppercase;
2023-12-03 20:18:54 -05:00
font-size: 1rem;
margin-bottom: 1rem;
}
li {
font-size: 0.9rem;
2023-12-03 13:33:17 -05:00
font-family: var(--font--sans-serif-alt);
}
> ol {
padding-left: 1rem;
}
ul {
margin: .5rem;
padding-left: 1rem;
}
}
2023-12-03 13:11:01 -05:00
ol.footnotes {
margin-top: 3rem;
margin-bottom: 0;
padding: 1rem;
border-top: 1px solid var(--color-black);
font-family: var(--font--sans-serif-alt);
line-height: normal;
li {
font-size: 0.95rem;
p {
display: inline-block;
}
}
a.footnote-backref {
margin-left: 0.3rem;
}
}
2023-12-03 21:40:27 -05:00
kbd {
font-family: var(--font--mono);
font-size: .9em;
font-weight: bold;
padding: 0.2rem 0.4rem;
border-radius: 3px;
background-color: var(--color-bg--layer-01);
border: 1px solid var(--color-black);
}