Fixed titles wrapping due to too large fonts.

Tomasz-Kluczkowski · Tomasz-Kluczkowski · commit 81fb33e214d1 · 2018-02-09T16:37:15.000Z
Adjusted brand logo size for smallest screens.
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 <!--Full screen navigation section-->
     <nav class="navigation navbar sticky-top navbar-light">
         <div class="navigation__brand">
-            <a class="navbar-brand" href="index.html">
+            <a class="navigation__brand-link navbar-brand" href="index.html">
                 <img class="navigation__brand-img" src="static/images/site_logo/python_sprints_logo.png" alt="Python Sprints Logo">
                 <span class="navigation__brand-name">Python Sprints</span>
             </a>
diff --git a/static/css/style.css b/static/css/style.css
@@ -50,15 +50,20 @@
     border-radius: 6px;
 }
 
+.navigation__brand-link {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
 .navigation__brand-name {
-    font-size: 1.2em;
+    font-size: 0.8em;
     color: #ffffff;
     font-family: 'Share Tech Mono', monospace;
 }
 
-@media (max-width: 450px) {
+@media (min-width: 450px) {
     .navigation__brand-name {
-        font-size: 0.8em;
+        font-size: 1.2em;
     }
 }
 
@@ -83,20 +88,49 @@
     -o-user-select: none;
 }
 
-.navigation__title {
+ .navigation__title {
     font-family: 'Share Tech Mono', monospace;
     color: #ffffff;
-    font-size: 6em;
+    font-size: 3.5em;
     margin-top: 40vh;
     text-align: center;
+ }
+ .navigation__subtitle {
+     font-size: 1.16em;
+     font-family: 'Share Tech Mono', monospace;
+     color: #818181;
+     text-align: center;
+     margin-bottom: 50%;
+ }
+
+ @media (min-width: 450px) {
+.navigation__title {
+    font-size: 4.3em;
+    margin-top: 40vh;
+    }
+    .navigation__subtitle {
+    font-size: 1.43em;
+    }
 }
 
-.navigation__subtitle {
-    font-family: 'Share Tech Mono', monospace;
-    color: #818181;
+@media (min-width: 650px) {
+.navigation__title {
+    font-size: 5em;
+    margin-top: 40vh;
+    }
+    .navigation__subtitle {
+    font-size: 1.66em;
+    }
+}
+
+@media (min-width: 1200px) {
+.navigation__title {
+    font-size: 6em;
+    margin-top: 40vh;
+    }
+    .navigation__subtitle {
     font-size: 2em;
-    text-align: center;
-    margin-bottom: 50%;
+    }
 }
 
 .navigation__hamburger-bar {
@@ -157,14 +191,35 @@
 }
 
 .section-title {
-    font-size: 4em;
+    font-size: 2.5em;
     color: #072948;
     text-align: center;
     font-family: 'Encode Sans Expanded', sans-serif;
     margin-top: 5%;
     margin-bottom: 2.5%;
 }
 
+
+@media (min-width: 376px) {
+    .section-title {
+    font-size: 3em;
+    }
+}
+
+@media (min-width: 500px) {
+    .section-title {
+    font-size: 4em;
+    }
+}
+
+
+
+
+
+
+
+
+
 .section-content {
     font-size: 1.1em;
     text-align: center;
