sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Header nearly finished

Browse Source
This commit is contained in:
dudleycu 2021-08-30 06:17:32 +00:00
parent 3b62b7fa53
commit 081f2b3c2e
2 changed files with 49 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/TestHeader.js
View File

@ -3,7 +3,7 @@ import React from 'react';
function TestHeader() { function TestHeader() {
return ( return (
<header> <header>
<div style={{gridArea:"1 / span 3"}}> <div className="headerWrapper">
<div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div> <div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></div>
<div className="navigation"> <ul> <div className="navigation"> <ul>
<li className="headerMenuItem"><a href=".">Build Planner</a></li> <li className="headerMenuItem"><a href=".">Build Planner</a></li>
@ -11,7 +11,7 @@ function TestHeader() {
<li className="headerMenuItem"><a href=".">Blog</a></li> <li className="headerMenuItem"><a href=".">Blog</a></li>
<li className="headerMenuItem"><a href=".">About</a></li> <li className="headerMenuItem"><a href=".">About</a></li>
</ul></div> </ul></div>
<div className="navigation2">lol</div> <div className="rightNav"><a href="."><img alt="." src={process.env.PUBLIC_URL + '/icons/nicodotpng.png.png'} /> Guest &emsp; <span className="dotMenu">&#xb7;&#xb7;&#xb7;</span></a></div>
</div> </div>
</header> </header>
) )

68
src/style.css
View File

@ -76,18 +76,6 @@ header a:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
text-decoration: none; text-decoration: none;
} }
.logo {
font-family: "ngs2";
margin-right: auto;
font-size:24px;
}
.logo span{
font-size:16px;
text-transform: uppercase;
}
.logo img {
height:28px;
}
@media screen and (min-width:390px) and (max-width:860px) { @media screen and (min-width:390px) and (max-width:860px) {
.headerMenuItem { .headerMenuItem {
display:none; display:none;
@ -102,33 +90,71 @@ header a:hover {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,450px)); grid-template-columns: repeat(auto-fit,minmax(300px,450px));
justify-content: center; justify-content: center;
gap: 10px;
} }
.main { .main {
margin: 0 10px; margin: 0 10px;
gap: 10px;
} }
header { header {
background-color: rgba(0,0,0,0.66); background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
text-align: left; text-align: left;
margin: 0; margin: 0;
} }
header > div { .headerWrapper {
grid-area: 1 / span 3;
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
place-items: stretch;
}
header a {
display: block;
}
.logo {
font-family: "ngs2";
margin-right: auto;
font-size:24px;
line-height: 47px;
}
.logo span{
font-size:16px;
text-transform: uppercase;
}
.logo img {
height: 40px;
} }
.navigation { .navigation {
text-align: center; text-align: left;
font-size: 17px; font-size: 17px;
font-family: "ngs2"; font-family: "ngs2";
align-items: stretch; margin-left: 30px;
}
.navigation a {
padding: 0 15px;
} }
.navigation li { .navigation li {
display: inline-block; display: inline-block;
margin-left: 20px;; border-color: rgba(255,255,255,0.13);
border-style: solid;
border-width: 0 1px 0 0;
line-height: 50px;
} }
.navigation2 { .rightNav {
text-align: right; text-align: right;
line-height: 45px;
}
.rightNav a {
padding: 0 15px;
}
.rightNav img {
height: 40px;
margin-bottom: 4px;
clip-path: circle(44%);
}
.dotMenu {
display: inline-block;
font-family: "Segoe UI Symbol";
font-size: 24px;
} }
.box { .box {
/*color: #97e2fc;*/ /*color: #97e2fc;*/
@ -234,7 +260,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
} }
.boxTitleBar h1:before { .boxTitleBar h1:before {
font-family: "Segoe UI Symbol"; font-family: "Segoe UI Symbol";
content: ' \25C6'; content: " \25C6";
margin-right: 10px; margin-right: 10px;
} }
.box h2 { .box h2 {