website/_includes/styles/base.scss

251 lines
4.5 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;
}
2023-08-03 19:31:43 -04:00
main {
padding: 0 1rem;
margin: 0 auto;
max-width: var(--page--max-width);
font-weight: 450;
2023-08-03 19:31:43 -04:00
}
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;
}
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);
}
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;
}
}
}
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 {
padding: 0.075em 0.3em;
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 {
padding: 1rem;
border-radius: 5px;
display: block;
background-color: var(--color-bg--layer-01);
overflow: auto;
page-break-inside: avoid;
word-wrap: break-word;
font-family: var(--font--mono);
2023-07-25 02:59:32 -04:00
code {
padding: 0;
border-radius: 0;
font-size: 1em;
background-color: transparent;
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: 1rem;
margin: 1rem 0;
&::before {
position: absolute;
top: 50%;
margin-top: -12px;
left: calc(-0.75rem - 24px);
filter: var(--filter-bg);
2023-08-04 15:34:33 -04:00
content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/quote.svg");
}
&.info {
&::before {
2023-08-04 15:34:33 -04:00
content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/info-circle.svg");
}
color: var(--color-blue);
border-color: var(--color-blue);
}
&.success {
&::before {
2023-08-04 15:34:33 -04:00
content: 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 {
2023-08-04 15:34:33 -04:00
content: 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 {
2023-08-04 15:34:33 -04:00
content: 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;
}
}