wotd is working
This commit is contained in:
parent
fbbc146410
commit
2235748680
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<title>gome — bookmarks</title>
|
||||
<meta charset='utf-8'/>
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
<p>Just a stub for now.</p>
|
||||
</main>
|
||||
<footer>
|
||||
<img src='../img/mushrooms_2.webp' />
|
||||
<img src='../img/mushrooms_2.webp' alt='Toadstools' />
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
html {
|
||||
color: #323a42;
|
||||
background-color: #fffcf7;
|
||||
font-family: 'Palatino Linotype', Optima, Lora, serif;
|
||||
font-family: 'Palatino Linotype', Lora, serif;
|
||||
max-width: 70ch;
|
||||
margin: 1em 0 1em auto;
|
||||
margin: 1em auto;
|
||||
line-height: 1.2;
|
||||
font-size: 1.25em;
|
||||
height: calc(100vh - 2em);
|
||||
|
|
@ -11,29 +11,40 @@ html {
|
|||
}
|
||||
body {
|
||||
margin: 0;
|
||||
margin-left: 1.5em;
|
||||
margin-left: 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
main {
|
||||
flex-grow: 1;
|
||||
margin-right: 1em;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
#back-arrow {
|
||||
position: absolute;
|
||||
transform: translate(-23px, 3px);
|
||||
}
|
||||
a#back {
|
||||
a {
|
||||
color: #323a42;
|
||||
text-decoration: underline;
|
||||
position: relative;
|
||||
left: -0.25em;
|
||||
padding: 0.25em;
|
||||
border-radius: 2px;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
color: #6d747a;
|
||||
outline: 0;
|
||||
}
|
||||
a:focus-visible {
|
||||
outline: 1px dashed #beb0b1;
|
||||
}
|
||||
a#back {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
border-bottom: 2px solid #323a42;
|
||||
font-family: Optima, 'Palatino Linotype', Lora, serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
footer {
|
||||
margin-right: 1em;
|
||||
|
|
|
|||
173
index.html
173
index.html
|
|
@ -1,45 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<title>gomepage</title>
|
||||
<meta charset='utf-8'/>
|
||||
<meta name='theme-color' content='#fffcf7'>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"/>
|
||||
<link rel='icon' type='image/x-icon' href='/favicon.ico'>
|
||||
<link rel='icon' type='image/x-icon' href='./favicon.ico'>
|
||||
<link rel='preconnect' href='https://fonts.googleapis.com'>
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap" rel="stylesheet">
|
||||
<style type='text/css'>
|
||||
<style>
|
||||
html {
|
||||
color: #323a42;
|
||||
background-color: #fffcf7;
|
||||
height: 100%;
|
||||
font-family: 'Palatino Linotype', Lora, serif;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content;
|
||||
grid-template-rows: 1fr auto min-content;
|
||||
line-height: 1.2;
|
||||
}
|
||||
*::selection {
|
||||
background: #ebdcc97f;
|
||||
}
|
||||
header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
width: min-content;
|
||||
background-color: red;
|
||||
overflow: hidden;
|
||||
}
|
||||
main {
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
flex-grow: 1;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
padding: 1em;
|
||||
}
|
||||
footer {
|
||||
background-color: blue;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
max-height: 50%;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 2 / span 2;
|
||||
}
|
||||
.title-box, h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.title-box {
|
||||
position: relative;
|
||||
|
|
@ -49,13 +55,12 @@
|
|||
font-size: 48px;
|
||||
height: 3em;
|
||||
width: 10em;
|
||||
font-family: 'Palatino Linotype', Optima, Lora, serif;
|
||||
background-color: #fffcf7;
|
||||
}
|
||||
.title-box .title {
|
||||
background-image: linear-gradient(to top, #fffcf700 0 13px, #fffcf7 13px 100%);
|
||||
background-color: inherit;
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
bottom: -13px;
|
||||
padding: 0 0.25em 0 0.25em;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -64,19 +69,24 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 0.5em;
|
||||
left: 1em;
|
||||
/* this counters the left offset, but adds no real padding */
|
||||
padding-right: 1rem;
|
||||
left: 1rem;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
border-bottom: 2px solid #323a42;
|
||||
transition: opacity 50ms;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
nav a {
|
||||
margin: 0.25em 0.25em 0.25em 0;
|
||||
padding: 0.25em 0.25em 0.25em 0;
|
||||
margin: 0.25em 0.75em 0.25em 0;
|
||||
padding: 0.25em;
|
||||
position: relative;
|
||||
left: -0.25em;
|
||||
color: #323a42;
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
nav a:first-child {
|
||||
margin-top: 1em;
|
||||
|
|
@ -84,8 +94,12 @@
|
|||
nav a:last-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
nav a:hover, nav a:focus {
|
||||
a:hover, a:focus {
|
||||
color: #6d747a;
|
||||
outline: 0;
|
||||
}
|
||||
a:focus-visible {
|
||||
outline: 1px dashed #beb0b1;
|
||||
}
|
||||
nav a .link-title {
|
||||
font-weight: bold;
|
||||
|
|
@ -94,25 +108,70 @@
|
|||
font-weight: normal;
|
||||
content: ' —';
|
||||
}
|
||||
nav.show, nav:focus-within {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
.gome-img {
|
||||
width: 1280px;
|
||||
user-select: none;
|
||||
}
|
||||
.gome-img[src^='./img/desktop'] {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 50vw;
|
||||
max-width: min(1280px, 100%);
|
||||
}
|
||||
.gome-img[src^='./img/tablet'] {
|
||||
display: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
.gome-img[src^='./img/mobile'] {
|
||||
position: relative;
|
||||
display: none;
|
||||
right: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
#wotd {
|
||||
font-size: 18px;
|
||||
}
|
||||
#wotd h3 {
|
||||
font-family: Optima, 'Palatino Linotype', Lora, serif;
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
#wotd .definiendum {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#wotd h1, #wotd h2, #wotd h3 {
|
||||
}
|
||||
#wotd time, #wotd .pronunciation {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.pronunciation::before, .pronunciation::after {
|
||||
content: '⧸';
|
||||
}
|
||||
#wotd ul {
|
||||
margin: 0 0 1em 0;
|
||||
padding-left: 0.5em;
|
||||
list-style: none;
|
||||
}
|
||||
#wotd li {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
@media only screen and (max-width: 960px) {
|
||||
body {
|
||||
grid-template-rows: min-content auto;
|
||||
}
|
||||
header {
|
||||
position: relative;
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 1;
|
||||
width: 100%;
|
||||
}
|
||||
main {
|
||||
grid-row: 2;
|
||||
}
|
||||
footer {
|
||||
grid-row: 3;
|
||||
}
|
||||
.title-box {
|
||||
border-left: none;
|
||||
height: 1em;
|
||||
|
|
@ -130,8 +189,7 @@
|
|||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
footer {
|
||||
max-height: 30%;
|
||||
width: auto;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.gome-img[src^='./img/tablet'] {
|
||||
display: none;
|
||||
|
|
@ -154,12 +212,17 @@
|
|||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h3>Word of the day</h3>
|
||||
<article id='wotd'>
|
||||
<h3 class='title'>Word of the day</h3>
|
||||
<time class='date'></time>
|
||||
<div class='definiendum'></div>
|
||||
<div class='pronunciation'></div>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
<img src='./img/desktop_gomes.webp' class='gome-img' />
|
||||
<img src='./img/tablet_gomes.webp' class='gome-img' />
|
||||
<img src='./img/mobile_gome.webp' class='gome-img' />
|
||||
<img src='./img/desktop_gomes.webp' class='gome-img' alt='Kabouters at work' />
|
||||
<img src='./img/tablet_gomes.webp' class='gome-img' alt='Kabouters at work' />
|
||||
<img src='./img/mobile_gome.webp' class='gome-img' alt='Lone kabouter' />
|
||||
</footer>
|
||||
<script>
|
||||
const header = document.querySelector('#header');
|
||||
|
|
@ -189,5 +252,45 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
<script type='module'>
|
||||
const months = ['January','February','March','April','June','July','August','September','October','November','December'];
|
||||
const wotd = document.querySelector('#wotd');
|
||||
const today = new Date();
|
||||
let entry;
|
||||
try {
|
||||
let day = today.getDate().toString();
|
||||
if (day.length === 1) {
|
||||
day = '0' + day;
|
||||
}
|
||||
let month = (today.getMonth() + 1).toString();
|
||||
if (month.length === 1) {
|
||||
month = '0' + month;
|
||||
}
|
||||
const response = await fetch(`./wotd/${today.getFullYear()}.${month}.${day}.json`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP response ${response.status} ${response.statusText}`);
|
||||
}
|
||||
entry = await response.json();
|
||||
} catch (e) {
|
||||
console.error('Word of the Day error:', e);
|
||||
}
|
||||
if (!entry) {
|
||||
document.querySelector('#wotd').remove();
|
||||
} else {
|
||||
wotd.querySelector('.date').textContent = today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();
|
||||
wotd.querySelector('.definiendum').textContent = entry.word;
|
||||
wotd.querySelector('.pronunciation').textContent = entry.pronunciation;
|
||||
let definitionHTML = '';
|
||||
for (const definitionEntry of entry.definitions) {
|
||||
definitionHTML += `<h3 class='part-of-speech'>${definitionEntry.part}</h4>`;
|
||||
definitionHTML += `<ul class='definitions'>`;
|
||||
for (const definition of definitionEntry.definitions) {
|
||||
definitionHTML += `<li class='definition'>${definition}</li>`
|
||||
}
|
||||
definitionHTML += `</ul>`;
|
||||
}
|
||||
wotd.innerHTML += definitionHTML;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<title>gome — journal</title>
|
||||
<meta charset='utf-8'/>
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
<p>Just a stub for now.</p>
|
||||
</main>
|
||||
<footer>
|
||||
<img src='../img/mushrooms_1.webp' />
|
||||
<img src='../img/mushrooms_1.webp' alt='Toadstools' />
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<title>gome — socials</title>
|
||||
<meta charset='utf-8'/>
|
||||
|
|
@ -12,7 +13,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<header id='header'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left" id='back-arrow'><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
||||
<a id='back' href='..'>back to gomepage</a>
|
||||
</header>
|
||||
<h1>Socials</h1>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<p>Just a stub for now.</p>
|
||||
</main>
|
||||
<footer>
|
||||
<img src='../img/hole_gome.webp' />
|
||||
<img src='../img/hole_gome.webp' alt='Kabouter in a hole' />
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{"word":"bridegome","pronunciation":"ˈbriːdɡoːmə","definitions":[{"part":"Noun","definitions":["A bridegroom; a man recently married or to be married.","God as Christendom's partner."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"enfeoff","pronunciation":"ɛnˈfɛf","definitions":[{"part":"Verb","definitions":["To transfer a fief to, to endow with a fief; to put in legal possession of a freehold interest.","To give up completely; to surrender, to yield."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"soi-disant","pronunciation":"ˌswɑːdɪˈzɑːn","definitions":[{"part":"Adjective","definitions":["Self-styled; self-proclaimed."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"funambulist","pronunciation":"fjuːˈnæmbjʊlɪst","definitions":[{"part":"Noun","definitions":["A tightrope walker or a similar performer on a slack rope."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"hodiernal","pronunciation":"ˌhoʊdiˈɝnəl","definitions":[{"part":"Adjective","definitions":["Of or pertaining to the present day or today; hodiern."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"effluvium","pronunciation":"ɨˈfluːvi.əm","definitions":[{"part":"Noun","definitions":["A gaseous or vaporous emission, especially a foul-smelling one.","A condition causing the shedding of hair."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"merlon","pronunciation":"ˈmɝlən","definitions":[{"part":"Noun","definitions":["Any of the upright projections between the embrasures of a battlement, originally for archers to shield behind while shooting arrows over the embrasures, or through loopholes in the merlons."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"cosmogony","pronunciation":"kɑːzˈmɑːɡəni","definitions":[{"part":"Noun","definitions":["The study of the origin, and sometimes the development, of the universe or the solar system, in astrophysics, religion, and other fields.","Any specific theory, model, myth, or other account of the origin of the universe.","The creation of the universe."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"hexameron","pronunciation":"hɛkˈsæmɝən","definitions":[{"part":"Noun","definitions":["The six days in which God created the world according to the biblical creation story."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"machicolation","pronunciation":"məˌtʃɪkəˈleɪʃən","definitions":[{"part":"Noun","definitions":["An opening between corbels that support a projecting parapet, or in the floor of a gallery or the roof of a portal, of a fortified building from which missiles can be shot or heated items dropped upon assailants attacking the base of the walls.","A projecting parapet with a series of such openings."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"cheesewright","pronunciation":"ˈtʃiːzɹaɪt","definitions":[{"part":"Noun","definitions":["A cheesemaker."]}]}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"word":"vernal","pronunciation":"ˈvɝnəl","definitions":[{"part":"Adjective","definitions":["Pertaining to or occurring in spring.","Having characteristics like spring; fresh, young, youthful."]}]}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
bridegome,ˈbriːdɡoːmə,Noun,A bridegroom; a man recently married or to be married.,God as Christendom's partner.,
|
||||
enfeoff,ɛnˈfɛf,Verb,"To transfer a fief to, to endow with a fief; to put in legal possession of a freehold interest.","To give up completely; to surrender, to yield.",
|
||||
soi-disant,ˌswɑːdɪˈzɑːn,Adjective,Self-styled; self-proclaimed.,,
|
||||
funambulist,fjuːˈnæmbjʊlɪst,Noun,A tightrope walker or a similar performer on a slack rope.,,
|
||||
hodiernal,ˌhoʊdiˈɝnəl,Adjective,Of or pertaining to the present day or today; hodiern.,,
|
||||
effluvium,ɨˈfluːvi.əm,Noun,"A gaseous or vaporous emission, especially a foul-smelling one.",A condition causing the shedding of hair.,
|
||||
merlon,ˈmɝlən,Noun,"Any of the upright projections between the embrasures of a battlement, originally for archers to shield behind while shooting arrows over the embrasures, or through loopholes in the merlons.",,
|
||||
cosmogony,kɑːzˈmɑːɡəni,Noun,"The study of the origin, and sometimes the development, of the universe or the solar system, in astrophysics, religion, and other fields.","Any specific theory, model, myth, or other account of the origin of the universe.",The creation of the universe.
|
||||
hexameron,hɛkˈsæmɝən,Noun,The six days in which God created the world according to the biblical creation story.,,
|
||||
machicolation,məˌtʃɪkəˈleɪʃən,Noun,"An opening between corbels that support a projecting parapet, or in the floor of a gallery or the roof of a portal, of a fortified building from which missiles can be shot or heated items dropped upon assailants attacking the base of the walls.",A projecting parapet with a series of such openings.,
|
||||
cheesewright,ˈtʃiːzɹaɪt,Noun,A cheesemaker.,,
|
||||
vernal,ˈvɝnəl,Adjective,Pertaining to or occurring in spring.,"Having characteristics like spring; fresh, young, youthful.",
|
||||
|
Loading…
Reference in New Issue