refactor: tidied up css

stanislavovsky · Oct 21, 2024 · bee54e5 · bee54e5
1 parent 9792b39
commit bee54e5
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 93 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,96 +1,29 @@
-@import url('https://fonts.googleapis.com/css2?family=Lexend+Zetta:[email protected]&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-body {
-  font-optical-sizing: auto;
-  font-style: normal;
-}
-
-.logo {
-  font-family: 'Lexend Zetta', sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 700;
-  font-style: normal;
-  font-size: 4rem;
-  color: rgba(255, 255, 255, .9)
-}
-
-#section-quick {
-  background: url('/bg.png') no-repeat;
-  background-size: 140vw 100vh;
-  background-position: center;
-}
-
-#section-quick-content {
-  background-image: linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
-                    linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
-  background-size: 150px 150px;
-  animation: bg-scrolling 1.5s infinite;
-  animation-timing-function: linear;
-}
-
-@keyframes bg-scrolling { 100% {background-position: 150px 150px} }
-
-h4 {
-  font-size: 1.5rem;
-}
-
-.card-generator {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.input {
-  background: rgba(255, 255, 255, 0.6);
-  transition: all 0.2s;
-}
-
-.input:active,
-.input:focus,
-.input:focus-within,
-.input:hover {
-  background: rgba(255, 255, 255, 0.8);
-}
-
-.tf-input-label {
-  font-variant: small-caps;
-  font-weight: 500;
-  color: #B271FF;
-  width: 110px;
-  padding-left: 5px;
+.text-last-center {
+  text-align-last: center;
 }
 
-input,
-.label-text {
+.small-caps {
   font-variant: small-caps;
 }
 
-select {
-  font-family: sans-serif;
-  color: #B271FF;
-  text-align-last: center;
-}
-
-.sparkle {
-  position: absolute;
-  z-index: 0;
+.right-1\/10 {
+  right: 10%;
 }
 
-#sparkle-0 {
-  top: 15%;
+.left-1\/10 {
   left: 10%;
 }
 
-#sparkle-1 {
-  top: 25%;
-  right: 10%;
+.top-1\/6 {
+  top: 16.67%;
 }
 
-#sparkle-2 {
-  bottom: 20%;
-  left: 40%;
-}
+
+/* TODO: cleanup & move to trollfactory.css */
 
 #generate-btn {
   background: rgba(255, 255, 255, 0.7);

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,26 +1,26 @@
 export default function Home() {
   return (
-    <div id="section-quick">
-      <div className="flex h-screen" id="section-quick-content">
-        <img src="/sparkle.png" className="sparkle" id="sparkle-0"/>
-        <img src="/sparkle1.png" className="sparkle" id="sparkle-1"/>
-        <img src="/sparkle.png" className="sparkle" id="sparkle-2"/>
+    <div className="tf-bg-blur">
+      <div className="flex h-screen tf-bg-grid">
+        <img src="/sparkle.png" className="absolute left-1/10 top-1/6" />
+        <img src="/sparkle1.png" className="absolute top-1/4 right-1/10" />
+        <img src="/sparkle.png" className="absolute bottom-1/4 left-1/3" />
         <div className="m-auto">
-          <h1 className="logo">TrollFactory</h1>
-          <div className="card card-generator mt-7 mb-20">
+          <h1 className="tf-logo font-bold text-6xl">TrollFactory</h1>
+          <div className="card bg-wt-50 mt-7 mb-20">
             <div className="card-body">
-              <select className="input tf-input-top select w-full">
+              <select className="input tf-input tf-input-top text-tf-0 select text-last-center w-full">
                 <option disabled selected>Dataset</option>
                 <option>🇵🇱 polski / Polska</option>
                 <option>🇺🇸 English / USA</option>
                 <option>🇨🇳 中国人 / 中国</option>
               </select>
-              <label className="input flex items-center gap-2 tf-input-middle">
-                <span className="tf-input-label">Sex</span>
+              <label className="input flex items-center gap-2 tf-input tf-input-middle">
+                <span className="tf-input-label pl-1 w-28 font-medium small-caps text-tf-0">Sex</span>
                 <div className="form-control">
                   <label className="label cursor-pointer pl-0">
                     <span className="label-text pr-2">Female</span>
-                    <input type="radio" name="radio-10" className="radio checked:bg-primary" defaultChecked />
+                    <input type="radio" name="radio-10" className="radio checked:bg-primary" />
                   </label>
                 </div>
                 <div className="form-control">
@@ -32,16 +32,16 @@ export default function Home() {
                 <div className="form-control">
                   <label className="label cursor-pointer">
                     <span className="label-text px-2">Any</span>
-                    <input type="radio" name="radio-10" className="radio checked:bg-secondary" />
+                    <input type="radio" name="radio-10" className="radio checked:bg-secondary" defaultChecked />
                   </label>
                 </div>
               </label>
-              <label className="input flex items-center gap-2 tf-input-middle">
-                <span className="tf-input-label">First name</span>
+              <label className="input flex items-center gap-2 tf-input tf-input-middle">
+                <span className="tf-input-label pl-1 w-28 font-medium small-caps text-tf-0">First name</span>
                 <input type="text" className="grow" placeholder="First name" />
               </label>
-              <label className="input flex items-center gap-2 tf-input-bottom">
-                <span className="tf-input-label">Last name</span>
+              <label className="input flex items-center gap-2 tf-input tf-input-bottom">
+                <span className="tf-input-label pl-1 w-28 font-medium small-caps text-tf-0">Last name</span>
                 <input type="text" className="grow" placeholder="Last name" />
               </label>
             </div>

diff --git a/src/app/trollfactory.css b/src/app/trollfactory.css
@@ -1,3 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Zetta:[email protected]&display=swap');
+
+:root {
+  --color-lavender-amethyst: #B271FF;
+}
+
+
+/* TrollFactory theme colors */
+
+.text-tf-0 {
+  color: var(--color-lavender-amethyst);
+}
+
+.bg-wt-50 {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+
+/* TrollFactory logo */
+
+.tf-logo {
+  color: rgba(255, 255, 255, .9);
+  font-family: 'Lexend Zetta', sans-serif;
+  font-optical-sizing: auto;
+}
+
+
+/* data input */
+
+.tf-input {
+  background: rgba(255, 255, 255, 0.6);
+  transition: all 0.2s;
+}
+
+.tf-input:active,
+.tf-input:focus,
+.tf-input:focus-within,
+.tf-input:hover {
+  background: rgba(255, 255, 255, 0.8);
+}
+
 .tf-input-top {
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
@@ -14,4 +55,25 @@
   border-bottom-right-radius: 11px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
+}
+
+
+/* backgrounds */
+
+.tf-bg-blur {
+  background: url('/bg.png') no-repeat;
+  background-size: 140vw 100vh;
+  background-position: center;
+}
+
+.tf-bg-grid {
+  animation: bg-grid-scroll 1.5s infinite;
+  animation-timing-function: linear;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
+                    linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
+  background-size: 150px 150px;
+}
+
+@keyframes bg-grid-scroll {
+  100% { background-position: 150px 150px }
 }