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() {
return (
<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="navigation"> <ul>
<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=".">About</a></li>
</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>
</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));
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) {
.headerMenuItem {
display:none;
@ -102,33 +90,71 @@ header a:hover {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,450px));
justify-content: center;
gap: 10px;
}
.main {
margin: 0 10px;
gap: 10px;
}
header {
background-color: rgba(0,0,0,0.66);
background-color: rgba(0,0,0,0.5);
backdrop-filter: blur(10px);
text-align: left;
margin: 0;
}
header > div {
.headerWrapper {
grid-area: 1 / span 3;
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 {
text-align: center;
text-align: left;
font-size: 17px;
font-family: "ngs2";
align-items: stretch;
margin-left: 30px;
}
.navigation a {
padding: 0 15px;
}
.navigation li {
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;
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 {
/*color: #97e2fc;*/
@ -234,7 +260,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
}
.boxTitleBar h1:before {
font-family: "Segoe UI Symbol";
content: ' \25C6';
content: " \25C6";
margin-right: 10px;
}
.box h2 {