diff css/app.css @ 203:3a99431030c1

Update website to use the foundation 6 framework.
author Kai T. Ohlhus <k.ohlhus@gmail.com>
date Thu, 09 Jul 2020 17:51:40 +0900
parents fb8011d4dd6f
children 68d54c6d397a
line wrap: on
line diff
--- a/css/app.css	Thu Jul 09 15:11:46 2020 +0900
+++ b/css/app.css	Thu Jul 09 17:51:40 2020 +0900
@@ -1,64 +1,89 @@
-@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
+/* Custom classes */
 
-.page-content section {
-	padding-top: 1rem;
-	padding-bottom: 2rem;
+.octave-logo a,
+.octave-logo a:hover {
+  color: #FFF;
+  font-weight: bold;
+}
+
+.landing-page-logo {
+  color: #0790c0;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+  font-size: 2.33rem;
 }
 
-.home-title {
-	color: #0790c0;
-	font-weight: 700;
-	margin: 0 0 1rem 0;
-	font-size: 2.33rem;
+/* Foundation 6 modifications */
+
+.title-bar,
+.top-bar,
+.top-bar ul {
+  background: #333;
 }
 
-body {
-	font-family: 'PT Sans';
-	color: '#333';
+.top-bar ul li a {
+  color: #FFF;
 }
 
-p {
-	color: "#333";
+.top-bar ul li a:hover {
+  background-color: #585858;
 }
 
-li {
-	color: #333;
+.grid-container {
+  margin: 1em auto;
+}
+
+.reveal img {
+  width: 100%;
 }
 
-h1, h2, h3, h4, h5, h6 {
-	font-family: 'PT Sans';
-	color: #333;
-	/*font-weight: bold;*/
-}
-
-h2 {
-	font-size: 2rem;
-}
-
-h3 {
-	font-size: 1.66rem;
-}
+/* Foundation 6 responsive buttons */
 
-h4 {
-	font-size: 1.33rem;
-}
-
-h4, h5, h6 {
-	font-weight: bold;
-}
+@media screen and (max-width: 39.9375em) {
+  .button.small-only-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media screen and (min-width: 40em) and (max-width: 63.9375em) {
+  .button.medium-only-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media screen and (max-width: 63.9375em) {
+  .button.medium-down-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media print, screen and (min-width: 40em) {
+  .button.medium-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media screen and (min-width: 64em) and (max-width: 74.9375em) {
+  .button.large-only-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media screen and (max-width: 74.9375em) {
+  .button.large-down-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
+@media print, screen and (min-width: 64em) {
+  .button.large-expanded {
+    display: block;
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0; } }
 
-div.reveal-modal img {
-	height: auto;
-	width: 100%;
-}
 
-/**
-* Font overrides (do this using SASS when that gets pulled in)
-*/
-
-.button, li, p, .alert, .label, .top-bar-section ul li>a {
-	font-family: inherit;
-}
+/* Syntax highlighter styles */
 
 .highlight code {
 	border: inherit;