filifa
/
dairydemon.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: filifa:9e81c37bfd3e4ed698475e5ad6e211d9fdcfce4f
Branches Tags
filifa:main
...
compare: filifa:56de47415353407c25232ba18ed4fe7a812894c3
Branches Tags
filifa:main

5 Commits
9e81c37bfd ... 56de474153

Author SHA1 Message Date
filifa 56de474153 replace about image 2024-10-05 22:13:55 -05:00
filifa 13f693d312 create stylesheets for each page 2024-10-05 20:03:42 -05:00
filifa 658b07f27b restructure 2024-10-05 18:57:50 -05:00
filifa d67b31bc40 create a simpler header for non-main pages 2024-10-05 18:41:27 -05:00
filifa dbe78c799a remove custom elements 2024-10-05 18:36:39 -05:00
12 changed files with 109 additions and 122 deletions
Show Stats Expand all files Collapse all files

17
about.html
View File

@ -3,23 +3,24 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="/styles/default.css" />
<link rel="icon" href="favicon.ico" /> <link rel="stylesheet" href="/styles/about.css" />
<script src="elements.js" type="text/javascript" defer></script> <link rel="icon" href="/images/favicon.ico" />
<title>About</title> <title>About</title>
</head> </head>
<body> <body>
<dd-header></dd-header> <header>
<p><a id="homelink" href="/">dairydemon.net</a></p>
</header>
<main> <main>
<article> <article>
<h1>About.</h1> <h1>About.</h1>
<img id="usbimg" src="usb.jpg" alt="an unsettling comic showing a man <img id="aboutimg" src="/images/loveland-frog.png" alt="an artist's
putting a usb dongle into his mouth and moving his face with rendering of the Loveland frog monster" width=944 height=850
the connected mouse" width=320 height=393 /> />
<p>I'm in your walls.</p> <p>I'm in your walls.</p>
</article> </article>
</main> </main>
<dd-footer></dd-footer>
</body> </body>
</html> </html>

16
attributions.html
View File

@ -3,14 +3,15 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="/styles/default.css" />
<link rel="icon" href="favicon.ico" /> <link rel="icon" href="/images/favicon.ico" />
<script src="elements.js" type="text/javascript" defer></script>
<title>Attributions</title> <title>Attributions</title>
</head> </head>
<body> <body>
<dd-header></dd-header> <header>
<p><a id="homelink" href="/">dairydemon.net</a></p>
</header>
<main> <main>
<article> <article>
<h1>Attributions.</h1> <h1>Attributions.</h1>
@ -23,13 +24,14 @@
<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a> <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
</li> </li>
<li> <li>
That weird usb mouse comic on the about page is "<a href="https://commons.wikimedia.org/wiki/File:Loveland_frog.png">Loveland frog</a>"
by by
<a href="https://www.instagram.com/hunter.slugdaddy/">Hunter Scheiderer</a> <a href="https://commons.wikimedia.org/wiki/User:Triangulum">Tim Bertelink</a>
is licensed under
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
</li> </li>
</ul> </ul>
</article> </article>
</main> </main>
<dd-footer></dd-footer>
</body> </body>
</html> </html>

42
elements.js
View File

@ -1,42 +0,0 @@
class DDHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<header>
<div id="headerimg"></div>
<div id="headermain">
<p><a id="homelink" href="/">dairydemon.net</a></p>
<nav>
<ul>
<li><a href="https://social.dairydemon.net">mastodon</a></li>
<li><a href="https://scm.dairydemon.net">git</a></li>
</ul>
</nav>
</div>
</header>
`;
}
}
class DDFooter extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<footer>
<ul>
<li><a href="/about.html">about</a></li>
<li><a href="/attributions.html">attributions</a></li>
</ul>
</footer>
`;
}
}
customElements.define("dd-header", DDHeader);
customElements.define("dd-footer", DDFooter);

0
favicon.ico → images/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/loveland-frog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1009 KiB

0
watching.jpg → images/watching.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

26
index.html
View File

@ -3,14 +3,25 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="/styles/default.css" />
<link rel="icon" href="favicon.ico" /> <link rel="stylesheet" href="/styles/index.css" />
<script src="elements.js" type="text/javascript" defer></script> <link rel="icon" href="/images/favicon.ico" />
<title>Dairy Demon</title> <title>Dairy Demon</title>
</head> </head>
<body> <body>
<dd-header></dd-header> <header>
<div id="headerimg"></div>
<div id="headermain">
<p><a id="homelink" href="/">dairydemon.net</a></p>
<nav>
<ul>
<li><a href="https://social.dairydemon.net">mastodon</a></li>
<li><a href="https://scm.dairydemon.net">git</a></li>
</ul>
</nav>
</div>
</header>
<main> <main>
<article> <article>
<h1>Hi.</h1> <h1>Hi.</h1>
@ -21,6 +32,11 @@
</p> </p>
</article> </article>
</main> </main>
<dd-footer></dd-footer> <footer>
<ul>
<li><a href="/about.html">about</a></li>
<li><a href="/attributions.html">attributions</a></li>
</ul>
</footer>
</body> </body>
</html> </html>

10
mgs/mgs.html
View File

@ -3,14 +3,15 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/styles.css" /> <link rel="stylesheet" href="/styles/default.css" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/images/favicon.ico" />
<script src="/elements.js" type="text/javascript" defer></script>
<title>Metal Gear Solid Trivia</title> <title>Metal Gear Solid Trivia</title>
</head> </head>
<body> <body>
<dd-header></dd-header> <header>
<p><a id="homelink" href="/">dairydemon.net</a></p>
</header>
<main> <main>
<nav> <nav>
<h2>Contents</h2> <h2>Contents</h2>
@ -210,6 +211,5 @@
</ul> </ul>
</article> </article>
</main> </main>
<dd-footer></dd-footer>
</body> </body>
</html> </html>

8
styles/about.css Normal file
View File

@ -0,0 +1,8 @@
#aboutimg {
width: 256px;
height: auto;
max-width: 100%;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}

60
styles.css → styles/default.css
View File

@ -18,60 +18,19 @@ main nav {
/* header and footer */ /* header and footer */
header { header {
display: flex;
align-items: center;
min-width: min-content;
}
footer {
text-align: center; text-align: center;
} }
#headerimg {
border-right: 3px solid black;
width: 128px;
background-image: url("/watching.jpg");
flex: initial;
align-self: stretch;
}
#headermain {
text-align: center;
flex: auto;
}
#headermain a {
color: blue;
text-decoration: none;
text-transform: uppercase;
}
#headermain a:hover {
text-decoration: underline;
}
#homelink { #homelink {
color: blue;
text-decoration: none;
text-transform: uppercase;
font-size: xx-large; font-size: xx-large;
font-weight: bold; font-weight: bold;
} }
#headermain nav { #homelink:hover {
font-size: x-large; text-decoration: underline;
}
nav ul,
footer ul {
padding: 0;
}
nav ul li,
footer ul li {
display: inline;
}
nav ul li + li::before,
footer ul li + li::before {
content: " | ";
} }
/* main content */ /* main content */
@ -108,15 +67,6 @@ ol ol ol {
list-style: lower-roman list-style: lower-roman
} }
#usbimg {
width: 256px;
height: auto;
max-width: 100%;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
@media screen and (min-width: 80ch) { @media screen and (min-width: 80ch) {
/* to avoid zoom issues, grid layout is only used when mid-width is /* to avoid zoom issues, grid layout is only used when mid-width is
* large enough */ * large enough */

52
styles/index.css Normal file
View File

@ -0,0 +1,52 @@
/* header and footer */
header {
display: flex;
align-items: center;
min-width: min-content;
}
footer {
text-align: center;
}
#headerimg {
border-right: 3px solid black;
width: 128px;
background-image: url("/images/watching.jpg");
flex: initial;
align-self: stretch;
}
#headermain {
text-align: center;
flex: auto;
}
#headermain a {
color: blue;
text-decoration: none;
text-transform: uppercase;
}
#headermain a:hover {
text-decoration: underline;
}
#headermain nav {
font-size: x-large;
}
nav ul,
footer ul {
padding: 0;
}
nav ul li,
footer ul li {
display: inline;
}
nav ul li + li::before,
footer ul li + li::before {
content: " | ";
}

BIN
usb.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB