Squashed commits

css/index.css

@@ -1,35 +1,33 @@
 .hero {
-    min-height: 100vh;
     display: flex;
+    min-height: 100vh;
+    padding: 0 2rem;
+    gap: 1rem;
     flex-direction: row;
     justify-content: space-around;
-    gap: 1rem;
     align-items: center;
 }
 
 .hero-txt {
     text-align: left;
 }
 
-.hero-txt__h1 {
-    font-size: 1rem;
-}
-
 .hero-txt__h3 {
     margin: .5rem 0;
     font-size: 2.5rem;
 }
 
 .hero-txt__btn {
     width: 15vw;
+    min-width: fit-content;
     margin: 1rem 0 0 40%;
-    padding: .5rem 0;
     font-size: 1.2rem;
 }
 
 .hero-img {
     width: auto;
-    max-width: 90vw;
+    height: auto;
+    max-width: 95vw;
     max-height: 100vh;
     aspect-ratio: 1 / 1;
     margin-top: 1rem;
@@ -54,6 +52,10 @@
     margin-bottom: 1rem;
 }
 
+.footer__no-js {
+    color: var(--fg-1);
+}
+
 @media (max-width: 900px) {
     .hero-txt__h3 {
         font-size: 2rem;
@@ -66,6 +68,7 @@
 
 @media (max-width: 780px) {
     .hero {
+        padding: 2rem;
         justify-content: start;
         flex-direction: column-reverse;
     }

css/main.css

@@ -3,16 +3,29 @@
     --bg-1: #000;
     --bg-2: #111;
     --bg-3: #1F1F1F;
-    --text: #EEE;
-    --text-grayed: #AAA;
-    --color-1: #1C4;
-    --color-2: #228;
+    --fg: #EEE;
+    --fg-1: #AAA;
+    --fg-2: #777;
+    --color-1: #787;
+    --color-2: #445;
+    --color-3: #886;
     --font-1: "Noto Sans", Roboto, sans-serif;
     --font-2: "Ubuntu Mono", "Courier New", monospace;
 }
 
+@media (prefers-contrast: more) {
+    :root {
+        --fg: #EEE;
+        --fg-1: #CCC;
+        --fg-2: #AAA;
+        --color-1: #797;
+        --color-2: #668;
+        --color-3: #BB9;
+    }
+}
+
 body {
-    color: var(--text);
+    color: var(--fg);
     background: var(--bg-1);
     font-family: var(--font-1);
 }
@@ -38,7 +51,9 @@ a {
 }
 
 a:hover,
-a:focus{
+a:focus,
+a:active{
+    color: var(--color-3);
     text-decoration: underline;
 }
 
@@ -52,6 +67,7 @@ a:focus{
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--text-grayed);
+    background: var(--fg-2);
     border-radius: 2px;
+    cursor: ns-resize;
 }

css/page.css

@@ -36,19 +36,23 @@ section, .footer {
 @media (max-width: 470px) {
     .header {
         height: 50px;
+        padding: .2rem .5rem;
     }
 
     .logo {
         font-size: 1.25rem;
     }
+
+    .nav-list {
+        gap: .3rem;
+    }
 }
 
 .button {
     display: block;
-    min-width: max-content;
     padding: 0.5rem 1rem;
     text-align: center;
-    color: var(--text);
+    color: var(--fg);
     background: var(--color-2);
     border: 1px solid var(--color-1);
     transition: background 0.2s linear;
@@ -63,16 +67,13 @@ section, .footer {
 .footer {
     padding: 1rem;
     background: var(--bg-2);
-}
-
-.footer__copy {
     font-size: .8rem;
 }
 
 .links-grid {
     display: grid;
     gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
     text-align: center;
     margin: 0 2rem;
 }
@@ -85,7 +86,7 @@ section, .footer {
 }
 
 .link-grid-item:last-child {
-    color: var(--text-grayed);
+    color: var(--fg-1);
     background-color: var(--bg-2);
 }
 

index.html

@@ -37,7 +37,6 @@ <h1 class="logo">4yman</h1>
     <main class="main">
         <section class="hero" id="hero">
             <div class="hero-txt">
-                <h2 class="hero-txt__h1">4yman-el</h1>
                 <h3 class="hero-txt__h3">Hello...</h3>
                 <p class="hero-txt__p">
                     I use a PC and I have no idea what I am doing...
@@ -91,10 +90,15 @@ <h2 class="contact__txt">Contact me:</h2>
 
     <footer class="footer">
         <pre class="footer__copy">&copy; 2024 4yman, All Rights Reserved.</pre>
+        <noscript class="footer__no-js">
+            <pre>If you're reading this, I think you don't have JavaScript.</pre>
+        </noscript>
+        <!-- If you're reading this. I think you use DevTools -->
     </footer>
 
-    <!--SCRIPTS-->
-        <script src="js/fixes.js" defer="true"></script>
-    <!--SCRIPTS-->
+    <script>
+        // Go back to beginning of the page.
+        history.scrollRestoration = "manual";
+    </script>
 </body>
 </html>