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

improved responsive layout stuff, making header look not stupid

Browse Source
This commit is contained in:
dudleycu 2021-08-27 06:25:52 +00:00
parent d2cb9348c0
commit c5a004ea4a
2 changed files with 34 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/TestHeader.js
View File

@ -2,17 +2,17 @@ import React from 'react';
function TestHeader() { function TestHeader() {
return ( return (
<div className="header"> <header>
<div> <div style={{gridArea:"1 / span 3"}}>
<ul> <ul>
<li className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></li> <li className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></li>
<li className="headermenuitem"><a href=".">Build Planner</a></li> <li className="headerMenuItem"><a href=".">Build Planner</a></li>
<li className="headermenuitem"><a href=".">Guides</a></li> <li className="headerMenuItem"><a href=".">Guides</a></li>
<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> </ul>
</div> </div>
</div> </header>
) )
} }

56
src/style.css
View File

@ -67,19 +67,12 @@ ul {
em { em {
font-style: normal; font-style: normal;
} }
#header { header a {
background-color: rgba(0,0,0,0.33);
min-height: 50px;
padding: 20px;
text-align: left;
color:white;
}
.header a {
/*color: #151f25;*/ /*color: #151f25;*/
color:white; color:white;
text-decoration: none; text-decoration: none;
} }
.header a:hover { 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;
} }
@ -96,23 +89,31 @@ em {
height:28px; 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;
} }
} }
@media screen and (max-width:390px) { @media screen and (max-width:390px) {
.headermenuitem { .headerMenuItem {
display:none; display:none;
} }
} }
.main,.header { .main, header {
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; gap: 10px;
margin: 0 10px; margin: 0 10px;
} }
header {
text-align: left;
}
header > div {
background-color: rgba(0,0,0,0.33);
}
header li {
display: inline-block;
}
.box { .box {
/*color: #97e2fc;*/ /*color: #97e2fc;*/
color:white; color:white;
@ -162,7 +163,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
} }
.basicInfo { .basicInfo {
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr 1fr; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
justify-content: stretch; justify-content: stretch;
grid-template-areas: grid-template-areas:
"author player player" "author player player"
@ -177,7 +178,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
margin: 5px 10px 0; margin: 5px 10px 0;
padding: 0 5px 5px; padding: 0 5px 5px;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, minmax(0,1fr));
justify-content: stretch; justify-content: stretch;
grid-template-areas: grid-template-areas:
"bp . bpGraph bpGraph" "bp . bpGraph bpGraph"
@ -231,21 +232,6 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
margin-right: 5px; margin-right: 5px;
vertical-align: top; vertical-align: top;
} }
/*.box h2:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}*/
.da {
color: white;
text-align: right;
}
.da span {
background-color: rgba(20,29,40,0.66);
padding: 5px;
}
.da span:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}
.infoBuffs { .infoBuffs {
margin: 0 auto; margin: 0 auto;
width: 90%; width: 90%;
@ -454,8 +440,8 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
margin: 5px 10px 5px; margin: 5px 10px 5px;
padding: 10px; padding: 10px;
display: grid; display: grid;
grid-template-columns: minmax(56px,auto) 1fr auto minmax(16px,auto); grid-template-columns: minmax(56px,auto) minmax(0,1fr) minmax(0,auto) minmax(16px,auto);
grid-template-rows: auto 1fr auto; grid-template-rows: minmax(0,auto) minmax(0,1fr) minmax(0,auto);
grid-template-areas: grid-template-areas:
"img itemname itemname rarity" "img itemname itemname rarity"
"img . . ." "img . . ."
@ -909,7 +895,7 @@ div.skillMaxed .skillAllocated {
.skillButtons { .skillButtons {
position:absolute; position:absolute;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, minmax(0,1fr));
width: 171px; width: 171px;
height: 148px; height: 148px;
left: 0; left: 0;
@ -1243,7 +1229,7 @@ outline: 0 !important;
justify-items: stretch; justify-items: stretch;
align-items: stretch; align-items: stretch;
grid-template-columns: 250px 1fr; grid-template-columns: 250px 1fr;
grid-template-rows: minmax(10px, 1fr) max-content minmax(10px, 1fr); grid-template-rows: minmax(10px, 1fr) 1fr minmax(10px, 1fr);
grid-template-areas: grid-template-areas:
"header header" "header header"
"sidebar content" "sidebar content"
@ -1454,7 +1440,7 @@ p.adminNav hr {
"icon properties" "icon properties"
"potential preset" "potential preset"
"augment augment"; "augment augment";
grid-template-columns: 128px 1fr; grid-template-columns: 128px minmax(0,1fr);
grid-template-rows: auto; grid-template-rows: auto;
margin: 10px 10px 0 10px; margin: 10px 10px 0 10px;
place-items: stretch; place-items: stretch;