main.css
/*
:root {
--cBg: hsl(0,0%, 95%);
--cHead: hsl(0,50%,50%);
--cMain: hsl(0,0%,98%);
--cFoot: hsl(0,0%,40%);
}
html {
padding:0;
margin:0;
}
body {
margin:0;
padding:0;
display:flex;
flex-direction:column;
background: var(--cBg);
}
header {
background: var(--cHead);
}
main {
flex: 1;
background: var(--cMain);
}
footer {
background: var(--cFoot);
}
*/
html,
body {
width: 100%;
height: 100%;
max-width: 100%;
padding: 0;
margin: 0;
background: var(--color_off_white_bright);
}
html {}
body {
display: flex;
flex-direction: column;
position:relative;
}
html {
--color_primary_text: #FFEDCC;
/* --color_contrast: #FFCF00;
--color_contrast: #FaDF30; */
--color_contrast: #FCDA30;
--color_contrast_bright: #FCDA30;
--color_contrast_dark: #EAC020;
--color_menu_background: #FFFDFA;
--color_footer: #585460;
--color_off_white: #EEEEEE;
--color_off_white_bright: #F6F6F6;
--color_project_tile: #EAE7EE;
--color_primary_tint: #50009211;
--height_header: 3rem;
--padding_main: 0.7rem;
--padding_main_small: 0.3rem;
--color_primary: #500092;
--color_primary_light: #000;
--color_primary_dark: #200070;
--color_secondary: #000;
--color_secondary_light: #000;
--color_secondary_dark: #000;
}
html {
--color_primary: darkred;
--color_primary_light: #ef3d47;
--color_primary_dark: darkred;
--color_contrast: white;
--color_contrast_bright: darkred;
--color_contrast_dark:#200070;
--color_secondary: #111;
--color_secondary_light: #222;
--color_secondary_dark: #111;
--color_primary_text: black;
--color_text_one: yellow;
--color_menu_background: #222;
--color_off_white: #F8F8F8;
--color_off_white_bright: #FEFEFE;
--color_primary_tint: #50009211;
--color_background_content: #FEFEFE;
--color_background_footer: lightgrey;
--color_link_primary: rgb(94, 12, 12);
--color_link_primary_active: rgb(21, 62, 151);
--color_link_primary_visited: var(--color_contrast_bright);
--color_link_secondary: blue;
--color_link_secondary_active:pink;
--color_link_secondary_visited:green;
--height_header_item: 1.5rem;
--padding_main: 0.0rem;
--padding_main_small: 0.0rem;
--padding_content:1.5rem 1.0rem 1.5rem 1.0rem;
--padding_content: 0;
--padding_content_side: 1.5rem;
--padding_content_first_child: 1.5rem 1.0rem 1.5rem 1.0rem;
--padding_content_first_child_vertical: 1.5rem;
--padding_content_first_child_horizontal: 1.0rem;
--padding_content_item: 0.5rem 1.5rem 0.5rem 1.5rem;
--_legend_size: 2rem;
}
html {
--color_primary_text: #FFEDCC;
/* --color_contrast: #FFCF00;
--color_contrast: #FaDF30; */
--color_contrast: #FCDA30;
--color_contrast_bright: #FCDA30;
--color_contrast_dark: #EAC020;
--color_menu_background: #FFFDFA;
--color_footer: #585460;
--color_off_white: #EEEEEE;
--color_off_white_bright: #F6F6F6;
--color_project_tile: #EAE7EE;
--color_primary_tint: #50009211;
--height_header: 3rem;
--padding_main: 0.7rem;
--padding_main_small: 0.3rem;
--color_primary: #500092;
--color_primary_light: #000;
--color_primary_dark: #200070;
--color_secondary: #000;
--color_secondary_light: #000;
--color_secondary_dark: #000;
}
html {
--color_primary_text: #FFEDCC;
/* --color_contrast: #FFCF00;
--color_contrast: #FaDF30; */
--color_contrast: #FCDA30;
--color_contrast_bright: #FCDA30;
--color_contrast_dark: #EAC020;
--color_menu_background: #FFFDFA;
--color_footer: #585460;
--color_off_white: #EEEEEE;
--color_off_white_bright: #F6F6F6;
--color_project_tile: #EAE7EE;
--color_primary_tint: #50009211;
--height_header: 3rem;
--padding_main: 0.7rem;
--padding_main_small: 0.3rem;
--color_primary: #500092;
--color_primary_light: #000;
--color_primary_dark: #200070;
--color_secondary: #000;
--color_secondary_light: #000;
--color_secondary_dark: #000;
}
footer {
margin:0;
padding:0;
width:100%;
background: var(--color_off_white);
}
footer .contentArea {
min-height:0px;
}
#footer {
display:flex;
justify-content:center;
align-items:center;
background:var(--color_background_footer);
padding: 0 0 8px 0;
margin:0;
flex-direction:column;
border-top: 1px solid black;
}
#footer h4 {
color:var(--color_primary_text);
}
#footer_container {
display:flex;
flex-direction:row;
justify-content:space-between;
width:100%;
height:100%;
max-width:1024px;
}
#footer_container > div {
flex:1;
margin:0 16px 0 16px;
}
#footer ul {
list-style-type:none;
padding-left:8px;
margin-top:0;
padding-top:0;
}
#footer ul a:visited, #footer ul a {
color:var(--color_link_primary_visited);
text-decoration: none;
padding: 0.2em;
}
#footer ul li {
margin-left:-0.5rem;
}
#footer ul li::before {
content: "-";
margin-right:0.5rem;
}
#footer a, #footer a:visited {
color:var(--color_link_primary);
display:inline-block;
}
header {
margin: 0;
padding:0;
width: 100%;
background: var(--color_primary);
border-bottom: 1px solid black;
box-shadow: inset 0px -6px 12px -4px var(--color_contrast);
}
#header {
justify-content:left;
}
#header .desktopWrap {
display:flex;
flex-flow: row wrap;
vertical-align:middle;
justify-content:left;
padding:0.5em 0.5em 0.5em 0.5em;
}
#header #siteTitle {
text-decoration: none;
font-weight: bold;
font-size: 1.5rem;
cursor: pointer;
text-overflow: ellipsis;
padding:0 0.5em 0 0;
color: var(--color_text_one);
}
#header #siteTitle:active, #header #siteTitle:hover, #header #siteTitle:focus {
color:var(--color_primary_dark);
}
#header a {
display:table-cell;
display:inline;
vertical-align: middle;
align-self:flex-center;
text-align:center;
color:white;
}
#header a.menuItem{
/* padding: 14px 16px; */
padding:0.5em;
text-decoration: none;
font-size: 17px;
border-right: 1px solid rgba(0,0,0,0.7);
border-bottom: 1px solid rgba(0,0,0,0.7);
border-top: 1px solid rgba(0,0,0,0.2);
border-left: 1px solid rgba(0,0,0,0.2);
border-color:rgba(150,150,150,0.8);
background:black;
}
#header {
border-width:0 1px 0 0;
border-top:1px solid black;
}
#header a:active, #header a:hover, #header a:focus {
background: lightgrey;
/* color: var(--color_primary_light); */
color: var(--color_primary);
}
header a {
text-decoration: none;
color: var(--color_secondary_light);
font-size: 1.2rem;
cursor: pointer;
text-overflow: ellipsis;
display: block;
padding: 0.4rem 2rem 0.4rem 1.0rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: var(--color_primary_light);
}
header a:visited:not(:hover):not(:active) {
color:initial;
}
main {
padding: var(--padding_main);
flex: 1 1 auto;
background: var(--color_off_white);
border-left:1px solid var(--color_primary_dark);
border-right:1px solid rgba(0,0,0,0.1);
}
.desktopWrap {
max-width:1024px;
margin-left:auto;
margin-right:auto;
}
.contentArea {
min-height:100%;
background:var(--color_background_content);
padding:var(--padding_content);
max-width:60rem;
margin-left:auto;
margin-right:auto;
border-left: 1px solid rgba(150,150,150,0.5);
border-right: 1px solid rgba(150,150,150,0.5);
}
/* .contentArea .desktopWrap > * {
padding:0 var(--padding_content_side);
}
.contentArea .desktopWrap > *:first-child {
margin:0;
padding:var(--padding_content_first_child);
} */
.contrastedContent {
background:rgba(232, 238, 255, 0.7);
/* padding:var(--padding_content_vertical), var(--padding_content_side) !important; */
padding:var(--padding_content_item) !important;
}
section:not(.noPad) {
padding:1rem;
}
.headerImage {
width:100%;
height:400px;
background-size:cover;
background-position: center center;
}
.desktopWrap #mzIntro:first-child {
background: rgba(calc(200 * 80 / 146), 0, calc(200 * 146/146), 0.1);
margin:0;
}
#contentArea .desktopWrap #mzIntro {
padding:0;
margin:0;
}
#contentArea .desktopWrap #mzIntro > * {
padding:0.5em;
}
#contentArea .desktopWrap #mzIntro:first-child img{
background: rgba(0,0,0, 0.8);
padding:0;
}
.noContentPad {
margin: calc(-1 * var(--padding_content_first_child_vertical)) 0 0 calc(-1 * var(--padding_content_first_child_horizontal));
width: calc(100% + var(--padding_content_first_child_horizontal) * 2);
margin:0;
padding:0;
}
#contentArea .desktopWrap div.redirectMessage {
background:rgba(150,0,0,0.3);
padding:0.5em;
}