Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-06-13 04:10:50 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

responsive details + working mobile navigation.

Browse Source
This commit is contained in:
mrjvs 2018-11-05 11:51:46 +01:00
parent 8782fd1440
commit 1cf4316f2f
5 changed files with 42 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.json
View File

@ -3,7 +3,10 @@
"node": true,
"commonjs": true,
"es6": true
},
},
"globals": {
"document": true
},
"parserOptions": {
"ecmaVersion": 2017
},

27
assets/css/pretendo-common.css
View File

@ -32,7 +32,14 @@ nav.navWrapper .navItem {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 1em;
cursor: pointer;
}
nav.navWrapper .navItem:hover {
color: white;
text-decoration: none;
background: rgba(0, 0, 0, 0.07);
}
nav.navWrapper .navItem.brand {
font-weight: 600;
background: #5231a7;
@ -43,6 +50,26 @@ nav.navWrapper .navSpread {
flex: 1;
}
/* mobile nav */
nav.navWrapper .navItem.hamburger {
display: none;
position: absolute;
right: 0;
top: 0;
}
@media screen and (max-width: 720px) {
nav.navWrapper {
flex-direction: column;
box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.07);
}
nav.navWrapper .navItem:not(.brand) {
display: none;
}
nav.navWrapper.open .navItem, nav.navWrapper .navItem.hamburger {
display: block;
}
}
/* content wrapper */
.contentWrapper {
position: relative;

8
assets/css/pretendo-home.css
View File

@ -4,7 +4,7 @@ header {
text-align: center;
color: white;
background: #673db6;
padding: 5rem;
padding: 5rem 1rem;
}
header hr {
width: 175px;
@ -108,11 +108,11 @@ header h3 {
.smallCard {
width: 100%;
max-width: 250px;
}
.smallCardWidth {
}
.bigCard.cont-flex > .cont-flex {
flex-direction: column;
}
header h1 {
font-size: 2.5em;
}
}

3
assets/js/nav.js Normal file
View File

@ -0,0 +1,3 @@
document.getElementById('navToggle').onclick = () => {
document.getElementById('nav').classList.toggle('open');
};

5
views/newhome.hbs
View File

@ -9,15 +9,18 @@
<!-- css files -->
<link rel="stylesheet" href="/assets/css/pretendo-common.css">
<link rel="stylesheet" href="/assets/css/pretendo-home.css">
<!-- scripts -->
<script src="/assets/js/nav.js" defer></script>
</head>
<body>
<nav class="navWrapper">
<nav class="navWrapper" id="nav">
<a class="navItem brand" href="#">PRETENDO</a>
<a class="navItem" href="#">News</a>
<a class="navItem" href="#">Progress</a>
<a class="navItem" href="#">Contact</a>
<div class="navSpread"></div>
<a class="navItem" href="#">smth</a>
<a class="navItem hamburger" id="navToggle">ICON</a>
</div>
</nav>
<div class="contentWrapper">