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

CSS & Lists overhaul

Browse Source
This commit is contained in:
Jim Shepich III 2022-02-04 05:00:45 -05:00
parent 02e92ff068
commit a48e151296
10 changed files with 380 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
data/lists.json
View File

@ -7,7 +7,6 @@
"quotes":{
"title":"My Favorite Quotes",
"type":"quotes",
"inline":true,
"description":"This list contains quotes that I live by, quotes that have shaped my fundamental understanding of things, and quotes that I otherwise just like.",
"list":[
{
@ -181,13 +180,13 @@
"mal":{
"title":"All of the Anime I've Watched",
"description":"MyAnimeList",
"external":true,
"type":"external",
"link":"https://myanimelist.net/animelist/epicshepich"
},
"goodreads":{
"title":"Books I've Read Since High School",
"description":"My Goodreads list",
"external":true,
"type":"external",
"link":"https://www.goodreads.com/review/list/110528977-jim-shepich?shelf=read"
},
"mnemonics":{
@ -231,9 +230,8 @@
},
"albums":{
"type":"albums",
"inline":true,
"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 are greyscale or depict space ships.",
"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":[
{
"title":"Boston",
@ -414,6 +412,20 @@
},
"future_lists":{
"title":"Lists I Plan on Adding",
"list":["My Favorite Albums","Useful Websites (nested?)","My Favorite Food"]
"list":["My Favorite Movies","My Favorite Food",{"nested lists":["Useful Websites","Favorite foods",{"title":"cereals","dropdown":true,"list":["Cocoa Pebbles","Froot Loops"]}]}]
},
"foods":{
"title":"My Favorite Foods",
"dropdown":true,
"sections":[
{
"title":"Breakfast",
"list":[{"Cereal":["Reese's Puffs","Honeycombs"]}, "Crepes"]
},
{
"title":"Snacks",
"list":["Pretzels","Popcorn"]
}
]
}
}

9
pages/about.html
View File

@ -1,15 +1,15 @@
<article>
<h1>About</h1>
<hr />
<p>My story begins on 18th of February, 1999. Shortly after I was born, my <span title="grandmother">Nani</span> 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."</p>
Coming soon!
<!--
<p>My story begins on 18th of February, 1999. Shortly after I was born, my <span title="grandmother">Nani</span> gave me an indigo, koala-print blanket, which has been my loyal companion ever since. My mom describes the day I came home from the hospital as a "snowglobe day."</p>
<p>I am told that I had learned to speak by the time I was around one year old. One of my earliest memories is of being at my grandparents' house and telling some family members (I think my mom's cousins) that I wanted to be 2 years old forever. Life was good back then.</p>
<p>Not too long after it was released in the US, my uncle gave me a PlayStation 2. Over the many hours I spent rapt in titles like Kingdom Hearts, Jak & Daxter, and Dragon Quest VIII, I learned a plethora of new words and ideas, and I developed a lasting love of fantasy and playing games. By enabling me to explore these fantasy worlds, the PS2 gave me a kind of freedom that I could never have in the real world as a child only a few years old.</p>
<p>Less than a month before I turned 3, my brother and forever Player 2, Sam, was born. And 22 months later, my youngest brother Nick was born. I don't remember Sam's day of birth, but Nicky's was a traumatic event for me. I had a fever that night, and my Nani, as well as my mom's cousins Preeti and Supriya chased me around my house, pinned me to the floor, and force-fed me grape-flavored Tylenol.</p>
<p>When I was 3 years old, I started school at Hidden Treasures Preschool. The community was very loving; in fact, my K3 teacher Mrs. Wheeler became my babysitter when I was 5. But, I always felt like a bit of an outsider among my peer group because my parents were not churchgoers. None of my classmates knew anything about the books I read or the games I played. I often wondered what a life without fantasy had to offer. Twenty-some years later, I still can't fathom how someone could be feel fulfilled living exclusively in the world of reality.</p>
<p>When I was 3 years old, I started school at Hidden Treasures Preschool. The community was very loving; in fact, my K3 teacher Mrs. Wheeler became my babysitter when I was 5. But, I sometimes felt like a bit of an outsider among my peer group because my parents were not churchgoers. None of my classmates knew anything about the books I read or the games I played. I often wondered what a life without fantasy had to offer. Twenty-some years later, I still can't fathom how someone could be feel fulfilled living exclusively in the world of reality.</p>
<p>When I was 5 years old, my dad gave me a Nintendo DS with Super Mario 64 DS and Rayman DS. The DS allowed me to carry those other world around in my pocket. In 2nd grade, I got Pokemon Diamond at the recommendation of my friend Michael. (It was at his recommendation too that I picked Turtwig as my starter). I became obsessed to the point that my dream career was Pokemon professor. It was through Pokemon that I found some camaraderie in elementary school.</p>
@ -42,5 +42,6 @@
<p>Around that time, I started teaching myself Japanese through <a href="https://freejapaneselessons.com/register/">freejapaneselessons.com</a> "Why?" you might ask. Well for one, I had a tough time with Spanish in freshman year and need a language just in case for college applications. Rikard, my jujutsu senpai, was a linguistics buff and he had gotten me interested in learning a new language. And Japanese seemed to be aligned with my interests, since I was doing a Japanese martial art and I was into anime. Plus, since JavaScript and jujutsu had worked out so well for me, I figured that adding another "J" hobby couldn't hurt (and I was sooooo right).</p>
<h2>TO BE CONTINUED...</h2>
-->
</article>

2
pages/lists.html
View File

@ -1,9 +1,9 @@
<!--<details></details>-->
<article id="lists">
<link rel="stylesheet" type="text/css" href="styles/lists.css">
<h1 id="list-title">List</h1>
<hr />
<p id="list-description"></p>
<br />
<span id="list-container"></span>
<script src="scripts/lists.js"></script>
</article>

2
scripts/footer.php
View File

@ -4,7 +4,7 @@
$socials = json_decode($socials_string);
foreach($socials as $s){
echo "<a href='" . $s->link . "'><span class='fab fa-" . $s->icon . "' title='".$s->platform."'></span></a>&nbsp;&nbsp;&nbsp;";
echo "<a class='social' href='" . $s->link . "'><span class='fab fa-" . $s->icon . "' title='".$s->platform."'></span></a>";
}
echo "<br /><span class='copyright'>Copyright &copy; 2021-".date("Y")." Jim Shepich</span>";

326
scripts/lists.js
View File

@ -1,141 +1,265 @@
//Variale `list` is imported from JSON with query_handler.php.
//var lists = JSON.parse(document.getElementById("lists-json").innerText);
var list_id = $("#query-list")[0].innerText;
var list_id = document.getElementById("query-list").innerText;
//Get list id from <var> 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 = `<ul>${html}</ul>`;
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) ? `<ol>${html}</ol>` : `<ul>${html}</ul>`;
//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")) ? `<p>${section.description}</p>` : "";
//Sections can have their own descriptions.
var title = `<h${level}>${section.title}</h${level}>`;
//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 = `<details class="heading"><summary>${title}</summary>${description}${gen_list_html(section)}</details>`;
} else {
section_html = `${title}${description}${gen_list_html(section)}`;
}
//Sectioned
html += `<section>${section_html}</section>`;
}
break;
default:
for(item of list.list){
html += gen_item_html(item);
}
html = (list.hasOwnProperty("ordered") && list.ordered) ? `<ol>${html}</ol>` : `<ul>${html}</ul>`;
//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 += "<ol id='list'></ol>";
//Create an ordered list of the list has attribute "ordered":true.
} else if (list.hasOwnProperty("inline") && list.inline){
$("#list-container")[0].innerHTML += "<span id='list'></span>";
//Inline lists do not use HTML list tags but instead display list elements side by side.
} else {
$("#list-container")[0].innerHTML += "<ul id='list'></ul>";
//By default, lists are unordered.
}
$("#lists")[0].innerHTML += "<br /><a id='list-return-link' href='index.php?page=lists&list=master'>Return to Master List &#8617;</a>";
//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 = `<li title="${tooltip}"><a ${link}>${lists[id].title}</a></li>`;
$("#list")[0].innerHTML += item;
item_html = `<li title="${tooltip}"><a ${link}>${lists[item].title}</a></li>`;
//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 = "<p>";
if(quote.hasOwnProperty("title")){
item += `<b>${quote.title}</b><br />`;
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 = "<p>";
if(item.hasOwnProperty("title")){
item_html += `<b>${item.title}</b><br />`;
//Add a title if the quote has one (e.g. "The Litany Against Fear").
}
item += `&ldquo;${quote.quote.replaceAll("\n","<br />")}&rdquo;<br>`;
item_html += `&ldquo;${item.quote}&rdquo;<br>`;
//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 += `&nbsp;&mdash; ${quote.hasOwnProperty("quotee") ? quote.quotee : "Unknown"}`;
item_html += `&nbsp;&mdash; ${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 += `<a target='_blank' href='https://gatherer.wizards.com/pages/card/Details.aspx?multiverseid=${quote.multiverseid}'>${quote.card}</a> (Magic: the Gathering)`
item_html += `<a target='_blank' href='https://gatherer.wizards.com/pages/card/Details.aspx?multiverseid=${item.multiverseid}'>${item.card}</a> (Magic: the Gathering)`;
}
item += "</p><hr />";
item_html += "</p><hr />";
//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 = `<span class="list-key"><a href="${pair.link}" target="blank_">${pair["k"]}</a></span>`
break;
case "kv-pair":
if(item.hasOwnProperty("link")){
item_html = `<span class="list-key"><a href="${item.link}" target="blank_">${item["k"]}</a></span>`;
} else {
item = `<span class="list-key">${pair["k"]}</span>`
item_html = `<span class="list-key">${item["k"]}</span>`;
}
item += ` &mdash; ${pair["v"]}`;
$("#list")[0].innerHTML += `<li>${item}</li>`;
}
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} &mdash; ${album.artist} (${album.year})`;
item_html += ` &mdash; ${item["v"]}`;
item_html = `<li>${item_html}</li>`;
break;
case "album":
var tooltip = `${item.title} &mdash; ${item.artist} (${item.year})`;
//Display album data when hovering over cover art.
var item = `<img title="${tooltip}" src="${album.cover}" class="list-album-cover" />`;
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(album.hasOwnProperty("link")){
item = `<a href='${album.link}' target='blank_'>${item}</a>`;
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.
}
item = `<div class="list-album">${item}<br />${album.title}<br />${album.artist}<br />${album.year}</div>`;
$("#list")[0].innerHTML += `${item}`;
}
break;
default:
for(item of list.list){
$("#list")[0].innerHTML += `<li>${item}</li>`;
}
item_html = `<div class="list-album">${item_html}<br />${item.title}<br />${item.artist}<br />${item.year}</div>`;
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 = `<li><details><summary>${item.title}</summary>${gen_list_html(item)}</details></li>`;
} else {
item_html = `<li>${item.title}${gen_list_html(item)}</li>`;
}
break;
default:
if(["string","number"].includes(typeof item)){
item_html = `<li>${item}</li>`;
//If the element is a simple string or number, then we don't need to do any special formatting.
} else if (typeof item === "object"){
var keys = Object.keys(item);
if(keys.length == 1 && Array.isArray(item[keys[0]])){
var temp = {
"title":keys[0],
"type":"default",
"list":item[keys[0]]
};
//An item that is a dictionary only containing a list is probably a sublist. Format it as such, and pass it back through this switch statement.
item_html = gen_item_html(temp,"sublist");
} else {
item_html = gen_item_html(item,"sublist");
//At this point, if there is no other specification, an item that's an object is probably a sublist.
}
}
}
return item_html;
}
function str2html(md){
//This function replaces escapes commands and Markdown with their HTML equivalents.
html = md.replaceAll("\n","<br />");
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 += "<br /><p><a id='list-return-link' href='index.php?page=lists&list=master'>Return to Master List &#8617;</a></p>";
//Add a return link to the bottom of the article.
}

2
scripts/nav.php
View File

@ -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 "<a href='".$href."' target='".$target."'><div class='nav-tab'>".$page->name."</div></a>";
echo "<a href='".$href."' target='".$target."'><div class='nav-tab'><span class='nav-text'>".$page->name."</span></div></a>";
}
$page_array = get_object_vars($pages);

9
styles/common.css
View File

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

76
styles/layout.css
View File

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

23
styles/lists.css Normal file
View File

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

153
styles/theme.css
View File

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