aleidk
944b553e73
This component accept a Page<T> type from [astro](https://docs.astro.build/en/guides/routing/#complete-api-reference)
165 lines
2.9 KiB
SCSS
165 lines
2.9 KiB
SCSS
@use './variables.scss' as *;
|
|
@use './utils.scss';
|
|
@use './animations.scss';
|
|
|
|
// SASS variables are imported without namespace, but try to always use native
|
|
// CSS variables when possible so they can be overrwritten by custom styles
|
|
|
|
html {
|
|
background-color: var(--prj-bg);
|
|
color: var(--prj-text);
|
|
|
|
/* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
|
|
font-size: calc(15px + 0.390625vw);
|
|
}
|
|
|
|
body > main {
|
|
max-width: 95vw; /* leave some space in the end by default */
|
|
margin: auto;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
section:not(.clean) {
|
|
/* outline: 1px solid var(--prj-accent-bg); */
|
|
padding: var(--prj-spacing-3);
|
|
background-color: var(--prj-surface-1);
|
|
box-shadow: 10px 10px 5px 0px var(--prj-shadow);
|
|
border-radius: var(--prj-border-radius);
|
|
}
|
|
|
|
section:not(:first-of-type) {
|
|
margin-top: var(--prj-spacing-4);
|
|
}
|
|
|
|
h1,
|
|
.fs-1 {
|
|
font-size: 3rem !important;
|
|
margin-top: 0;
|
|
margin-bottom: var(--prj-spacing-4);
|
|
}
|
|
h2,
|
|
.fs-2 {
|
|
font-size: 2.5rem !important;
|
|
margin-bottom: var(--prj-spacing-3);
|
|
}
|
|
h3,
|
|
.fs-3 {
|
|
font-size: 2rem !important;
|
|
margin-bottom: var(--prj-spacing-2);
|
|
}
|
|
h4,
|
|
.fs-4 {
|
|
font-size: 1.5rem !important;
|
|
margin-bottom: var(--prj-spacing-2);
|
|
}
|
|
h5,
|
|
.fs-5 {
|
|
font-size: 1.25rem !important;
|
|
margin-bottom: var(--prj-spacing-1);
|
|
}
|
|
h6,
|
|
.fs-6 {
|
|
font-size: 1rem !important;
|
|
margin-bottom: var(--prj-spacing-1);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: var(--prj-spacing-2);
|
|
}
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
|
@each $name, $size in $screen-sizes {
|
|
@media screen and (min-width: $size) {
|
|
body > main {
|
|
max-width: $size;
|
|
}
|
|
|
|
.container {
|
|
margin: auto;
|
|
max-width: $size;
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--prj-link-text);
|
|
}
|
|
|
|
ul {
|
|
/* Make the marker position is inside the container */
|
|
list-style-position: inside;
|
|
margin: 0;
|
|
}
|
|
|
|
.list-unstyle {
|
|
list-style: none;
|
|
}
|
|
|
|
img,
|
|
video {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
img.respect-width,
|
|
video.respect-width {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
img.respect-height,
|
|
video.respect-height {
|
|
max-height: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
li:not(:last-child) {
|
|
margin-bottom: var(--prj-spacing-1);
|
|
}
|
|
|
|
.btn {
|
|
padding: var(--prj-spacing-1);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--prj--primary-bg);
|
|
color: var(--prj--primary-text);
|
|
}
|
|
|
|
/* Lightgallery iframe fix */
|
|
.lg-has-iframe {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
.lg-object {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
|
|
.bg-image {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
|
|
var(--bg-image);
|
|
background-position: center;
|
|
background-size: cover;
|
|
color: var(--prj-bg);
|
|
|
|
padding: var(--prj-spacing-3);
|
|
}
|
|
|
|
a {
|
|
transition: text-shadow 0.2s;
|
|
--anim-shadow-color: var(--prj-accent-bg);
|
|
|
|
&:not(.clean):hover {
|
|
text-shadow: 1px 1px 8px var(--anim-shadow-color);
|
|
}
|
|
}
|