From fda1c3db96ff0ae97735972448c4b232ac01ff0e Mon Sep 17 00:00:00 2001 From: Ben Larson <10101828+ben-larson@users.noreply.github.com> Date: Sun, 1 Dec 2019 19:14:24 -0600 Subject: [PATCH] Fullscreen projects (#3) --- src/index.html | 6 +++--- src/main.css | 50 ++++++++++++-------------------------------------- src/main.js | 7 +++---- 3 files changed, 18 insertions(+), 45 deletions(-) diff --git a/src/index.html b/src/index.html index c36459e..e8cfd3c 100644 --- a/src/index.html +++ b/src/index.html @@ -12,9 +12,9 @@ -

Ben Larson

-

Projects

-
+
+

Ben Larson

+
diff --git a/src/main.css b/src/main.css index 469a4c7..3eb369f 100644 --- a/src/main.css +++ b/src/main.css @@ -17,58 +17,32 @@ h1 { 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; } diff --git a/src/main.js b/src/main.js index 7496520..2eb8023 100644 --- a/src/main.js +++ b/src/main.js @@ -10,7 +10,6 @@ const element = (tagName, attrs = {}, ...children) => { return result; }; -const shelves = document.querySelectorAll('.shelf'); repos.forEach(title => { const name = title.toLowerCase().replace(' ', '-'); const url = `https://benlarson.xyz/${name}/`; @@ -21,7 +20,7 @@ repos.forEach(title => { { 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); }); -- 2.45.2