redesign pages

Author: xkeshav

domain.code-workspace

@@ -169,7 +169,11 @@
       "*.log": "default"
     },
     "zenMode.centerLayout": false,
-    "cSpell.words": [],
+    "cSpell.words": [
+      "Chebale",
+      "frontmatter",
+      "Omkar"
+    ],
     "workbench.editor.limit.excludeDirty": true,
     "workbench.colorCustomizations": {
       "activityBar.activeBackground": "#040043",

public/assets/images/hero.jpg

@@ -29,6 +29,12 @@
   /*background-color: rgba(31, 41, 55, 0.5);*/
   padding: 1.5rem;
   margin-bottom: 2rem;
+  & .title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    border-bottom: 2px double mediumaquamarine;
+  }
 }
 
 .job__card {

public/assets/images/simplify.jpg

@@ -1,14 +1,20 @@
+:root {
+  --accent-color: #ffcc00;
+}
+html[data-theme="dark"] {
+  color: #fff;
+}
+html[data-theme="light"] {
+  color: #d02a2a;
+}
+
 .controls {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: rgba(255, 255, 255, 0.95);
+  background-color: lab(2 1.78 2.71 / 0.95);
   padding: 1rem;
   z-index: 100;
   display: flex;
   justify-content: space-around;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 10px rgb(226 194 194 / 10%);
 }
 
 .control-group {
@@ -19,6 +25,7 @@
 
 .control-group label {
   font-weight: bold;
+  color: aliceblue;
 }
 
 select,
@@ -29,7 +36,6 @@ button {
 }
 
 button {
-  cursor: pointer;
   background: #fff;
   transition: background 0.3s;
 }
@@ -54,14 +60,39 @@ button:hover {
 
 .meaning-section {
   padding: 2rem;
-  background: white;
+  background: hotpink;
   margin-top: 2rem;
+
+  .detail {
+    font-style: italic;
+    text-align: center;
+    color: #fff;
+    font-size: 2rem;
+    color: black;
+  }
 }
 
 .meaning-content {
   max-width: 800px;
   margin: 0 auto;
   line-height: 1.6;
+  & p {
+    border: 2px solid darkgray;
+    padding: 0.5rem;
+    font-size: larger;
+    margin: 1rem 0;
+    background-color: cadetblue;
+    border-radius: 6px;
+    outline: 2px solid grey;
+    outline-offset: 1px;
+    color: white;
+    transition: background-color 300ms ease-in-out;
+
+    &:hover {
+      background-color: inherit;
+      cursor: pointer;
+    }
+  }
 }
 
 /* Gradient backgrounds */

public/assets/images/workspace.jpg

@@ -8,25 +8,27 @@
     --header-height: 80px;
     --sidebar-width: 16ch;
     --timing: 0.42s;
-    --ease: linear(0 0%,
-        0.0036 9.62%,
-        0.0185 16.66%,
-        0.0489 23.03%,
-        0.0962 28.86%,
-        0.1705 34.93%,
-        0.269 40.66%,
-        0.3867 45.89%,
-        0.5833 52.95%,
-        0.683 57.05%,
-        0.7829 62.14%,
-        0.8621 67.46%,
-        0.8991 70.68%,
-        0.9299 74.03%,
-        0.9545 77.52%,
-        0.9735 81.21%,
-        0.9865 85%,
-        0.9949 89.15%,
-        1 100%);
+    --ease: linear(
+      0 0%,
+      0.0036 9.62%,
+      0.0185 16.66%,
+      0.0489 23.03%,
+      0.0962 28.86%,
+      0.1705 34.93%,
+      0.269 40.66%,
+      0.3867 45.89%,
+      0.5833 52.95%,
+      0.683 57.05%,
+      0.7829 62.14%,
+      0.8621 67.46%,
+      0.8991 70.68%,
+      0.9299 74.03%,
+      0.9545 77.52%,
+      0.9735 81.21%,
+      0.9865 85%,
+      0.9949 89.15%,
+      1 100%
+    );
   }
 
   .layout {
@@ -68,17 +70,68 @@
     font-weight: 600;
     display: flex;
     flex-direction: column;
-    font-family: "Livvic", sans-serif;
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      "Open Sans",
+      "Helvetica Neue",
+      sans-serif;
     gap: 0.5rem;
   }
+  [popover] ul li:first-of-type {
+    margin-top: 0.5rem;
+  }
+  [popover] ul li:last-of-type {
+    margin-bottom: 0.5rem;
+  }
+  [popover] ul li:has(> a) {
+    position: relative;
+  }
+
+  [popover] ul li:has(> a):is(:active, :hover, :focus-visible)::before {
+    opacity: 1;
+  }
+
+  [popover] ul li {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    transition: background-color 0.2s ease-in-out;
+  }
+  [popover] ul li:hover {
+    background-color: color-mix(in hsl, canvas, canvasText 15%);
+  }
+  [popover] ul li a {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+  }
+  [popover] ul li a:hover {
+    color: inherit;
+  }
+  [popover] ul li a:focus-visible {
+    outline: 2px solid color-mix(in hsl, canvas, canvasText 25%);
+    outline-offset: 2px;
+  }
+  [popover] ul li a:focus {
+    outline: 2px solid color-mix(in hsl, canvas, canvasText 25%);
+    outline-offset: 2px;
+  }
 
   [popover] a {
     display: inline-block;
     width: 100%;
     padding-block: 0.5rem;
     padding-inline: 1rem;
     text-decoration: none;
-    color: inherit;
+    color: red;
   }
 
   [popover] {
@@ -365,4 +418,4 @@
   [data-debug="false"] .debug-toggle g:first-of-type {
     display: block;
   }
-}
+}

src/assets/styles/career.css

@@ -1,15 +1,15 @@
 <section>
   <div class="w-full px-4 py-8 md:px-6 md:py-12 lg:px-8">
     <div class="mx-auto">
-      <h2 id="aboutText" class="mb-[0.8rem] inline-block rounded-md py-[2px] text-[27px]">What we do</h2>
+      <h2 class="mb-[0.8rem] inline-block rounded-md py-[2px] text-[27px]">What we do</h2>
       <h1 class="mb-[1.1rem] text-[36px] font-bold leading-[42px] tracking-[-0.03em] lg:text-[61px] lg:leading-[72px]">
         Efficient apps that simplify your life.
       </h1>
       <div class="flex flex-col gap-[1.5rem] lg:flex-row lg:justify-between lg:gap-[1.2rem] xl:gap-[3rem]">
         <figure class="basis-[55%] lg:h-[500px]">
           <img
-            src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzNDk5MjB8MHwxfHNlYXJjaHw0MXx8VGVjaG5vbG9neXxlbnwwfHx8fDE3MDE2MTQ0NTd8MA&ixlib=rb-4.0.3&q=85"
-            alt="person working on a laptop "
+            src="/assets/images/hero.jpg"
+            alt="pattern of a computer screen with triangle shapes"
             class="h-[250px] w-full rounded-xl object-cover md:h-[500px] lg:h-full"
           />
         </figure>

src/assets/styles/letter.css

@@ -12,7 +12,7 @@
         <div class="section-image mb-[10px] h-[150px] basis-[50%] md:h-[300px]">
           <figure>
             <img
-              src="https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDk5MjB8MHwxfHNlYXJjaHw0NXx8VGVjaG5vbG9neXxlbnwwfHx8fDE3MDE2MTQ0NTh8MA&ixlib=rb-4.0.3&q=80&w=1080"
+              src="assets/images/simplify.jpg"
               alt=""
               class="h-[150px] w-full rounded-[10px] object-cover md:h-[300px]"
             />
@@ -22,11 +22,10 @@
           <p
             class="appSimplifyText mb-[20px] text-[14px] leading-[22.4px] text-[#999] md:text-[16px] md:leading-[25.6px]"
           >
-            Based out of Bengaluru city, Recursive Zero stands as a pioneer in innovation, meticulously crafting small
-            yet powerful apps aimed at simplifying your daily tasks and enhancing your storage efficiency. Our
-            cutting-edge solutions are woven with a touch of simplicity, transforming your workflow with remarkable
-            efficiency. Traverse through an intuitive app experience with Recursive Zero, fueling your productivity to
-            unprecedented heights
+            Based in Heart, RecursiveZero pioneers innovative, thoughtfully designed mini apps that simplify daily tasks
+            and boost your productivity. Our solutions blend simplicity with powerful features, making your workflow
+            smoother and more efficient. Discover an intuitive app experience with RecursiveZero and elevate your
+            everyday efficiency.
           </p>
           <div>
             <a href="">

src/assets/styles/menu.css

@@ -5,8 +5,8 @@
         <div class="mb-[10px] basis-[50%] md:mb-[40px]">
           <figure>
             <img
-              src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzNDk5MjB8MHwxfHNlYXJjaHw0Nnx8VGVjaG5vbG9neXxlbnwwfHx8fDE3MDE2MTQ0NTh8MA&ixlib=rb-4.0.3&q=80&w=1080"
-              alt="contactus image"
+              src="/assets/images/workspace.jpg"
+              alt="contact us image"
               class="h-[200px] w-full rounded-[10px] object-cover md:h-[400px]"
             />
           </figure>