diff options
| author | Alex <alex@scerba.org> | 2024-03-26 13:59:12 -0400 |
|---|---|---|
| committer | Alex <alex@scerba.org> | 2024-03-26 13:59:12 -0400 |
| commit | b7b1607f21ffe0716b57d13171683f8b74a81404 (patch) | |
| tree | 7671a33255f76586441cee133d97e97d501b541c /static/style.css | |
| parent | 1d5b6b8b358205768f217702a53f517fe058ff89 (diff) | |
Add new font options and change line height.
In prep for another restyle, I found the font Telegraf to mess around with.
Diffstat (limited to 'static/style.css')
| -rw-r--r-- | static/style.css | 72 |
1 files changed, 49 insertions, 23 deletions
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;
|