Rework styling to be responsive and more "wide"

1 files changed, 163 insertions, 132 deletions

diff --git a/style/style.css b/style/style.css
index 9032c7e..7a49690 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,27 +1,59 @@
-/*
-Design [inspired] by Free CSS Templates
-http://www.freecsstemplates.org
-Released for free under a Creative Commons Attribution 2.5 License
- */
+@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400italic,700);
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic);
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Rammetto+One|Archivo+Black);
+
+:root {
+  --text-color:      #333;
+  //--color-red:       #983d3a;
+  --color-red:       hsl(2, 45%, 41%);
+  //--color-red:       hsl(2, 45%, 45%);
+  --color-red-hover: hsl(2, 45%, 30%);
+  --color-gray-dark: #4c4d51;
+}
 
 * {
 	margin: 0;
 	padding: 0;
 }
 
+*, *:before, *:after {
+        box-sizing: border-box;
+}
+
 /* needed for full background when viewing .xml directly in firefox */
 html, body {
 	height: 100%;
 }
 
 body {
-	background: #433F3F;
-	background: #eeeeee;
+	background: #eee;
 
-	/*text-align: justify; */
-	font-family: Helvetica, Arial, sans-serif;
-	font-size: 13px;
-	color: #333333;
+	//font-family: Helvetica, Arial, sans-serif;
+        font-family: 'Cantarell', sans-serif;
+        font-family: 'Roboto', sans-serif;
+	font-size: 16px;
+        line-height: 1.35;
+	color: var(--text-color);
+
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+}
+
+header, footer {
+        position: relative;
+}
+header:before,
+footer:before {
+        position: absolute;
+}
+
+body > * {
+        flex: none;
+}
+
+body > .outer {
+        flex: 1 0 auto;
 }
 
 form {
@@ -29,39 +61,37 @@ form {
 
 input, textarea {
 	padding: 2px 5px;
-	font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
-	color: #333333;
+	color: var(--text-color);
 }
 
-h1, h2, h3 {
+h2, h3 {
 	margin-top: 1.5em;
-	font-weight: normal;
 }
 
 h1 {
 	font-size: 2em;
+	font-weight: 500;
+        margin-bottom: 0.67em;
 }
 
 h2 {
-	font-size: 1.4em;
+	font-size: 1.5em;
+	font-weight: 500;
+        margin-bottom: 0.75em;
 }
 
 h3 {
-	font-size: 1em;
-}
-
-p {
-	/*text-align: justify; */
+	font-size: 1.2em;
+	font-weight: bold;
+        margin-bottom: 0.80em;
 }
 
 p, ul, ol {
-	margin-top: 1.2em;
-	line-height: 130%;
+        margin-bottom: 1em;
 }
 
-
 ul, ol {
-	margin-left: 3em;
+	margin-left: 1.2em;
 }
 
 blockquote {
@@ -70,12 +100,13 @@ blockquote {
 }
 
 a {
-	color: #CC6B47;
+        color: var(--color-red);
+	text-decoration: none;
 }
 
 a:hover {
 	text-decoration: none;
-	color: #3760BF;
+        color: var(--color-red-hover);
 }
 
 a img {
@@ -84,12 +115,12 @@ a img {
 
 img.left {
 	float: left;
-	margin: 1px 15px 0 10px;
+	margin: 5px 2em 0 0;
 }
 
 img.right {
 	float: right;
-	margin: 5px 5px 0 20px;
+	margin: 5px 0px 2em 2em;
 }
 
 label {
@@ -98,176 +129,176 @@ label {
 	min-width: 90px;
 }
 
-#header, #navi, #container {
-	width: 1040px;
+header, nav, main, footer {
+        width: 65em;
+	max-width: 65em;
 	margin: 0 auto;
 }
 
 /* Header */
 
-#header {
-	height: 70px;
-	padding-top: 33px;
-	padding-bottom: 7px;
+header {
+        margin-bottom: 1em;
+        padding: 2em 0 0.5em;
+        //font-family: 'Cantarell', sans-serif;
+        //font-family: 'Archivo Black', sans-serif;
 }
 
-#header h1, #header h2 {
+header h1, header h2 {
 	margin: 0;
-	letter-spacing: -0.05em;
+	letter-spacing: -0.025em;
 	font-weight: normal;
-	color: #444444;
 }
 
-#header img {
+header svg {
 	position: relative;
 	bottom: -7px;
+        margin-right: 1em;
+        width: 3.5em;
+        height: 3.5em;
 }
 
-#header h1 {
+header h1 {
 	display: inline;
-	font-size: 4em;
+	font-size: 3em;
+	color: #444;
 }
 
-#header h2 {
+header h2 {
 	display: inline;
-	padding-left: 4px;
-	font-size: 2em;
+	padding-left: .5em;
+	font-size: 1.5em;
 	color: #858585;
 }
 
-ul#navi {
-	height: 50px;
+nav > uli {
+        margin-bottom: 1.5em;
 	padding: 0;
 	list-style: none;
 	line-height: normal;
 }
 
-#navi li {
-	display: inline;
+nav > ul:after {
+        content: '';
+        display: block;
+        clear: both;
 }
 
-#navi li a {
+.outer {
+        background: white;
+	border-top: 2px var(--color-red) solid;
+        padding: 2em 0;
+        backgound: #fff;
+}
+nav > ul {
+        padding-left: 0;
+        margin-left: 0;
+}
+nav > ul > li {
+	display: block;
+        float: left;
+        width: 20%;
+}
+
+nav > ul > li + li {
+        padding-left: 2px;
+}
+
+nav > ul > li a {
 	display: inline-block;
-	margin-right: 2px;
-	padding: 5px 20px 5px 20px;
-	background: #4C4D51;
-	border: 1px #575C5F solid;
+	padding: .7em 1.5em;
+	background: var(--color-gray-dark);
 	text-decoration: none;
 	text-transform: uppercase;
 	font-weight: bold;
-	font-size: 11px;
-	color: #FFFFFF;
+	color: #fff;
+        letter-spacing: 0.05em;
+        width: 100%;
+        text-align: center;
 }
 
-#navi a:hover, #navi a.active {
-	background: #983D3A;
-	border: 1px #D45951 solid;
-	border: 1px #C02020 solid;
+nav > ul a:hover,
+nav > ul a:focus,
+nav > ul a.active {
+	background: var(--color-red);
+        color: #fff;
 }
 
-#content {
-	background: #F4EDD3;
-	border-bottom: 4px #BBB082 solid;
-	border: 3px #983D3A solid;
+article, aside {
+        margin: 2em 0;
 }
 
-#container {
-	border: 3px #983D3A solid;
-	background: white;
+article {
+        padding-right: 1em;
 }
 
-#info {
-	width: 180px;
-	float: left; 
-	font-size: 11px;
-	position: relative; 
-	padding: 10px;
-	margin-left: -200px; 
-	margin-right: 1px;
+aside {
+        padding-left: 1em;
 }
-
-.redbox, a.redbox:hover {
+.redbox,
+a.redbox:hover {
 	display: inline-block;
 	text-decoration: none;
-	width: 170px;
-	padding: 5px;
-	margin-top: 5px;
-	background: #983D3A;
-	border: 2px #C02020 solid;
+        width: 100%;
+	padding: 1em;
+	margin-top: .5em;
+        margin-bottom: 1em;
+	background: var(--color-red);
+	border: 2px solid rgba(0,0,0,.02);
 	color: white;
 }
 
-#container {
-	box-sizing: border-box;
-}
-
-#container:before,
-#container:after {
-	/* background: #BBB082; */
-	background: #d2c592;
-	content: '';
-
-	display: block;
-	width: 100%;
-	height: 20px;
-
-	/* Used to clear the infobar float */
-	clear: both;
+main {
+        display: flex;
+        flex-direction: row;
 }
 
-#page {
-	border-left: 200px solid white;
-	font-size: 14px;
-}
-
-#page h1 {
-	margin: 10px 0;
-	padding: 2px;
-	color: #CC6B47;
+main > article {
+        flex: 1 1 45em;
 }
 
-#page .intro {
-	font-size: 110%;
-	padding: 2px;
-	margin: 10px 0;
+main > aside {
+        flex: 1 1 18em;
 }
 
-#page h3 {
-	font-size: 20px;
-	margin: 5px 0;
-	padding: 7px;
-}
 
-#page p {
-	margin: 0;
-	padding-left: 10px;
-	padding-right: 10px;
-	padding-bottom: 15px;
+article h1 {
+        color: var(--color-red);
 }
 
-#page ul, #page ol {
-	padding: 0;
-	margin-top: 0.5em;
-	margin-bottom: 0.5em;
-	font-size: 15px;
+article .intro {
+	font-size: 1.1em;
+	margin: 10px 0;
 }
 
-#page li {
-	padding-right: 10px;
-}
 
-#footer {
+footer {
 	margin: 0 auto;
 	padding: 20px 0;
 	text-align: center;
 }
 
-#footer p {
+footer p {
 	margin: 0;
 	font-size: .8em;
-	color: #666666;
+	color: #666;
 }
 
-#footer p a {
+footer p a {
 	color: inherit;
 }
+
+.logos {
+        background: white;
+        text-align: center;
+}
+
+.logos img {
+        vertical-align: middle;
+        margin: 1.5em 3em;
+}
+
+.social-icon {
+        width: auto;
+        height: 2em;
+}