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

CSS, working on testheader

Browse Source
This commit is contained in:
dudleycu 2021-08-17 06:09:38 +00:00
parent 11732f1f42
commit 624e00d7b6
2 changed files with 21 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/TestHeader.js
View File

@ -2,10 +2,10 @@ import React from 'react';
function TestHeader() { function TestHeader() {
return ( return (
<div id="header"> <div className="header">
<div> <div>
<ul> <ul>
<li className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGSplanner.com</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>

79
src/style.css
View File

@ -42,20 +42,7 @@ hr {
} }
img { img {
vertical-align: middle; vertical-align: middle;
}/* }
body {
background-image: url("./icons/d_global_bg_header.png"),url("./icons/gl_main_bg.jpg");
background-size: 1903px,2560px;
background-color: #e8ecf4;
background-repeat: no-repeat,repeat-y;
background-position: center 0;
color: black;
font-family: ngs,Arial,sans-serif;
font-size: 11pt;
font-weight: normal;
text-align: center;
-webkit-font-smoothing: antialiased;
}*/
body { body {
background-image: url("https://pbs.twimg.com/media/E8tfm23VUAQTAAu?format=jpg&name=4096x4096"); background-image: url("https://pbs.twimg.com/media/E8tfm23VUAQTAAu?format=jpg&name=4096x4096");
background-color: #e8ecf4; background-color: #e8ecf4;
@ -65,10 +52,10 @@ body {
background-size: cover; background-size: cover;
color: black; color: black;
font-family: ngs,Arial,sans-serif; font-family: ngs,Arial,sans-serif;
font-size: 11pt; font-size: 16px;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
-webkit-font-smoothing: antialiased;
} }
table td { table td {
vertical-align: top; vertical-align: top;
@ -81,46 +68,29 @@ em {
font-style: normal; font-style: normal;
} }
#header { #header {
background-color: white; background-color: rgba(0,0,0,0.33);
min-height: 50px; min-height: 50px;
padding: 20px; padding: 20px;
text-align: left; text-align: left;
color:white;
} }
#header a { .header a {
color: #151f25; /*color: #151f25;*/
color:white;
text-decoration: none; text-decoration: none;
} }
#header a:hover { .header a:hover {
color: #454f85; background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
text-decoration: none; text-decoration: none;
} }
#header div {
margin: 0 auto;
width: 80%;
}
#header ul {
display: flex;
flex-flow: row wrap;
align-items: center;
margin-left: -40px;
justify-content: flex-end;
}
#header ul li {
flex: 0 1;
color: black;
font-family: "ngs2";
text-align: center;
white-space:nowrap;
}
.headermenuitem {
font-size:14pt;
margin-left: 40px;
}
.logo { .logo {
font-family: "ngs2";
margin-right: auto; margin-right: auto;
font-weight:bold; font-size:24px;
font-size:20px; }
.logo span{
font-size:16px;
text-transform: uppercase;
} }
.logo img { .logo img {
height:28px; height:28px;
@ -135,19 +105,13 @@ em {
display:none; display:none;
} }
} }
.main { .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;
} }
.containerA{
}
.containerB {
}
.containerC {
}
.box { .box {
color: #97e2fc; color: #97e2fc;
background-clip: padding-box; background-clip: padding-box;
@ -209,25 +173,20 @@ em {
}*/ }*/
.boxTitleBar { .boxTitleBar {
/* background-color: #495a61; */
background-color: rgba(124, 144, 148, 0.66); background-color: rgba(124, 144, 148, 0.66);
color: white; color: white;
font-weight: normal; font-weight: normal;
font-size: 13pt; font-size: 18px;
text-align: left; text-align: left;
white-space: nowrap;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
} }
.boxTitleBar h1 { .boxTitleBar h1 {
/* background-color: #495a61; */
color: white; color: white;
font-weight: normal; font-weight: normal;
font-size: 13pt; font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px; margin-right: 10px;
padding: 13px 13px 7px 13px; padding: 13px 13px 7px 13px;
} }