149 lines
3.0 KiB
SCSS
149 lines
3.0 KiB
SCSS
@use "a_chunk_list";
|
|
@use "a_footer";
|
|
@use "a_layouts";
|
|
@use "a_quick_links";
|
|
@use "a_pages";
|
|
|
|
@use "pane_nav";
|
|
@use "pane_spacer";
|
|
|
|
:root {
|
|
/*
|
|
0: Base of an element. Example: the viewport class.
|
|
|
|
The higher the integer, the lighter the colour, the higher it should be visually, meaning more nested in the cascade.
|
|
|
|
Odd numbers should be used as intermediate colours between the fore and back elements. Excepting white--white's special.
|
|
Eg. Current dropdown menu.
|
|
*/
|
|
font-size: var(--font-size-generic);
|
|
|
|
--accent-red: #cb4c4cff;
|
|
--accent-orange: #e18142ff;
|
|
--accent-yellow: #e4d281ff;
|
|
--accent-green: #c5e689ff;
|
|
--accent-cyan: #a7edefff;
|
|
--accent-blue: #5f62e2ff;
|
|
--accent-indigo: #874ac0ff;
|
|
--accent-purple: #a355d3ff;
|
|
--accent-magenta: #df67dfff;
|
|
--accent-pink: #ff9f9fff;
|
|
|
|
--background-0: #130b21ff;
|
|
--background-1: #170d28ff;
|
|
--background-2: #231833ff;
|
|
--background-3: #211635ff;
|
|
--background-4: #2a223eff;
|
|
|
|
--block-0: #0d0d0dff;
|
|
--block-1: #1a1a1aff;
|
|
--block-2: #272727ff;
|
|
|
|
--highlight-hover: #944db6ff;
|
|
|
|
--white-0: #bfbfbfff;
|
|
--white-1: #d9d9d9ff;
|
|
--white-2: #e5e5e5ff;
|
|
--white-3: #f5f5f5ff;
|
|
|
|
--font-size-generic: 1.85vh;
|
|
|
|
--font-family-generic: "Liberation Sans", Arial, Sans-Serif;
|
|
--font-family-title: "Liberation Serif", Arial, Sans-Serif;
|
|
|
|
--border-radius-small: calc(var(--border-radius-large) / 2);
|
|
--border-radius-large: 1rem;
|
|
--border-radius-leaf: var(--border-radius-small)
|
|
var(--border-radius-large);
|
|
|
|
--margin-pane: 1.5rem;
|
|
|
|
--spacing-horizontal: 0.75rem;
|
|
--spacing-menu-gap: 1rem;
|
|
--spacing-thicc: calc(var(--margin-pane) * 4);
|
|
|
|
--transition-fade: 0.4s ease-out;
|
|
--transition-cut: none;
|
|
|
|
--transform-scale-x: scaleX(1.15);
|
|
--transform-scale-y: scaleY(1.15);
|
|
|
|
body {
|
|
background-color: var(--background-0);
|
|
margin: 0;
|
|
color: var(--white-3);
|
|
}
|
|
}
|
|
|
|
* {
|
|
color-scheme: dark;
|
|
box-sizing: border-box;
|
|
|
|
/* outline: 1px solid red; */
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.3vh;
|
|
font-family: var(--font-family-title);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.5vh;
|
|
font-family: var(--font-family-title);
|
|
}
|
|
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
a {
|
|
font-family: var(--font-family-generic);
|
|
}
|
|
|
|
ion-icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.viewport {
|
|
/* Adds a margin otherwise for some reason. */
|
|
margin: inherit;
|
|
|
|
display: grid;
|
|
grid-auto-flow: column dense;
|
|
grid-template-columns: min-content 1fr min-content;
|
|
}
|
|
|
|
@media only screen and (max-width: 500px) {
|
|
.viewport {
|
|
grid-auto-flow: row;
|
|
grid-template-columns: none;
|
|
|
|
/* Compress spacings to maximize useable area. */
|
|
padding: var(--spacing-horizontal);
|
|
justify-items: center;
|
|
}
|
|
|
|
.pane_nav,
|
|
.pane_spacer,
|
|
.footer {
|
|
position: static;
|
|
top: auto;
|
|
left: auto;
|
|
right: auto;
|
|
}
|
|
|
|
.pane_nav,
|
|
.pane_main,
|
|
.pane_blog,
|
|
.pane_error,
|
|
.pane_spacer {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.italic {
|
|
font-style: italic;
|
|
}
|