Aside element showing mobile version of coj website made responsive f…

…or mobile devices
alanmmckay · Dec 14, 2023 · a0d29f0 · a0d29f0
1 parent a84fff9
commit a0d29f0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/projects/cup/index.php b/projects/cup/index.php
@@ -29,8 +29,8 @@
                     <p>
                         A local coffee shop, Cup of Joe, was a frequent spot of study; this fact helped contribute to my successful grades. So what better way to give back by doing a redesign of the current website making it mobile friendly?
                     </p>
-                    <div style='clear:both;'>
-                    <figure style='float:right;width:25%;margin-left:5%;margin-right:1%;margin-top:1%;margin-bottom:2%'>
+                    <div class='aside'>
+                    <figure>
                         <img src='../../images/cup_story_mobile.png' alt='' />
                         <figcaption>
                             Mobile variant of the Story page.
@@ -43,13 +43,20 @@
                     <p>
                         The foundation of this implementation was built upon a mobile-first design. Here, media queries would kick a certain layout into view dependent on window size where the initial template being considered was designed for mobile devices. This involved careful consideration to maintaining the website's aesthetic, which does a good job adhering to the aesthetic of the shop proper. One key facet in accomplishing this was the decision to maintain the site's identity with the navigation bar. Instead of leveraging a hamburger button to splay navigational options, the navigation bar is fixed to the left where the size of its selections maintain a good compromise between easy interaction while not obscuring too much of the view, (regardless of view-screen size). This further differs from prior implementation as the navigation bar now stays in view as a user scrolls through a given page.
                     </p>
+                    <figure class='responsive_aside'>
+                        <img src='../../images/cup_story_mobile.png' alt='' />
+                        <figcaption>
+                            Mobile variant of the Story page.
+                        </figcaption>
+                    <hr>
+                    </figure>
                     <p>
                         In terms of layout, there were two different types of pages that the Cup of Joe website contained. The main page had a unique layout in the sense that the majority of the display emphasized on a slideshow of images from the shop. The other pages consisted of textual content with an image banner and occasionally information placed as an aside. The responsive redesign would determine both the sizes of these pieces of each page, but also where and if they would be drawn.
                     </p>
                     </div>
                     <hr>
-                    <figure>
-                        <ul class='image-collage'>
+                    <figure class='image-collage'>
+                        <ul>
 
                             <li style='width:60%;'>
                                 <img src='../../images/cup_story_desktop.png' alt='' />
@@ -189,7 +196,6 @@ function showSlides(n,init){
                 if (n < 1) {slideIndex = slides.length}
 
                 if (init == true){
-
                     // Finding maximum height for images:
                     for (i = 0; i < slides.length; i++){
                         slides[i].style.display = "block";

diff --git a/style.css b/style.css
@@ -179,6 +179,28 @@
     object-fit:cover;
 }
 
+#writingsWrapper div.aside{
+    clear:both;
+}
+
+#writingsWrapper div.aside figure{
+    float:right;
+    width:25%;
+    margin-left:5%;
+    margin-right:1%;
+    margin-top:1%;
+    margin-bottom:2%
+}
+
+#writingsWrapper div.aside figure.responsive_aside{
+    margin-top:1%;
+    margin-bottom:2%;
+    margin:auto;
+    width:65%;
+    float:none;
+    display:none;
+}
+
 #grid-control h4{
     margin-bottom:0px;
 }
@@ -201,11 +223,11 @@
     float:left;
 }
 
-ul.image-collage{
+figure.image-collage{
 
 }
 
-ul.image-collage li{
+figure.image-collage ul li{
     display:inline-block;
 }
 
@@ -323,6 +345,14 @@ figure.slide-deck figcaption ul li:hover{
         display:none;
     }
 
+    #writingsWrapper div.aside figure.responsive_aside{
+        display:block;
+    }
+
+    #writingsWrapper div.aside figure{
+        display:none
+    }
+
     figure.slide-deck figcaption ul li{
         font-size:16px;
     }