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

Compare commits

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

No commits in common. "56de47415353407c25232ba18ed4fe7a812894c3" and "9e81c37bfd3e4ed698475e5ad6e211d9fdcfce4f" have entirely different histories.
56de474153 ... 9e81c37bfd

12 changed files with 120 additions and 107 deletions
Show Stats Expand all files Collapse all files

17
about.html
View File

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

16
attributions.html
View File

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

42
elements.js Normal file
View File

@ -0,0 +1,42 @@
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
images/favicon.ico → 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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1009 KiB

26
index.html
View File

@ -3,25 +3,14 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/styles/default.css" />
<link rel="stylesheet" href="/styles/index.css" />
<link rel="icon" href="/images/favicon.ico" />
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="favicon.ico" />
<script src="elements.js" type="text/javascript" defer></script>
<title>Dairy Demon</title>
</head>
<body>
<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>
<dd-header></dd-header>
<main>
<article>
<h1>Hi.</h1>
@ -32,11 +21,6 @@
</p>
</article>
</main>
<footer>
<ul>
<li><a href="/about.html">about</a></li>
<li><a href="/attributions.html">attributions</a></li>
</ul>
</footer>
<dd-footer></dd-footer>
</body>
</html>

10
mgs/mgs.html
View File

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

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

@ -18,19 +18,60 @@ main nav {
/* header and footer */
header {
display: flex;
align-items: center;
min-width: min-content;
}
footer {
text-align: center;
}
#homelink {
#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 {
font-size: xx-large;
font-weight: bold;
}
#homelink: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: " | ";
}
/* main content */
@ -67,6 +108,15 @@ ol ol ol {
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) {
/* to avoid zoom issues, grid layout is only used when mid-width is
* large enough */

8
styles/about.css
View File

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

52
styles/index.css
View File

@ -1,52 +0,0 @@
/* 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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB