padding: 1em 1em;
}
-h2 {
- font-size: 1.3em;
- padding-left: 1.5em;
- padding-left: calc(2em / 1.3);
- color: #777;
-}
-
-.shelf {
- overflow-x: scroll;
- white-space: nowrap;
- background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
-}
-
a {
text-decoration: none;
}
-.card-container {
- width: 50%;
- max-width: 30em;
- margin: 2em 2em 3em 2em;
- display: inline-block;
+section {
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
}
-.card {
- width: 100%;
- padding-top: 70%;
- position: relative;
- height: 0;
- display: block;
+.sizer {
+ overflow: auto;
+ max-width: 30em;
+ margin: 0 auto;
+ padding: 3em;
}
-.card iframe {
- box-sizing: border-box;
- pointer-events: none;
- position: absolute;
- top: 0;
+iframe {
+ float: right;
box-shadow: 0 0 1em -0.5em rgba(0, 0, 0, 0.5);
- border-radius: 1em;
- width: 100%;
- height: 100%;
+ border-radius: 1.2em;
+ width: 2.81in;
+ height: 5.67in;
border: 0;
transition: all 0.2s;
}
-.card:hover iframe {
- box-shadow: 0 0 1em -0.25em rgba(0, 0, 0, 0.5);
-}
-
.github {
- float: right;
- padding: 0.5em 0;
color: #999;
transition: all 0.1s;
}
return result;
};
-const shelves = document.querySelectorAll('.shelf');
repos.forEach(title => {
const name = title.toLowerCase().replace(' ', '-');
const url = `https://benlarson.xyz/${name}/`;
{ href: `https://github.com/ben-larson/${name}/`, class: 'github' },
'View on GitHub ↗'
);
- const card = element('a', { href: url, class: 'card' }, iframe, githubLink);
- const cardContainer = element('div', { class: 'card-container' }, card);
- shelves[0].appendChild(cardContainer);
+ const content = element('div', { class: 'sizer' }, githubLink, iframe);
+ const section = element('section', {}, content);
+ document.body.appendChild(section);
});
projects / xyz.git / commitdiff