updated css to include Fira Code font

also set up a favicon
kioydiolabs · Apr 23, 2024 · 0cef513 · 0cef513
1 parent 8b8fd54
commit 0cef513
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git a/website/index.html b/website/index.html
@@ -2,14 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>KioydioLabs CISCAPPS</title>
+    <title>Title</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="./static/images/favicon.jpg">
     <script src="index.js"></script>
 </head>
 <body>
 
     <div id="header">
-        <img src="static/images/header.jpg">
+        <img alt="KioydioLabs Logo" src="static/images/header.jpg">
         <p>KioydioLabs CISCAPPS</p>
         <a href="https://github.com/kioydiolabs/ciscapps_suite/blob/main/deploy.md"><button id="deployBtn">Deploy CISCAPPS</button></a>
     </div>
@@ -30,26 +31,26 @@ <h3 style="text-align: center">What's CISCAPPS?</h3>
                     or even for businesses who still use them.
                 </p>
             </div>
-
-                        <div id="tb2" class="textBox">
+            <div id="tb2" class="textBox">
                 <h3 style="text-align: center">Deploying CISCAPPS</h3>
                 <p>
                     If you wish to deploy CISCAPPS on a local server, using Docker, click the blue
                     button above for the installation documentation.
                 </p>
             </div>
-                        <div id="tb3" class="textBox">
+            <div id="tb3" class="textBox">
                 <h3 style="text-align: center">How you can help with CISCAPPS</h3>
                 <p>
                     CISCAPPS is an opensource project, on GitHub. Anyone can contribute to it.
                     If you want to help with CISCAPPS you can have a look at the resources below :
                     <br><br>- <a href="https://www.cisco.com/c/en/us/td/docs/voice_ip_comm/cuipph/all_models/xsi/7_0/english/programming/guide/70xsi.pdf">Cisco IP Phone Services Application Development Notes</a><br><br>
                     - <a href="https://github.com/kioydiolabs/CISCAPPS/">CISCAPPS GitHub Repository</a>
                 </p>
-        </div>
+            </div>
             <div id="footer">
                 <p>KIOYDIOLABS © 2024</p>
             </div>
+        </div>
     </div>
 
 </body>

diff --git a/website/static/fonts/FiraCode-VF.woff b/website/static/fonts/FiraCode-VF.woff
diff --git a/website/static/images/favicon.jpg b/website/static/images/favicon.jpg
diff --git a/website/static/images/header.jpg b/website/static/images/header.jpg
diff --git a/website/static/images/headerFullSize.jpg b/website/static/images/headerFullSize.jpg
diff --git a/website/style.css b/website/style.css
@@ -1,7 +1,12 @@
+@font-face {
+    font-family: "Firacode";
+    src: url("./static/fonts/FiraCode-VF.woff");
+}
+
 body{
     background-color: #1d1e24;
     color: white;
-    font-family: Fira Code;
+    font-family: Firacode, Arial, serif;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -43,8 +48,9 @@ body::-webkit-scrollbar { /* WebKit */
     padding-right: 10px;
     border-radius: 30px;
     color: white;
-    font-weight: bold;
+    font-weight: normal;
     transition: 0.2s;
+    font-family: Firacode, Arial, serif;
 }
 
 #header a{
@@ -149,7 +155,7 @@ h3{
     padding-left: 20px;
     left: 0px;
     color: rgba(255, 255, 255, 0.24);
-    font-weight: bold;
+    font-weight: lighter;
     opacity: 0;
     animation: fadeIn 1s forwards;
     animation-delay: 3.5s;