Alter the header when the window/screen is too narrow.

1 files changed, 39 insertions, 1 deletions

diff --git a/style.scss b/style.scss
index bb767c6..8022eef 100644
--- a/style.scss
+++ b/style.scss
@@ -98,7 +98,45 @@ body {
 	}	
 }
 
-/*div.menu-wp_nav_menu-container {
+@media (max-width: 1050px) {
+	body #page header#branding hgroup {
+		#team-name {
+			font-size: 60px;
+		}
+		h2 {
+			font-size: 30px;
+		}
+	}
+}
+@media (max-width: 800px) {
+	body #page header#branding hgroup {
+		height: auto;
+		background-image: none;
+
+		#team-name{
+			font-size: 3em;
+		}
+		h2 {
+			font-size: 2em;
+		}
+		#team-number {
+			font-size: 5em;
+			position: relative;
+			right: auto;
+			&:before {
+				text-shadow: none;
+				transform: none;
+				content: "FRC";
+				color: white;
+				font-family: serif;
+				font-size: 0.2em;
+				vertical-align: text-top;
+			}
+		}
+	}
+}
+/*
+div.menu-wp_nav_menu-container {
 	margin: 0 .5em !important;
 }
 */
\ No newline at end of file