Added CSS file for navbar

This commit is contained in:
Thomas Smith 2022-09-20 18:14:36 -04:00
parent d85ea39db5
commit 3eb09aafb5
3 changed files with 133 additions and 100 deletions

View file

@ -50,6 +50,7 @@
<link rel="apple-touch-icon-precomposed" href="/favicon-180.png"> <link rel="apple-touch-icon-precomposed" href="/favicon-180.png">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/typography.css"> <link rel="stylesheet" href="/css/typography.css">
<link rel="stylesheet" href="/css/navbar.css">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
<link href="https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/icons.css" rel="stylesheet"> <link href="https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/icons.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">

132
src/static/css/navbar.css Normal file
View file

@ -0,0 +1,132 @@
/* Navbar General */
@media only screen and (min-width: 1200px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 4.5vw;
border-bottom: 2px solid #949494;
}
.nav-logo{
width: 4.4vw;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 5vw;
border-bottom: 2px solid #949494;
}
.navbar-brand{
padding-top:0px !important;
padding-bottom: 0px !important;
}
.nav-logo{
width: 4.9vw;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 5vw;
border-bottom: 2px solid #949494;
}
.navbar-brand{
padding-top:0px !important;
padding-bottom: 0px !important;
}
.nav-logo{
width: 4.9vw;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 13.5vw;
border-bottom: 2px solid #949494;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.navbar-brand{
padding-top:0px;
padding-bottom: 0px;
}
.container-fluid{
background: none !important;
}
.nav-logo{
width: 13.2vw;
top:0px !important;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}

View file

@ -34,106 +34,6 @@ body{
} }
} }
/* Navbar General */
@media only screen and (min-width: 1200px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 4.5vw;
border-bottom: 2px solid #949494;
}
.nav-logo{
width: 4.4vw;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 5vw;
border-bottom: 2px solid #949494;
}
.navbar-brand{
padding-top:0px !important;
padding-bottom: 0px !important;
}
.nav-logo{
width: 4.9vw;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 13.5vw;
border-bottom: 2px solid #949494;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.navbar-brand{
padding-top:0px;
padding-bottom: 0px;
}
.container-fluid{
background: none !important;
}
.nav-logo{
width: 13.2vw;
top:0px !important;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}
/* Brand Colors */ /* Brand Colors */
/* Type Colors: */ /* Type Colors: */