feat: "rewrite" in pure HTML/CSS

1 files changed, 147 insertions, 0 deletions

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..592d98e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,147 @@
+:root {
+  --font-min: 16px;
+  --font-desired: calc((2.6vh + 8vw) / 2);
+  --font-max: 32px;
+  --icon-min: 50px;
+  --icon-desired: calc((3.25vh + 10vw) / 2);
+  --icon-max: 96px;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #1e1e2e;
+  color: #ccc;
+  font-family: 'Space Mono', monospace;
+  width: 100%;
+  font-size: clamp(var(--font-min), var(--font-desired), var(--font-max));
+  position: fixed;
+  height: 100dvh;
+}
+
+/* General */
+
+a {
+  color: #ccc;
+  text-decoration: none;
+  transition: color .25s ease-in-out;
+
+  &:hover {
+    color: #a6fbb2;
+    transition: color .25s ease-in-out;
+  }
+}
+
+a.icon {
+  margin-right: 2vw;
+}
+
+.wave {
+  position: absolute;
+  top: 0;
+  max-width: 140vw;
+  max-height: 140vh;
+}
+
+.wave1 {
+  left: 0;
+  transform: rotate(-45deg) translate(-30%, -80%);
+}
+
+.wave2 {
+  right: 0;
+  transform: rotate(45deg) translate(50%, -90%);
+}
+
+/* Homepage */
+
+.socials {
+  margin-top: 10px;
+}
+
+.social-icon {
+  width: clamp(var(--icon-min), var(--icon-desired), var(--icon-max));
+}
+
+.container {
+  display: flex;
+  height: 100dvh;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-direction: column;
+  width: 100%;
+}
+
+.main {
+  text-align: left;
+  line-height: 1.2;
+  margin: 20px;
+}
+
+/* Projects page */
+
+.project-container {
+  padding: 0 10vw;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(40vw, 1fr));
+  height: 80dvh;
+  align-items: center;
+  justify-items: center;
+  overflow: auto;
+  align-content: center;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.project-container::-webkit-scrollbar {
+  display: none;
+}
+
+.project {
+  margin: 15px 15px;
+  font-size: clamp(var(--font-min), 1vw, var(--font-max));
+  padding: 25px 10px;
+  display: flex;
+  align-items: center;
+  background: #1e1e2e;
+  transition: transform .3s ease-in-out;
+  border-radius: 2vh;
+  box-shadow: -12px -12px 28px #27273b73, 12px 12px 20px #12121c73;
+}
+
+.spacer {
+  height: 20dvh;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  z-index: 30;
+}
+
+.home {
+  font-size: clamp(var(--font-min), 2.5vw, 48px);
+  margin-bottom: 15px;
+}
+
+.project-icon {
+  width: 4rem;
+  height: 4rem;
+  margin-right: 10px;
+}
+
+@media (max-width: 839px) {
+  .project-container {
+    grid-template-columns: minmax(90vw, 1fr);
+    padding: 0 5vw;
+    align-content: normal;
+  }
+}
+
+a:hover .project {
+  transform: scale(103%);
+  transition: transform .3s ease-in-out;
+}