From 9d4672b0f4cacd46226b74bf4c168f3d53e148ea Mon Sep 17 00:00:00 2001
From: Joshua Perry <45966243+jpez-development@users.noreply.github.com>
Date: Wed, 13 Apr 2022 18:18:12 +0100
Subject: [PATCH] added blog post dummies. added enlarging animation

---
 blog/blog.css    | 71 ++++++++++++++++++++++++++++++++++++++++++++++++
 blog/blog.html   | 51 +++++++++++++++++++++++++++++++++-
 style/mobile.css |  6 ++--
 3 files changed, 124 insertions(+), 4 deletions(-)

diff --git a/blog/blog.css b/blog/blog.css
index e69de29..faed472 100644
--- a/blog/blog.css
+++ b/blog/blog.css
@@ -0,0 +1,71 @@
+.blog_post {
+    background-color: rgba(0, 0, 0, 80%);
+    margin-left: 10em;
+    min-width: 25em;
+    padding-left: 1em;
+    padding-right: 1em;
+    border-radius: 2em;
+}
+
+.blog_image {
+    max-width: 10em;
+}
+
+.blog {
+    display: grid;
+    grid-template-columns: repeat(3, 2fr);
+    gap: 1em;
+}
+
+.blog_post#first:focus-within {
+    transform: scale(180%, 180%) translate(20em, 6em);
+    transition: transform 60ms;
+}
+
+.blog_post#second:focus-within {
+    transform: scale(180%, 180%) translate(0em, 6em);
+    transition: transform 60ms;
+
+}
+
+.blog_post#third:focus-within {
+    transform: scale(180%, 180%) translate(-20em, 6em);
+    transition: transform 60ms;
+
+}
+
+.blog_post#fourth:focus-within {
+    transform: scale(180%, 180%) translate(20em, -13em);
+    transition: transform 60ms;
+
+}
+
+.blog_post#fifth:focus-within {
+    transform: scale(180%, 180%) translate(0em, -13em);
+    transition: transform 60ms;
+
+}
+
+.blog_post#sixth:focus-within {
+    transform: scale(180%, 180%) translate(-20em, -13em);
+    transition: transform 60ms;
+
+}
+
+.blog_post:focus-within > button.arrow {
+    transform: rotate(45deg);
+    transition: transform 1s;
+}
+
+.blog_post:focus-within {
+    z-index: 100;
+}
+
+button.arrow {
+    background-color: transparent;
+    margin: 0;
+    transform: rotate(225deg);
+    transition: transform 1s;
+}
+
+
diff --git a/blog/blog.html b/blog/blog.html
index c2ba28e..2894ea9 100644
--- a/blog/blog.html
+++ b/blog/blog.html
@@ -28,8 +28,57 @@
         <a class="arrow right"></a>
     </nav>
 
-    <main>
+    <main id="open">
         <a class="shownav" href="blog/blog.html#clicked"></a>
+        <section class="blog">
+            <section class="blog_post" id="first">
+                <button class="arrow"></button>
+                <h1 class="blog_title">Blog Title</h1>
+                <img class="blog_image" src="assets/images/profileImage.png"/>
+                <p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
+                <p class="blog_details"></p>
+            </section>
+            <section class="blog_post" id="second">
+                <button class="arrow"></button>
+                <h1 class="blog_title"></h1>
+                <img class="blog_image"/>
+                <p class="blog_content"></p>
+                <p class="blog_details"></p>
+                
+            </section>
+            <section class="blog_post" id="third">
+                <button class="arrow"></button>
+                <h1 class="blog_title"></h1>
+                <img class="blog_image"/>
+                <p class="blog_content"></p>
+                <p class="blog_details"></p>
+                
+            </section>
+            <section class="blog_post" id="fourth">
+                <button class="arrow"></button>
+                <h1 class="blog_title">Blog Title</h1>
+                <img class="blog_image" src="assets/images/profileImage.png"/>
+                <p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
+                <p class="blog_details"></p>
+                
+            </section>
+            <section class="blog_post" id="fifth">
+                <button class="arrow"></button>
+                <h1 class="blog_title"></h1>
+                <img class="blog_image"/>
+                <p class="blog_content"></p>
+                <p class="blog_details"></p>
+                
+            </section>
+            <section class="blog_post" id="sixth">
+                <button class="arrow"></button>
+                <h1 class="blog_title"></h1>
+                <img class="blog_image"/>
+                <p class="blog_content"></p>
+                <p class="blog_details"></p>
+                
+            </section>
+        </section>
     </main>
 
     <footer>
diff --git a/style/mobile.css b/style/mobile.css
index 537b7f5..ef44b28 100644
--- a/style/mobile.css
+++ b/style/mobile.css
@@ -50,8 +50,8 @@ main {
     width: 1.25em;
     display: block;
     position: fixed;
-    border-top: 0.2em solid white;
-    border-bottom: 0.2em solid white;
+    border-top: 0.2em solid #f29602;
+    border-bottom: 0.2em solid #f29602;
 }
 
 .hidenav {
@@ -74,7 +74,7 @@ main {
     position: absolute;
     width: 1.25em;
     margin-top: 0.3em;
-    border-top: 0.2em solid white;
+    border-top: 0.2em solid #f29602;
 }
 
 #clicked .shownav {