updated css

static/assets/styles.css

@@ -142,6 +142,11 @@ a {
     gap: 40px;
 }
 
+/* ascii menu for mobile */
+#ascii-menu {
+    display: none;
+}
+
 /*
     table
 */
@@ -234,9 +239,9 @@ p {
     position: relative;
 }
 
-.activity-image img {
-    width: 100%;
-    height: 500px;
+#content-body .activity-image img {
+    width: 60%;
+    height: 100%;
     object-fit: cover;
     object-position: center;
 }
@@ -285,6 +290,10 @@ hr {
     #content-body img{
         width: 80%;
     }
+
+    #content-body .activity-image img {
+        width: 80%;
+    }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
@@ -346,6 +355,24 @@ hr {
         font-size: 7px;
     }
 
+    .astr-line {
+        display: none;
+    }
+
+    .astr-line-menu {
+        font-size: 18px;
+        text-align: center;
+        vertical-align: middle; 
+        line-height: 45px;
+    }
+
+    #ascii-menu {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        justify-content: space-around;
+    }
+
     #main-container {
         flex-direction: column;
     }
@@ -360,6 +387,7 @@ hr {
 
     #content-container {
         width: auto;
+        padding: 20px;
     }
 
     #index-links {
@@ -371,7 +399,61 @@ hr {
     }
 
     #index-container {
-        flex: 0 0 20%;
+        /* height: 200px; */
         padding-bottom: 0px;
+        gap:20px;
+        flex: none;
+    }
+
+    #content-title {
+        text-align: center;
+    }
+
+    p {
+        font-size: 16px;
+    }
+
+    .title {
+        font-size: 36px;
+    }
+
+    .activity-title{
+        text-align: left;
+    }
+
+    .activity-image{
+        height: 200px;
+    }
+
+    .button-link {
+        width: fit-content;
+        font-size: 18px;
+        padding: 10px 20px;
+    }
+
+    .list-container {
+        width: fit-content;
+    }
+
+    #content-body .activity-image img {
+        width: 100%
+    }
+
+    #content-body img {
+        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .ascii {
+        font-size: 4px;
+    }
+
+    .astr-line-menu {
+        font-size: 16px;
+    }
+
+    .button-link {
+        font-size: 16px;
     }
 }

templates/_nav.html

@@ -17,6 +17,11 @@ MM.         MM.      ,MP M   `MM.M MM.           MM   Y  ,   MM            MM
   M     YMM    YM.     ,M    MM     ,M   MM     ,M 
 .JML.    YM     `bmmmmd"'  .JMMmmmmMMM .JMMmmmmMMM </div> 
     </div></a>
+    <div id="ascii-menu">
+      <div class="astr-line-menu">&#x2732; &#x2732; &#x2732;</div>
+      <div class="list-container"><a href="/activities" class="button-link">MENU</a></div>
+      <div class="astr-line-menu">&#x2732; &#x2732; &#x2732;</div>
+    </div>
     <div class="astr-line">&#x2732; &#x2732; &#x2732;</div>
     <div id="index-content">
         <p>A grassroot organisation of artists, creative technologist, designers, and educators focused on supporting a vibrant new media arts community in Ireland -- through our events, newsletter, and other activities.</p>