responsiveness, style and layout updates

cd88 · cd88 · commit c1eb8db20993 · 2025-10-23T12:50:18.000-07:00
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -1,6 +1,6 @@
 <div class="navbar">
     <div class="logos">
-        <a href="https://www.workersdecide.tech/" target="_blank" rel="noopener">
+        <a href="{{ site.url }}{{ site.baseurl}}/" target="_blank" rel="noopener">
             <img class="nav-logo" src="/assets/hammer-logo.png" alt="WorkersDecide.tech Logo" />
         </a>
     </div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,16 +2,17 @@
 <html lang="en">
 
 {% include head.html %}
-<script src="{{ site.baseurl }}/assets/js/bingo.js"></script>
 <body>
-    <div class="container">
-        {% include navbar.html %}
-        <div class="page-title">
-            {{page.title}}
+    <div class="wrapper">
+        <div class="container">
+            {% include navbar.html %}
+            <div class="page-title">
+                {{page.title}}
+            </div>
+            <div class="content">
+                {{ content }}
+            </div>
+            {% include footer.html %}
         </div>
-        <div class="content">
-            {{ content }}
-        </div>
-        {% include footer.html %}
     </div>
-</body>
+</body>
diff --git a/_layouts/homepage.html b/_layouts/homepage.html
@@ -4,13 +4,15 @@
 {% include head.html %}
 
 <body>
-    <div class="container">
-        {% include navbar.html %}
-        <div class="page-title">
-            {{page.subtitle}}
-	    </div>
-        {% include highlighted-post.html %}
-        {{ content }}
-        {% include footer.html %}
+    <div class="wrapper">
+        <div class="container">
+            {% include navbar.html %}
+            <div class="page-title">
+                {{page.subtitle}}
+            </div>
+            {% include highlighted-post.html %}
+            {{ content }}
+            {% include footer.html %}
+        </div>
     </div>
-</body>
+</body>
diff --git a/_resources/2025-09-18-bingo.md b/_resources/2025-09-18-bingo.md
@@ -23,7 +23,7 @@ the tool, but the organizing around it, and how it helps you to bring
 people together and have discussions to build resolve, solidarity and
 confidence.
 
-[Choose your card style and print some out!](/bingo)
+<b>[Choose your card style and print some out!](/bingo)</b>
 
 Then check out the various play styles below.
 
diff --git a/css/bingo.scss b/css/bingo.scss
@@ -1,4 +1,4 @@
----
+--- 
 ---
 
 /* Bingo Card Generator Styles */
@@ -32,6 +32,7 @@
 .bingo-card.full-bg {
   background: url('/assets/bingo-assets/bingo-bg.svg') center/cover;
 }
+
 .hide-bg .bingo-card.full-bg {
   background: white !important;
 }
@@ -70,6 +71,7 @@
   }
 
 }
+
 .blackWhite .bingo-letters-container {
   #bingo-letters-bg-svg {
     fill: white;
@@ -82,6 +84,7 @@
     stroke: black;
     stroke-width: 1px;
   }
+
   #bingo-letters-bg-svg {
     fill: none;
   }
@@ -140,13 +143,15 @@
   body {
     background: #fff !important;
   }
+
   .bingo-cards-container,
   .bingo-card,
   .print-cards-container,
   .print-page,
   .bingo-card {
     page-break-inside: avoid;
   }
+
   .print-page {
     page-break-after: always;
   }
@@ -158,10 +163,12 @@
     margin: 0;
     padding: 0;
   }
+
   .print-cards-container {
     width: 100vw;
     min-height: 100vh;
   }
+
   .print-page {
     display: flex;
     flex-direction: column;
@@ -170,10 +177,17 @@
     padding: 0;
     page-break-after: always;
     gap: 16pt;
+
+    &:not(:first-child) {
+      margin-top: 116pt;
+    }
   }
+
   .print-card-rotator {
-    width: 468pt; /* 6.5in * 72pt/in */
-    height: 324pt; /* 4.5in * 72pt/in */
+    width: 468pt;
+    /* 6.5in * 72pt/in */
+    height: 324pt;
+    /* 4.5in * 72pt/in */
     position: relative;
     display: flex;
     justify-content: center;
@@ -182,8 +196,10 @@
   }
 
   .bingo-card {
-    width: 324pt !important;  /* 4.5in */
-    height: 468pt !important; /* 6.5in */
+    width: 324pt !important;
+    /* 4.5in */
+    height: 468pt !important;
+    /* 6.5in */
     box-sizing: border-box;
     border: 2pt solid #222;
     border-radius: 0 !important;
@@ -200,29 +216,34 @@
     transform: rotate(90deg) translateY(-468pt);
     transform-origin: left top;
   }
+
   .print-card-rotator:nth-child(even) {
     margin-top: -100pt;
 
     .bingo-card {
-          transform: rotate(90deg) translateY(-468pt) translateX(100pt);
+      transform: rotate(90deg) translateY(-468pt) translateX(100pt);
     }
   }
+
   .bingo-title {
     margin: 12pt 0 3pt 0 !important;
     width: 95% !important;
     font-size: 28pt !important;
     text-align: center;
   }
+
   .bingo-letters-container {
     width: 100% !important;
     height: 48pt !important;
     margin: 0 !important;
     padding: 0 !important;
   }
+
   .bingo-letters-bg,
   .bingo-letters-bg-color {
     height: 48pt !important;
   }
+
   .bingo-footer {
     width: 100% !important;
     height: 18pt !important;
@@ -231,9 +252,11 @@
     left: 0;
     z-index: 6;
   }
+
   .bingo-grid {
     margin: 8pt 8pt 0 !important;
   }
+
   .bingo-square {
     width: 20% !important;
     height: 68.6pt !important;
@@ -246,11 +269,13 @@
     width: 110%;
     margin: 0 0 0 -5%;
   }
+
   .bingo-card.full-bg {
     background: url('/assets/bingo-assets/bingo-bg.svg') center/cover !important;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
   }
+
   .hide-bg .bingo-card.full-bg {
     background: #fff !important;
   }
diff --git a/css/html-defaults.scss b/css/html-defaults.scss
@@ -20,7 +20,7 @@ a:hover {
 }
 
 hr {
-    margin: 5px;
+    margin: 5px 0;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
diff --git a/css/main.scss b/css/main.scss
@@ -4,7 +4,7 @@
 
 $accent: #4BAEA0;
 
-$max-width: 1100px;
+$max-width: 1130px;
 $med-width: 600px;
 $small-width: 480px;
 
@@ -17,7 +17,9 @@ $small-width: 480px;
 .float-right {
     float: right;
 }
-
+.wrapper {
+    margin: 0 30px;
+}
 .container {
     max-width: $max-width;
     margin: auto;
@@ -197,6 +199,12 @@ $small-width: 480px;
     }
 }
 
+.space-between {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .lt650, .lt800 {
     display: none;
 }
@@ -205,6 +213,13 @@ $small-width: 480px;
 }
 
 @media (max-width: 1100px) {
+    .wrapper {
+        margin: 0;
+    }
+    .container {
+        max-width: 95%;
+    }
+
     .column {
         padding: 10px 20px;
     }
@@ -222,7 +237,6 @@ $small-width: 480px;
 /* Tablet */
 @media (max-width: 800px) {
     .container {
-        max-width: $med-width;
         transition: 0.3s ease all;
     }
     .navbar {
diff --git a/css/posts.scss b/css/posts.scss
@@ -27,8 +27,8 @@ $accent: #4BAEA0;
   position: relative;
   border: 1px solid $accent;
   border-radius: 6px;
-  padding: 1rem 25px;
-  margin: 10px 5px 0;
+  padding: 1rem 20px;
+  margin: 10px 0 0;
   max-height: 300px;
   overflow: hidden;
 
@@ -82,6 +82,10 @@ $accent: #4BAEA0;
   }
 }
 
+.see-all h6 {
+  margin: 0;
+}
+
 /* Media queries for tablet and mobile */
 @media (max-width: 1200px) {
 
@@ -124,6 +128,7 @@ $accent: #4BAEA0;
 
   .highlighted-post {
     max-height: 400px;
+    margin: 10px 0px 0;
 
     .column:first-child, .column:last-child {
       width: 100%;
diff --git a/css/tags.scss b/css/tags.scss
@@ -3,27 +3,61 @@
 
 $accent: #4BAEA0;
 
+#show-all-tags {
+  margin-bottom: 20px;
+  transform: translateX(-30px);
+  opacity: 0;
+  position: relative;
+  will-change: opacity, transform;
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+  display: none;
+  
+  &.visible {
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: auto;
+    display: block;
+  }
+  
+  div {
+    background-color: #4BAEA011;
+    border: 1px solid $accent;
+    border-radius: 6px;
+    position: absolute;
+    display: block;
+    padding: 8px 12px;
+    right: 0;
+  }
+}
+
 .tags-list {
   list-style-type: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
-}
-/* Media queries for tablet and mobile */
-@media (max-width: 1200px) {
 
-}
+  li {
+    display: none;
 
-@media (max-width: 800px) {
+    &.visible {
+      display: block;
+    }
 
+    h2 {
+margin-block-start: 0;
+margin-block-end: 1em;
+    }
+  }
 }
 
-@media (max-width: 700px) {
+/* Media queries for tablet and mobile */
+@media (max-width: 1200px) {}
 
-}
+@media (max-width: 800px) {}
 
-@media (max-width: 650px) {
+@media (max-width: 700px) {}
 
-}
+@media (max-width: 650px) {}
diff --git a/index.html b/index.html
diff --git a/tags.html b/tags.html

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ a:hover {`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`hr {`
`23`		`- margin: 5px;`
	`23`	`+ margin: 5px 0;`
`24`	`24`	`border-top: 1px solid rgba(0, 0, 0, 0.1);`
`25`	`25`	`border-bottom: 1px solid rgba(255, 255, 255, 0.3);`
`26`	`26`	`}`