diff options
| -rw-r--r-- | index.html | 204 |
1 files changed, 123 insertions, 81 deletions
@@ -1,93 +1,135 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8"> - <title>fib</title> - <style> - .person { - margin-bottom: 1em; - } - .person-pic { - width: 50px; - } - .person-header { - display: flex; - align-items: end; - } - .person-header > * { - margin: 0.5em; - } - .person-name { - margin-bottom: 0; - } - .person-title { - margin-top: 0; - font-size: 80%; - } - .person > p { - margin: 0; - margin-left: 0.5em; - } - #contributors-container { - margin-top: 3em; - margin-bottom: 3em; - } - </style> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> + <meta charset="UTF-8"> + <title>fib</title> + <style> + .person { + margin-bottom: 1em; + } + + .person-pic { + width: 50px; + } + + .person-header { + display: flex; + align-items: end; + } + + .person-header > * { + margin: 0.5em; + } + + .person-name { + margin-bottom: 0; + } + + .person-title { + margin-top: 0; + font-size: 80%; + } + + .person > p { + margin: 0; + margin-left: 0.5em; + } + + #contributors-container { + margin-bottom: 3em; + } + + details img { + max-width: 600px; + } + + @media only screen and (min-width: 600px) { + details img { + max-width: 70%; + } + } + + + </style> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> - <h1><code>fib</code></h1> - <p>Can you please give me a Fibonacci function? Ideally (but not necessarily) one that only you would give me.</p> +<h1><code>fib</code></h1> +<p>Can you please give me a Fibonacci function? Ideally (but not necessarily) one that only you would give me.</p> + +<p>For a submission to the "Our Space" exhibition at <a href="https://www.instagram.com/hatch_artgallery">Hatch Art + Gallery</a>.</p> - <p>For a submission to the "Our Space" exhibition at <a href="https://www.instagram.com/hatch_artgallery">Hatch Art Gallery</a>.</p> +<details> + <summary>contributing</summary> + <p> + want to contribute? <a href="https://github.com/braxtonhall/fib#contributing">click here</a> and make a pr to the fib repo + <br> + so far we haven't rejected anything + </p> +</details> - <div id="contributors-container"> - <h3>Contributors</h3> - <div id="contributors"></div> - </div> +<details> + <summary>photo gallery</summary> + <img src="./img/hatch-1.jpeg" alt="at hatch gallery"> + <img src="./img/hatch-2.jpg" alt="also at hatch gallery"> + <img src="./img/hatch-3.jpg" alt="still at hatch gallery"> +</details> - <a href="https://github.com/braxtonhall/fib#contributing"><span>Want to contribute?</span></a> +<details> + <summary>web rings</summary> + <p>This site is a member of <a href="https://bobs-club.net/">bob's club!</a> check out a friend's website too<br> + <a href="https://bobs-club.net/site/fib/pred">previous site</a> -- + <a href="https://bobs-club.net/site/fib/random">random site</a> -- + <a href="https://bobs-club.net/site/fib/succ">next site</a> + </p> +</details> +<br> +<div id="contributors-container"> + contributors + <div id="contributors"></div> +</div> <script> - const getContributors = _ => fetch(`/people.json`).then(res => res.json()); - - const toPersonNode = person => $("<div>", {class: "person"}).append( - toPersonHeader(person), - ...person.entries.sort(cmpName).map(toPersonEntryNode), - ); - - const toPersonImage = github => github - ? $("<img>", {class: "person-pic", src: `https://github.com/${github}.png`, alt: github}) - : $("<div>", {class: "person-pic"}); - - - const toPersonDetails = person => - $("<div>").append( - person.github - ? $("<a>", {href: `https://github.com/${person.github}`}) - .append($("<p>", {class: "person-name"}).text(person.name)) - : $("<p>", {class: "person-name"}).text(person.name), - $("<p>", {class: "person-title"}).text(person.title), - ); - - const toPersonHeader = person => $("<div>", {class: "person-header"}) - .append(toPersonImage(person.github), toPersonDetails(person)); - - const toPersonEntryNode = entry => $("<p>").append( - $("<a>", { - href: entry.link.startsWith("./entries") - ? `https://github.com/braxtonhall/fib/tree/main/${entry.link.replace(/^\.\//, "")}` - : entry.link - }).append($("<code>").text(entry.name)), - ); - - const cmpName = (a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; - - $(document).ready( - _ => getContributors() - .then(people => people.sort(cmpName)) - .then(people => people.map(toPersonNode)) - .then(nodes => $("#contributors").append(...nodes)) - ); + const getContributors = _ => fetch(`/people.json`).then(res => res.json()); + + const toPersonNode = person => $("<div>", {class: "person"}).append( + toPersonHeader(person), + ...person.entries.sort(cmpName).map(toPersonEntryNode), + ); + + const toPersonImage = github => github + ? $("<img>", {class: "person-pic", src: `https://github.com/${github}.png`, alt: github}) + : $("<div>", {class: "person-pic"}); + + + const toPersonDetails = person => + $("<div>").append( + person.github + ? $("<a>", {href: `https://github.com/${person.github}`}) + .append($("<p>", {class: "person-name"}).text(person.name)) + : $("<p>", {class: "person-name"}).text(person.name), + $("<p>", {class: "person-title"}).text(person.title), + ); + + const toPersonHeader = person => $("<div>", {class: "person-header"}) + .append(toPersonImage(person.github), toPersonDetails(person)); + + const toPersonEntryNode = entry => $("<p>").append( + $("<a>", { + href: entry.link.startsWith("./entries") + ? `https://github.com/braxtonhall/fib/tree/main/${entry.link.replace(/^\.\//, "")}` + : entry.link + }).append($("<code>").text(entry.name)), + ); + + const cmpName = (a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; + + $(document).ready( + _ => getContributors() + .then(people => people.sort(cmpName)) + .then(people => people.map(toPersonNode)) + .then(nodes => $("#contributors").append(...nodes)) + ); </script> </body> </html> |