From 8d330eff9563c7bb0d5f1cebe7bbc2586e913f6d Mon Sep 17 00:00:00 2001
From: Fernando Araoz <fernando@araozu.dev>
Date: Sun, 26 Jan 2025 07:14:11 -0500
Subject: [PATCH] feat: improve styles

---
 public/img/logos/archlinux-logo.svg    |  1 +
 public/img/logos/neovim-mark.svg       | 27 +++++++++++++++++++
 public/img/logos/tmux-logo.svg         |  1 +
 src/components/Blog/Sh.astro           |  2 +-
 src/components/Navigation.astro        | 15 ++++++-----
 src/components/Sidebar.astro           | 36 +++++++++++++++++++++++---
 src/components/index/EnBlogIndex.astro |  3 ++-
 src/layouts/BlogLayout.astro           |  2 +-
 src/layouts/NavigationLayout.astro     |  2 +-
 src/pages/index.astro                  |  2 +-
 tailwind.config.mjs                    |  1 +
 11 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 public/img/logos/archlinux-logo.svg
 create mode 100644 public/img/logos/neovim-mark.svg
 create mode 100644 public/img/logos/tmux-logo.svg

diff --git a/public/img/logos/archlinux-logo.svg b/public/img/logos/archlinux-logo.svg
new file mode 100644
index 0000000..949b5c5
--- /dev/null
+++ b/public/img/logos/archlinux-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M31.994-.006c-2.85 6.985-4.568 11.554-7.74 18.332 1.945 2.062 4.332 4.462 8.2 7.174-4.168-1.715-7-3.437-9.136-5.224-4.06 8.47-10.42 20.538-23.327 43.73C10.145 58.15 18 54.54 25.338 53.16c-.315-1.354-.494-2.818-.48-4.345l.012-.325c.16-6.5 3.542-11.498 7.547-11.158s7.118 5.886 6.957 12.386a18.36 18.36 0 0 1-.409 3.491c7.25 1.418 15.03 5.02 25.037 10.797l-5.42-10.026c-2.65-2.053-5.413-4.726-11.05-7.62 3.875 1.007 6.65 2.168 8.8 3.467-17.1-31.84-18.486-36.07-24.35-49.833z" fill="#1793d1" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/img/logos/neovim-mark.svg b/public/img/logos/neovim-mark.svg
new file mode 100644
index 0000000..46c5eb8
--- /dev/null
+++ b/public/img/logos/neovim-mark.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="602px" height="734px" viewBox="0 0 602 734" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <title>neovim-mark@2x</title>
+    <description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#16B0ED" stop-opacity="0.800235524" offset="0%"></stop>
+            <stop stop-color="#0F59B2" stop-opacity="0.83700023" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#7DB643" offset="0%"></stop>
+            <stop stop-color="#367533" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#88C649" stop-opacity="0.8" offset="0%"></stop>
+            <stop stop-color="#439240" stop-opacity="0.84" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="mark-copy" sketch:type="MSLayerGroup" transform="translate(2.000000, 3.000000)">
+            <path d="M0,155.5704 L155,-1 L154.999997,727 L0,572.237919 L0,155.5704 Z" id="Left---green" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup"></path>
+            <path d="M443.060403,156.982405 L600,-1 L596.818792,727 L442,572.219941 L443.060403,156.982405 Z" id="Right---blue" fill="url(#linearGradient-2)" sketch:type="MSShapeGroup" transform="translate(521.000000, 363.500000) scale(-1, 1) translate(-521.000000, -363.500000) "></path>
+            <path d="M154.986294,0 L558,615.189696 L445.224605,728 L42,114.172017 L154.986294,0 Z" id="Cross---blue" fill="url(#linearGradient-3)" sketch:type="MSShapeGroup"></path>
+            <path d="M155,283.83232 L154.786754,308 L31,124.710606 L42.4619486,113 L155,283.83232 Z" id="Shadow" fill-opacity="0.13" fill="#000000" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/logos/tmux-logo.svg b/public/img/logos/tmux-logo.svg
new file mode 100644
index 0000000..7d5d04f
--- /dev/null
+++ b/public/img/logos/tmux-logo.svg
@@ -0,0 +1 @@
+<svg width="608px" height="160px" version="1.1" viewBox="0 0 608 160" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g fill="none" fill-rule="evenodd"> <g id="vlpa"> <g id="vlpb"> <g id="vlpc" fill="#1BB91F"> <path d="m0 116h160v29c0 8.286-6.722 15-15 15h-130c-8.283 0-15-6.707-15-15v-29zm0 0h160v30h-160v-30z"/> </g> <path id="vlpd" d="m83 70v-70h-6v146h6v-70h77v-6h-77zm-83-54.99c0-8.288 6.722-15.01 15-15.01h130c8.283 0 15 6.725 15 15.01v131h-160v-131z" fill="#3C3C3C"/> </g> <path id="vlpe" d="m241.8 147.8c-10.92 0-19.13-2.867-24.65-8.602s-8.272-14.23-8.272-25.48v-51.78h-19.85v-14.89h19.85v-33.09h16.54v33.09h36.4v14.89h-36.4v51.95c0 6.507 1.599 11.28 4.798 14.31 3.198 3.033 7.389 4.549 12.57 4.549 2.426 0 5.128-0.2757 8.106-0.8272 2.978-0.5514 6.011-1.379 9.099-2.481l3.309 14.56c-3.75 1.323-7.417 2.288-11 2.895-3.584 0.6066-7.086 0.9099-10.5 0.9099zm52.93-1.489h-16.54v-99.26h16.54v16.54s10.06-9.926 14.97-13.23c4.908-3.309 10.67-4.963 17.29-4.963 5.845 0 10.84 1.627 14.97 4.88s7.086 7.693 8.851 13.32c0 0 11.14-9.926 16.21-13.23s11.08-4.963 18.03-4.963c7.72 0 13.9 2.84 18.53 8.52 4.632 5.68 6.948 13.32 6.948 22.91v69.48h-16.54v-66.83c0-6.617-1.268-11.33-3.805-14.14-2.537-2.812-6.176-4.219-10.92-4.219-4.742 0-9.457 1.434-14.14 4.301-4.687 2.868-8.851 6.672-12.49 11.41v69.48h-16.54v-66.83c0-6.617-1.268-11.33-3.805-14.14-2.537-2.812-6.176-4.219-10.92-4.219-4.742 0-9.457 1.434-14.14 4.301-4.687 2.868-8.851 6.672-12.49 11.41v69.48zm144.2-7.61c-5.845-6.176-8.768-14.39-8.768-24.65v-67h16.54v63.69c0 7.058 1.654 12.41 4.963 16.05 3.309 3.64 8.161 5.459 14.56 5.459 5.073 0 10.12-1.461 15.14-4.384s10.01-7.251 14.97-12.99v-67.83h16.54v99.26h-16.54v-16.54s-11.22 9.926-16.46 13.23c-5.239 3.309-11.11 4.963-17.62 4.963-9.705 0-17.48-3.088-23.33-9.264zm149.7 7.61-24.15-37.39-22.66 37.39h-18.36l33.09-49.8-31.93-49.46h18.53l23 35.73 23.33-35.73h18.36l-33.42 48.47 32.76 50.79h-18.53z" fill="#1BB91F"/> </g> </g> </svg>
diff --git a/src/components/Blog/Sh.astro b/src/components/Blog/Sh.astro
index 6d56927..11abc29 100644
--- a/src/components/Blog/Sh.astro
+++ b/src/components/Blog/Sh.astro
@@ -2,4 +2,4 @@
 var {code} = Astro.props;
 ---
 
-<div class="whitespace-pre p-2 bg-black text-white rounded-md mb-4 font-mono">{code}</div>
\ No newline at end of file
+<div class="whitespace-pre p-2 bg-black text-white rounded-md mb-4 font-mono overflow-x-scroll">{code}</div>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 57164de..bfdb13f 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,19 +1,22 @@
-<div class="h-screen">
+<div class="md:h-screen">
     <nav
-        class="fixed top-0 left-0 rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] p-2"
+        class="md:fixed md:top-0 md:left-0 md:rotate-[-90deg] font-display md:w-[100vh] md:translate-y-[100vh] p-2 w-full"
         style="transform-origin: 0% 0%;"
     >
         <div class="shadow hover:shadow-md transition-shadow bg-c-bg-2 py-2 px-4 border border-zinc-600 dark:border-zinc-900 rounded-md">
 
-        <a class="font-semibold inline-block text-2xl hover:underline" href="/">
+        <a class="font-semibold inline-block text-2xl hover:underline mr-6" href="/">
             Fernando Araoz
         </a>
-        <a class="ml-6 inline-block hover:underline" href="/side-projects"
+
+        <br class="md:hidden" />
+
+        <a class="mr-6 inline-block hover:underline" href="/side-projects"
             >Side projects</a
         >
-        <a class="ml-6 inline-block hover:underline" href="/blog/en">Eng Blog</a
+        <a class="mr-6 inline-block hover:underline" href="/blog/en">Eng Blog</a
         >
-        <a class="ml-6 inline-block hover:underline" href="/blog/es">Es Blog</a>
+        <a class="mr-6 inline-block hover:underline" href="/blog/es">Es Blog</a>
 
         </div>
     </nav>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 0c781dd..a7ad365 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -1,13 +1,20 @@
-<div class="lg:px-1">
+<div class="lg:px-1 pb-8">
     <div class="text-center">
         <div class="inline-block w-28 h-28 lg:w-40 lg:h-40 rounded-full bg-slate-500"></div>
     </div>
 
     <h1 class="text-xl font-light py-4">
-        <span class="font-display font-bold text-3xl">Fernando Araoz</span>
+        <p class="font-display font-bold text-3xl text-center">
+            Fernando Araoz
+        </p>
     </h1>
-    <p class="font-display">
-        Human software engineer based in Peru
+    <p class="font-display text-center">
+        I'm a Human software engineer based in Peru,
+        passionate about webdev, devops and sysadmin
+        stuff.
+        <br />
+        And sometimes I may find inspiration to write for
+        my blog.
     </p>
     <hr />
     <div class="text-center">
@@ -17,4 +24,25 @@
             My sideprojects
         </a>
     </div>
+    <div class="flex items-center gap-1 justify-center">
+        <span>
+            Proudly written in
+        </span>
+        <a href="https://archlinux.org" target="_blank">
+            <img
+                class={"inline-block h-6 px-1 my-1"}
+                src={`/img/logos/archlinux-logo.svg`}
+                alt="Arch Linux logo"
+                title="Arch btw"
+            />
+        </a>
+        <a href="https://neovim.io" target="_blank">
+            <img
+                class={"inline-block h-6 px-1 my-1"}
+                src={`/img/logos/neovim-mark.svg`}
+                alt={`Neovim logo`}
+                title={`Neovim btw`}
+            />
+        </a>
+    </div>
 </div>
diff --git a/src/components/index/EnBlogIndex.astro b/src/components/index/EnBlogIndex.astro
index 3eb3ea6..a3506f8 100644
--- a/src/components/index/EnBlogIndex.astro
+++ b/src/components/index/EnBlogIndex.astro
@@ -11,7 +11,8 @@ const allPosts = (await Astro.glob("../../pages/blog/en/*.{md,mdx}"))
 <Card title="en blog">
     <div class="font-display">
         <p>
-            Things I've thought about, about programming.
+            Things that come to my mind about
+            software.
         </p>
 
     <ul class="py-4">
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index f6e2288..96c054c 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -28,7 +28,7 @@ lang = lang ?? "en";
     </head>
     <body>
         <NavigationLayout>
-            <div id="blog" class="container mx-auto w-[1000px] max-w-[90vw]" style="font-size: 18px">
+            <div id="blog" class="container mx-auto w-[1000px] md:max-w-[90vw] max-w-[95vw]" style="font-size: 18px">
                 <div class="py-6">
                     {
                         frontmatter?.title && (
diff --git a/src/layouts/NavigationLayout.astro b/src/layouts/NavigationLayout.astro
index 86c1392..0f87603 100644
--- a/src/layouts/NavigationLayout.astro
+++ b/src/layouts/NavigationLayout.astro
@@ -2,7 +2,7 @@
 import Navigation from "../components/Navigation.astro";
 ---
 
-<div class="grid grid-cols-[4rem_auto]">
+<div class="md:grid md:grid-cols-[4rem_auto]">
     <Navigation />
     <slot />
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4f7c2dc..14d2b2b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -23,7 +23,7 @@ import EnBlogIndex from "../components/index/EnBlogIndex.astro";
             type="text/css"
             href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
         />
-        <script src="//unpkg.com/alpinejs" defer></script>
+        <script is:inline src="//unpkg.com/alpinejs" defer></script>
     </head>
     <body>
         <NavigationLayout>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 94e5866..eec3937 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -11,6 +11,7 @@ export default {
             fontFamily: {
                 "etoile": ["var(--font-display)"],
                 "display": ["var(--font-display)"],
+                "body": ["var(--font-body)"],
             }
         },
     },