Start porting styling code over to Sass

site/scss/style.scss

@@ -0,0 +1,147 @@
+body {
+    padding: 0;
+    margin: 0;
+    font-family: "Open Sans", "Helvetica Neue", "Helvetica", sans-serif;
+    background-color: #34495e;
+    color: #ecf0f1;
+}
+
+h1, h2, h3, h4 {
+    font-weight: 400;
+    margin: 0;
+}
+
+p, li {
+    font-weight: 300;
+}
+
+p {
+    text-align: justify;
+}
+
+ul {
+    text-align: left;
+}
+
+.thin {
+    font-weight: 300;
+}
+
+.thick {
+    font-weight: 400;
+}
+
+.superthick {
+    font-weight: 700;
+}
+
+.center-text {
+    text-align: center;
+    vertical-align: middle;
+}
+
+.top-bar {
+    margin: 0;
+    width: 100%;
+    /*height: 20%;*/
+    padding-top: 10px;
+    padding-bottom: 10px;
+    /*min-height: 100px;*/
+    background-color: #2c3e50;
+    vertical-align: middle;
+}
+
+.slide {
+    margin: 0;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    width: auto;
+
+}
+
+.tall-slide {
+    padding-top: 30px;
+    padding-bottom: 30px;
+}
+
+.infobox-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.infobox {
+    padding: 15px;
+    margin: 10px;
+    background-color: #fbfcfc;
+    color: #474747;
+}
+
+.one-third {
+    max-width: 33%;
+}
+
+.one-half {
+    max-width: 50%;
+}
+
+a {
+    color: #cdcdcd;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #aaaaaa;
+    text-decoration: underline;
+}
+
+a:visited {
+    color: #444444;
+}
+
+.infobox a {
+    color: #999999;
+}
+
+.infobox a:hover {
+    color: #aaaaaa;
+}
+
+.navbar {
+    text-align: center;
+}
+
+@media (min-width: 1101px) {
+    .infobox {
+        flex: 1 0 0;
+    }
+
+    .navbar li {
+        display: inline;
+    }
+
+    .navbar li:not(:last-child):after {
+        content: " • ";
+    }
+}
+
+@media (max-width: 1100px) {
+    .infobox-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .infobox {
+        padding: 15px;
+        margin: 10px;
+        max-width: 100%;
+    }
+
+    .navbar {
+        list-style-type: none;
+    }
+}