From 94dd4e37779e3b2e569e3d09ade816948579af16 Mon Sep 17 00:00:00 2001
From: Fabricio Silva <hi@fabricio.dev>
Date: Sat, 8 Jun 2024 11:36:16 +0100
Subject: [PATCH] add layout and css

---
 index.html |  55 +++++++++++++-
 style.css  | 208 ++++++++++++++++++++++++++++-------------------------
 2 files changed, 164 insertions(+), 99 deletions(-)

diff --git a/index.html b/index.html
index 78a0464..fa086cc 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,54 @@
-<pre>wip</pre>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>/www/fabricio</title>
+    <link rel="stylesheet" href="/style.css" />
+  </head>
+  <body>
+    <main>
+      <header class="header">
+        <figure class="profile-picture">
+          <img
+            src="https://github.com/fabricionaweb.png"
+            alt="profile picture"
+          />
+          <figcaption>fabricionaweb's profile picture on GitHub.</figcaption>
+        </figure>
+        <h1 class="title">Fabricio</h1>
+      </header>
+
+      <section class="about">
+        <p>AKA fabricionaweb</p>
+
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
+          pariatur magni doloribus magnam laborum ipsam fugiat laboriosam quas
+          vitae corrupti perspiciatis molestias veritatis esse provident enim
+          sed, rem nulla. Nam.
+        </p>
+
+        <p>
+          Working with
+          <a href="https://www.hexis-hub.com/" rel="noreferrer">Hexis-Hub</a>
+          since 2022
+        </p>
+
+        <footer>
+          <address>
+            <a href="mailto:hi@fabricio.dev">Wanna say hello?</a>
+          </address>
+        </footer>
+      </section>
+
+      <footer class="footer">
+        <ul>
+          <li><a href="" rel="noreferrer">GitHub</a></li>
+          <li><a href="" rel="noreferrer">LinkedIn</a></li>
+          <li><a href="/key.asc" rel="noreferrer">GPG</a></li>
+        </ul>
+      </footer>
+    </main>
+  </body>
+</html>
diff --git a/style.css b/style.css
index 92f0748..96fb358 100644
--- a/style.css
+++ b/style.css
@@ -1,111 +1,123 @@
-@import '/normalize.css';
-@import url('//fonts.googleapis.com/css?family=Roboto+Mono:400,700');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
 
-:root {
-  --color-dark: #28282f;
-  --color-gray: #31323a;
-  --color-light: #dedede;
-  --color-white: #ffffff;
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root,
+:root.light {
+  --background: #fff;
+  --text: #444;
+  --highlight: rgba(255, 0, 0, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root,
+  :root.dark {
+    --background: #000;
+    --text: #ccc;
+    --highlight: rgba(0, 255, 255, 0.3);
+  }
+}
+
+html {
+  background: var(--background);
+  color: var(--text);
+  font-size: 16px;
 }
 
 body {
-  font-family: 'Roboto Mono', monospace;
-  background-color: var(--color-gray);
-  color: var(--color-light);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
+  font: 400 1rem/1.25 "Roboto", sans-serif;
+}
+
+a {
+  color: var(--text);
 }
 
-[hidden] { display: none; }
+main {
+  max-width: 40rem;
+  margin: auto;
+  padding: 0 1.25rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
+}
 
-.wrapper {
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: center;
-  padding: 3vh;
-  border: 3vh solid var(--color-dark);
-  min-height: 100vh;
+.header {
+  margin: 10rem 0 2.5rem;
+  grid-column: span 2;
+}
+
+.profile-picture {
+  width: 8rem;
+  height: 8rem;
+  border-radius: 100%;
+  overflow: hidden;
+  background: var(--text);
+}
+
+.profile-picture img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
 }
 
 .title {
-  --color-orange: #f26b38;
-  color: var(--color-white);
-  text-transform: uppercase;
-  text-align: center;
-  margin: 0;
-  font-size: 3.8rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
+  text-align: right;
   position: relative;
+  line-height: 1;
+}
+
+.title::before,
+.title::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  display: block;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.title::before {
+  height: 0.0625rem;
+  max-width: 65%;
+  background: var(--text);
+}
+
+.title::after {
+  height: 0.75rem;
+  max-width: 55%;
+  transform: translateY(0.1875rem);
+  background: var(--highlight);
+}
+
+.about {
+  grid-column: span 2;
 }
-  .title::before,
-  .title::after {
-    content: attr(data-text);
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    clip: rect(0, 0, 0, 0);
-  }
-  .title::before {
-    left: -2px;
-    text-shadow: 2px 0 var(--color-orange);
-    animation: glitch-l 2s infinite linear alternate-reverse;
-  }
-  .title::after {
-    left: 2px;
-    text-shadow: -1px 0 var(--color-orange);
-    animation: glitch-r 2s infinite linear alternate-reverse;
-  }
 
-.subtitle {
-  font-size: 1.25rem;
-  text-align: center;
-}
-
-@keyframes glitch-l {
-  0% { clip: rect(20px, 9999px, 51px, 0); }
-  5% { clip: rect(83px, 9999px, 102px, 0); }
-  10% { clip: rect(83px, 9999px, 105px, 0); }
-  15% { clip: rect(95px, 9999px, 11px, 0); }
-  20% { clip: rect(105px, 9999px, 56px, 0); }
-  25% { clip: rect(40px, 9999px, 19px, 0); }
-  30% { clip: rect(56px, 9999px, 97px, 0); }
-  35% { clip: rect(9px, 9999px, 17px, 0); }
-  40% { clip: rect(103px, 9999px, 53px, 0); }
-  45% { clip: rect(92px, 9999px, 6px, 0); }
-  50% { clip: rect(69px, 9999px, 46px, 0); }
-  55% { clip: rect(8px, 9999px, 87px, 0); }
-  60% { clip: rect(12px, 9999px, 15px, 0); }
-  70% { clip: rect(28px, 9999px, 106px, 0); }
-  80% { clip: rect(98px, 9999px, 63px, 0); }
-  85% { clip: rect(11px, 9999px, 44px, 0); }
-  95% { clip: rect(23px, 9999px, 84px, 0); }
-  100% { clip: rect(66px, 9999px, 91px, 0); }
-}
-
-@keyframes glitch-r {
-  0% { clip: rect(86px, 9999px, 25px, 0); }
-  5% { clip: rect(30px, 9999px, 17px, 0); }
-  10% { clip: rect(54px, 9999px, 43px, 0); }
-  15% { clip: rect(10px, 9999px, 86px, 0); }
-  25% { clip: rect(62px, 9999px, 1px, 0); }
-  30% { clip: rect(61px, 9999px, 24px, 0); }
-  35% { clip: rect(38px, 9999px, 46px, 0); }
-  40% { clip: rect(115px, 9999px, 8px, 0); }
-  45% { clip: rect(87px, 9999px, 44px, 0); }
-  50% { clip: rect(6px, 9999px, 65px, 0); }
-  55% { clip: rect(83px, 9999px, 99px, 0); }
-  65% { clip: rect(25px, 9999px, 71px, 0); }
-  70% { clip: rect(37px, 9999px, 55px, 0); }
-  75% { clip: rect(115px, 9999px, 18px, 0); }
-  80% { clip: rect(68px, 9999px, 46px, 0); }
-  90% { clip: rect(47px, 9999px, 31px, 0); }
-  95% { clip: rect(47px, 9999px, 84px, 0); }
-  100% { clip: rect(93px, 9999px, 53px, 0); }
-}
-
-@media (max-width: 568px) {
-  html { font-size: 10px; }
-}
\ No newline at end of file
+.about p,
+.about address {
+  margin-bottom: 1.25rem;
+}
+
+.about address {
+  font-style: normal;
+}
+
+.footer {
+  grid-column-end: -1;
+  justify-self: end;
+  text-transform: lowercase;
+}
+
+.footer ul {
+  list-style-type: "/";
+}
+
+.footer li {
+  margin-bottom: 1.25rem;
+}
-- 
2.51.2