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
master
dudleycu 3 years ago
parent d2cb9348c0
commit c5a004ea4a
2 changed files with 34 additions and 48 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 26
      src/TestHeader.js
  2. 56
      src/style.css

26
src/TestHeader.js
Unescape View File

@ -1,19 +1,19 @@
import React from 'react'; 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>
) )
} }
export default TestHeader; export default TestHeader;

56
src/style.css
Unescape 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;

Write Preview
Loading…
Cancel
Save