--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Ben Larson</title>
+ <style>
+ @import url('./main.css');
+
+ @font-face {
+ font-family: lingua-franca-bold;
+ src: url('https://benlarson.xyz/fonts/lingua-franca/bold.otf');
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Ben Larson</h1>
+ <h2>Projects</h2>
+ <div class="shelf"></div>
+ </body>
+ <script src="main.js"></script>
+</html>
--- /dev/null
+* {
+ font: inherit;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: lingua-franca-bold;
+ font-weight: bold;
+ font-size: 1.5em;
+ background: #ddd;
+ color: #333;
+}
+
+h1 {
+ font-size: 2em;
+ 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 {
+ width: 50%;
+ padding-top: 40%;
+ position: relative;
+ height: 0;
+ margin: 2em 2em 3em 2em;
+ display: inline-block;
+}
+
+.card iframe {
+ box-sizing: border-box;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ box-shadow: 0 0 1em -0.5em rgba(0, 0, 0, 0.5);
+ border-radius: 1em;
+ width: 100%;
+ height: 100%;
+ 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;
+}
+
+.github:hover {
+ color: #555;
+}
--- /dev/null
+const repos = ['Event Creator', 'JS Playground'];
+
+const element = (tagName, attrs = {}, ...children) => {
+ const result = document.createElement(tagName);
+ Object.keys(attrs).forEach(key => result.setAttribute(key, attrs[key]));
+ children.forEach(child => {
+ if (typeof child === 'object') result.appendChild(child);
+ else result.innerHTML += child;
+ });
+ return result;
+};
+
+const shelves = document.querySelectorAll('.shelf');
+repos.forEach(title => {
+ const name = title.toLowerCase().replace(' ', '-');
+ const url = `https://benlarson.xyz/${name}/`;
+
+ const iframe = element('iframe', { src: url });
+ const githubLink = element(
+ 'a',
+ { href: `https://github.com/ben-larson/${name}/`, class: 'github' },
+ 'View on GitHub ↗'
+ );
+ const card = element('a', { href: url, class: 'card' }, iframe, githubLink);
+ shelves[0].appendChild(card);
+});
projects / xyz.git / commitdiff