331 lines
7 KiB
CSS
331 lines
7 KiB
CSS
:root {
|
|
--lt-blue: rgb(69, 212, 243);
|
|
--mid-blue: rgb(26, 169, 239);
|
|
--dk-blue: rgb(63, 46, 231);
|
|
--purple: rgb(161, 49, 232);
|
|
--lilac: rgb(187, 121, 245);
|
|
|
|
--background-color: #fff;
|
|
--foreground-body-color: rgba(0, 0, 0, 0.8);
|
|
--foreground-header-color: #000;
|
|
|
|
--separator-color: #dfdfdf;
|
|
--header-border-color: var(--separator-color);
|
|
--footer-border-color: var(--separator-color);
|
|
|
|
--box-shadow-color: rgba(230, 230, 230, 0.8);
|
|
--header-box-shadow-color: var(--box-shadow-color);
|
|
|
|
--font-family-body: Verdana, Helvetica, sans-serif;
|
|
--font-family-heading: Museo_Slab, Tahoma, sans-serif;
|
|
--font-family-site-heading: /*Krungthep,*/ Museo_Slab, Tahoma, sans-serif;
|
|
--font-size-min: 7px;
|
|
--font-size-max: 8px;
|
|
|
|
--body-item-spacing: 1em;
|
|
|
|
--content-width: 80rem;
|
|
|
|
--transition-duration: 0.7s;
|
|
|
|
--twitter-icon: url(/icons/twitter.svg);
|
|
--github-icon: url(/icons/github.svg);
|
|
--instagram-icon: url(/icons/instagram.svg);
|
|
--rss-icon: url(/icons/rss.svg);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background-color: #000;
|
|
--foreground-body-color: rgba(255, 255, 255, 0.8);
|
|
--foreground-header-color: #fff;
|
|
--separator-color: #222;
|
|
--box-shadow-color: rgba(25, 25, 25, 0.8);
|
|
|
|
--twitter-icon: url(/icons/twitter-dark.svg);
|
|
--github-icon: url(/icons/github-dark.svg);
|
|
--instagram-icon: url(/icons/instagram-dark.svg);
|
|
--rss-icon: url(/icons/rss-dark.svg);
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--mid-blue);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.12em;
|
|
}
|
|
a:visited { color: none; }
|
|
|
|
body {
|
|
color: var(--foreground-body-color);
|
|
font-size: 2rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: 75%;
|
|
margin-block-start: 0.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
figure {
|
|
border-radius: 6px;
|
|
display: inline-block;
|
|
margin: 0;
|
|
margin-block: 0 var(--body-item-spacing);
|
|
margin-inline: 0;
|
|
overflow: hidden;
|
|
max-width: var(--content-width);
|
|
width: 100%;
|
|
}
|
|
|
|
figure a,
|
|
figure a:hover {
|
|
border: 0;
|
|
}
|
|
|
|
figure img {
|
|
border-radius: 6px;
|
|
height: auto;
|
|
max-width: var(--content-width);
|
|
width: 100%;
|
|
}
|
|
|
|
figure .youtube {
|
|
border-radius: 6px;
|
|
line-height: 1;
|
|
overflow: hidden;
|
|
max-width: var(--content-width);
|
|
width: 100%;
|
|
}
|
|
|
|
footer.site {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1.6rem;
|
|
margin-block-start: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
footer.site > div {
|
|
border-top: 1px solid var(--footer-border-color);
|
|
padding-block-start: 2rem;
|
|
max-width: var(--content-width);
|
|
width: 100%;
|
|
}
|
|
|
|
footer.site ul {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
list-style: none;
|
|
}
|
|
|
|
footer.site .slogans li {
|
|
margin-inline-start: 0.5em;
|
|
}
|
|
|
|
footer.site p {
|
|
margin: 0;
|
|
}
|
|
|
|
footer.site p + p {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
@media (max-width: 740px) {
|
|
footer.site .slogans span {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--foreground-header-color);
|
|
font-family: var(--font-family-heading);
|
|
margin-block: 1em 0.25em;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
font-family: var(--font-family-body);
|
|
font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
|
|
}
|
|
|
|
main {
|
|
max-width: var(--content-width);
|
|
margin: 0 auto;
|
|
margin-block-start: 10.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
h1.site {
|
|
color: var(--mid-blue);
|
|
}
|
|
@supports (background-clip: text) {
|
|
h1.site {
|
|
background:
|
|
radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
|
|
radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%),
|
|
radial-gradient(ellipse at 95% 20%, var(--dk-blue), var(--mid-blue) 70%, transparent 80%),
|
|
radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
|
|
radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
|
|
radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%);
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
h1.site * { color: inherit; }
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
header.site {
|
|
display: flex;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0.5rem;
|
|
visibility: hidden;
|
|
width: 100%;
|
|
z-index: 10000;
|
|
}
|
|
header.site.visible {
|
|
visibility: visible;
|
|
}
|
|
header.site.animated {
|
|
animation: site-header-slide-in var(--transition-duration) ease-out;
|
|
}
|
|
@keyframes site-header-slide-in {
|
|
from {
|
|
top: -200px;
|
|
}
|
|
to {
|
|
top: 0.5rem;
|
|
}
|
|
}
|
|
|
|
header.site h1 {
|
|
font-family: var(--font-family-site-heading);
|
|
margin: 0;
|
|
}
|
|
|
|
header.site .grid {
|
|
align-items: baseline;
|
|
display: grid;
|
|
gap: 0.5em;
|
|
grid-template-columns: max-content auto max-content;
|
|
grid-template-rows: max-content;
|
|
grid-template-areas:
|
|
"title menu social";
|
|
max-width: var(--content-width);
|
|
width: var(--content-width);
|
|
}
|
|
@media (max-width: 450px) {
|
|
header.site .grid {
|
|
grid-template-columns: repeat(2, max-content);
|
|
grid-template-rows: repeat(2, max-content);
|
|
grid-template-areas:
|
|
"title social"
|
|
"menu menu";
|
|
max-width: var(--content-width);
|
|
width: inherit;
|
|
}
|
|
}
|
|
|
|
header.site .platter {
|
|
margin: 0 auto;
|
|
padding: 1.5rem 3rem;
|
|
}
|
|
|
|
header.site .grid nav:first-of-type {
|
|
grid-area: menu;
|
|
justify-content: start;
|
|
}
|
|
|
|
header.site .grid nav:last-of-type {
|
|
grid-area: social;
|
|
justify-content: end;
|
|
}
|
|
|
|
img {
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
nav.site {
|
|
align-items: center;
|
|
display: flex;
|
|
font-size: max(1.5rem, 80%);
|
|
justify-content: start;
|
|
letter-spacing: 0.12em;
|
|
list-style: none;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
nav.site li {
|
|
color: var(--mid-blue);
|
|
display: block;
|
|
margin-inline-end: 0.5em;
|
|
}
|
|
nav.site .active { font-weight: bold; }
|
|
|
|
nav.bulleted li:first-child::before {
|
|
color: var(--foreground-color);
|
|
content: "";
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
nav.bulleted li::before {
|
|
color: var(--foreground-header-color);
|
|
content: "•";
|
|
font-size: 60%;
|
|
font-weight: normal;
|
|
opacity: 80%;
|
|
margin-inline-end: 0.5em;
|
|
}
|
|
|
|
p {
|
|
letter-spacing: 0.025em;
|
|
line-height: 1.4;
|
|
}
|
|
p { margin-block-end: var(--body-item-spacing); }
|
|
p:last-child { margin-block-end: 0; }
|
|
|
|
/** SYNTAX HIGHLIGHTING **/
|
|
|
|
.highlight .line {
|
|
display: grid;
|
|
grid-template-columns: max-content auto;
|
|
}
|
|
|
|
.highlight .ln a {
|
|
-webkit-user-select: none;
|
|
-moz-use-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.highlight .cl {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/** HELPER CLASSES **/
|
|
|
|
.centered { text-align: center; }
|
|
.nobreak { white-space: nowrap; }
|
|
|
|
.platter {
|
|
background: var(--background-color);
|
|
border: 1px solid var(--header-border-color);
|
|
border-radius: 12px;
|
|
box-shadow: 4px 5px 5px var(--header-box-shadow-color);
|
|
}
|
|
|
|
.visible { visibility: visible; }
|