make intro smaller

src/styles/header.css

@@ -8,8 +8,9 @@
   height: var(--header-height);
   border-bottom: 1px solid rgba(80, 85, 90, 0.15);
 
-  /* backdrop-filter: saturate(180%) blur(5px); */
-  background: rgba(0,0,0,.95);
+  backdrop-filter: blur(8px);
+  /* backdrop-filter: saturate(180%) blur(8px); */
+  background: rgba(8,8,8,.6);
   box-shadow: 0 12px 36px rgba(1, 57, 72, .15);
 }
 
@@ -98,7 +99,7 @@
   box-shadow: none;
   color: #fff;
   cursor: pointer;
-  font-size: 1rem;
+  font-size: .875rem;
 
   /* font-weight: 500; */
   letter-spacing: .02em;

src/styles/root.css

@@ -29,8 +29,27 @@ I'm using block font-display for basement because it's decorative and scales hor
   src: url('../assets/fonts/neue/NeueMontreal-Medium.woff2') format('woff2');
 }
 
+@font-face {
+  font-display: swap;
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 400;
+  src: url('../assets/fonts/inter/inter-v12-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  src: url('../assets/fonts/inter/inter-v12-latin-500.woff2') format('woff2');
+}
+
+
+
 :root {
-  --primaryFont: "Neue", sans-serif, -apple-system, ui-sans-serif, system-ui, blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans, sans-serif, monospace;
+  --primaryFont: Inter, sans-serif, -apple-system, ui-sans-serif, system-ui, blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans, sans-serif, monospace;
+  /* --primaryFont: "Neue", sans-serif, -apple-system, ui-sans-serif, system-ui, blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans, sans-serif, monospace; */
   --secondaryFont: "basement", georgia, sans-serif, -apple-system, ui-sans-serif, system-ui, blinkmacsystemfont, segoe ui, roboto, helvetica neue, arial, noto sans, sans-serif, monospace;
 
   /* ********************************** */
@@ -97,8 +116,9 @@ I'm using block font-display for basement because it's decorative and scales hor
   /* constants */
 
   /* intro-offset: value to subtract from intro height */
-  --intro-offset: 12vh;
-  --header-height: 4rem;
+  --intro-offset: 25vh;
+  /* --header-height: 68px; */
+  --header-height: 3.85rem;
   --max-width-md: 1140px;
   --max-width-lg: 1280px;
   --br-1: 5px;
@@ -510,6 +530,12 @@ a[disabled] {
   }
 }
 
+/* @media screen and (max-width: 720px) {
+  html {
+    font-size: 16px;
+  }
+} */
+
 @media screen and (max-width: 390px) {
   html {
     font-size: 14px;

src/styles/sections/intro.css

@@ -26,7 +26,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding-bottom: 4rem;
+  padding-bottom: 1rem;
   margin: 0 auto;
 }
 
@@ -64,7 +64,7 @@
   bottom: 0;
   display: flex;
   width: 100%;
-  height: 10rem;
+  height: 8rem;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
@@ -76,18 +76,19 @@
   height: 2.5rem;
   align-items: center;
   padding: .5rem 1rem;
-  border: 1px solid rgba(36, 39, 44, 0.5);
+  border: 1px solid rgba(36, 39, 44, 0.7);
   border-radius: var(--br-1);
   margin: 0 .5rem;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(4,4,4,.85);
+  /* background: rgba(0, 0, 0, 0.7); */
   color: #e7ecf4;
-  font-size: .9rem;
+  font-size: .875rem;
   letter-spacing: .02em;
 }
 
 .intro-container--links a img {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
   margin-right: .75rem;
   filter: invert(1);
   pointer-events: none;
@@ -115,6 +116,6 @@
 
 @media screen and (max-width: 840px) {
   .intro-header__subtitles h1 {
-    font-size: 5vw;
+    font-size: 5.8vw;
   }
 }

src/styles/sections/sectionprojects/projectCard.css

@@ -266,7 +266,8 @@
   padding: 0 .5rem;
   border: 1px solid #111;
   border-radius: var(--br-1);
-  background: linear-gradient(to bottom, var(--primary3), #000);
+  background: linear-gradient(to bottom, #222, #111);
+  /* background: linear-gradient(to bottom, var(--primary3), #111); */
   color: #fff;
   font-size: .875rem;
   font-weight: 400;

src/styles/sections/sectionprojects/projectsLayout.css

@@ -5,7 +5,7 @@
   z-index: 50;
   width: 100%;
   background: var(--black0);
-  scroll-margin-top:4rem;
+  scroll-margin-top:var(--header-height);
 }
 
 .projects-container::before {
@@ -35,7 +35,7 @@
 .project-cell-divider {
   z-index: 2000;
   width: 1px;
-  height: 5rem;
+  height: 2rem;
   margin: 1.5rem auto 1.5rem auto;
   opacity: .3;
   outline: 1px dotted var(--white1);

src/styles/sections/skills.css

@@ -5,7 +5,7 @@
   max-width: 1200px;
   height: 100%;
   flex-direction: column;
-  scroll-margin-top: 4rem;
+  scroll-margin-top: var(--header-height);
 }
 
 .skills-top {

src/styles/themes.css

@@ -51,9 +51,11 @@
     radial-gradient(50% 50% at 50% 100%,
       var(--offsetwhite2) 0%,
       transparent 100%);
-  --skeleton1: linear-gradient(270deg, #111, #333, #333, #111);
+  --skeleton1: linear-gradient(2c70deg, #111, #333, #333, #111);
 }
 
+
+
 .theme__light {
   --accent-1: #f1f1f1;
   --accent-2: #f5f5f5;
@@ -119,4 +121,72 @@
     radial-gradient(50% 50% at 50% 100%,
       rgba(255, 255, 255, 0.1) 0%,
       rgba(255, 255, 255, 0) 100%);
-*/
+*/
+
+/* .theme__dark2 {
+  --grey2: #1e1e21;
+  --grey3: #0f0f11;
+  --grey4: #0f0f11;
+  --grey5: #0f0f11;
+  --grey6: #767784;
+  --grey7: #a9aabc;
+  --grey8: #a9aabc;
+  --accent-8: #9899a9;
+  --accent-7: #878896;
+  --accent-6: #767784;
+  --accent-5: #333338;
+  --accent-4: #222226;
+  --accent-3: #111113;
+  --accent-2: #1e1e21;
+  --accent-1: #0f0f11;
+
+  --black0: #0d0d0d;
+  --black1: #09090b;
+  --black2: #151517;
+  --black3: #18181b;
+  --black4: #27272a;
+
+  --white0: #fff;
+  --white1: #fafafa;
+  --white2: #a9aabc;
+  --white3: #a6a6a6;
+
+  --offsetblack0: rgba(0, 0, 0, .9);
+  --offsetblack1: rgba(0, 0, 0, .6);
+  --offsetblack2: rgba(0, 0, 0, .2);
+  --offsetblack3: rgba(23, 23, 23, 0.1);
+  --offsetblack4: rgba(8, 8, 8, 0.99);
+  --offsetwhite1: rgba(255, 255, 255, .05);
+  --offsetwhite2: rgba(255, 255, 255, .1);
+  --offsetsecondary1: rgba(50, 145, 255, 0.1);
+  --offsetsecondary2: hsla(0deg, 0%, 100%, .4);
+  --inset1: rgba(17, 17, 17, .3);
+  --inset2: rgba(17, 17, 17, .2);
+  --bsout1: rgba(0, 0, 0, .2);
+  --bsout2: rgba(0, 0, 0, .1);
+  --bsout3: rgba(0, 0, 0, .2);
+  --border-color-1: var(--black4);
+  --border1: 1px solid var(--black4);
+  --placeholder1: var(--grey5);
+
+  --bs-md:
+    var(--bsout1) 0 1px 2px 0,
+    var(--bsout2) 0 1px 3px 0;
+  --bs-lg:
+    0 30px 60px var(--bsout2);
+  --bs-inset1:
+    inset 0 0 10px 8px var(--inset1),
+    inset 0 0 10px 8px var(--inset2);
+
+  --selection: #f81ce5;
+  --link: #7F95F5;
+  --link2: #0089ae;
+  --linear1: linear-gradient(0deg,
+      var(--offsetwhite1),
+      var(--offsetwhite1)),
+    radial-gradient(50% 50% at 50% 100%,
+      var(--offsetwhite2) 0%,
+      transparent 100%);
+  --linear2: linear-gradient(270deg, var(--grey10), var(--grey8), var(--grey10), var(--grey8));
+  --skeleton1: linear-gradient(2c70deg, #111, #333, #333, #111);
+} */