🎨 feat: responsive design

jamerrq · Jan 19, 2024 · 5f2bc60 · 5f2bc60
1 parent ec68847
commit 5f2bc60
Show file tree

Hide file tree

Showing 31 changed files with 74 additions and 77 deletions.
diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx
@@ -7,7 +7,7 @@ const LAST_ENTRIES_STYLES = [
   'rounded-sm',
   'flex',
   'flex-col',
-  'p-4',
+  'p-2',
   'font-bold',
   'text-black',
   'font-rubik-doodle',
@@ -31,7 +31,7 @@ export default function LastEntries() {
   return (
     <article class={LAST_ENTRIES_STYLES}>
       <h1 class='dark:text-emerald-300 text-emerald-950'>- Last Entries -</h1>
-      <ul class='grid grid-cols-[1fr_7fr] gap-2 w-full p-2 responsive-text-sm'>
+      <ul class='grid grid-cols-[1fr_7fr] gap-3 w-full p-2 responsive-text-sm'>
         <li class='dark:text-cyan-300 text-cyan-950'>Date</li>
         <li class='dark:text-cyan-300 text-cyan-950'>Title / Título</li>
         {entries.map((entry, index) => {

diff --git a/src/components/css-peeps/striped-pocket-tee-light.astro b/src/components/css-peeps/striped-pocket-tee-light.astro
@@ -2,7 +2,7 @@
 import Peep from './peep.astro'
 ---
 
-<div class='dark:hidden'>
+<div class='xl:block hidden dark:hidden'>
   <Peep
     head='twists1'
     face='suspicious'

diff --git a/src/components/css-peeps/striped-pocket-tee.astro b/src/components/css-peeps/striped-pocket-tee.astro
@@ -2,7 +2,7 @@
 import Peep from './peep.astro'
 ---
 
-<div class='hidden dark:block'>
+<div class='hidden xl:dark:block'>
   <Peep
     head='twists1'
     face='calm'

diff --git a/src/components/css-peeps/tech-peep-light.astro b/src/components/css-peeps/tech-peep-light.astro
@@ -2,7 +2,7 @@
 import Peep from './peep.astro'
 ---
 
-<div class='dark:hidden'>
+<div class='xl:block hidden dark:hidden'>
   <Peep
     head='twists1'
     face='suspicious'

diff --git a/src/components/css-peeps/tech-peep.astro b/src/components/css-peeps/tech-peep.astro
@@ -2,7 +2,7 @@
 import Peep from './peep.astro'
 ---
 
-<div class='hidden dark:block'>
+<div class='hidden xl:dark:block'>
   <Peep
     head='twists1'
     face='calm'

diff --git a/src/components/featured-and-projects/about.astro b/src/components/featured-and-projects/about.astro
@@ -24,7 +24,9 @@ const ABOUT_STYLES = [
   'flex-row',
   'gap-2',
   'text-slate-900',
-  'dark:text-slate-300'
+  'dark:text-slate-300',
+  'p-2',
+  'flex-wrap'
 ].join(' ')
 interface Props {
   lang: string

diff --git a/src/components/featured-and-projects/featured-projects-bento.astro b/src/components/featured-and-projects/featured-projects-bento.astro
@@ -1,7 +1,7 @@
 ---
-import Bento from '../main/bento.astro'
+import Bento from '@components/main/bento.astro'
 import About from './about.astro'
-import Buttons from '../main/buttons.astro'
+import Buttons from '@components/main/buttons.astro'
 import ResourcesPreact from './resources.tsx'
 import ProjectsPreact from './projects.tsx'
 interface Props {

diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
@@ -3,7 +3,7 @@ import { data, logos } from '@data/projects.json'
 import Link from './link'
 
 const PROJECT_STYLES: string = [
-  'col-span-2',
+  'col-span-6',
   'row-span-4',
   'bg-emerald-300',
   'rounded-sm',
@@ -27,10 +27,8 @@ const PROJECT_STYLES: string = [
   'text-emerald-950',
   'dark:text-emerald-300',
   'dark:bg-emerald-900',
-  'hover:scale-[1.02]',
-  'hover:transition-all',
   'responsive-text-xs',
-  'px-4'
+  'p-2'
 ].join(' ')
 
 import { signal } from '@preact/signals'
@@ -58,7 +56,7 @@ type ResourcesProps = {
 
 import { Left, Right } from './icons'
 
-export default function Resources({ n = 3, lang = 'en' }: ResourcesProps) {
+export default function Resources({ n = 1, lang = 'en' }: ResourcesProps) {
   const goRight = () => {
     index.value++
     if (index.value > data.length - 1) index.value = 0
@@ -79,7 +77,7 @@ export default function Resources({ n = 3, lang = 'en' }: ResourcesProps) {
         const project = data.at((i + index.value) % data.length)!
         return (
           <article class={PROJECT_STYLES} key={i}>
-            <h1 class="text-2xl">{project.title}</h1>
+            <h1 class='text-2xl'>{project.title}</h1>
             <p class='font-bold responsive-text-xxs font-merriweather dark:text-slate-200'>
               {project.description[lang as 'es' | 'en']}
             </p>

diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx
@@ -25,7 +25,8 @@ const RESOURCE_STYLES: string = [
   'dark:bg-slate-900',
   'hover:scale-[1.02]',
   'hover:transition-all',
-  'text-xl'
+  'text-xl',
+  'p-2'
 ].join(' ')
 
 import { signal } from '@preact/signals'

diff --git a/src/components/icons/translator.astro b/src/components/icons/translator.astro
@@ -1,8 +1,4 @@
-<svg
-  xmlns='http://www.w3.org/2000/svg'
-  viewBox='0 0 24 24'
-  {...Astro.props}
->
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...Astro.props}>
   <path
     fill-rule='evenodd'
     d='M9 2.25a.75.75 0 0 1 .75.75v1.506a49.384 49.384 0 0 1 5.343.371.75.75 0 1 1-.186 1.489c-.66-.083-1.323-.151-1.99-.206a18.67 18.67 0 0 1-2.97 6.323c.318.384.65.753 1 1.107a.75.75 0 0 1-1.07 1.052A18.902 18.902 0 0 1 9 13.687a18.823 18.823 0 0 1-5.656 4.482.75.75 0 0 1-.688-1.333 17.323 17.323 0 0 0 5.396-4.353A18.72 18.72 0 0 1 5.89 8.598a.75.75 0 0 1 1.388-.568A17.21 17.21 0 0 0 9 11.224a17.168 17.168 0 0 0 2.391-5.165 48.04 48.04 0 0 0-8.298.307.75.75 0 0 1-.186-1.489 49.159 49.159 0 0 1 5.343-.371V3A.75.75 0 0 1 9 2.25ZM15.75 9a.75.75 0 0 1 .68.433l5.25 11.25a.75.75 0 1 1-1.36.634l-1.198-2.567h-6.744l-1.198 2.567a.75.75 0 0 1-1.36-.634l5.25-11.25A.75.75 0 0 1 15.75 9Zm-2.672 8.25h5.344l-2.672-5.726-2.672 5.726Z'

diff --git a/src/components/main/about-me-card.astro b/src/components/main/about-me-card.astro
@@ -27,7 +27,8 @@ const ABOUT_ME_STYLES = [
   // 'hover:scale-[1.02]',
   // 'hover:transition-all',
   'flex-col',
-  'text-base'
+  'text-base',
+  'p-2'
 ].join(' ')
 ---
 

diff --git a/src/components/main/background.astro b/src/components/main/background.astro
@@ -13,4 +13,4 @@
     }
   </style>
 </>
-<main class='background blur dark:blur-none hidden xl:block' />
+<main class='background blur dark:blur-none' />
diff --git a/src/components/main/bento.astro b/src/components/main/bento.astro
@@ -1,20 +1,25 @@
 ---
 const BENTO_STYLES = [
   'bg-[#1b383c]',
-  'hidden xl:grid',
+  'flex',
+  'flex-col',
+  'xl:grid',
   'items-center',
   'justify-center',
+  // 'min-w-[95dvw]',
+  // 'min-h-[95dvh]',
   'w-[95dvw]',
-  'h-[95dvh]',
+  'xl:h-[95dvh]',
   'content-center',
   'rounded-sm',
   'shadow-xl',
   'border-2',
   'grid-cols-1',
-  'xl:grid-cols-6',
-  'xl:grid-rows-6',
+  'auto-cols-auto',
+  'grid-cols-6',
+  'grid-rows-6',
   'gap-3',
-  'p-3'
+  'p-2'
 ].join(' ')
 ---
 

diff --git a/src/components/main/blog.astro b/src/components/main/blog.astro
@@ -26,7 +26,8 @@ const BLOG_STYLES = [
   'dark:bg-slate-900',
   'hover:scale-[1.02]',
   'hover:duration-200',
-  'hover:ease-in-out'
+  'hover:ease-in-out',
+  'p-2'
 ].join(' ')
 import { siGitbook } from 'simple-icons'
 interface Props {

diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro
@@ -25,7 +25,8 @@ const BUTTONS_STYLES = [
   'duration-200',
   'dark:bg-slate-900',
   'dark:text-slate-100',
-  'bg-slate-300'
+  'bg-slate-300',
+  'p-2'
 ].join(' ')
 
 const BUTTON_STYLES = [

diff --git a/src/components/main/featured.astro b/src/components/main/featured.astro
@@ -1,6 +1,6 @@
 ---
 const FEATURED_STYLES = [
-  'col-span-1 xl:col-span-1',
+  'col-span-1',
   'row-span-2',
   'gap-2',
   'bg-slate-300',
@@ -23,12 +23,12 @@ const FEATURED_STYLES = [
   'ease-in-out',
   'duration-200',
   'border-amber-500',
-  // 'dark:border-amber-500',
   'border-2',
   'dark:bg-slate-900',
   'hover:scale-[1.02]',
   'hover:duration-200',
-  'hover:ease-in-out'
+  'hover:ease-in-out',
+  'p-2'
 ].join(' ')
 
 interface Props {

diff --git a/src/components/main/socials.astro b/src/components/main/socials.astro
@@ -29,7 +29,8 @@ const SOCIALS_STYLES: string = [
   // 'hover:ease-in-out',
   'grid',
   'grid-rows-2',
-  'grid-cols-1'
+  'grid-cols-1',
+  'p-2'
 ].join(' ')
 import {
   siMaildotru,

diff --git a/src/components/main/tech-stack.astro b/src/components/main/tech-stack.astro
@@ -134,7 +134,7 @@ const SUBTITLE_STYLES = ['flex', 'flex-row', 'gap-2', 'text-2xl'].join(' ')
     </div>
     <div class={SUBTITLE_STYLES}>
       <p class='font-semibold'>
-        {lang === 'en' ? 'Tools' : 'Herramientas'}
+        {lang === 'en' ? 'Tools' : 'Misc'}
       </p>
     </div>
     <div class={`${ICON_BLOCKS_STYLES} bg-emerald-300`}>

diff --git a/src/components/main/title.astro b/src/components/main/title.astro
@@ -19,6 +19,9 @@ const { lang = 'en' }: Props = Astro.props
       <span class="placeholder"></span>
     </div> -->
     <Typed />
+    <span class='block xl:hidden font-merriweather text-sm text-center'>
+      Software Developer
+    </span>
   </div>
   <StripedPocketTee />
   <StripedPocketTeeLight />

diff --git a/src/components/main/typed.astro b/src/components/main/typed.astro
@@ -1,11 +1,11 @@
-<div class='input-wrapper text-base'>
+<div class='input-wrapper text-base hidden xl:flex'>
   <span class='placeholder' />
 </div>
 
 <style>
   @charset "UTF-8";
   .input-wrapper {
-    display: flex;
+    /* display: flex; */
     text-align: center;
     font-family: 'Merriweather', monospace;
     font-size: 1rem;

diff --git a/src/components/tech-stack/dev-tools.astro b/src/components/tech-stack/dev-tools.astro
@@ -10,9 +10,6 @@ const DEV_TOOLS_STYLES = [
   'gap-2',
   'items-center',
   'justify-center',
-  // 'text-2xl',
-  // 'font-bold',
-  // 'text-slate-950',
   'font-rubik-doodle',
   'w-full',
   'h-full',
@@ -23,10 +20,9 @@ const DEV_TOOLS_STYLES = [
   'text-cyan-950',
   'dark:bg-slate-900',
   'dark:text-cyan-300',
-  // 'hover:scale-[1.02]',
-  // 'hover:transition-all',
   'text-2xl',
-  'font-bold'
+  'font-bold',
+  'p-2'
 ].join(' ')
 import {
   siVisualstudiocode,
@@ -69,7 +65,7 @@ const { lang = 'en' }: Props = Astro.props
     <!-- <p class='font-thin'></p> -->
   </header>
   <ul
-    class='text-base w-full grid place-items-center grid-cols-2 grid-rows-3 gap-1 [&>li]:grid [&>li]:place-items-center [&>li>main>a>img]:rounded-sm [&>li>main>a>img]:border-2'
+    class='text-xl w-full grid place-items-center grid-cols-2 grid-rows-3 gap-1 [&>li]:grid [&>li]:place-items-center [&>li>main>a>img]:rounded-sm [&>li>main>a>img]:border-2'
   >
     <li>
       <header class='flex gap-2'>

diff --git a/src/components/tech-stack/languages.astro b/src/components/tech-stack/languages.astro
@@ -19,17 +19,14 @@ const SOCIALS_STYLES: string = [
   'dark:transition-all',
   'border-indigo-950',
   'dark:border-indigo-300',
-  // 'hover:border-emerald-100',
   'border-2',
   'dark:bg-slate-900',
   'text-indigo-950',
   'dark:text-indigo-300',
-  // 'hover:scale-[1.02]',
-  // 'hover:duration-200',
-  // 'hover:ease-in-out',
   'grid',
   'grid-rows-2',
-  'grid-cols-1'
+  'grid-cols-1',
+  'p-2'
 ].join(' ')
 
 import {

diff --git a/src/components/tech-stack/os.astro b/src/components/tech-stack/os.astro
@@ -23,10 +23,8 @@ const OS_STYLES = [
   'dark:border-amber-600',
   'border-2',
   'dark:bg-slate-900',
-  // 'dark:text-slate-300'
   'hover:scale-[1.02]',
-  'hover:duration-200',
-  'hover:ease-in-out'
+  'p-2'
 ].join(' ')
 
 import { siLinux, siUbuntu } from 'simple-icons'
@@ -51,6 +49,6 @@ import { siLinux, siUbuntu } from 'simple-icons'
     />
   </header>
   <main>
-    <p class='text-base'>Ubuntu 20.04.6 LTS</p>
+    <p class='text-base font-merriweather'>Ubuntu 20.04.6 LTS</p>
   </main>
 </a>
diff --git a/src/components/tech-stack/testing.astro b/src/components/tech-stack/testing.astro
@@ -22,11 +22,8 @@ const OS_STYLES = [
   'border-emerald-950',
   'dark:border-emerald-300',
   'border-2',
-  'dark:bg-slate-900'
-  // 'dark:text-slate-300'
-  // 'hover:scale-[1.02]',
-  // 'hover:duration-200',
-  // 'hover:ease-in-out',
+  'dark:bg-slate-900',
+  'p-2'
 ].join(' ')
 
 const DEV_ICONS_STYLES = [

diff --git a/src/components/tech-stack/title.astro b/src/components/tech-stack/title.astro
@@ -33,7 +33,7 @@ const { lang = 'en' }: Props = Astro.props
   transition:name='tech-stack'
   href={lang === 'en' ? '/' : '/es'}
 >
-  <div class='flex flex-col font-merriweather w-[50%]'>
+  <div class='flex flex-col font-merriweather min-w-[50%]'>
     <p class='font-semibold text-2xl font-rubik-doodle'>
       {lang === 'en' ? 'Tech Stack' : 'Mi Stack'}
     </p>