Improve styling

xypnox · Jan 11, 2024 · 35cbf4b · 35cbf4b
1 parent 147562b
commit 35cbf4b
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 85 deletions.
diff --git a/src/components/elements/link.astro b/src/components/elements/link.astro
@@ -0,0 +1,43 @@
+---
+interface Props {
+  title?: string;
+  href: string;
+  icon?: string;
+}
+const { title, href, icon } = Astro.props;
+
+const prettyTitle = title || href.replace(/https?:\/\//, "");
+---
+
+<a class="weblink theme-card" href={href}>
+  {icon && <iconify-icon icon={icon} />}
+  <span class="linktext">{prettyTitle}</span>
+</a>
+
+<style>
+  .weblink {
+    display: flex;
+    align-items: center;
+    color: var(--primary-color);
+    /* text-decoration: none; */
+    gap: 0.5rem;
+    background: transparent;
+    border-radius: 0.5rem;
+    width: max-content;
+  }
+
+  .weblink:hover {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  .weblink .linktext {
+    padding: 0.5rem 1rem;
+    padding-left: 0;
+  }
+
+  .weblink iconify-icon {
+    padding: 0.5rem 1rem;
+    font-size: 1.25rem;
+    padding-right: 0;
+  }
+</style>
diff --git a/src/components/nav/pageNav.astro b/src/components/nav/pageNav.astro
@@ -25,9 +25,8 @@ const {links} = Astro.props
 <style>
   .page-nav {
     display: flex;
-    justify-content: center;
     flex-wrap: wrap;
-    margin: 2rem 0;
+    margin: 0;
     gap: 1rem;
   }
   .link-wrapper {

diff --git a/src/components/pageHeader.astro b/src/components/pageHeader.astro
@@ -14,7 +14,7 @@ const {title, description} = Astro.props;
 
 <style>
   header {
-    text-align: center;
+    /* text-align: center; */
     margin-bottom: 2rem;
   }
   header h1 {

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -47,20 +47,6 @@ const props = Astro.props;
     color: var(--primary-color);
   }
 
-  .content img {
-    max-width: 100%;
-    height: auto;
-    margin: 0 auto;
-  }
-
-  .content pre.astro-code {
-    padding: 1rem;
-    font-size: var(--font-size-sm);
-    border-radius: 0.5rem;
-    border: 1rem solid var(--surface);
-    background-position: var(--card-backgroundPosition);
-  }
-
   h1,
   h2,
   h3,

diff --git a/src/pages/blag/posts/[...slug].astro b/src/pages/blag/posts/[...slug].astro
@@ -161,7 +161,7 @@ const dateFormatOption = {
     display: flex;
     flex-direction: row;
     gap: 2rem;
-    max-width: 1200px;
+    max-width: var(--layout-content-wide);
     margin: 0 auto;
   }
 
@@ -180,7 +180,7 @@ const dateFormatOption = {
   .content {
     display: flex;
     flex-direction: column;
-    max-width: 800px;
+    max-width: var(--layout-content-main);
     width: 100%;
     margin: 0 auto;
     line-height: 1.5;

diff --git a/src/pages/design/index.astro b/src/pages/design/index.astro
@@ -1,73 +1,97 @@
 ---
 import Layout from "../../layouts/MainLayout.astro";
-import PageHeader from '../../components/pageHeader.astro'
+import PageHeader from "../../components/pageHeader.astro";
 
 const designSections = [
-  { name: "Covers", image: '/design-covers/covers.webp', slug: "/design/covers"},
-  { name: "Logos", image: '/design-covers/logos.webp', slug: "/design/logos"},
-  { name: "Posters", image: '/design-covers/posters.webp',  slug: "https://posters.xypnox.com"},
-  { name: "Experiments", image: '/design-covers/exp.webp',  slug: "https://xypnox.studio"},
-]
+  {
+    name: "Covers",
+    image: "/design-covers/covers.webp",
+    slug: "/design/covers",
+  },
+  { name: "Logos", image: "/design-covers/logos.webp", slug: "/design/logos" },
+  {
+    name: "Posters",
+    image: "/design-covers/posters.webp",
+    slug: "https://posters.xypnox.com",
+  },
+  {
+    name: "Experiments",
+    image: "/design-covers/exp.webp",
+    slug: "https://xypnox.studio",
+  },
+];
 ---
 
 <Layout title="Design">
-  <PageHeader title="Design" />
   <div class="design-sections">
-    {designSections.map(d =>
-      <a href={d.slug}>
-        <img src={d.image} />
-        <span class="text-gradient-fx">{d.name}</span>
-      </a>
-    )}
+    <div>
+      <h1 class="page-title">Des<br />ign</h1>
+    </div>
+    {
+      designSections.map((d) => (
+        <a href={d.slug}>
+          <img src={d.image} />
+          <span class="text-gradient-fx">{d.name}</span>
+        </a>
+      ))
+    }
   </div>
   <div class="notice">
-    For design related services contact via <a href="https://x5z.studio">x5z.studio</a>
+    For design related services contact via <a href="https://x5z.studio"
+      >x5z.studio</a
+    >
   </div>
 </Layout>
 
 <style>
-.design-sections {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  justify-items: center;
-  gap: 2rem;
-  width: 100%;
-  max-width: 1000px;
-  margin: 0 auto;
-}
+  .design-sections {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    justify-items: center;
+    gap: 2rem;
+    width: 100%;
+    max-width: 1000px;
+    margin: 4rem auto;
+  }
 
-.design-sections > a {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font-size-xl);
-  background: var(--background);
-  border: 1px solid var(--border);
-  color: var(--heading);
-  border-radius: 2rem;
-  gap: 0.5rem;
-  padding-bottom: 1rem;
-  text-decoration: none;
-  flex-shrink: 0;
-}
+  .design-sections .page-title {
+    font-size: calc(min(100vw, 1000px) / 6);
+    text-shadow: 0.2rem 0.2rem 0.4rem var(--secondary-color);
+    color: var(--background);
+    width: 100%;
+  }
 
-.design-sections > a:hover {
-  color: var(--primary-color);
-  border-color: var(--primary-color);
-}
+  .design-sections > a {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-size-xl);
+    background: var(--background);
+    border: 1px solid var(--border);
+    color: var(--heading);
+    border-radius: 2rem;
+    gap: 0.5rem;
+    padding-bottom: 1rem;
+    text-decoration: none;
+    flex-shrink: 0;
+  }
 
-.design-sections img {
-  width: 100%;
-  height: 100%;
-  max-height: 600px;
-  max-width: 600px;
-  border-radius: 2rem;
-}
-.notice {
-  margin-top: 4rem;
-  padding: 1rem;
-  text-align: center;
-}
-</style>
+  .design-sections > a:hover {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
 
+  .design-sections img {
+    width: 100%;
+    height: 100%;
+    max-height: 600px;
+    max-width: 600px;
+    border-radius: 2rem;
+  }
+  .notice {
+    margin-top: 4rem;
+    padding: 1rem;
+    text-align: center;
+  }
+</style>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
@@ -3,6 +3,7 @@ import Layout from "../layouts/MainLayout.astro";
 import { Projects as projectsData } from "../content/projects";
 import PageHeader from "../components/pageHeader.astro";
 import PageNav from "../components/nav/pageNav.astro";
+import WebLink from "../components/elements/link.astro";
 
 const ProjectsWithSlug = projectsData.map((p) => ({
   ...p,
@@ -12,24 +13,26 @@ const ProjectsWithSlug = projectsData.map((p) => ({
 
 <Layout title="Projects">
   <main>
-    <PageHeader title="Projects" />
-    <PageNav
-      links={ProjectsWithSlug.map((p) => ({
-        name: p.title,
-        slug: `#${p.slug}`,
-      }))}
-    />
     <div class="projectList">
+      <div>
+        <PageHeader title="Projects" />
+        <PageNav
+          links={ProjectsWithSlug.map((p) => ({
+            name: p.title,
+            slug: `#${p.slug}`,
+          }))}
+        />
+      </div>
       {
         ProjectsWithSlug.map((p) => (
-          <div id={p.slug} class="projectCard">
+          <div id={p.slug} class="projectCard theme-card">
             <img src={p.image} alt={p.title} />
             <div class="cardContent">
               <h1>{p.title}</h1>
               {p.description.map((d) => (
                 <p>{d}</p>
               ))}
-              {p.link && <a href={p.link}>{p.link}</a>}
+              {p.link && <WebLink href={p.link} icon="ph:globe-duotone" />}
               <p class="projectTags">
                 {p.tags.map((t) => (
                   <span>{t}</span>
@@ -58,11 +61,10 @@ const ProjectsWithSlug = projectsData.map((p) => ({
     align-items: flex-start;
     gap: 2rem;
     padding: 2rem;
-    border: 1px solid var(--border);
-    background: var(--background);
     border-radius: 1rem;
     width: 100%;
     line-height: 1.5;
+    transition: all 0.5s ease-in-out;
   }
 
   .cardContent {

diff --git a/src/styles/content.css b/src/styles/content.css
@@ -93,3 +93,32 @@
   background-position: var(--card-backgroundPositionHover);
   border: var(--card-borderHover);
 }
+
+.content img {
+  height: auto;
+  margin: 0 auto;
+}
+
+@media (min-width: calc(1232px)) {
+  .content img {
+    width: calc(var(--layout-content-wide) - 32px);
+    height: auto;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+  }
+}
+@media (max-width: 1232px) {
+  .content img {
+    max-width: 100%;
+  }
+}
+
+.content pre.astro-code {
+  padding: 1rem;
+  font-size: var(--font-size-sm);
+  border-radius: 0.5rem;
+  border: 1rem solid var(--surface);
+  background-position: var(--card-backgroundPosition);
+}
+
diff --git a/src/theme.ts b/src/theme.ts
@@ -93,7 +93,15 @@ const card = {
   backgroundPositionHover: '10% 20%',
 }
 
+const layout = {
+  content: {
+    wide: '1200px',
+    main: '800px',
+  },
+}
+
 export const themeVars = {
+  layout,
   font: {
     family: 'Jost, sans-serif',
     size: fontSizes,