About
-My story begins on 18th of February, 1999. Shortly after I was born, my Nani gave me an indigo, koala-print blanket, which has been my loyal companion ever since. My mother describes the day I came home from the hospital as a "snowglobe day."
+Coming soon!
+
diff --git a/pages/lists.html b/pages/lists.html
index 5cea3e6..3f4aa41 100644
--- a/pages/lists.html
+++ b/pages/lists.html
@@ -1,9 +1,9 @@
tag created in query-handler.php.
-var list = null;
+var selected_list = null;
if(lists.hasOwnProperty(list_id)){
- list = lists[list_id];
+ selected_list = lists[list_id];
} else {
- list = lists["master"];
+ selected_list = lists["master"];
//If the list id in the query is invalid, go back to the main list.
}
-if(list.hasOwnProperty("external") && list.external){
- setTimeout(function(){location.assign(list["link"])}, 600);
- //If the list specified in the query has the external property, then redirect to the external link. Note that because external lists in the master list are links to external URLs, the only situation where this will arise is if someone manually enters the list name into the query. I use setTimeout in order to allow the rest of the code to run.
- list["title"] = `Redirecting to List of ${list["title"]}...`;
- list["list"] = [];
- //It takes a second to redirect, so put some filler on the page while the reader waits.
+
+
+function gen_list_html(list){
+ //This function creates HTML from a list's JSON object by iterativel calling the gen_item_html function to convert individual items. This design paradigm facilitates the construction of nested lists or lists with sections.
+ var html = "";
+ if(!list.hasOwnProperty("type")){
+ list.type = "default";
+ }
+
+ var list_type = list.type;
+
+ if(list.hasOwnProperty("sections")){
+ list_type = "sectioned";
+ //Lists that have separate sections require special handling involving recursion.
+ }
+
+ switch(list_type){
+ case "master":
+ for(id in lists){
+ html += gen_item_html(id,type="list-id");
+ }
+ html = ``;
+ break;
+
+ case "quotes":
+ for(quote of list.list){
+ html += gen_item_html(quote,type="quote");
+ }
+ break;
+
+ case "key-value":
+ for(pair of list.list){
+ html += gen_item_html(pair,type="kv-pair");
+ }
+ html = (list.hasOwnProperty("ordered") && list.ordered) ? `${html}
` : ``;
+ //Create an ordered list if list has the property "ordered".
+ break;
+
+ case "albums":
+ 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");
+ }
+ break;
+
+ case "external":
+ //This branch will only run if someone manually enters the list name into the query; clicking an external-type list from the Master List will just open the link in a new tab.
+ setTimeout(function(){location.assign(list["link"])}, 600);
+ //If the list specified in the query has the external property, then redirect to the external link. I use setTimeout in order to allow the rest of the code to run.
+ list.title = `Redirecting to List of ${list.title}...`;
+ list.list = [];
+ //It takes a second to redirect, so put some filler on the page while the reader waits.
+ break;
+
+ case "sectioned":
+ if(!list.hasOwnProperty("section-level")){
+ list["section-level"] = 1;
+ //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.
+ }
+ for(section of list.sections){
+ var section_html = "";
+ var level = list["section-level"] + 1;
+ section["section-level"] = level;
+ //Nested secions are of lower levels.
+ if(!section.hasOwnProperty("type")){
+ 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("dropdown")){
+ section.dropdown = list.dropdown;
+ //Inherit dropdown-ness unless otherwise specified.
+ }
+ var description = (section.hasOwnProperty("description")) ? `${section.description}
` : "";
+ //Sections can have their own descriptions.
+
+ var title = `${section.title}`;
+ //Wrap the section title in a header tag.
+
+ if(section.hasOwnProperty("dropdown") && section.dropdown){
+ //If the section is marked with the "dropdown" attribute, then nest the section's data in a details/summary tag.
+ section_html = `${title}
${description}${gen_list_html(section)}${html}
` : ``;
+ //Create an ordered list if list has the property "ordered".
+ }
+
+ return html;
+
}
-$("#list-title")[0].innerHTML = list.title;
-if(list.hasOwnProperty("description")){
- $("#list-description")[0].innerHTML = list.description;
-}
-//Generate the article header from the list's title and description.
-
-if(list.hasOwnProperty("ordered") && list.ordered){
- $("#list-container")[0].innerHTML += "
";
- //Create an ordered list of the list has attribute "ordered":true.
-} else if (list.hasOwnProperty("inline") && list.inline){
- $("#list-container")[0].innerHTML += "";
- //Inline lists do not use HTML list tags but instead display list elements side by side.
-} else {
- $("#list-container")[0].innerHTML += "";
- //By default, lists are unordered.
-}
-
-$("#lists")[0].innerHTML += "
Return to Master List ↩";
-//Add a return link to the bottom of the article.
-
-if(!list.hasOwnProperty("type")){
- list["type"] = "default";
-}
-
-switch(list["type"]){
- case "master":
- //The master list has its own special format to follow.
- for(id in lists){
- if(lists[id].hasOwnProperty("hidden") && lists[id].hidden){
- continue;
+function gen_item_html(item,type="default"){
+ var item_html = "";
+ switch(type){
+ case "list-id":
+ if(lists[item].hasOwnProperty("hidden") && lists[item].hidden){
+ return "";
+ //Lists marked with the "hidden" attribute are in-development and should not be displayed on the Master List.
+ }
+ if(!lists[item].hasOwnProperty("title")){
+ lists[item].title = item;
+ //If a title is not set for the list, then just use its id.
}
var tooltip = "";
- if(lists[id].hasOwnProperty("description")){
- tooltip=lists[id]["description"];
+ if(lists[item].hasOwnProperty("description")){
+ tooltip=lists[item]["description"];
//When hovering over a list in the directory, display its description as a tooltip.
}
- var link = `href='index.php?page=lists&list=${id}' target='self_'`;
+ var link = `href='index.php?page=lists&list=${item}' target='self_'`;
//By default, lists have internal links that change the query value to that list's title. Internal links should open in the same tab.
- if(lists[id].hasOwnProperty("external") && lists[id].external){
- link = `href='${lists[id]["link"]}' target='blank_'`;
+ if(lists[id].hasOwnProperty("type") && lists[item].type=="external"){
+ link = `href='${lists[item]["link"]}' target='blank_'`;
//For external lists, use their link instead of an internal link. External links should open in a new tab.
}
- var item = `${lists[id].title}`;
- $("#list")[0].innerHTML += item;
+ item_html = `${lists[item].title}`;
//The Master List contains a link to every other list in the JSON file.
- }
- $("#list-return-link")[0].style.display="none";
- //"Return to Master List" link is not needed on Master List itself.
- break;
- case "quotes":
- //Make the quotes section look like a quote board on Goodreads.
- for(quote of list.list){
- var item = "";
- if(quote.hasOwnProperty("title")){
- item += `${quote.title}
`;
+ break;
+
+ case "quote":
+ //Format quotes like they are formatted on Goodreads.
+ if(!item.hasOwnProperty("quote")){
+ //If the quote is blank, then things are going to get real weird. Most likely, this will be caused by a typo, so this branch is a safeguard against any resulting errors.
+ return "";
+ }
+ item_html = "
";
+ if(item.hasOwnProperty("title")){
+ item_html += `${item.title}
`;
//Add a title if the quote has one (e.g. "The Litany Against Fear").
}
- item += `“${quote.quote.replaceAll("\n","
")}”
`;
+ item_html += `“${item.quote}”
`;
//Add the text of the quote.
- if(quote.hasOwnProperty("card") && !quote.hasOwnProperty("quotee")){
- quote.quotee="";
- //If a flavor text doesn't have a quotee, then don't write "Unknown".
+ if(item.hasOwnProperty("card") && !item.hasOwnProperty("quotee")){
+ item.quotee="";
+ //If a flavor text doesn't have a quotee, don't write "Unknown".
}
- item += ` — ${quote.hasOwnProperty("quotee") ? quote.quotee : "Unknown"}`;
+ item_html += ` — ${item.hasOwnProperty("quotee") ? item.quotee : "Unknown"}`;
//Add the quotee's name, or "Unknown" if one is not specified.
- if(quote.hasOwnProperty("source")){
- if(quote.hasOwnProperty("quotee") && quote.quotee!=""){
- item += ", "
+ if(item.hasOwnProperty("source")){
+ if(item.hasOwnProperty("quotee") && item.quotee!=""){
+ item_html += ", ";
//Unless there is no quotee, separate the quotee from the source with ", "
}
- item += quote.source;
+ item_html += item.source;
//Add the source if the quote has one.
}
- if(quote.hasOwnProperty("card")){
- if(quote.quotee!=""||quote.hasOwnProperty("source")){
- item += `, `;
+ if(item.hasOwnProperty("card")){
+ if(item.quotee!=""||item.hasOwnProperty("source")){
+ item_html += `, `;
//Separate quotee or source from card title with ", "
}
- item += `${quote.card} (Magic: the Gathering)`
+ item_html += `${item.card} (Magic: the Gathering)`;
}
- item += "
";
+ item_html += "
";
//Delimit the quotes with a horizontal rule.
- $("#list")[0].innerHTML += item;
- }
- break;
- case "key-value":
- //Handle key-value or term-definition type data.
- for(pair of list.list){
- var item = "";
- if(pair.hasOwnProperty("link")){
- item = `${pair["k"]}`
+ break;
+
+ case "kv-pair":
+ if(item.hasOwnProperty("link")){
+ item_html = `${item["k"]}`;
} else {
- item = `${pair["k"]}`
+ item_html = `${item["k"]}`;
}
- item += ` — ${pair["v"]}`;
- $("#list")[0].innerHTML += `${item}`;
- }
- break;
- case "albums":
- document.getElementById("lists").style.textAlign="center";
- //Center the rows of album covers on the page.
- for(album of list.list){
- var tooltip = `${album.title} — ${album.artist} (${album.year})`;
+ item_html += ` — ${item["v"]}`;
+ item_html = `${item_html}`;
+ break;
+
+ case "album":
+ var tooltip = `${item.title} — ${item.artist} (${item.year})`;
//Display album data when hovering over cover art.
- var item = `
`;
+ item_html = `
`;
//Display the album cover. Can be an external link or internal path.
- if(album.hasOwnProperty("link")){
- item = `${item}`;
+ if(item.hasOwnProperty("link")){
+ item_html = `${item_html}`;
//If there's a link to the album, put it on the cover.
}
- item = `${item}
${album.title}
${album.artist}
${album.year}
`;
- $("#list")[0].innerHTML += `${item}`;
- }
- break;
- default:
- for(item of list.list){
- $("#list")[0].innerHTML += `${item}`;
- }
+ item_html = `${item_html}
${item.title}
${item.artist}
${item.year}
`;
+ break;
+
+ case "sublist":
+ //Sublists can be any type (most likely default or key-value), so the best way to deal with them is recursion.
+ if(item.hasOwnProperty("dropdown") && item.dropdown){
+ item_html = `${item.title}
${gen_list_html(item)}
");
+ return html;
+}
+
+
+document.getElementById("list-title").innerHTML = selected_list.title;
+if(selected_list.hasOwnProperty("description")){
+ document.getElementById("list-description").innerHTML = selected_list.description;
+} else {
+ document.getElementById("list-description").style.display = "none";
+ //If the list has no description, hide the element to remove the awkward space from the padding.
+}
+//Generate the article header from the list's title and description.
+
+document.getElementById("list-container").innerHTML += str2html(gen_list_html(selected_list));
+//Call the gen_list_html function to convert the list from a JSON object to sophisticated HTML.
+
+if(list_id != "master"){
+ document.getElementById("lists").innerHTML += "
Return to Master List ↩
";
+ //Add a return link to the bottom of the article.
}
diff --git a/scripts/nav.php b/scripts/nav.php
index 82e0fbc..eb5e1a8 100644
--- a/scripts/nav.php
+++ b/scripts/nav.php
@@ -16,7 +16,7 @@ function gen_nav_element($page){
$target = "_blank";
//If instead the page is associated with an external link, then point the navibar href there and make it open in a new window.
}
- echo "".$page->name."
";
+ echo "".$page->name."
";
}
$page_array = get_object_vars($pages);
diff --git a/styles/common.css b/styles/common.css
index 876e026..95c6480 100644
--- a/styles/common.css
+++ b/styles/common.css
@@ -1,12 +1,15 @@
:root {
- --shadow-gradient:linear-gradient(to bottom , rgba(0,0,0,0.6) , rgba(0,0,0,0.1));
- --darker-gradient:linear-gradient(to bottom , rgba(0,0,0,0.8) , rgba(0,0,0,0.3));
- --lighter-gradient:linear-gradient(to bottom , rgba(0,0,0,0.4) , rgba(0,0,0,0));
+ --shading:linear-gradient(to bottom , rgba(255,255,255,0.2) , rgba(0,0,0,0), rgba(0,0,0,0.2));
+ --shading-dark:linear-gradient(to bottom , rgba(0,0,0,0.1) , rgba(0,0,0,0.4));
+ --shading-light:linear-gradient(to bottom , rgba(255,255,255,0.4) , rgba(0,0,0,0), rgba(0,0,0,0.4));
--silver: linear-gradient(45deg, #AEB2B8, #C7C9CB, #D7D7D8, #D7D7D8, #C7C9CB, #AEB2B8, #959BA3);
+ --silver-right: linear-gradient(45deg, #C7C9CB, #D7D7D8, #D7D7D8, #C7C9CB, #AEB2B8, #959BA3);
/*https://www.schemecolor.com/light-silver-gradient.php)*/
--navy-blue:#091b75;
--azure:#5a6cc3;
+ --charcoal:#333333;
+
}
/*
diff --git a/styles/layout.css b/styles/layout.css
index 9984a46..0137abf 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -31,7 +31,7 @@ header{
/*min-height:10%;*/
/*height: 15vh;*/
text-align:center;
- padding: 2rem/*var(--hf-padding)*/;
+ padding: 1.5rem/*var(--hf-padding)*/;
margin-bottom:/*1%*/0;
}
@@ -47,55 +47,67 @@ nav{
vertical-align:top;*/
text-align:center;
- padding: 0.1rem/*var(--hf-padding)*/;
+ padding:0.2rem;
}
+.nav-tab{
+ /*width:100%;*/
+ margin:0.1rem;
+ padding-top: 0.4rem;
+ padding-bottom: 0.4rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+
+ display:inline-block;
+ text-align:center;
+}
+
main{
/*width: 80%;*/
background-color:white;
min-height: 60vh;
+ width:100%;
display:inline-block;
- margin:3%;
- margin-top:0;
- width:94%;
+ padding-left:4%;
+ padding-right:4%;
+ padding-top:2rem;
+ padding-bottom:2rem;
}
-
-.nav-tab{
- /*width:100%;*/
- padding-left:1rem;
- padding-right:1rem;
- margin:0.1rem;
- display:inline-block;
- text-align:center;
-}
-
ol, ul {
padding-left:2rem;
}
-.list-album{
- 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{
- width:10em;
- height:10em;
- margin:0;
+li > * {
+ vertical-align: top;
}
p{
text-align:justify;
margin-bottom:1rem;
}
+
+.social{
+ margin:0.4rem;
+}
+
+details{
+ display:inline-block;
+ block-size:fit-contents;
+}
+
+summary{
+ padding:0.8em;
+ margin-bottom:0.25rem;
+}
+
+summary h2, summary h3, summary h4, summary h5, summary h6 {
+ display:inline;
+}
+
+details.heading{
+ display:block;
+ margin-bottom:0.1rem;
+}
diff --git a/styles/lists.css b/styles/lists.css
new file mode 100644
index 0000000..15dc66c
--- /dev/null
+++ b/styles/lists.css
@@ -0,0 +1,23 @@
+.list-key{
+ font-weight:bold;
+}
+
+
+.list-album{
+ 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{
+ width:10em;
+ height:10em;
+ margin:0;
+}
diff --git a/styles/theme.css b/styles/theme.css
index fb3ed40..b52e3f1 100644
--- a/styles/theme.css
+++ b/styles/theme.css
@@ -1,67 +1,22 @@
-:root{
- --body-bg: inherit/*var(--silver)/*linear-gradient(to bottom, #AEB2B8, #C7C9CB, #D7D7D8, #D7D7D8, #C7C9CB, #AEB2B8, #959BA3)*/;
- --body-bg-color: rgba(0,0,0,0);
- --body-font: Fira;
-
- --header-bg: default/*linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.2))*/;
- --header-bg-color: var(--azure);
- --header-color: #D8D8D8;
- --header-fontsize:250%;
- --header-font: Beleren;
-
- --footer-bg:inherit;
- --footer-bg-color: #333333;
- --footer-color:white;
- --footer-fontsize:150%;
- --footer-font: inherit;
-
- --nav-bg:/*inherit;*/var(--silver);
- --nav-bg-color: inherit;
- --nav-color: var(--azure);
- --nav-fontsize:125%;
- --nav-font: inherit;
-
- --navtab-default-bg: inherit;
- --navtab-default-bg-color: var(--shadow-gradient);
- --navtab-default-color: inherit;
- --navtab-hover-bg: inherit;
- --navtab-hover-bg-color: var(--darker-gradient);
- --navtab-hover-color: inherit;
- --navtab-active-bg: inherit;
- --navtab-active-bg-color: var(--lighter-gradient);
- --navtab-active-color: inherit;
-
-
- --main-bg: inherit;
- --main-bg-color: white;
- --main-color: black;
- --main-fontsize:100%;
- --main-font: inherit;
-
- --hr-border: 2px solid black;
-}
-
-
body{
- background: var(--body-bg);
- background-color: var(--body-bg-color);
+ background: inherit;
+ background-color: white;
background-repeat: no-repeat;
background-attachment: fixed;
- font-family: var(--body-font);
+ font-family: Fira;
}
header{
- background: var(--header-bg);
- background-color: var(--header-bg-color);
- color: var(--header-color);
- font-size: var(--header-fontsize);
- font-family: var(--header-font);
-
+ background: var(--shading);
+ background-color: var(--azure);
+ color: #D8D8D8;
+ font-size: 2.5rem;
+ font-family: Beleren;
/*text-shadow: 1px 0 2px black, -1px 0 2px black, 0 1px 2px black, 0 -1px 2px black;*/
}
-.silver-text{
+.silver-text, .nav-text{
background: var(--silver);
background-clip: text;
-webkit-background-clip: text;
@@ -71,34 +26,28 @@ header{
}
nav{
- background-color: var(--nav-bg-color);
- background: var(--nav-bg);
- color: var(--nav-color);
- font-size: var(--nav-fontsize);
- font-family: var(--nav-font);
+ background: var(--silver);
+ font-size: 1.25rem;
+ font-family: Beleren;
}
main{
- background: var(--main-bg);
- background-color: var(--main-bg-color);
- color: var(--main-color);
- font-size: var(--main-fontsize);
- font-family: var(--main-font);
+ background-color: white;
+ color: black;
+ font-size: 1.25rem;
+ line-height: 1.3rem;
+ font-family: Fira;
text-align: justify;
- text-justify: inter-word;
- padding:20px;
}
footer{
- background: var(--footer-bg);
- background-color: var(--footer-bg-color);
- color: var(--footer-color);
- font-size: var(--footer-fontsize);
- font-family: var(--footer-font);
+ background-color: var(--charcoal);
+ color: white;
+ font-size: 1.5rem;
}
.copyright{
- font-size:60%;
+ font-size:0.8rem;
}
a{
@@ -107,58 +56,50 @@ a{
}
.nav-tab{
+ background: var(--shading);
+ background-color: var(--azure);
+ --border-color: var(--charcoal);
+ --border-size: 0.1rem;
- background: var(--navtab-default-bg);
- background-color: var(--navtab-default-bg-color);
- color: var(--navtab-default-color);
- padding-top: 5px;
- padding-bottom: 5px;
-
- border-left: 1.5px solid #000;
- border-right: 1.5px solid #000;
- border-top: 1.5px solid #000;
- border-bottom: 1.5px solid #000;
- border-spacing:2.5px;
- border-radius: 10px;
+ 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;
}
.nav-tab:hover{
- background: var(--navtab-hover-bg);
- background-color: var(--navtab-hover-bg-color);
- color: var(--navtab-hover-color);
+ background: var(--shading-light);
+ background-color: var(--azure);
}
.nav-tab:active{
- background: var(--navtab-active-bg);
- background-color: var(--navtab-active-bg-color);
- color: var(--navtab-active-color);
+ background: var(--shading-dark);
+ background-color: var(--azure);
}
h1{
text-align:left;
/*margin-left:auto;
margin-right:auto;*/
- font-size:150%;
+ font-size:2rem;
}
h2{
text-align:left;
/*margin-left:auto;
margin-right:auto;*/
- font-size:120%;
+ font-size:1.5rem;
margin-top:1rem;
margin-bottom:0.5rem;
}
hr{
- border: none;
- border-top: var(--hr-border);
+ border-top: 0.15rem solid black;
}
article{
- font-size:130%;
- line-height:130%;
}
ul{
@@ -169,12 +110,28 @@ ul li ul{
list-style-type: circle;
/*Nested list*/
}
+ul li ul li ul{
+ list-style-type: square;
+ /*Nested list*/
+}
u{
text-underline-offset: 0.14em;
/*Without this, underlines won't show under descender characters (g,y,j,p,q)*/
}
-.list-key{
- font-weight:bold;
+summary{
+ --border-color: var(--charcoal);
+ --border-size: 0.1em;
+
+ 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.5rem;
+ padding-left:0.5rem;
+ padding-right:0.5rem;
+
+ background: var(--silver-right);
+
}