lab/website-components
1
Fork 0
Code Activity

Add listing item

Browse source
This commit is contained in:
Jake Howard 2024-07-19 17:03:52 +01:00
parent 69e5b93d2e
commit b635908eb4
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 215 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
src/listing-item/index.html Normal file
View file

@ -0,0 +1,112 @@
<html>
<head>
<link rel="stylesheet" href="./index.scss" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="listing-wrapper">
<div class="listing-item">
<div class="listing-left">
<img src="https://placehold.co/600x600" />
</div>
<div class="listing-right">
<h2>Item title</h2>
<ul class="item-details">
<li>Date</li>
<li>Reading time</li>
</ul>
<p class="listing-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Consectetur a erat nam at lectus. Diam quis enim lobortis
scelerisque fermentum dui faucibus. Sed adipiscing diam donec
adipiscing tristique risus nec feugiat in. Potenti nullam ac tortor
vitae purus faucibus ornare. Auctor neque vitae tempus quam. In
pellentesque massa placerat duis ultricies lacus sed turpis
tincidunt. Odio ut enim blandit volutpat. Non nisi est sit amet
facilisis magna etiam. Euismod in pellentesque massa placerat duis
ultricies. Neque ornare aenean euismod elementum nisi. Euismod nisi
porta lorem mollis aliquam ut porttitor leo. Tellus rutrum tellus
pellentesque eu tincidunt. Sem nulla pharetra diam sit. Nisi lacus
sed viverra tellus in hac. Sit amet nisl suscipit adipiscing
bibendum est ultricies. Felis donec et odio pellentesque diam
volutpat. Aliquam sem et tortor consequat id porta nibh. Rhoncus
dolor purus non enim praesent elementum facilisis leo. Cursus vitae
congue mauris rhoncus.
</p>
<ul class="item-tags">
<li>#tag-1</li>
<li>#tag-2</li>
</ul>
</div>
</div>
<div class="listing-item">
<div class="listing-left slim">
<img src="https://placehold.co/600x600" />
</div>
<div class="listing-right">
<h2>Item title</h2>
<ul class="item-details">
<li>Date</li>
<li>Reading time</li>
</ul>
<p class="listing-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Consectetur a erat nam at lectus. Diam quis enim lobortis
scelerisque fermentum dui faucibus. Sed adipiscing diam donec
adipiscing tristique risus nec feugiat in. Potenti nullam ac tortor
vitae purus faucibus ornare. Auctor neque vitae tempus quam. In
pellentesque massa placerat duis ultricies lacus sed turpis
tincidunt. Odio ut enim blandit volutpat. Non nisi est sit amet
facilisis magna etiam. Euismod in pellentesque massa placerat duis
ultricies. Neque ornare aenean euismod elementum nisi. Euismod nisi
porta lorem mollis aliquam ut porttitor leo. Tellus rutrum tellus
pellentesque eu tincidunt. Sem nulla pharetra diam sit. Nisi lacus
sed viverra tellus in hac. Sit amet nisl suscipit adipiscing
bibendum est ultricies. Felis donec et odio pellentesque diam
volutpat. Aliquam sem et tortor consequat id porta nibh. Rhoncus
dolor purus non enim praesent elementum facilisis leo. Cursus vitae
congue mauris rhoncus.
</p>
<ul class="item-tags">
<li>#tag-1</li>
<li>#tag-2</li>
</ul>
</div>
</div>
<div class="listing-item">
<div class="listing-right">
<h2>Item title</h2>
<ul class="item-details">
<li>Date</li>
<li>Reading time</li>
</ul>
<p class="listing-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Consectetur a erat nam at lectus. Diam quis enim lobortis
scelerisque fermentum dui faucibus. Sed adipiscing diam donec
adipiscing tristique risus nec feugiat in. Potenti nullam ac tortor
vitae purus faucibus ornare. Auctor neque vitae tempus quam. In
pellentesque massa placerat duis ultricies lacus sed turpis
tincidunt. Odio ut enim blandit volutpat. Non nisi est sit amet
facilisis magna etiam. Euismod in pellentesque massa placerat duis
ultricies. Neque ornare aenean euismod elementum nisi. Euismod nisi
porta lorem mollis aliquam ut porttitor leo. Tellus rutrum tellus
pellentesque eu tincidunt. Sem nulla pharetra diam sit. Nisi lacus
sed viverra tellus in hac. Sit amet nisl suscipit adipiscing
bibendum est ultricies. Felis donec et odio pellentesque diam
volutpat. Aliquam sem et tortor consequat id porta nibh. Rhoncus
dolor purus non enim praesent elementum facilisis leo. Cursus vitae
congue mauris rhoncus.
</p>
<ul class="item-tags">
<li>#tag-1</li>
<li>#tag-2</li>
</ul>
</div>
</div>
</div>
</body>
</html>

103
src/listing-item/index.scss Normal file
View file

@ -0,0 +1,103 @@
@import "normalize.css";
$listing-content-line-height: 1.15em;
.listing-wrapper {
max-width: 75%;
margin: 1rem auto;
padding: 0 1rem;
}
.listing-item {
display: flex;
height: 175px;
& + & {
margin-top: 2rem;
}
}
.listing-left {
width: 25%;
max-width: 300px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&.slim {
width: 12.5%;
max-width: 150px;
}
}
.listing-right {
padding: 0.5rem 1rem;
flex-grow: 1;
display: flex;
flex-direction: column;
width: 75%;
h2 {
margin: 0;
padding: 0;
}
.item-details,
.item-tags {
margin: 0.25rem 0;
list-style: none;
padding: 0;
li {
display: inline;
& + li {
margin-left: 1rem;
}
}
}
.item-tags {
margin-top: auto;
}
.listing-content {
margin: auto 0;
line-height: $listing-content-line-height;
max-height: calc($listing-content-line-height * 4);
overflow: hidden;
}
}
@media (max-width: 700px) {
.listing-item {
flex-direction: column;
height: fit-content;
.listing-left {
width: 100%;
height: 200px;
max-width: unset;
&.slim {
height: 100px;
}
}
.listing-right {
padding: 0.5rem 0rem;
width: 100%;
}
.listing-content {
max-height: calc($listing-content-line-height * 8);
}
.item-tags {
margin-top: 0.25rem;
}
}
}