feat: initial commit

src/scss/base.scss

@@ -0,0 +1,24 @@
+/* color palette */
+:root {
+  --clr-sebin-red: oklch(57.67% 0.161 32.69);
+  --clr-sebin-yellow: oklch(78.43% 0.126 68.88);
+  --clr-sebin-blue-dark: oklch(49.29% 0.08 265.23);
+  --clr-sebin-blue-light: oklch(61.56% 0.098 263.47);
+  --clr-sebin-green: oklch(71.11% 0.229 141.29);
+  --clr-sebin-black: oklch(35.57% 0.01 17.62);
+  --clr-sebin-brown: oklch(45.81% 0.083 32.71);
+
+  --clr-page-black: oklch(21.78% 0 0);
+  --clr-page-black-clear: oklch(21.78% 0 0 / 50%);
+  --clr-page-black-light: oklch(32.11% 0 0);
+  --clr-page-black-light-clear: oklch(32.11% 0 0 / 75%);
+}
+
+/* semantic color variables for this project */
+:root {
+  --page-heading-font: 'Righteous', sans-serif;
+  --page-copy-font: 'Work Sans', sans-serif;
+  --page-transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  --page-transform: translateY(5em);
+  --page-padding: clamp(1em, 2vw, 1.5em);
+}

src/scss/main.scss

@@ -0,0 +1,152 @@
+@import '@/assets/fonts/righteous/righteous.css';
+@import '@/assets/fonts/work-sans/work-sans.css';
+@import '@/scss/base';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+*::selection {
+  background: var(--clr-sebin-red);
+}
+
+:root {
+  font-size: 16px;
+}
+
+body {
+  position: relative;
+  color: #fff;
+  font-family: var(--page-copy-font);
+  font-size: 1.25rem;
+  line-height: 1.5;
+
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &::before,
+  &::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    transition: filter 0.3s linear;
+  }
+
+  &::before {
+    background-image: url(@/assets/sebin-bust.png);
+    background-image: image-set(
+      '@/assets/sebin-bust.avif' type('image/avif'),
+      '@/assets/sebin-bust.webp' type('image/webp'),
+      '@/assets/sebin-bust.png' type('image/png')
+    );
+    background-size: 80dvh;
+    background-position: clamp(max(50% + 10rem, min(50% + 20vw, 50% + 30vw)), 100%, 100%) bottom;
+    background-repeat: no-repeat;
+    z-index: -1;
+  }
+
+  &::after {
+    background: url(@/assets/background.svg) center/cover;
+    background-color: var(--clr-page-black);
+    z-index: -2;
+  }
+
+  &.scroll-blur {
+    &::before {
+      @media (max-width: 62.5em) and (min-height: 22em) {
+        filter: blur(0.375rem) brightness(0.75);
+      }
+    }
+  }
+}
+
+.scroll-container {
+  height: 100dvh;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+  transition: 0.3s;
+}
+
+main {
+  min-height: 100dvh;
+  max-width: clamp(30em, 100vw, 40em);
+  filter: drop-shadow(0 0 0.125rem #000);
+}
+
+section {
+  padding: 0 max(var(--page-padding), env(safe-area-inset-right))
+    max(var(--page-padding), env(safe-area-inset-bottom))
+    max(var(--page-padding), env(safe-area-inset-left));
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--page-heading-font);
+}
+
+h1 {
+  font-size: clamp(3.125rem, 5vw, 4.5rem);
+}
+
+h2 {
+  font-size: clamp(2.625rem, 4.25vw, 3.875rem);
+}
+
+h3 {
+  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
+}
+
+p {
+  margin: 0.75em 0;
+}
+
+a {
+  color: inherit;
+  text-shadow: 0 0 0 #fff;
+
+  p & {
+    transition:
+      color 0.3s linear,
+      text-shadow 0.3s linear;
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--clr-sebin-yellow);
+        text-shadow: 0 0 0.5em var(--clr-sebin-yellow);
+      }
+    }
+  }
+}
+
+code {
+  font-size: 0.875em;
+  background-color: var(--clr-page-black);
+  border: 0.0625em solid var(--clr-page-black-light);
+  border-radius: 0.5em;
+  padding: 0.125em 0.25em;
+  white-space: nowrap;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: var(--page-transition);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: var(--page-transform);
+}