diff --git a/src/listing-item/index.html b/src/listing-item/index.html new file mode 100644 index 0000000..e4e3f60 --- /dev/null +++ b/src/listing-item/index.html @@ -0,0 +1,112 @@ + + + + + + +
+
+
+ +
+
+

Item title

+
    +
  • Date
    • +
  • Reading time
    • +
+

+ 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. +

+
    +
  • #tag-1
    • +
  • #tag-2
    • +
+
+
+
+
+ +
+
+

Item title

+
    +
  • Date
    • +
  • Reading time
    • +
+

+ 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. +

+
    +
  • #tag-1
    • +
  • #tag-2
    • +
+
+
+
+
+

Item title

+
    +
  • Date
    • +
  • Reading time
    • +
+

+ 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. +

+
    +
  • #tag-1
    • +
  • #tag-2
    • +
+
+
+
+ + diff --git a/src/listing-item/index.scss b/src/listing-item/index.scss new file mode 100644 index 0000000..dadf3e8 --- /dev/null +++ b/src/listing-item/index.scss @@ -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; + } + } +}