garrit
/
garrit.xyz
mirror of https://github.com/garritfra/garrit.xyz
1
0
Fork 0
Code Issues 4 Projects Releases Wiki Activity
Browse Source

feat: redesign blog list

develop
Garrit Franke 3 years ago
parent
86bd0f05b9
commit
a3b3f23992
Signed by: garrit
GPG Key ID: 65586C4DDA55EA2C
5 changed files with 61 additions and 236 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      components/BlogList.js
  2. 7
      pages/posts/index.js
  3. 96
      styles/components/blog-list.scss
  4. 1
      styles/components/index.scss
  5. 1
      styles/foundation/typography.scss

108
components/BlogList.js
Unescape View File

@ -11,7 +11,7 @@ function truncateSummary(content) {
const BlogList = ({ posts }) => {
return (
<>
<div className="blog__list">
{posts.length > 1 &&
posts
// Filter drafts
@ -23,13 +23,9 @@ const BlogList = ({ posts }) => {
)
.map((post) => (
<a href={`/posts/${post.slug}`}>
<li>
<div className="blog__info">
<div className="blog__list__post">
<h2>{post.frontmatter.title}</h2>
<h3>
{" "}
{reformatDate(post.frontmatter.date)}
</h3>
<h4 className="blog__list__post__date">{reformatDate(post.frontmatter.date)}</h4>
<p>
<ReactMarkdown
source={truncateSummary(
@ -38,105 +34,9 @@ const BlogList = ({ posts }) => {
/>
</p>
</div>
</li>
</a>
))}
<style jsx>
{`
margin-bottom: 0;
a:hover {
opacity: 1;
}
a:hover li div.hero_image img {
opacity: 0.8;
transition: opacity 0.3s ease;
}
a:hover li .blog__info h2,
a:hover li .blog__info h3,
a:hover li .blog__info p {
transform: translateX(10px);
transition: transform 0.5s ease-out;
}
@media (prefers-reduced-motion) {
a:hover li .blog__info h2,
a:hover li .blog__info h3,
a:hover li .blog__info p {
transform: translateX(0px);
}
}
.hero_image {
width: 100%;
height: 33vh;
overflow: hidden;
background-color: #000;
}
.hero_image img {
object-fit: cover;
object-position: 50% 50%;
opacity: 1;
transition: opacity 0.3s ease;
min-height: 100%;
}
.blog__info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 1.25rem;
transform: translateX(0px);
transition: transform 0.3s ease-in;
}
.blog__info h2,
.blog__info h3,
.blog__info p {
transform: translateX(0px);
transition: transform 0.5s ease-out;
}
li {
opacity: inherit;
display: flex;
flex-direction: column;
min-height: 38vh;
margin-bottom: 0;
}
h2 {
margin-bottom: 0.5rem;
}
h3 {
margin-bottom: 1rem;
}
p {
max-width: 900px;
}
@media (min-width: 768px) {
li {
min-height: 250px;
height: 33.333vh;
flex-direction: row;
}
.hero_image {
height: 100%;
}
.hero_image img {
min-width: 100%;
height: 100%;
width: auto;
min-height: 0;
}
.blog__info {
min-width: 70%;
}
}
@media (min-width: 1280px) {
.blog__info {
padding: 3rem;
}
h3 {
margin-bottom: 1.2rem;
}
}
`}
</style>
</>
</div>
);
};

7
pages/posts/index.js
Unescape View File

@ -1,14 +1,13 @@
import Layout from "../../components/Layout";
import BlogList from "../../components/BlogList";
import Page from "../../components/Page";
import matter from "gray-matter";
const Index = (props) => {
return (
<Layout pathname="/" siteTitle="Garrit's Notes" siteDescription="">
<section>
<Page siteTitle="Garrit's Notes">
<BlogList posts={props.posts} />
</section>
</Layout>
</Page>
);
};

96
styles/components/blog-list.scss
Unescape View File

@ -1,90 +1,16 @@
a:hover {
opacity: 1;
.blog__list {
&__post {
margin-bottom: 3em;
&__date {
color: $color-text-dark;
font-weight: 300;
@media (prefers-color-scheme: light) {
color: $color-text-light;
}
a:hover li div.hero_image img {
opacity: 0.8;
transition: opacity 0.3s ease;
}
a:hover li .blog__info h2,
a:hover li .blog__info h3,
a:hover li .blog__info p {
transform: translateX(10px);
transition: transform 0.5s ease-out;
}
@media (prefers-reduced-motion) {
a:hover li .blog__info h2,
a:hover li .blog__info h3,
a:hover li .blog__info p {
transform: translateX(0px);
}
}
.hero_image {
width: 100%;
height: 33vh;
overflow: hidden;
background-color: #000;
}
.hero_image img {
object-fit: cover;
object-position: 50% 50%;
opacity: 1;
transition: opacity 0.3s ease;
min-height: 100%;
}
.blog__info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 1.25rem;
transform: translateX(0px);
transition: transform 0.3s ease-in;
}
.blog__info h2,
.blog__info h3,
.blog__info p {
transform: translateX(0px);
transition: transform 0.5s ease-out;
}
li {
opacity: inherit;
display: flex;
flex-direction: column;
min-height: 38vh;
margin-bottom: 0;
}
h2 {
margin-bottom: 0.5rem;
}
h3 {
margin-bottom: 1rem;
}
p {
max-width: 900px;
}
@media (min-width: 768px) {
li {
min-height: 250px;
height: 33.333vh;
flex-direction: row;
}
.hero_image {
height: 100%;
}
.hero_image img {
min-width: 100%;
height: 100%;
width: auto;
min-height: 0;
}
.blog__info {
min-width: 70%;
}
}
@media (min-width: 1280px) {
.blog__info {
padding: 3rem;
}
h3 {
margin-bottom: 1.2rem;
a {
text-decoration: none;
}
}

1
styles/components/index.scss
Unescape View File

@ -1,3 +1,4 @@
@import "header";
@import "page";
@import "footer";
@import "blog-list";

1
styles/foundation/typography.scss
Unescape View File

@ -28,7 +28,6 @@
h1 {
@include header;
font-size: 47px;
font-weight: bold;
}
h2 {

Write Preview
Loading…
Cancel
Save