.main-content
.catalog-intro
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/commitmentshirt.jpg" alt="Catalog Highlight")
.catalog-intro__info
h1 The Nerdy Catalog
h2
| Gifting season is near. Find the perfect gifts for your nerdy friends.
| Don't have friends? Buy a pillow you can cry into every night.
button.js-switch-grid Change product grid here!
.product-grid__wrapper
.product-grid
a.product-item(href="https://www.redbubble.com/people/inapt/works/35004674-hello-world?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35004674&p=classic-tee" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/helloworldpillow.jpg")
.product-item__name
h3 Hello World
h5 Throw Pillow
a.product-item(href="https://www.redbubble.com/people/inapt/works/30436607-fries-over-lies?asc=u&grid_pos=12&modal=%2Fboom%2Fb%2FavailableProducts%2F30436607&p=t-shirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid&style=racerback" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/iphonefries.jpg")
.product-item__name
h3 Fries Over Lies
h5 Phone Case
a.product-item(href="https://www.redbubble.com/people/inapt/works/35033300-50-shades-of-grey?asc=u&grid_pos=4&modal=%2Fboom%2Fb%2FavailableProducts%2F35033300&p=contrast-tank&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/50shadesshirt.jpg")
.product-item__name
h3 50 Shades
h5 Classic Tee
a.product-item(href="https://www.redbubble.com/people/inapt/works/35001641-straight-outta-code-camp?asc=u&grid_pos=18&modal=%2Fboom%2Fb%2FavailableProducts%2F35001641&p=lightweight-raglan-sweatshirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/straightouttacodecampbook.jpg")
.product-item__name
h3 Code Camp
h5 Notebook
a.product-item(href="https://www.redbubble.com/people/inapt/works/35004173-what-is-programming-ver-1?asc=u&grid_pos=14&modal=%2Fboom%2Fb%2FavailableProducts%2F35004173&p=womens-fitted-scoop&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/programmingbook.jpg")
.product-item__name
h3 What is Programming?
h5 Notebook
a.product-item(href="https://www.redbubble.com/people/inapt/works/35033300-50-shades-of-grey?asc=u&grid_pos=4&modal=%2Fboom%2Fb%2FavailableProducts%2F35033300&p=contrast-tank&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/50shadesmug.jpg")
.product-item__name
h3 50 Shades
h5 Mug
a.product-item(href="https://www.redbubble.com/people/inapt/works/35032913-is-it-a-bug-or-a-feature-cursive-font?asc=u&grid_pos=5&modal=%2Fboom%2Fb%2FavailableProducts%2F35032913&p=t-shirt&rbs=6a4dc08b-d5e1-4bf1-b0c3-886227a2e761&ref=artist_shop_grid&style=pullover" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/bugfeaturehoodie.jpg")
.product-item__name
h3 Bug or Feature?
h5 Hoodie
a.product-item(href="https://www.redbubble.com/people/inapt/works/35032799-on-wednesdays-we-wear-pink-cursive-font?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35032799&p=classic-tee" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/wednesdaystote.jpg")
.product-item__name
h3 Pink Wednesdays
h5 Tote Bag
a.product-item(href="https://www.redbubble.com/people/inapt/works/35031724-looking-for-commitment-dark-on-light-version?asc=u&grid_pos=11&modal=%2Fboom%2Fb%2FavailableProducts%2F35031724&p=triblend-tee&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/commitpilow.jpg")
.product-item__name
h3 Looking for Commitment
h5 Floor Pillow
a.product-item(href="https://www.redbubble.com/people/inapt/works/35032365-gaming-weekends?asc=u&grid_pos=8&modal=%2Fboom%2Fb%2FavailableProducts%2F35032365&p=chiffon-top&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/weekendgaminglaptopbag.jpg")
.product-item__name
h3 Gaming Weekends
h5 Laptop Bag
a.product-item(href="https://www.redbubble.com/people/inapt/works/35253776-youre-not-pizza?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35253776&p=t-shirt" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/pizzahappymug.jpg")
.product-item__name
h3 You're Not Pizza
h5 Mug
a.product-item(href="https://www.redbubble.com/people/inapt/works/35253776-youre-not-pizza?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35253776&p=t-shirt" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/pizzashirt.jpg")
.product-item__name
h3 You're Not Pizza
h5 Classic Tee
a.product-item(href="https://www.redbubble.com/people/inapt/works/30437121-pizza-over-drama-white-on-dark?asc=u&grid_pos=22&modal=%2Fboom%2Fb%2FavailableProducts%2F30437121&p=t-shirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid&style=vneck" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/pizzashirt2.jpg")
.product-item__name
h3 Pizza Over Drama
h5 Tank Top
a.product-item(href="https://www.redbubble.com/people/inapt/works/35001641-straight-outta-code-camp?asc=u&grid_pos=18&modal=%2Fboom%2Fb%2FavailableProducts%2F35001641&p=lightweight-raglan-sweatshirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/straightouttacodecampmug.jpg")
.product-item__name
h3 Code Camp
h5 Mug
a.product-item(href="https://www.redbubble.com/people/inapt/works/35032641-work-life-balance?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35032641&p=classic-tee" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/worklifebalanceclock.jpg")
.product-item__name
h3 Work-Life Balance
h5 Clock
a.product-item(href="https://www.redbubble.com/people/inapt/works/30436762-fries-over-lies-white?asc=u&grid_pos=24&modal=%2Fboom%2Fb%2FavailableProducts%2F30436762&p=womens-fitted-v-neck&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/friesshirt.jpg")
.product-item__name
h3 Fries Over Lies
h5 V-Neck Tee
a.product-item(href="https://www.redbubble.com/people/inapt/works/30436905-pizza-over-drama?asc=u&grid_pos=23&modal=%2Fboom%2Fb%2FavailableProducts%2F30436905&p=a-line-dress&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/floorpillowpizza.jpg")
.product-item__name
h3 Pizza Over Drama
h5 Floor Pillow
a.product-item(href="https://www.redbubble.com/people/inapt/works/14029669-cats-over-brats-version-2?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F14029669&p=classic-tee" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/catsoverbrats.jpg")
.product-item__name
h3 Cats Over Brats
h5 Long Sleeve Tee
a.product-item(href="https://www.redbubble.com/people/inapt/works/35031724-looking-for-commitment-dark-on-light-version?asc=u&grid_pos=11&modal=%2Fboom%2Fb%2FavailableProducts%2F35031724&p=triblend-tee&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/commitipad.jpg")
.product-item__name
h3 Looking for Commitment
h5 Tablet Case
a.product-item(href="https://www.redbubble.com/people/inapt/works/35031921-looking-for-commitment-dark-on-light-version?asc=u&grid_pos=10&modal=%2Fboom%2Fb%2FavailableProducts%2F35031921&p=t-shirt&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid&style=womens" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/commitmentshirt.jpg")
.product-item__name
h3 Looking for Commitment
h5 Fitted Tee
a.product-item(href="https://www.redbubble.com/people/inapt/works/35032799-on-wednesdays-we-wear-pink-cursive-font?asc=u&modal=%2Fboom%2Fb%2FavailableProducts%2F35032799&p=classic-tee" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/wednesdayspouch.jpg")
.product-item__name
h3 Pink Wednesdays
h5 Pouch
a.product-item(href="https://www.redbubble.com/people/inapt/works/35004000-what-is-programming-ver-3?asc=u&grid_pos=15&modal=%2Fboom%2Fb%2FavailableProducts%2F35004000&p=lightweight-hoodie&rbs=a3f0e7c1-91c2-471e-87c0-588ec6731123&ref=artist_shop_grid" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/programmingmug.jpg")
.product-item__name
h3 What is Programming?
h5 Mug
a.product-item(href="https://www.redbubble.com/people/inapt/works/35032913-is-it-a-bug-or-a-feature-cursive-font?asc=u&grid_pos=5&modal=%2Fboom%2Fb%2FavailableProducts%2F35032913&p=t-shirt&rbs=6a4dc08b-d5e1-4bf1-b0c3-886227a2e761&ref=artist_shop_grid&style=pullover" target="_blank")
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/product/bugfeaturebook.jpg")
.product-item__name
h3 Bug or Feature?
h5 Notebook
.button-row
button.js-switch-grid Change product grid here!
aside.context
.explanation
| Click on the button to see how awesome
code grid-auto-flow: dense
| is.
br
| Part of the
a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid Experiments
| collection.
footer
a(href="https://twitter.com/meowlivia_" target="_blank")
i.icon-social-twitter.icons
a(href="https://github.com/oliviale" target="_blank")
i.icon-social-github.icons
a(href="https://dribbble.com/oliviale" target="_blank")
i.icon-social-dribbble.icons
body {
background: #fff;
font-family: 'Poppins', sans-serif;
}
aside.context {
text-align: center;
color: #333;
line-height: 1.7;
a {
text-decoration: none;
color: #333;
padding: 3px 0;
border-bottom: 1px dashed;
}
.explanation {
max-width: 700px;
margin: 6em auto 0;
}
}
footer {
text-align: center;
margin: 4em auto;
width: 100%;
a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
border: 1px dashed #333;
color: #333;
margin: 5px;
&:hover {
background: rgba(0,0,0,0.05);
}
.icons {
margin-top: 12px;
display: inline-block;
font-size: 20px;
}
}
}
.main-content {
position: relative;
&:before {
content: '';
width: 100%;
height: 12%;
position: absolute;
background: linear-gradient(to bottom, #f4f4f4, #fff);
z-index: -1;
}
}
button {
background: #000;
color: #fff;
position: relative;
margin: 2em;
border: 2px solid #000;
border-radius: 50px;
padding: 10px 25px;
font: 700 18px 'Poppins', sans-serif;
outline: none;
cursor: pointer;
transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
&:before {
content: '';
border-radius: inherit;
background: rgba(0,0,0,0.2);
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0;
transform-origin: center;
}
&:hover:before {
animation: grow .5s linear;
}
&:active {
top: 2px;
}
}
.catalog-intro {
position: relative;
overflow: hidden;
background: #f8f8f8;
h1 {
font: italic 900 60px/1 'Playfair Display', serif;
}
h2 {
font: 22px/1.3 'Poppins', sans-serif;
margin-top: 2em;
max-width: 500px;
color: #999;
margin-left: 2em;
}
&__info {
padding: 10em 4em 6em;
position: relative;
}
img {
position: absolute;
height: 110%;
top: -3em;
right: -10em;
z-index: 0;
}
}
@keyframes grow {
0% {opacity: 0;}
50% { opacity: .5; }
100% { opacity: 0; height: 155%; transform: scale(1.15);}
}
code {
border: .5px solid #ddd;
font-family: monospace;
display: inline-block;
margin: 0 2px;
vertical-align: middle;
padding: 0px 6px;
border-radius: 3px;
background: #f8f8f8;
color: purple;
}
.product-grid__wrapper {
position: relative;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
grid-template-rows: repeat(auto-fill, minmax(180px,1fr));
grid-auto-flow: dense;
grid-gap: 20px;
padding: 0 20px;
}
.product-item {
position: relative;
overflow: hidden;
cursor: pointer;
padding-bottom: 100px;
transition: .2s ease;
color: #000;
img {
height: 100%;
width: 100%;
object-fit: cover;
}
&__name {
position: absolute;
top: 100%;
margin-top: -100px;
width: 100%;
padding: 15px 0;
text-align: center;
background: #fff;
h3 {
font: 900 24px/1.1 'Playfair Display', sans-serif;
margin: 0;
}
h5 {
font: 300 14px/1.2 'Poppins', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
color: #999;
margin: 10px 0 0;
}
}
}
.button-row {
position: sticky;
bottom: -50px;
grid-column: 100%;
grid-row: 100%;
opacity: 0;
transition: .3s ease;
background: #fff;
padding: 15px;
text-align: center;
box-shadow: 0 -3px 8px rgba(0,0,0,0.05);
&.sticky {
opacity: 1;
bottom: 0;
}
button {
margin: 0;
font-size: 14px;
padding: 8px 15px;
}
}
@media screen and (min-width:1024px) {
.catalog-intro__info {
margin-left: 10%;
}
}
@media screen and (max-width:768px) {
.catalog-intro {
text-align: center;
h2 {
margin: 1em auto 0;
}
img, button {
display: none;
}
}
.button-row {
display: none;
}
}$(document).ready(function() {
switchGrid();
});
$(window).resize(function() {
if ($(window).width() < 768) {
$(".product-item").removeAttr("style");
}
});
$(".js-switch-grid").on("click", function() {
switchGrid();
});
function switchGrid() {
if ($(window).width() > 768) {
$(".product-item").each(function() {
var size = 1 + Math.floor(Math.random() * 3);
$(this).css({
"grid-column": "span " + size,
"grid-row": "span " + size
});
});
}
}
$(function() {
//caches a jQuery object containing the header element
var buttonRow = $(".button-row");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
buttonRow.addClass("sticky");
} else {
buttonRow.removeClass("sticky");
}
});
});