From 5cbbd3daf32c25d968d0b4206e614cbd8de53905 Mon Sep 17 00:00:00 2001
From: theBreadCompany <contact@thebread.dev>
Date: Wed, 7 May 2025 01:30:39 +0200
Subject: [PATCH] also add css ofc

---
 index.css | 193 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 193 insertions(+)
 create mode 100644 index.css

diff --git a/index.css b/index.css
new file mode 100644
index 0000000..351e3d2
--- /dev/null
+++ b/index.css
@@ -0,0 +1,193 @@
+:root {
+  --text: #180e20;
+  --background: #f8f4fb;
+  --primary: #2b2065;
+  --secondary: #7a9ee6;
+  --accent: #16408d;
+}
+
+[data-theme="dark"] {
+  --text: #e9dff1;
+  --background: #08040b;
+  --primary: #a69adf;
+  --secondary: #193d85;
+  --accent: #729ce9;
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+
+html, body {
+    font-family: "Fira sans", Helvetica, sans-serif;
+    background-color: var(--background);
+    color: var(--text);
+    height: 100vh;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+    scrollbar-width: none;
+}
+a { color: unset; text-decoration: none; }
+
+.flex-v {
+  display: flex; 
+  flex-direction: column;
+}
+.flex-h { display: flex; }
+.center-v { align-items: center; }
+.center-h { justify-content: center; }
+
+.scroll-container {
+  height: 100vh;
+  overflow-y: scroll;
+  scroll-snap-type: y mandatory;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  scroll-snap-align: start;
+  position: relative;
+}
+.page[first="true"] {
+  justify-content: space-between;
+}
+.page[wip="true"] {
+  display: none;
+}
+.page-bar {
+  height: 10%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: var(--background);
+  z-index: 2;
+}
+.page-bar[top="true"] {
+  top: 0;
+  position: sticky;
+  border-bottom: 1px solid var(--text);
+}
+.page-bar[bottom="true"] {
+  border-top: 1px solid var(--text);
+}
+.scroll-hint {
+  position: relative;
+  height: 10%;
+  margin: 0 auto;
+  animation-name: scroll-hint-anim;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: cubic-bezier(.5, 0, .5, 1);
+}
+
+@keyframes scroll-hint-anim {
+  0% { top: 0px; }
+  100% { top: 40px; }
+}
+
+ul.h-list {
+  display: inline;
+  circle: list;
+}
+.h-list li {
+  display: inline;
+  margin-right: 0.5em;
+}
+
+.product {
+  background-color: var(--secondary);
+  padding: 1em 2em;
+  border-radius: 4px;
+  margin: 1em;
+}
+.product[placeholder="true"] {
+  background-color: unset;
+  border: 3px dashed var(--secondary);
+}
+.product:not([placeholder="true"]):hover {
+  transform: scale(1.05);
+  box-shadow: 10px 10px 10em #7a9ee688;
+}
+.product-placeholder-title {
+  width: 60px;
+  height: 24px; 
+  background-color: lightgray; 
+  border-radius: 4px; 
+  margin: 18.72px 0
+}
+.product-placeholder-icon {
+  width: 50px; 
+  height: 50px; 
+  background-color: lightgray; 
+  margin-left: auto; 
+  border-radius: 4px
+}
+.product-placeholder-description {
+  width: 120px; 
+  height: 19px; 
+  background-color: lightgray; 
+  margin-right: auto; 
+  margin-top: 16px; 
+  margin-bottom: 16px; 
+  border-radius: 4px;
+}
+
+.separator {
+  height: 100%;
+  width: 2px;
+  background-color: var(--text);
+  margin: 0 2em;
+}
+.socials {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+}
+.socials-tile {
+  width: 3em; 
+  height: 3em; 
+  padding: 1.5em; 
+  margin: 1em; 
+  background-color: currentColor;
+  color: var(--accent);
+  border-radius: 4px;
+  mask-size: 100%;
+}
+.socials-tile[variant="git"] { mask-image: url("https://api.iconify.design/mdi:git.svg"); }
+.socials-tile[variant="mastodon"] { mask-image: url("https://api.iconify.design/mdi:mastodon.svg"); }
+.socials-tile[variant="email"] { mask-image: url("https://api.iconify.design/mdi:email.svg"); }
+.socials-tile[variant="discord"] { mask-image: url("https://api.iconify.design/mdi:discord.svg"); }
+.socials-tile:hover {
+}
+
+.txt-list div {
+  margin-left: 2em;
+}
+
+#ts { color: #3178c6; }
+#rs { color: #dea584; }
+#html { color: #e34c26; }
+#swft { color: #f05138; }
+#sh { color: #89e051; }
+#sql { color: #e38c00; }
+#c { color: #555555; }
+#nix { color: #7e7eff; }
+
+#theme-switch {
+  padding: 1em;
+}
+#theme-switch span {
+  user-select: none;
+  cursor: pointer;
+  font-size: 1.5em;
+}
+#theme-switch input[type="checkbox"] {
+  display: none;
+}