From 54d1ac8ef5760934142b0aad92bf9fa9012a06e6 Mon Sep 17 00:00:00 2001 From: Jim Shepich III <73664586+epicshepich@users.noreply.github.com> Date: Tue, 8 Feb 2022 04:43:31 -0500 Subject: [PATCH] Changed rem sizing, added gallery/exhibit list type, added list of favorite MTG cards --- data/lists.json | 204 +++++++++++++++++++++++++++++++++++++++++++++- scripts/lists.js | 75 +++++++++++++---- styles/common.css | 1 + styles/layout.css | 38 +++++---- styles/lists.css | 30 +++++-- styles/theme.css | 32 ++++---- 6 files changed, 322 insertions(+), 58 deletions(-) diff --git a/data/lists.json b/data/lists.json index 22bbf2c..7a07c4e 100644 --- a/data/lists.json +++ b/data/lists.json @@ -244,7 +244,8 @@ ] }, "albums":{ - "type":"albums", + "type":"gallery", + "subtype":"album", "title":"My Favorite Albums", "description":"Albums I listen to in the car, albums I listen to when I'm going to sleep, albums I listen to while I work, and more. Since, I was a kid, I've had an unhealthy relationship with collecting things (bordering on hoarding), so I won't allow myself to get into collecting vinyls, but think of this as my digital \"vinyl\" collection. I've noticed that an unusally large fraction of these albums were released in 1977 and/or have covers that depict spaceships.", "list":[ @@ -436,7 +437,7 @@ "sections":[ { "title":"Breakfast", - "list":[{"Cereal":["Reese's Puffs","Honeycombs","Frosted Mini Wheats","Eggo Cereal","Froot Loops","Frosted Flakes"]}, "Crepes", "Pancakes","Bacon","Hash browns","Smokey links","French fries"] + "list":[{"Cereal":["Reese's Puffs","Honeycombs","Frosted Mini Wheats","Eggo Cereal","Froot Loops","Frosted Flakes"]}, "Crepes", "Pancakes","Bacon","Hash browns","Smokey links","French toast","French fries"] }, { "title":"Snacks", @@ -459,6 +460,205 @@ "list":[{"Blueberry":"Good blueberries can be really good, but bad blueberries can be really sour and nasty, and the worst thing is that since they're so small, it's always a mixed bag when you buy them. I've noticed that blueberries, like apples, tend to follow a bigger is better rule."},{"Raspberry":"Like blueberries, raspberries are a mixed bag. On average, I'd say the taste of plain raspberries is C-tier, but raspberry jelly is really good, so here they are."},{"Apricot":"They have a good flavor, but like peaches and pears, apricots have a small window where they are squishy but not overripe."}] } ] + }, + { + "title":"Sandwiches", + "list":[{"Peanut butter and...":["Jelly","Banana","M&M","Chocolate chip","Nutella"]},"Ham and Cheese","Hamburger"] + } + ] + }, + "mtg":{ + "title":"My Favorite Magic: the Gathering Cards", + "type":"gallery", + "subtype":"mtg-card", + "description":"", + "sections":[ + { + "title":"Best of the Best", + "list":[ + { + "name":"Battle of Wits", + "multiverseid":"83133" + }, + { + "name":"Enter the Infinite", + "multiverseid":"366411" + }, + { + "name":"Intrepid Hero", + "multiverseid":"280320" + }, + { + "name":"Ral Zarek", + "multiverseid":"470744" + }, + { + "name":"Tamiyo, the Moon Sage", + "multiverseid":"240070" + }, + { + "name":"Zuran Spellcaster", + "multiverseid":"184683" + }, + { + "name":"Sublime Epiphany", + "multiverseid":"485397" + } + ] + }, + { + "title":"Best Art/Aesthetics", + "list":[ + { + "name":"Divination", + "multiverseid":"447187" + }, + { + "name":"Serra Angel", + "multiverseid":"370602" + }, + { + "name":"Captain of the Watch", + "multiverseid":"394354" + }, + { + "name":"Sunblade Elf", + "multiverseid":"383406" + }, + { + "name":"Angelic Destiny", + "multiverseid":"220230" + }, + { + "name":"Island", + "multiverseid":"289315" + }, + { + "name":"Island", + "multiverseid":"473219" + }, + { + "name":"Aether Storm", + "multiverseid":"184722" + }, + { + "name":"Leviathan", + "multiverseid":"26619" + }, + { + "name":"Time of Ice", + "multiverseid":"442958" + }, + { + "name":"Auramancer", + "multiverseid":"441995" + } + ] + }, + { + "title":"Best Mechanics", + "list":[ + { + "name":"Cheatyface", + "multiverseid":"479416" + }, + { + "name":"Underworld Connections", + "multiverseid":"545758" + }, + { + "name":"Isochron Scepter", + "multiverseid":"292752" + }, + { + "name":"Triton Fortune Hunter", + "multiverseid":"373531" + }, + { + "name":"Cramped Bunker", + "multiverseid":"439518" + }, + { + "name":"Skywise Teachings", + "multiverseid":"438639" + }, + { + "name":"Serpent Generator", + "multiverseid":"159826" + }, + { + "name":"Judge's Familiar", + "multiverseid":"460143" + }, + { + "name":"Elite Arcanist", + "multiverseid":"370747" + }, + { + "name":"Crackling Perimeter", + "multiverseid":"366255" + }, + { + "name":"Aetherflux Reservoir", + "multiverseid":"417765" + } + ] + }, + { + "title":"Best Flavor", + "list":[ + { + "name":"Ornithopter of Paradise", + "multiverseid":"522308" + }, + { + "name":"Mirror Gallery", + "multiverseid":"74555" + }, + { + "name":"Darksteel Plate", + "multiverseid":"213749" + }, + { + "name":"Oviya Pashiri, Sage Lifecrafter", + "multiverseid":"417738" + } + ] + }, + { + "title":"Best Fake Cards", + "list":[ + { + "name":"Slidshocking Krow", + "image":"https://i.imgur.com/57fkA9S.jpg", + "link":"https://www.reddit.com/r/MTGLardFetcher/comments/6la7e4/roborosewater_slidshocking_krow/" + }, + { + "name":"Eight Fucking Bears", + "image":"https://i.imgur.com/QT4H77w.jpg", + "link":"https://www.reddit.com/r/magicTCG/comments/3x2qwu/eight_fucking_bears/" + }, + { + "name":"Soulbond Giant", + "image":"http://cdn.themis-media.com/media/global/images/library/deriv/940/940220.jpg", + "link":"https://www.escapistmagazine.com/the-most-interesting-magic-the-gathering-cards-made-by-artificial-intelligence/" + }, + { + "name":"Black Lotus But Bri'ish", + "image":"https://i.redd.it/zv7jw7bur6871.png", + "link":"https://www.reddit.com/r/magicthecirclejerking/comments/oa5yc8/black_lotus_but_briish/" + }, + { + "name":"Countercounterspell", + "image":"https://i.imgur.com/wjm2Haw.png", + "link":"https://www.reddit.com/r/MTGLardFetcher/comments/ghi157/countercounterspell/" + }, + { + "name":"Stroke", + "image":"https://i.redd.it/onnf1xqgk7d51.png", + "link":"https://www.reddit.com/r/MTGLardFetcher/comments/hy8vk7/stroke/" + } + ] } ] } diff --git a/scripts/lists.js b/scripts/lists.js index 26c24e8..47319d4 100644 --- a/scripts/lists.js +++ b/scripts/lists.js @@ -19,6 +19,10 @@ function gen_list_html(list){ list.type = "default"; } + if(!list.hasOwnProperty("subtype")){ + list.subtype = "default"; + } + var list_type = list.type; if(list.hasOwnProperty("sections")){ @@ -49,11 +53,15 @@ function gen_list_html(list){ //Create an ordered list if list has the property "ordered". break; - case "albums": + + case "gallery": document.getElementById("lists").style.textAlign="center"; - //Center the rows of album covers on the page. - for(album of list.list){ - html += gen_item_html(album,type="album"); + //Center the rows of exhibits on the page. + if(!list.hasOwnProperty("subtype")){ + list.subtype="default"; + } + for(exhibit of list.list){ + html += gen_item_html(exhibit,type="exhibit",subtype=list.subtype); } break; @@ -72,8 +80,8 @@ function gen_list_html(list){ //Section-level defines the heading level of the section. Top level is 1. } if(!list.hasOwnProperty("dropdown")){ - list.dropdown = false; - //By default, sections are not in details/summary tags. + list.dropdown = true; + //By default, sections ARE in details/summary tags. } for(section of list.sections){ var section_html = ""; @@ -84,6 +92,10 @@ function gen_list_html(list){ section.type = list.type; //This branch transfers the list type down from higher levels. By default, the bottom-level lists will inherit the type of the top-level object unless otherwise specified. } + if(!section.hasOwnProperty("subtype")){ + section.subtype = list.subtype; + //Sections should also inherit subtypes. + } if(!section.hasOwnProperty("dropdown")){ section.dropdown = list.dropdown; //Inherit dropdown-ness unless otherwise specified. @@ -101,7 +113,8 @@ function gen_list_html(list){ section_html = `${title}${description}${gen_list_html(section)}`; } //Sectioned - html += `
${section_html}
`; + html += `
${section_html}
`; + //Assigning ids allows for the possibility of fragment linking. } break; @@ -118,7 +131,7 @@ function gen_list_html(list){ } -function gen_item_html(item,type="default"){ +function gen_item_html(item,type="default",subtype=null){ var item_html = ""; switch(type){ case "list-id": @@ -202,16 +215,44 @@ function gen_item_html(item,type="default"){ item_html = `
  • ${item_html}
    • `; break; - case "album": - var tooltip = `${item.title} — ${item.artist} (${item.year})`; - //Display album data when hovering over cover art. - item_html = `${tooltip}`; - //Display the album cover. Can be an external link or internal path. - if(item.hasOwnProperty("link")){ - item_html = `${item_html}`; - //If there's a link to the album, put it on the cover. + + case "exhibit": + var tooltip, alt, text, img_src; + tooltip = text = img_src = ""; + switch(subtype){ + case "album": + tooltip = `${item.title} (${item.year}) - ${item.artist}`; + alt = tooltip; + img_src = item.cover; + text = `${item.title}
    ${item.artist}
    ${item.year}`; + break; + case "mtg-card": + if(item.hasOwnProperty("multiverseid")&&!item.hasOwnProperty("link")){ + item.link = `https://gatherer.wizards.com/pages/card/Details.aspx?multiverseid=${item.multiverseid}`; + //If there's no alternate link specified, then use the multiverseid to generate the Gatherer link. + } + if(item.hasOwnProperty("multiverseid")&&!item.hasOwnProperty("image")){ + img_src = `https://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=${item.multiverseid}&type=card`; + //If there's no alternate link specified, then use the multiverseid to generate the Gatherer link for the image. + } else { + img_src = item.image; + } + if(item.hasOwnProperty("name")){ + alt = tooltip = item.name; + } + break; + default: } - item_html = `
    ${item_html}
    ${item.title}
    ${item.artist}
    ${item.year}
    `; + var image = `${tooltip}`; + //Gallery items must have an image. + if(item.hasOwnProperty("link")){ + image = `${image}`; + //If there's a link associated with the exhibit, put it on the image. + } + item_html = (text=="") ? image : `${image}
    ${text}`; + //If there's no text, then there's no need for a line break. + item_html = `
    ${item_html}
    ` + break; case "sublist": diff --git a/styles/common.css b/styles/common.css index 95c6480..9102cae 100644 --- a/styles/common.css +++ b/styles/common.css @@ -9,6 +9,7 @@ --navy-blue:#091b75; --azure:#5a6cc3; --charcoal:#333333; + font-size:120%; } diff --git a/styles/layout.css b/styles/layout.css index bca0623..e9e1351 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -12,7 +12,7 @@ html { body { position: relative; margin: 0; - padding-bottom: 5rem; + padding-bottom: 4rem; min-height: 100%; } @@ -22,28 +22,28 @@ footer { right: 0; bottom: 0; left: 0; - padding: 1.5rem; + padding: 1.25rem; text-align: center; } header{ text-align:center; - padding: 1.5rem; + padding: 1.25rem; margin-bottom:/*1%*/0; } nav{ text-align:center; - padding:0.2rem; + padding:0.15rem; } .nav-tab{ margin:0.1rem; - padding-top: 0.4rem; - padding-bottom: 0.4rem; - padding-left: 1rem; - padding-right: 1rem; + padding-top: 0.3rem; + padding-bottom: 0.3rem; + padding-left: 0.8rem; + padding-right: 0.8rem; display:inline-block; text-align:center; @@ -55,10 +55,11 @@ main{ min-height: 60vh; width:100%; display:inline-block; - padding-left:4%; - padding-right:4%; - padding-top:2rem; - padding-bottom:2rem; + padding-left:4vw; + padding-right:4vw; + padding-top:min(1.5rem,4vw); + padding-bottom:min(1.5rem,4vw); + margin-bottom:min(1.5rem,4vw); } @@ -76,7 +77,8 @@ p{ } .social{ - margin:0.4rem; + margin:0.25em; + font-size:1.25rem; } details{ @@ -85,8 +87,10 @@ details{ } summary{ - padding:0.8rem; - margin-bottom:0.25rem; + padding:0.8em; + margin-bottom:0.25em; + text-align:left; + padding-left:1em; } summary h2, summary h3, summary h4, summary h5, summary h6 { @@ -104,3 +108,7 @@ details.heading{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } + +details[open]{ + margin-bottom:1em; +} diff --git a/styles/lists.css b/styles/lists.css index 15dc66c..6cb2f45 100644 --- a/styles/lists.css +++ b/styles/lists.css @@ -3,21 +3,35 @@ } -.list-album{ +div.gallery{ display:inline-block; /*Album divs are blocks of a set size that are displayed side by side until they overflow onto the next line*/ - margin:0.5em; - /*Put some space between the albums*/ text-align:center; - padding:0; - width:10em; - /*Set the width of the div equal to the width of the album cover so that long album titles or artist names overflow onto the next line.*/ vertical-align:top; /*In case of aforementioned overflow, ensure the tops of all album covers in each given row are aligned.*/ } -.list-album-cover{ +img.gallery{ +} + + + +div.exhibit-album{ + width:10em; + /*Set the width of the div equal to the width of the album cover so that long album titles or artist names overflow onto the next line.*/ + margin:0.75em; + /*Put some space between the albums*/ +} + +img.exhibit-album{ width:10em; height:10em; - margin:0; +} + + + +.exhibit-mtg-card{ + margin:0; + width:12.5em; + height:17.5em; } diff --git a/styles/theme.css b/styles/theme.css index bec3af1..020e2be 100644 --- a/styles/theme.css +++ b/styles/theme.css @@ -10,7 +10,7 @@ header{ background: var(--shading); background-color: var(--azure); color: #D8D8D8; - font-size: 2.5rem; + font-size: 2.1rem; font-family: Beleren; } @@ -25,14 +25,14 @@ header{ nav{ background: var(--silver); - font-size: 1.25rem; + font-size: 1.15rem; font-family: Beleren; } main{ background-color: white; color: black; - font-size: 1.25rem; + font-size: 1rem; line-height:normal; font-family: Fira; text-align: justify; @@ -41,11 +41,11 @@ main{ footer{ background-color: var(--charcoal); color: white; - font-size: 1.5rem; + font-size: 1rem; } .copyright{ - font-size:0.8rem; + font-size:0.7rem; } a{ @@ -57,14 +57,14 @@ a{ background: var(--shading); background-color: var(--azure); --border-color: var(--charcoal); - --border-size: 0.1rem; + --border-size: 0.08rem; border-left: var(--border-size) solid var(--border-color); border-right: var(--border-size) solid var(--border-color); border-top: var(--border-size) solid var(--border-color); border-bottom: var(--border-size) solid var(--border-color); - border-radius: 0.7rem; + border-radius: 0.6rem; } .nav-tab:hover{ @@ -81,24 +81,24 @@ h1{ text-align:left; /*margin-left:auto; margin-right:auto;*/ - font-size:2rem; + font-size:1.6rem; } h2{ text-align:left; /*margin-left:auto; margin-right:auto;*/ - font-size:1.75rem; - margin-top:1rem; - margin-bottom:0.5rem; + font-size:1.35rem; + margin-top:1em; + margin-bottom:0.5em; } h3{ - font-size:1.25rem; + font-size:1.2rem; } hr{ - border-top: 0.15rem solid black; + border-top: 0.125rem solid black; } ul{ @@ -127,9 +127,9 @@ summary{ border-right: var(--border-size) solid var(--border-color); border-top: var(--border-size) solid var(--border-color); border-bottom: var(--border-size) solid var(--border-color); - border-radius: 0.5rem; - padding-left:0.5rem; - padding-right:0.5rem; + border-radius: 0.4rem; + padding-left:0.4rem; + padding-right:0.4rem; background: var(--silver-right);