Patches, updates, etc

4yman-0 · Jul 21, 2024 · 03e9f02 · 03e9f02
1 parent 96d896a
commit 03e9f02
Show file tree

Hide file tree

Showing 7 changed files with 203 additions and 167 deletions.
diff --git a/css/index.css b/css/index.css
@@ -1,85 +1,49 @@
 .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-container {
-    margin-left: 5%;
-}
-
 .hero-img {
+    width: auto;
     height: auto;
-    max-width: 90vw;
+    max-width: 95vw;
     max-height: 100vh;
     aspect-ratio: 1 / 1;
     margin-top: 1rem;
     border-radius: 5%;
 }
 
-@media (prefers-color-scheme: light) {
-	.hero-img {
-		filter: invert(1);
-		transition: .2s filter linear;
-	}
-
-	.hero-img:hover {
-		filter: none;
-	}
-}
-
-.about {
+.things {
     background: var(--bg-2);
-    border-radius: 1rem;
 }
 
-.about__txt {
+.things__txt {
     padding-left: .5rem;
     padding-bottom: 1rem;
     margin: 0;
 }
 
-.links-grid {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    text-align: center;
-}
-
-.link-grid-item {
-    display: block;
-    background-color: var(--bg-1);
-    padding: 1.5rem;
-    border-radius: 4px;
-}
-
-.link-grid-item:last-child {
-    background-color: var(--bg-3);
-}
-
 .contact {
     background: var(--bg-1);
 }
@@ -88,23 +52,10 @@
     margin-bottom: 1rem;
 }
 
-.links-flex {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-}
-
-.link-flex {
-    width: 30%;
-    font-size: 1.5rem;
+.footer__no-js {
+    color: var(--fg-1);
 }
 
-.link-flex__btn {
-    padding: 1rem 0;
-}
-
-
 @media (max-width: 900px) {
     .hero-txt__h3 {
         font-size: 2rem;
@@ -115,8 +66,9 @@
     }
 }
 
-@media (max-width: 800px) {
+@media (max-width: 780px) {
     .hero {
+        padding: 2rem;
         justify-content: start;
         flex-direction: column-reverse;
     }
@@ -130,14 +82,3 @@
         padding: .7rem;
     }
 }
-
-@media (max-width: 500px) {
-    .link-flex {
-        width: 60%;
-        margin-top: 1rem;
-    }
-
-    .link-flex__btn {
-        padding: .5rem;
-    }
-}
diff --git a/css/main.css b/css/main.css
@@ -2,27 +2,30 @@
 :root {
     --bg-1: #000;
     --bg-2: #111;
-    --bg-3: #222;
-    --text: #EEE;
-    --color-1: #1C4;
-    --color-2: #228;
-    --font-1: "Noto Sans", Verdana, sans-serif;
+    --bg-3: #1F1F1F;
+    --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-color-scheme: light) {
+@media (prefers-contrast: more) {
     :root {
-        --bg-1: #fff;
-        --bg-2: #eee;
-        --bg-3: #ddd;
-        --text: #111;
-        --color-1: #3c4;
-        --color-2: #9ae;
+        --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);
 }
@@ -48,82 +51,23 @@ a {
 }
 
 a:hover,
-a:focus{
+a:focus,
+a:active{
+    color: var(--color-3);
     text-decoration: underline;
 }
 
-.button {
-    display: block;
-    min-width: max-content;
-    text-align: center;
-    background: var(--color-2);
-    border: 1px solid var(--color-1);
-    color: var(--text);
-    padding: 0.5rem 1rem;
-    transition: background 0.2s linear,
-                outline  0.2s linear;
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
 }
 
-.button:hover {
-    text-decoration: none;
-    background: var(--bg-3);
-    outline: 1px solid var(--color-1);
-}
-
-section, .footer {
-    padding: 4vh 1rem;
-    background: var(--bg-1);
-}
-
-
-.header {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    padding: .4rem 1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: var(--bg-2);
-    border-bottom: var(--bg-1) 1px solid;
-}
-
-.logo {
-    padding: 0.3rem;
-    color: #EEE;
-    background: var(--color-1);
-    border-radius: 4px;
-    font-size: 1.5rem;
-}
-
-.nav-list {
-    display: flex;
-    gap: 1rem;
-}
-
-.nav-list-item {
-    padding: 0.5rem 0;
-}
-
-@media (max-width: 470px) {
-    .header {
-        height: 50px;
-    }
-
-    .logo {
-        font-size: 1.25rem;
-    }
-}
-
-section {
-    margin: 0 .5rem;
-}
-
-.footer {
-    padding: 1rem;
+::-webkit-scrollbar-track {
     background: var(--bg-2);
 }
 
-.footer__copy {
-    font-size: .8rem;
+::-webkit-scrollbar-thumb {
+    background: var(--fg-2);
+    border-radius: 2px;
+    cursor: ns-resize;
 }