✨ Add responsive Navbar
This commit is contained in:
stefan080106
@@ -1,116 +1,116 @@
|
||||
.container {
|
||||
padding: 0 2rem;
|
||||
padding: 0 0rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
147
styles/Navbar.module.css
Normal file
147
styles/Navbar.module.css
Normal file
@@ -0,0 +1,147 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap");
|
||||
.Navbar {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.Navbar .container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.Navbar .container .Logo {
|
||||
width: 200px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.Navbar .container .MenuToggle {
|
||||
-webkit-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.Navbar .container .MenuToggle span {
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 4px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
background: #cdcdcd;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
-webkit-transform-origin: 4px 0px;
|
||||
transform-origin: 4px 0px;
|
||||
-webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
|
||||
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
|
||||
}
|
||||
|
||||
.Navbar .container .MenuToggle span:first-child {
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
.Navbar .container .MenuToggle span:nth-last-child(2) {
|
||||
-webkit-transform-origin: 0% 100%;
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
|
||||
.Navbar .container .MenuActive {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.Navbar .Nav {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.Navbar .Nav a {
|
||||
padding: 1rem;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.Navbar .Nav a:hover {
|
||||
cursor: pointer;
|
||||
color: #057ca6;
|
||||
}
|
||||
|
||||
.Navbar .MenuOpen {
|
||||
width: 100%;
|
||||
display: -webkit-box !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: flex !important;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
background-color: #057ca6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
.container .MenuToggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.Navbar .Nav {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
.Navbar {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
.container .MenuToggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=Navbar.module.css.map */
|
||||
9
styles/Navbar.module.css.map
Normal file
9
styles/Navbar.module.css.map
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": [
|
||||
"Navbar.module.scss"
|
||||
],
|
||||
"names": [],
|
||||
"file": "Navbar.module.css"
|
||||
}
|
||||
107
styles/Navbar.module.scss
Normal file
107
styles/Navbar.module.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap");
|
||||
|
||||
.Navbar {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-direction: row;
|
||||
|
||||
.Logo {
|
||||
width: 200px;
|
||||
margin: 1rem;
|
||||
}
|
||||
.MenuToggle {
|
||||
transition: all 0.5s;
|
||||
span {
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 4px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
|
||||
background: #cdcdcd;
|
||||
border-radius: 3px;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
transform-origin: 4px 0px;
|
||||
|
||||
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
|
||||
background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
|
||||
}
|
||||
|
||||
span:first-child {
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
span:nth-last-child(2) {
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.MenuActive {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.Nav {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
a {
|
||||
padding: 1rem;
|
||||
transition: all 0.2s;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #057ca6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.MenuOpen {
|
||||
width: 100%;
|
||||
display: flex !important;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
background-color: #057ca6;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
//Normal devices
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: auto;
|
||||
.MenuToggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
//Small devices
|
||||
@media (max-width: 768px) {
|
||||
.Navbar .Nav {
|
||||
flex-direction: column;
|
||||
display: none;
|
||||
}
|
||||
.Navbar {
|
||||
flex-direction: column;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
.MenuToggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user