feat: small refreshments

package.json

@@ -4,8 +4,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
+    "dev": "astro dev  --host 0.0.0.0",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro"

src/components/Built.astro

@@ -0,0 +1,21 @@
+<aside class="built">
+  this page has been built fluid, responsive, and printable. there's also multiple color schemes and dark mode.
+</aside>
+
+<style is:global>
+  .built {
+    grid-area: built;
+    display: none;
+    text-align: center;
+    color: var(--emphasis);
+    font-size: .6em;
+    font-family: sans-serif;
+  }
+
+  @media screen and (min-width: 768px) {
+    .built {
+      display: block;
+      margin-top: 1em
+    }
+  }
+</style>

src/components/Contact.astro

@@ -57,15 +57,6 @@ const currentAge = new Date().getFullYear() - birth.getFullYear()
     list-style: none;
   }
 
-  .contact  ul a {
-    color: var(--primary);
-    text-decoration: none;
-  }
-
-  .contact ul a:hover {
-    color: var(--strong);
-  }
-
   @media screen and (min-width: 768px), print {
     .contact {
       padding: 2em 1em 4em;

src/components/Experience.astro

@@ -31,9 +31,7 @@ const [city] = location.split(',')
 <article class="experience">
   <hgroup>
     <h3>{title}</h3>
-    <h5>
-      <a href={website} target="_blank" rel="company">{company}</a> (<a href={`https://www.google.com/maps/search/${city}`} target="_blank" rel="location">{location}</a>)
-    </h5>
+    <h5><a href={website} target="_blank" rel="company">{company}</a> (<a href={`https://www.google.com/maps/search/${city}`} target="_blank" rel="location">{location}</a>)</h5>
   </hgroup>
 
   <section>
@@ -100,6 +98,14 @@ const [city] = location.split(',')
   letter-spacing: .25;
 }
 
+.experience h3:after {
+  content: '-';
+  margin: 0 .1em 0 .4em;
+  font-family: 'Arapey', serif;
+  font-size: 1em;
+  font-weight: normal;
+}
+
 .experience h5 {
   display: inline;
   font-family: 'Arapey', serif;
@@ -109,12 +115,7 @@ const [city] = location.split(',')
 
 .experience h5 a {
   position: relative;
-  text-decoration: none;
-}
-
-.experience [rel="company"]:before {
-  content: '–';
-  margin: 0 .25em;
+  color: currentColor;
 }
 
 .experience [rel="company"]:after {

src/pages/index.astro

@@ -6,6 +6,7 @@ import Experiences from '~/components/Experiences.astro';
 import About from '~/components/About.astro';
 import Languages from '~/components/Languages.astro';
 // import Skillsets from '~/components/Skillsets.astro';
+import Built from '~/components/Built.astro';
 ---
 
 <Layout
@@ -19,6 +20,7 @@ import Languages from '~/components/Languages.astro';
     <Experiences />
     <Languages />
     {/*<Skillsets />*/}
+    <Built />
   </main>
 </Layout>
 
@@ -44,7 +46,8 @@ Object.entries({ primary, strong }).forEach(([key, val]) => {
         "experiences"
         "about"
         "languages"
-        "skillsets";
+        "skillsets"
+        "built";
 
     grid-template-columns: auto;
     gap: 1em;
@@ -66,12 +69,15 @@ Object.entries({ primary, strong }).forEach(([key, val]) => {
     -webkit-print-color-adjust: exact;
   }
 
-  main :global(a) {
-    text-decoration-style: dotted;
+  main a {
+    color: var(--primary);
+    text-decoration: none;
   }
 
-  main :global(a:hover) {
+  main a:hover {
     color: var(--strong);
+    text-decoration: underline;
+    text-decoration-style: dotted;
   }
 
   @media (prefers-color-scheme: dark) {
@@ -106,10 +112,10 @@ Object.entries({ primary, strong }).forEach(([key, val]) => {
         "header infos"
         "experiences about"
         "experiences languages"
-        "experiences skillsets";
+        "experiences skillsets"
+        "built built";
 
       grid-template-columns: auto minmax(min-content, 28%);
-      grid-template-rows: repeat(min-content, 10);
       grid-gap: 0 1.5em;
       align-content: start;
     }