jimlab/jimsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed rem sizing, added gallery/exhibit list type, added list of favorite MTG cards

Browse Source
This commit is contained in:
Jim Shepich III 2022-02-08 04:43:31 -05:00
parent 621992dc22
commit 54d1ac8ef5
6 changed files with 322 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
data/lists.json
View File

@ -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/"
}
]
}
]
}

73
scripts/lists.js
View File

@ -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>${section_html}</section>`;
html += `<section id="${section.title}">${section_html}</section>`;
//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 = `<li>${item_html}</li>`;
break;
case "exhibit":
var tooltip, alt, text, img_src;
tooltip = text = img_src = "";
switch(subtype){
case "album":
var tooltip = `${item.title} &mdash; ${item.artist} (${item.year})`;
//Display album data when hovering over cover art.
item_html = `<img title="${tooltip}" alt="${tooltip}" src="${item.cover}" class="list-album-cover" />`;
//Display the album cover. Can be an external link or internal path.
if(item.hasOwnProperty("link")){
item_html = `<a href='${item.link}' target='blank_'>${item_html}</a>`;
//If there's a link to the album, put it on the cover.
tooltip = `${item.title} (${item.year}) - ${item.artist}`;
alt = tooltip;
img_src = item.cover;
text = `${item.title}<br />${item.artist}<br />${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.
}
item_html = `<div class="list-album">${item_html}<br />${item.title}<br />${item.artist}<br />${item.year}</div>`;
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:
}
var image = `<img title="${tooltip}" alt="${tooltip}" src="${img_src}" class="gallery exhibit-${subtype}" />`;
//Gallery items must have an image.
if(item.hasOwnProperty("link")){
image = `<a href='${item.link}' target='blank_'>${image}</a>`;
//If there's a link associated with the exhibit, put it on the image.
}
item_html = (text=="") ? image : `${image}<br />${text}`;
//If there's no text, then there's no need for a line break.
item_html = `<div class="gallery exhibit-${subtype}">${item_html}</div>`
break;
case "sublist":

1
styles/common.css
View File

@ -9,6 +9,7 @@
--navy-blue:#091b75;
--azure:#5a6cc3;
--charcoal:#333333;
font-size:120%;
}

38
styles/layout.css
View File

@ -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;
}

30
styles/lists.css
View File

@ -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;
}

32
styles/theme.css
View File

@ -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);