Font Changes

yeshuadcosta · Nov 2, 2024 · 836b7d7 · 836b7d7
1 parent f2bf20d
commit 836b7d7
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 136 deletions.
diff --git a/assets/fonts/fonts.css b/assets/fonts/fonts.css
diff --git a/assets/fonts/manrope-v15-latin-regular.woff2 b/assets/fonts/manrope-v15-latin-regular.woff2
diff --git a/assets/fonts/noto-sans-v30-latin-600.woff2 b/assets/fonts/noto-sans-v30-latin-600.woff2
diff --git a/assets/fonts/nova-square-v24-latin-regular.woff2 b/assets/fonts/nova-square-v24-latin-regular.woff2
diff --git a/assets/fonts/poppins-v20-latin-300italic.woff2 b/assets/fonts/poppins-v20-latin-300italic.woff2
diff --git a/assets/fonts/poppins-v20-latin-900.woff2 b/assets/fonts/poppins-v20-latin-900.woff2
diff --git a/assets/fonts/poppins-v20-latin-regular.woff2 b/assets/fonts/poppins-v20-latin-regular.woff2
diff --git a/assets/fonts/quantico-v17-latin-italic.woff2 b/assets/fonts/quantico-v17-latin-italic.woff2
diff --git a/assets/fonts/quantico-v17-latin-regular.woff2 b/assets/fonts/quantico-v17-latin-regular.woff2
diff --git a/...rt_display_FILL0_wght400_GRAD0_opsz24.svg → ...rt_display_FILL0_wght400_GRAD0_opsz24.svg b/...rt_display_FILL0_wght400_GRAD0_opsz24.svg → ...rt_display_FILL0_wght400_GRAD0_opsz24.svg
diff --git a/index.html b/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
-        <meta charset="utf-8">
+        <meta charset="utf-8" />
 
         <title>Morsinator1000</title>
 
-        <link rel="stylesheet" href="assets/fonts/fonts.css">
-        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="assets/fonts/fonts.css" />
+        <link rel="stylesheet" href="style.css" />
     </head>
 
     <body>
@@ -15,11 +15,11 @@
 
         <h1>MORSINATOR1000</h1>
 
-        <input type="radio" id="morse" name="language" value="1">
-        <label for="html">English to Morse Code</label><br />
+        <input type="radio" id="morse" name="language" value="1" />
+        <label class="label" for="html">English to Morse Code</label><br />
 
-        <input type="radio" id="text" name="language" value="2">
-        <label for="text">Morse Code to English</label><br />
+        <input type="radio" id="text" name="language" value="2" />
+        <label class="label" for="text">Morse Code to English</label><br />
 
         <div id="box">
             <!--Mutli-Line Input-->
@@ -28,17 +28,17 @@ <h1>MORSINATOR1000</h1>
                 <textarea id="textInput">Hello World!</textarea>
             </div>
 
-            <img src="assets/images/smart_display_FILL0_wght400_GRAD0_opsz24.svg" id="button" draggable="false"/>
+            <img src="assets/images/smart_display_FILL0_wght400_GRAD0_opsz24.svg" id="button" draggable="false" />
 
             <!--Multi-Line Output-->
             <div id="box2">
                 <span class="panel">Output</span>
                 <div id="textOutput">.... . .-.. .-.. --- / .-- --- .-. .-.. -.. -.-.--</div>
             </div>
         </div>
-    </body>
 
-    <footer>
-        Yeshua D'Costa, 2023
-    </footer>
-</html>
+        <footer>
+            &copy; Yeshua D'Costa, 2023 - 2024
+        </footer>
+    </body>
+</html>
diff --git a/scripts/textEffect.js b/scripts/textEffect.js
@@ -4,9 +4,9 @@ const $alpha = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P",
 let head = document.querySelector("h1");
 head.addEventListener("mouseover",() => {effect(head);});
 window.addEventListener("load",() => {effect(head);});
+const original = head.innerText;
 
 function effect(text){
-    let original = text.innerText;
     let clone = "";
     let len = original.length;
     let key = len;

diff --git a/style.css b/style.css
@@ -1,22 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nova+Square&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
 * {
-    padding: 0px;
-    margin: 0px;
+    padding: 0;
+    border: 0;
+    margin: 0;
     box-sizing: border-box;
 }
 
-h1{
-    font-family: 'Quantico', sans-serif;
-    font-style: italic;
-    font-size: 4em;
+body {
+    background-color: #0e86d4;
+}
+
+h1 {
+    font-family: "Quantico", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    text-align: center;
+    font-size: 3em;
     color: #003060;
+    display: block;
+    width: 100%;
 }
 
-body {
-    background-color: #0E86D4;
+.label {
+    font-family: "Quantico", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 1.7em;
 }
 
 @media (orientation: portrait) {
-    #box{
+    #box {
         padding-top: 2em;
         padding-bottom: 2em;
 
@@ -27,7 +41,7 @@ body {
     }
 
     #box1,
-    #box2{
+    #box2 {
         width: 95%;
     }
 }
@@ -37,8 +51,8 @@ body {
         max-width: 80vw;
         margin: auto;
     }
-    
-    #box{
+
+    #box {
         padding-top: 2em;
         padding-bottom: 2em;
 
@@ -49,70 +63,62 @@ body {
     }
 
     #box1,
-    #box2{
+    #box2 {
         width: 45%;
     }
 }
 
 /* These Boxes contain the panel and the text box below it */
 #box1,
-#box2{
+#box2 {
     display: flex;
     flex-direction: column;
 }
 
 .panel {
-    font-family: 'Nova Square', cursive;
+    font-family: "Nova Square", sans-serif;
+    font-weight: 400;
+    font-style: normal;
     font-size: 30px;
-    font-weight: 600;
     text-align: center;
     color: #003060;
-
     margin-bottom: 40px;
     width: 100%;
 }
 
-#button{
+#button {
     height: 45px;
-    
+
     /* This aligns the button vertically along the centre between the other two boxes*/
     align-self: center;
 }
 
-#textInput, #textOutput {
+#textInput,
+#textOutput {
     height: 50vh;
     width: 100%;
-    border-radius: 5px;
-
-    background-color: #68BBE3;
-}
-
-label {
-    font-family: 'Manrope', sans-serif;
-    font-size: large;
-}
-
-#textInput {
-    font-family: 'Noto Sans', 'sans-serif';
+    padding: 1em;
+    border: 3px dotted grey;
+    border-radius: 12px;
+    background-color: #68bbe3;
+
+    font-family: "Noto Sans", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 700;
     font-style: normal;
-    font-weight: 600;
-    font-size: larger;
-}
-
-#textOutput {
-    font-family: 'Poppins', sans-serif;
-    font-size: larger;
+    font-variation-settings:
+      "wdth" 100;
 }
 
 footer {
     height: 10vh;
     width: 100%;
     border-radius: 0.5rem;
 
-    font-family: 'Quantico', sans-serif;
+    font-family: "Quantico", sans-serif;
     font-size: 1.5em;
-    color:#003060;
+    color: #003060;
     padding: 10px;
-    
-    background-color: #68BBE3;
-}
+
+    background-color: #68bbe3;
+}