Add new font options and change line height.

In prep for another restyle, I found the font Telegraf to mess around with.

6 files changed, 49 insertions, 23 deletions

diff --git a/static/fonts/Telegraf-Free/EULA-PangramPangram-FreeForPersonalUse-MAY2021.pdf b/static/fonts/Telegraf-Free/EULA-PangramPangram-FreeForPersonalUse-MAY2021.pdf
new file mode 100644
index 0000000..7afcff9
--- /dev/null
+++ b/static/fonts/Telegraf-Free/EULA-PangramPangram-FreeForPersonalUse-MAY2021.pdf
diff --git a/static/fonts/Telegraf-Free/Icon
 b/static/fonts/Telegraf-Free/Icon

new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/static/fonts/Telegraf-Free/Icon

diff --git a/static/fonts/Telegraf-Free/PPTelegraf-Regular.otf b/static/fonts/Telegraf-Free/PPTelegraf-Regular.otf
new file mode 100644
index 0000000..1868ebd
--- /dev/null
+++ b/static/fonts/Telegraf-Free/PPTelegraf-Regular.otf
diff --git a/static/fonts/Telegraf-Free/PPTelegraf-UltraBold.otf b/static/fonts/Telegraf-Free/PPTelegraf-UltraBold.otf
new file mode 100644
index 0000000..9ea1e6f
--- /dev/null
+++ b/static/fonts/Telegraf-Free/PPTelegraf-UltraBold.otf
diff --git a/static/fonts/Telegraf-Free/PPTelegraf-UltraLight.otf b/static/fonts/Telegraf-Free/PPTelegraf-UltraLight.otf
new file mode 100644
index 0000000..29ea5e0
--- /dev/null
+++ b/static/fonts/Telegraf-Free/PPTelegraf-UltraLight.otf
diff --git a/static/style.css b/static/style.css
index ac3d316..106d47e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -33,6 +33,27 @@
     font-style: normal;

 }

 

+@font-face {

+    font-family: 'Telegraf';

+    src: url('./fonts/Telegraf-Free/PPTelegraf-Regular.otf') format('opentype');

+    font-weight: normal;

+    font-style: normal;

+}

+

+@font-face {

+    font-family: 'Telegraf';

+    src: url('./fonts/Telegraf-Free/PPTelegraf-UltraLight.otf') format('opentype');

+    font-weight: lighter;

+    font-style: normal;

+}

+

+@font-face {

+    font-family: 'Telegraf';

+    src: url('./fonts/Telegraf-Free/PPTelegraf-UltraBold.otf') format('opentype');

+    font-weight: bold;

+    font-style: normal;

+}

+

 * {

     box-sizing: border-box;

 }

@@ -92,6 +113,7 @@ main {
 .landing-page span {

   font-size: 2rem;

   font-weight: bolder;

+  line-height: 1;

 }

 

 .arrow-container {

@@ -142,6 +164,10 @@ h3, h4, h5, h6 {
   opacity: 50%;

 }

 

+p {

+  line-height: 1.25;

+}

+

 .name {

   font-weight: bold;

   margin: auto .3rem;

@@ -284,7 +310,7 @@ blockquote {
       opacity: 0;

       margin: 0;

     }

-    

+

     .hamburger{

       z-index: 3;

       position: fixed;

@@ -296,16 +322,16 @@ blockquote {
       /*border-bottom-left-radius: 8px;

       background-color: var(--dark-transparent);*/

       background-color: white;

-    

+

     /* FOR DISPLAYING EVERY ELEMENT IN THE CENTER : */

-    

+

       display: flex;

       align-items: center;

       justify-content: center;

     }

-    

+

     /* CREATING THE MIDDLE LINE OF THE HAMBURGER : */

-    

+

     .hamburger > div{

       position: relative;

       top: 0;

@@ -315,10 +341,10 @@ blockquote {
       width: 60%;

       transition: all  0.4s ease;

     }

-    

-    /* CREATING THE TOP AND BOTTOM LINES : 

+

+    /* CREATING THE TOP AND BOTTOM LINES :

     TOP AT -10PX ABOVE THE MIDDLE ONE AND BOTTOM ONE IS 10PX BELOW THE MIDDLE: */

-    

+

     .hamburger > div::before,

     .hamburger > div::after{

       content: '';

@@ -329,35 +355,35 @@ blockquote {
       height: 2px;

       transition: all  0.4s ease;

     }

-    

+

     .hamburger > div::after{

       top: 10px;

     }

-    

+

     /* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LAYER TO COMPLETE BLACK AND OPAQUE :  */

-    

+

     .toggler:checked + .hamburger > div{

       background: rgba(0,0,0,0); /*Not bothering with var because one-off*/

     }

-    

+

     .toggler:checked + .hamburger > div::before{

       top: 0;

       transform: rotate(-45deg);

     }

-    

+

     /* AND ROTATING THE TOP AND BOTTOM LINES :  */

-    

+

     .toggler:checked + .hamburger > div::after{

       top: 0;

       transform: rotate(45deg);

     }

-  

+

     /* MAIN MENU WITH THE WHITE BACKGROUND AND THE TEXT :  */

-  

+

     .main-nav {

-  

+

     /* APPLYING TRANSITION TO THE MENU :  */

-  

+

       display: flex;

       flex-direction: column;

       position: fixed;

@@ -367,20 +393,20 @@ blockquote {
       background-color: white;

       padding: 6rem 2rem 1rem 2rem;

       align-items: center;

-  

+

     /* HIDDEN INITIALLY  :  */

-  

+

       visibility: hidden;

     }

-  

+

     .main-nav > a {

       margin-top: 15px;

       margin-bottom: 15px;

       font-size: 34px;

     }

-  

+

     /* IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */

-  

+

     .toggler:checked ~ .main-nav{

       visibility: visible;

       animation: fadeIn 0.8s ease;