r0r-5chach/CSY1018-assignment-1
r0r-5chach
/
CSY1018-assignment-1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added blog post dummies. added enlarging animation

This commit is contained in:
Joshua Perry 2022-04-13 18:18:12 +01:00
parent 43cae90c8d
commit 9d4672b0f4
3 changed files with 124 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
blog/blog.css
View File

@ -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;
}

51
blog/blog.html
View File

@ -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>

6
style/mobile.css
View File

@ -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 {