feat: implement barebone zola templates

2024-11-10 21:45:59 +00:00 · 2024-11-10 21:45:59 +00:00 · f99a9ae2ac
commit f99a9ae2ac
parent 9c20f5ed2e
198 changed files with 2434 additions and 227991 deletions
--- a/_src/assets/style/style.scss
+++ b/_src/assets/style/style.scss
@ -0,0 +1,176 @@
+@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-3);
+}
+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;
+
+  ul {
+    margin-left: var(--prj-spacing-3);
+  }
+}
+
+.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.6), rgba(0, 0, 0, 0.6)),
+    var(--bg-image);
+  background-position: center;
+  background-size: cover;
+  color: var(--prj-text);
+
+  padding: var(--prj-spacing-3);
+
+  .text {
+    padding: var(--prj-spacing-2);
+    background-color: var(--prj-bg-transparent);
+
+    border-radius: var(--prj-border-radius);
+  }
+}
+
+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);
+  }
+}