andwati/andwati.com
1
0
Fork 0
mirror of https://github.com/andwati/andwati.com.git synced 2026-10-18 01:12:53 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
0c26d89eae6155076b367b6ced2b29df696dddfd
andwati.com/sass/site.scss
T
andwati a1f6a1fa6f init1
2025-08-04 23:27:49 +03:00

362 lines
7.9 KiB
SCSS
Raw Blame History

/* TODO: Future considerations.
- Reset all margin and padding for * to 0.
- Use the <abbr> tag for abbreviations.
- Support footnotes or asides for notes sections.
- Serve fonts from the local server rather than Google's API.
- Support a "display title" in an [extra] section to allow for <br> elements
or other manual control over title display. */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono');
:root {
/* Fonts and Text Sizes */
--default-serif-font: "Noto Serif", serif;
--default-sans-font: "Noto Sans", sans-serif;
--default-mono-font: "Noto Sans Mono", monospace;
--default-font-size: 14px;
--header-font-size: 2.0em;
/* Not sure I like this as the default, but it keeps inline code blocks from
overlapping. */
--default-line-height: 1.5;
/* Gruvbox Dark Colors */
--background-color: #1d2021;
--foreground-color: #ebdbb2;
--link-color: #458588;
--muted-color: #928374;
--primary-accent-color: #b16286;
--secondary-accent-color: #689d6a;
--code-background-color: #282828;
--inline-code-background-color: #3c3836;
}
.accent {
color: var(--primary-accent-color);
}
/* Required for sticky footer. */
html,
body {
height: 100%;
}
body {
display: flex;
/* Required for sticky footer. */
flex-direction: column;
/* Required for sticky footer. */
margin: 0;
line-height: var(--default-line-height);
font-size: var(--default-font-size);
font-family: var(--default-serif-font);
background-color: var(--background-color);
color: var(--foreground-color);
border-top: 0.5em solid var(--primary-accent-color);
}
main {
flex: 1 0 auto;
/* Required for sticky footer. */
}
/* FIXME: For reasons that utterly bewilder me, an <article> with this id needs
to be inside a <main> with no id. I have a strong feeling I've done
something wrong here. */
#content {
max-width: 48em;
margin-left: auto;
margin-right: auto;
padding-right: 1.4em;
padding-left: 1.4em;
padding-bottom: 1.4em;
}
header {
overflow: hidden;
/* FIXME: This WILL cut off titles that are too long! */
margin-top: 1.4em;
margin-bottom: 1.4em;
margin-left: 1em;
margin-right: 1em;
}
header>div.logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
header>h1 {
text-align: center;
font-size: var(--header-font-size);
font-family: var(--default-sans-font);
padding-top: 2.8rem;
margin-top: 0;
margin-bottom: 0.7rem;
}
header .post-meta {
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.9em;
margin-bottom: 0;
}
.post-meta time {
// TODO: This color doesn't look great in with a light color scheme...
color: var(--muted-color);
}
h2,
h3,
h4,
h5,
h6 {
padding-top: 1.2rem;
margin-bottom: 0.2rem;
}
p {
padding-top: 0.4em;
margin-bottom: 1em;
}
blockquote {
/* Default text uses serif, so use sans-serif to differentiate quoted text. */
font-family: var(--default-sans-font);
font-style: italic;
/* Indent blockquotes, but align the start with where text in code begins. */
margin: 0 1.25rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
border-left: 3px solid var(--secondary-accent-color);
}
a {
color: var(--link-color);
text-decoration: none;
}
/* ---- Anchor links --------------------------------------------------------*/
/* Add a # to the left of a subheading when it references an internal link... */
:where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
content: "#";
display: inline-block;
width: 1.2rem;
margin-left: -1.2rem;
opacity: 0;
}
/* ... but only display the internal anchor link when hovered over. */
:where(h2, h3, h4, h5, h6):hover>a[href^="#"]::before {
opacity: 1;
}
/* When internal links are linked directly, display with the accent color. */
:where(h2, h3, h4, h5, h6):target>a[href^="#"]::before {
opacity: 1;
color: var(--primary-accent-color);
}
/* ---- Media ---------------------------------------------------------------*/
img.logo {
width: 64px;
height: 64px;
}
img,
video {
/* Media should fill the width of its container if possible. */
width: 100%;
height: auto;
}
figure {
/* Don't add margins to figures. */
margin: 0;
}
figcaption {
/* De-emphasize figure captions. */
font-size: 0.85rem;
color: var(--muted-color);
}
/* ---- Code blocks ---------------------------------------------------------*/
pre {
display: block;
padding: 0.25rem 1.25rem;
font-size: 85%;
border-left: 0.25rem solid var(--primary-accent-color);
}
code {
padding: 0 0.4rem;
// background-color: #3c3836;
background-color: var(--inline-code-background-color);
/* Inline code blocks look less aggresive with a little rounding. */
border-radius: 2px;
}
pre,
code {
overflow: auto;
font-family: var(--default-mono-font);
}
/* Without this the <code> tag gains a little padding that offsets text by like
2 pixels. Let's *not* do that. */
pre>code {
padding: 0;
background-color: var(--code-background-color);
// Code inside a pre block doesn't need rounded borders.
border-radius: unset;
}
/* ---- Tables --------------------------------------------------------------*/
table {
/* FIXME: Use flexbox for centering? Frankly, this is still bad on mobile.
display: flex;
justify-content: center;
*/
display: block;
overflow-x: auto;
margin-left: auto;
margin-right: auto;
text-align: left;
border-collapse: collapse;
}
/* Headers in a row (column scoped) get a colored bottom border. */
th[scope="col"] {
padding-top: 0.4em;
border-bottom: 3px solid var(--secondary-accent-color);
}
/* Headers in a column (row scoped) get a colored right border. */
th[scope="row"] {
border-right: 3px solid var(--secondary-accent-color);
}
td {
text-align: center;
border: 1px solid var(--muted-color);
}
th,
td {
vertical-align: bottom;
padding-left: 0.4em;
padding-right: 0.4em;
border: 1px solid var(--muted-color);
}
/* ---- Footer, nav, and copyright ------------------------------------------*/
footer {
border-top: 0.5em solid var(--primary-accent-color);
text-align: center;
/* FIXME: Using the code background color could look awkward if a post ends
in a code snippet. */
background-color: var(--code-background-color);
padding: 1.4em;
flex-shrink: 0;
/* Required for sticky footer. */
}
footer a {
color: var(--secondary-accent-color);
}
/* Give footer nav links some breathing room. */
footer>nav>a {
// margin: 0 1.4em;
margin: 0 0.4em;
}
/* FIXME: This could probably go away with global margin/padding adjustments. */
footer p {
padding-top: 0;
}
footer p,
footer a {
font-family: var(--default-sans-font);
/* It doesn't seem as though Google fonts support direct usage of OpenType
features like 'c2sc' and 'smcp'.
FIXME: It's not clear why numerals don't seem to obey this property. */
font-variant-caps: all-small-caps;
}
/* ---- Media Queries ------------------------------------------------------ */
@media(min-width: 427px) {
:root {
--default-font-size: 16px
}
}
@media(min-width: 470px) {
:root {
--default-font-size: 17px;
}
/* Above this size, increase the header margins. Smaller sizes benefit from
extra breathing room in the title. */
header {
margin-left: 2.8em;
margin-right: 2.8em;
}
header>div.logo {
flex-direction: row;
}
img.logo {
margin-right: 0.8em;
}
}
@media(min-width: 625px) {
:root {
--default-font-size: 18px;
}
}
@media(min-width: 802px) {
:root {
--default-font-size: 19px;
}
}
@media(min-width: 1003px) {
:root {
--default-font-size: 20px;
}
}
@media(min-width: 1225px) {
:root {
--default-font-size: 21px;
}
/* On larger devices, give the anchor link some more space. */
:where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
width: 1.8rem;
margin-left: -1.8rem;
}
}
@media(min-width: 1496px) {
:root {
--default-font-size: 22px;
}
}
Reference in New Issue View Git Blame Copy Permalink