feat: beautiful fonts and responsive font size!

qubistt · Dec 13, 2022 · db0bd50 · db0bd50 · vercel · Dec 13, 2022
1 parent e038ea0
commit db0bd50
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 7 deletions.
diff --git a/fonts/Google-sans-Font-Family/ProductSans-Black.ttf b/fonts/Google-sans-Font-Family/ProductSans-Black.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-BlackItalic.ttf b/fonts/Google-sans-Font-Family/ProductSans-BlackItalic.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-Bold.ttf b/fonts/Google-sans-Font-Family/ProductSans-Bold.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-BoldItalic.ttf b/fonts/Google-sans-Font-Family/ProductSans-BoldItalic.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-Italic.ttf b/fonts/Google-sans-Font-Family/ProductSans-Italic.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-Light.ttf b/fonts/Google-sans-Font-Family/ProductSans-Light.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-LightItalic.ttf b/fonts/Google-sans-Font-Family/ProductSans-LightItalic.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-Medium.ttf b/fonts/Google-sans-Font-Family/ProductSans-Medium.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-MediumItalic.ttf b/fonts/Google-sans-Font-Family/ProductSans-MediumItalic.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-Regular.ttf b/fonts/Google-sans-Font-Family/ProductSans-Regular.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-Thin.ttf b/fonts/Google-sans-Font-Family/ProductSans-Thin.ttf
diff --git a/fonts/Google-sans-Font-Family/ProductSans-ThinItalic.ttf b/fonts/Google-sans-Font-Family/ProductSans-ThinItalic.ttf
diff --git a/style.css b/style.css
@@ -1,29 +1,50 @@
 @font-face {
   font-family: 'Fira Code';
-  src: url('./fonts/woff2/FiraCode-Bold.woff2');
+  src: url('./fonts/Google-sans-Font-Family/ProductSans-Black.ttf');
   font-weight: 700;
   font-style: normal;
 }
 
+html {
+  font-size: 20px;
+}
+
+@media (max-width: 900px) {
+  html { font-size: 16px; }
+}
+
+@media (max-width: 400px) {
+  html { font-size: 12px; }
+}
 
+/* Type will scale with document */
+h1 {
+  font-size: 2.6rem;
+}
 html, body {
   height: 100%;
   width: 100%;
 }
 body {
   background-color: black;
+
+  align-items: center;
+  align-content: center;
 }
 
 h1 {
   font-family: 'Fira Code';
-  color: white;
+  color: #4ffd1e;
   animation: fade-in 1s linear;
+  text-align: center;
 }
 
 ul {
   text-decoration: none;
   color: black;
   list-style: none;
+  text-align: center;
+  padding-left: 0;
 }
 li {
   opacity:0;
@@ -49,12 +70,11 @@ li:nth-child(3) {
 
 
 a {
-  color: white;
   text-decoration: none;
   font-family: 'Fira Code';
-  font-size: 3vh;
-  box-shadow: inset 0 0 0 0 #ff004d;
-  color: #ff004d;
+  font-size: 4em;
+  box-shadow: inset 0 0 0 0 #f98952;
+  color: #f98952;
   margin: 0 -.25rem;
   padding: 0 .25rem;
   transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
@@ -70,7 +90,7 @@ p {
 /* Add a transition to hover effects on buttons */
 
 a:hover {
-  box-shadow: inset 300px 0 0 0 #ff004d;
+  box-shadow: inset 300px 0 0 0 #f98952;
   color: white;
 }