Merge branch '2-better-responsive-mobile-css-for-bcrmc-pages'

svioletg · Sep 24, 2024 · ab19e2a · ab19e2a
2 parents 09180e7 + 01b2779
commit ab19e2a
Show file tree

Hide file tree

Showing 9 changed files with 291 additions and 169 deletions.
diff --git a/bcrmc/active-tweaks.html b/bcrmc/active-tweaks.html
@@ -20,7 +20,7 @@
 		<!-- Begin main content -->
 		<h1 style="font-family: 'MinecraftRegular'; color: yellow;">
 			<img src="i/bcr.png" style="height: 1.5em; vertical-align: bottom;">
-			<span class="bcrmc-header">BCR-MC 5</span><br>1.20: <span class="title-gradient-120">Trails & Tales</span>
+			<span class="bcrmc-header">BCR-MC 5</span><br>1.20: <span class="text-grad-bcr5">Trails & Tales</span>
 			<img src="i/cherry_sapling_128x128.png" style="height: 1.5em; vertical-align: bottom;">
 		</h1>
 		<h2>Currently Active Tweaks</h2>

diff --git a/bcrmc/bcrmc.css b/bcrmc/bcrmc.css
@@ -15,6 +15,7 @@
   --bcr4-h2: url("i/mangrove_planks_128x128.png");
   --bcr5-icon: url("i/cherry_sapling_128x128.png");
   --bcr5-bg: url("i/cherry_planks_128x128.png");
+  --bcr5-grad: linear-gradient(fuchsia, orange);
   --bcr5-h2: url("i/bamboo_planks_128x128_dark.png");
 }
 
@@ -23,7 +24,7 @@
   src: url("./font/MinecraftRegular-Bmg3.otf");
 }
 body {
-  margin: 0;
+  margin-top: 0;
   color: white;
   font-family: "Aoboshi One", serif;
   font-weight: lighter;
@@ -42,6 +43,7 @@ main {
 
 hr {
   width: 75%;
+  color: white;
 }
 
 p {
@@ -55,10 +57,12 @@ b {
 }
 
 code {
-  font-family: "Courier New";
+  font-family: "Consolas", "Courier New", monospace;
   font-weight: bold;
-  background-color: #333;
+  background-color: black;
   padding: 5px;
+  margin: 2px;
+  border-radius: 5px;
   color: yellow;
 }
 
@@ -73,6 +77,14 @@ code {
   row-gap: 1em;
 }
 
+.flexnav.col2 {
+  width: 60%;
+}
+
+.flexnav.col1 {
+  width: 50%;
+}
+
 div.ol-mouse-position {
   background-color: #333;
   color: white;
@@ -302,13 +314,11 @@ select.bttn > option {
   color: turquoise;
 }
 
-span.title-gradient-120 {
-  background: linear-gradient(fuchsia, orange);
-  /* background: radial-gradient(gold, fuchsia); */
+.text-grad-bcr5 {
+  background: var(--bcr5-grad);
   -webkit-background-clip: text;
           background-clip: text;
   -webkit-text-fill-color: transparent;
-  filter: drop-shadow(3px 3px rgba(0, 0, 0, 0.5));
 }
 
 h1 {
@@ -323,6 +333,7 @@ h1.mc-head img:not(.no-shadow) {
 }
 
 h2, h3 {
+  box-sizing: border-box;
   width: 75%;
   margin: auto;
   padding: 0.5em;
@@ -331,6 +342,7 @@ h2, h3 {
 }
 
 h2 {
+  width: 75%;
   font-size: 2em;
   background-color: rgba(0, 255, 255, 0.25);
   background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("i/slate_128x128.png");
@@ -406,17 +418,24 @@ ul {
   width: 75%;
   text-align: left;
   margin: 0 auto;
+  list-style: disc inside;
 }
 
 ul img {
   width: 40%;
 }
 
-ul ol {
+ul.buttonlist {
+  list-style: none;
+  text-align: center;
+}
+
+ol.withbg {
+  width: 75%;
+  font-size: 1.5em;
   padding-top: 1em;
   padding-bottom: 1em;
-  margin-left: 0;
-  font-size: 0.9em;
+  margin: 0 auto;
   text-align: left;
   background-color: rgba(255, 0, 255, 0.1);
   -webkit-backdrop-filter: blur(5px);
@@ -477,6 +496,12 @@ kbd {
   color: yellow;
 }
 
+sup {
+  color: #ddd;
+  font-size: 0.75em;
+  font-style: italic;
+}
+
 footer {
   background-color: black;
   font-family: Helvetica, Arial, sans-serif;
@@ -509,11 +534,14 @@ body.bcr1 table.scoreboard th {
 img.bcr1-icon {
   content: var(--bcr1-icon);
   height: 1.5em;
-  padding-right: 1em;
   vertical-align: bottom;
   filter: drop-shadow(2px 2px rgba(0, 0, 0, 0.5));
 }
 
+a img.bcr1-icon {
+  margin-bottom: 0.25em;
+}
+
 body.bcr2 {
   background-image: var(--bcr2-bg);
 }
@@ -529,11 +557,14 @@ body.bcr2 table.scoreboard th {
 img.bcr2-icon {
   content: var(--bcr2-icon);
   height: 1.5em;
-  padding-right: 1em;
   vertical-align: bottom;
   filter: drop-shadow(2px 2px rgba(0, 0, 0, 0.5));
 }
 
+a img.bcr2-icon {
+  margin-bottom: 0.25em;
+}
+
 body.bcr3 {
   background-image: var(--bcr3-bg);
 }
@@ -549,11 +580,14 @@ body.bcr3 table.scoreboard th {
 img.bcr3-icon {
   content: var(--bcr3-icon);
   height: 1.5em;
-  padding-right: 1em;
   vertical-align: bottom;
   filter: drop-shadow(2px 2px rgba(0, 0, 0, 0.5));
 }
 
+a img.bcr3-icon {
+  margin-bottom: 0.25em;
+}
+
 body.bcr4 {
   background-image: var(--bcr4-bg);
 }
@@ -569,11 +603,14 @@ body.bcr4 table.scoreboard th {
 img.bcr4-icon {
   content: var(--bcr4-icon);
   height: 1.5em;
-  padding-right: 1em;
   vertical-align: bottom;
   filter: drop-shadow(2px 2px rgba(0, 0, 0, 0.5));
 }
 
+a img.bcr4-icon {
+  margin-bottom: 0.25em;
+}
+
 body.bcr5 {
   background-image: var(--bcr5-bg);
 }
@@ -589,33 +626,48 @@ body.bcr5 table.scoreboard th {
 img.bcr5-icon {
   content: var(--bcr5-icon);
   height: 1.5em;
-  padding-right: 1em;
   vertical-align: bottom;
   filter: drop-shadow(2px 2px rgba(0, 0, 0, 0.5));
 }
 
+a img.bcr5-icon {
+  margin-bottom: 0.25em;
+}
+
 @media only screen and (max-device-width: 600px) {
-  /*	body {font-size:2em;}*/
+  body {
+    font-size: 0.75em;
+  }
   main {
     width: 100%;
   }
-  h2, h2 {
+  h1 {
+    font-size: 2em;
+  }
+  h2 {
+    width: 90%;
+  }
+  h3.subtitle {
     width: 100%;
-    border-left: none;
   }
   .bttn {
     padding: 1em;
-    width: 75%;
+    width: 100%;
+    height: 60px;
+  }
+  .buttonlist .bttn {
+    height: 30px;
   }
   ul {
     width: 100%;
     padding-left: 0;
   }
-  ul li {
-    padding-left: 1em;
+  ol {
+    width: 100%;
   }
-  ul ol {
-    border-left: none;
+  ul li {
+    margin: 0 auto;
+    width: 80%;
   }
   ul img {
     width: 100%;
@@ -624,7 +676,20 @@ img.bcr5-icon {
     width: 100%;
     height: auto;
   }
+  figure {
+    min-width: 50%;
+    max-width: 50%;
+  }
   figure img {
     height: 200px;
   }
+  .flexnav.col1 {
+    width: 90%;
+  }
+  .flexnav.col2 {
+    width: 90%;
+  }
+  .flexnav.gallery-files {
+    width: 100%;
+  }
 }/*# sourceMappingURL=bcrmc.css.map */
diff --git a/bcrmc/bcrmc.css.map b/bcrmc/bcrmc.css.map