235 lines
4.1 KiB
CSS
235 lines
4.1 KiB
CSS
@import url(reset.css);
|
|
|
|
/*
|
|
Notes:
|
|
Class/ID names are intentionally lowercase (webpage), rather than the mixed case in the spec (WebPage).
|
|
*/
|
|
|
|
/*
|
|
Color Palette (complementary schema):
|
|
Base Color: #3862A9
|
|
Complementary Color: #FFBC42
|
|
*/
|
|
|
|
/*
|
|
I choose to include my own font files in pages I design, rather than relying on Google Fonts stylesheets,
|
|
because that way I don't have to worry about running afoul of GDPR.
|
|
*/
|
|
@font-face {
|
|
font-family: Quicksand;
|
|
src: url("../fonts/Quicksand-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Oswald;
|
|
src: url("../fonts/Oswald-Regular.ttf");
|
|
}
|
|
|
|
|
|
/*Variables*/
|
|
:root {
|
|
--backColor: #073480;
|
|
--backColorLight: #0E45A3;
|
|
--textColor: #C2CDDF;
|
|
--textColorDark: #6585BB;
|
|
--accentColor: #FFBC42;
|
|
--accentColorDark: #F69E00;
|
|
--accentColorLight: #FFD17D;
|
|
}
|
|
|
|
/*Type selectors*/
|
|
html {
|
|
font-size: 0.625rem;
|
|
font-family: Quicksand, sans-serif;
|
|
background-color: #232323;
|
|
color: #000000;
|
|
}
|
|
|
|
body {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: var(--accentColor);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.0rem;
|
|
line-height: 1.1rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
h2 > a {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
a {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
/*Header styling*/
|
|
#banner {
|
|
background-color: var(--backColor);
|
|
box-shadow: var(--backColorLight) 5px 5px 10px;
|
|
border-radius: 15px;
|
|
padding: 1rem 1rem 0px 1rem;
|
|
margin-bottom: 1.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
header > h1 {
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
header > img {
|
|
display: inline-block;
|
|
max-height: 50px;
|
|
margin-left: auto;
|
|
margin-right:auto;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/*Navigation links*/
|
|
nav {
|
|
background-color: var(--backColorLight);
|
|
padding-bottom: 1rem;
|
|
padding-top: 1rem;
|
|
border-radius: 10px;
|
|
margin-bottom: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
nav > ul > li {
|
|
display: inline;
|
|
}
|
|
|
|
nav > ul > li > a {
|
|
text-decoration: none;
|
|
color: var(--textColor);
|
|
padding: 0px 1rem 0px 1rem;
|
|
}
|
|
|
|
nav > ul > li > a:hover {
|
|
background-color: var(--backColor);
|
|
color: var(--accentColorLight);
|
|
}
|
|
|
|
/*Side links*/
|
|
aside ul li {
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
aside ul li a {
|
|
text-decoration: none;
|
|
padding:0.5rem;
|
|
}
|
|
|
|
aside ul li a:hover {
|
|
color: var(--accentColorDark);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/*Footer styling*/
|
|
|
|
footer > p {
|
|
text-align: center;
|
|
}
|
|
|
|
footer > p > a {
|
|
color: var(--accentColorLight);
|
|
}
|
|
|
|
/*ID selectors*/
|
|
|
|
#webpage {
|
|
width: 992px;
|
|
margin: 1.5rem auto 1.5rem auto;
|
|
}
|
|
|
|
#banner {
|
|
background-color: #0E2752;
|
|
box-shadow: var(--accentColor) 3px 3px 7px;
|
|
border-radius: 20px;
|
|
padding: 1em 1em 0;
|
|
margin-bottom: 1.5em;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
#wrapper {
|
|
background-color: #929292;
|
|
box-shadow: var(--accentColor) 3px 3px 7px;
|
|
border-radius: 20px;
|
|
margin-bottom: 1.5rem;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
#links {
|
|
padding: 1.5rem;
|
|
width: 20%;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#posts {
|
|
background-color: #FFFFFF;
|
|
width: 75%;
|
|
overflow: hidden;
|
|
padding: 1rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
#footer {
|
|
background-color: var(--backColor);
|
|
box-shadow: var(--accentColor) 3px 3px 7px;
|
|
border-radius: 20px;
|
|
padding: 1.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*Class selectors*/
|
|
|
|
.article-title {
|
|
text-decoration: none;
|
|
color: var(--accentColorDark);
|
|
margin-bottom: 300px;
|
|
}
|
|
|
|
.article-title:hover {
|
|
color: #8FC4E6;
|
|
background-color: #3862A9;
|
|
overflow: hidden;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.copyright {
|
|
color: var(--accentColor);
|
|
}
|
|
|
|
.footer-image-left {
|
|
display: inline-block;
|
|
max-height: 10rem;
|
|
float: left;
|
|
}
|
|
|
|
.footer-image-right {
|
|
display: inline-block;
|
|
max-height: 10rem;
|
|
float: right;
|
|
} |