Continue migration to tailwind

lonelyteapot · Oct 26, 2023 · 1a5109f · 1a5109f
1 parent 322379d
commit 1a5109f
Show file tree

Hide file tree

Showing 15 changed files with 91 additions and 203 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,6 @@
     "astro": "^3.3.2",
     "astro-icon": "^1.0.0-next.2",
     "astro-seo": "^0.8.0",
-    "normalize.css": "^8.0.1",
     "sharp": "^0.32.6",
     "svgo": "^3.0.2",
     "tailwindcss": "^3.3.3",

diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -1,8 +1,8 @@
 export default {
   plugins: {
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
+    "postcss-import": true,
+    "tailwindcss/nesting": true,
+    tailwindcss: true,
+    autoprefixer: true,
   },
 };
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -6,31 +6,11 @@ export interface Props {
 const { type } = Astro.props;
 ---
 
-<button class:list={[type]} type={type}><slot /></button>
-
-<style>
-  button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.4em;
-    padding: 0.5em 0.75em;
-    min-width: 6em;
-    border-radius: 6px;
-    font-family: var(--secondary-font);
-    font-size: smaller;
-    border: none;
-    cursor: pointer;
-    box-shadow: var(--shadow-md);
-    transition: box-shadow 200ms;
-    background-color: var(--primary-color);
-    color: var(--color-on-primary);
-  }
-
-  button:hover,
-  button:focus,
-  button:active {
-    box-shadow: var(--shadow-xl);
-    outline: none;
-  }
-</style>
+<button
+  class="min-w-"
+  class:list={[
+    type,
+    "bg-primary font-primary flex min-w-[6em] cursor-pointer items-center justify-center gap-1.5 rounded-md px-3 py-2 text-canvas",
+  ]}
+  type={type}><slot /></button
+>
diff --git a/src/components/Card.astro b/src/components/Card.astro
diff --git a/src/components/header/Header.astro b/src/components/header/Header.astro
@@ -3,16 +3,18 @@ import NavItem from "./NavItem.astro";
 import SocialLink from "./SocialLink.astro";
 ---
 
-<header class="sticky top-0 z-10 flex justify-between">
-  <nav>
+<header
+  class="shadow-canvas-50 max-hbp:h-[100px] max-hbp:flex-col max-hbp:items-center sticky top-0 z-10 flex h-[60px] justify-between bg-canvas shadow-lg shadow-canvas"
+>
+  <nav class="max-hbp:flex-1 font-secondary">
     <ul class="nav flex h-full whitespace-nowrap text-base">
       <NavItem title="About" url="/#" />
       <NavItem title="Skills" url="/#skills" />
       <NavItem title="Projects" url="/#projects" />
       <NavItem title="Contact me" url="/#contact-me" />
     </ul>
   </nav>
-  <div>
+  <div class="max-hbp:flex-1">
     <ul
       class="flex h-full items-center justify-between justify-self-stretch pr-2"
     >
@@ -25,30 +27,18 @@ import SocialLink from "./SocialLink.astro";
 <style>
   header {
     grid-area: header;
-    height: 60px;
     padding: 0 calc(50% - var(--max-content-width) / 2);
-    background: linear-gradient(
-      0deg,
-      transparent 0%,
-      var(--background-color-opaque) 7%,
-      var(--background-color) 75%
-    );
   }
+</style>
 
-  @media (max-width: 500px) {
-    header {
-      /* display: grid; */
-      height: 100px;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    header > * {
-      flex: 1 1;
-    }
+<style is:global>
+  html {
+    --header-height: 100px;
   }
 
-  .nav {
-    font-family: var(--secondary-font);
+  @media screen(hbp) {
+    html {
+      --header-height: 60px;
+    }
   }
 </style>
diff --git a/src/components/header/SocialLink.astro b/src/components/header/SocialLink.astro
@@ -12,7 +12,7 @@ const { url, icon } = Astro.props;
 <li>
   <a href={url} target="_blank" class="flex items-center px-2 opacity-80">
     <Icon size={32} name={icon} />
-    <span>{url}</span>
+    <span class="text-[0px]">{url}</span>
   </a>
 </li>
 
@@ -25,8 +25,4 @@ const { url, icon } = Astro.props;
   a:focus {
     opacity: 1;
   }
-
-  span {
-    font-size: 0;
-  }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -3,11 +3,9 @@ import { SEO } from "astro-seo";
 import Analytics from "../components/Analytics.astro";
 import Header from "../components/header/Header.astro";
 import Footer from "../components/Footer.astro";
-import "normalize.css";
 import "@fontsource/work-sans";
 import "@fontsource/montserrat/400.css";
 import "@fontsource/montserrat/600.css";
-import "../styles/variables.css";
 import "../styles/input.scss";
 
 export interface Props {
@@ -20,8 +18,8 @@ const { title, description } = Astro.props;
 const IS_PRODUCTION = import.meta.env.PROD;
 ---
 
-<!DOCTYPE html>
-<html lang="en" prefix="og: https://ogp.me/ns#">
+<!doctype html>
+<html lang="en" prefix="og: https://ogp.me/ns#" class="bg-canvas">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -44,43 +42,39 @@ const IS_PRODUCTION = import.meta.env.PROD;
     />
     {IS_PRODUCTION && <Analytics />}
   </head>
-  <body class="grid gap-x-7 min-h-screen">
+  <body
+    class="font-primary grid min-h-screen gap-x-7 bg-canvas text-neutral-50"
+  >
     <Header />
     <slot />
     <Footer />
   </body>
 </html>
 
-
-<style>
+<style is:global>
   html {
+    --primary-color: #29c785;
+    --color-on-canvas: #ffffff;
+    --max-content-width: 900px;
     scroll-behavior: smooth;
     scrollbar-width: thin;
   }
-</style>
-
-<style lang="scss" is:global>
-  @use "sass:color";
 
   body {
     grid-template:
       "header header header" max-content
       "  .     main    .   " auto
       "  .    footer   .   " max-content
       / 1fr minmax(auto, var(--max-content-width)) 1fr;
-    font-family: var(--primary-font);
-    background-color: var(--background-color);
-    color: var(--color-on-background);
   }
 
   main {
     grid-area: main;
-    display: flex;
-    flex-direction: column;
+    @apply flex flex-col;
   }
 
   section {
-    // Adjust anchoring position for header height
+    /* Adjust anchoring position for header height */
     padding-top: calc(var(--header-height) - 4px);
     margin-top: calc(4px - var(--header-height));
 
@@ -97,41 +91,23 @@ const IS_PRODUCTION = import.meta.env.PROD;
   h4,
   h5,
   h6 {
-    font-family: var(--secondary-font);
-    font-weight: 500;
+    @apply font-secondary font-medium;
   }
 
   h2 {
-    text-align: center;
-    margin: 1.5rem 0;
-    font-size: 1.825rem;
-    font-family: var(--primary-font);
+    /* TODO: Remove margin */
+    @apply font-primary my-4 text-center text-3xl;
   }
 
   h3 {
-    color: var(--secondary-color);
+    @apply text-primary;
   }
 
   strong {
-    font-weight: 600;
+    @apply font-semibold;
   }
 
   img {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-  }
-
-  .yellow {
-    color: #756303;
-  }
-
-  .green {
-    color: #29c785;
-  }
-
-  .gray {
-    color: #666;
+    @apply flex items-center justify-center text-center;
   }
 </style>
diff --git a/src/sections/About.astro b/src/sections/About.astro
@@ -1,36 +1,20 @@
-<section id="about" class="text-center grid place-content-center">
-  <h1 class="title m-0 -ml-2">Dmitry Semenov</h1>
-  <p class="tagline text-xl text-left">Software Developer</p>
-  <p class="nickname text-xl">@lonelyteapot</p>
+<section
+  id="about"
+  class="grid h-[50vh] grid-cols-[auto_min-content] place-content-center text-center"
+>
+  <h1
+    class="title text-primary font-secondary col-span-2 row-start-1 m-0 -ml-2 text-[5rem]"
+  >
+    Dmitry Semenov
+  </h1>
+  <p class="tagline row-start-2 text-left text-xl">Software Developer</p>
+  <p class="nickname row-start-2 text-xl">@lonelyteapot</p>
 </section>
 
 <style>
-  section {
-    height: 50vh;
-    grid-template:
-      "title title" min-content
-      "tagline nickname" min-content
-      / auto min-content;
-  }
-
-  .title {
-    grid-area: title;
-    font-size: min(11.125vw, 5rem);
-    font-family: var(--secondary-font);
-    color: var(--primary-color);
-  }
-
-  @media (max-width: 500px) {
+  @media (min-width: 500px) {
     .title {
-      font-size: 5rem;
+      font-size: min(11.125vw, 5rem);
     }
   }
-
-  .tagline {
-    grid-area: tagline;
-  }
-
-  .nickname {
-    grid-area: nickname;
-  }
 </style>
diff --git a/src/sections/ContactMe.astro b/src/sections/ContactMe.astro
@@ -20,5 +20,3 @@ import Button from "../components/Button.astro";
     <Button type="submit">Send</Button>
   </form>
 </section>
-
-<style></style>
diff --git a/src/sections/ProjectIconLink.astro b/src/sections/ProjectIconLink.astro
@@ -13,16 +13,14 @@ const { text, url, icon } = Astro.props;
 <a
   href={url}
   target="_blank"
-  class="flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-xs"
+  class="font-secondary text-primary flex flex-col items-center gap-0.5 rounded-lg p-1.5 text-xs"
 >
   <Icon size={20} name={icon} />
   <span>{text}</span>
 </a>
 
 <style>
   a {
-    color: var(--secondary-color);
-    font-family: var(--secondary-font);
     transition: background-color 200ms;
   }