Slightly improve mobile support

Author: Blixibon

_sass/minima/_base.scss

@@ -295,14 +295,19 @@ abbr {
   display: block;
   float: left;
   width:100%;
-  line-height:8px;
   padding-bottom:16px;
 }
 .breadcrumb-trail-box {
-  padding: 16px; margin:8px; color: #ffffff; height: auto; width: auto;
+  padding: 8px; padding-left: 16px; padding-right: 16px; margin:8px; color: #ffffff; height: auto; width: auto;
   background-color: rgba(0,0,0,0.7);
   border: 4px; border-radius: 15px;
 }
+  
+@media (max-width: 980px) {
+  .breadcrumb-trail {
+    width:auto;
+  }
+}
 
 .table-filters {
   margin:0px; padding:18px;
@@ -495,7 +500,7 @@ abbr {
   z-index: 2; color: $text-color;
 }
 .feature_background {
-  background-image: url('../assets/dev_measuregeneric_purple01.jpg');
+  background-image: url('../assets/dev_measuregeneric_purple01.jpg'); background-size: cover;
   position:absolute; min-width: 0; min-height: 0; width:100%; height:100%;
   opacity: 0;
   transition: opacity 0.5s ease;

_sass/minima/_layout.scss

@@ -18,11 +18,8 @@
   letter-spacing: -1px;
   margin-bottom: 0;
   float: left;
-
-  &,
-  &:visited {
-    color: $grey-color-dark;
-  }
+  filter: drop-shadow(0px 0px 4px black);
+  text-shadow: 0px 0px 4px black;
 }
 
 .site-nav {

index.html

@@ -49,8 +49,8 @@
   .wip_box {
     position: relative; overflow: hidden;
     display: flex; justify-content: center; align-items: center;
-    padding: 8px; color: #ffffff; height: auto;
-	margin-top: 32px; margin-left: 64px; margin-right: 64px;
+    padding: 8px; color: #ffffff; height: auto; width: auto;
+	margin-top: 32px;
 	background-color: rgba(0,0,0,0.8);
 	opacity: 1.0; filter: alpha(opacity=100); border: 5px dashed yellow; border-radius: 25px;
 	text-shadow: 4px 4px 8px black;
@@ -71,6 +71,7 @@
 	*/
   .sea {
     position: absolute;
+	overflow: hidden;
 	top: 80px;
 	left: 0px;
 	width: 100%; height: 600px;
@@ -127,6 +128,7 @@
 	*/
   #landing_navbar ul {
     display: flex;
+	flex-wrap: wrap;
     list-style-type: none;
     margin: 0;
     padding: 0;
@@ -151,6 +153,12 @@
   #landing_navbar ul li a:hover {
     background-color: #111111;
   }
+  
+  @media (max-width: 600px) {
+    #landing_navbar ul {
+      flex-direction: column;
+    }
+  }
 	/*
 		Socials
 	*/
@@ -185,17 +193,17 @@
 
 <div id="sea" class="sea">
 </div>
-
-<div class="top_container">
 	<br>
-	<p style="display:flex; gap:0px; justify-content:center; align-items: center;">
-		<button id="top_icon_button" style="background:none; border:none; cursor: pointer;">
+	<p style="display:flex; gap:0px; justify-content:center; align-items: center; flex-wrap: wrap;">
+		<button id="top_icon_button" style="background:none; border:none; cursor: pointer; max-width: 400px;">
 			<div id="top_icon_hinge" class="top_icon_hinge">
 				<img id="top_icon_img" class="top_icon" src="assets/website_home_icon.png" width="300"/>
 			</div>
 		</button>
 		<img src="assets/website_home_text.png" width="600" height="50%"/>
 	</p>
+
+<div class="top_container">
 	<br>
 	<br>
 	<div class="top_box">