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

Compare commits

base: filifa:8d71455a17c2c5cbc7b63eb56fdd9f5f0c81daa8
Branches Tags
filifa:main
..
compare: filifa:ab28aadbf4d337f65b1e7afdf84f5d5fa97b3fe7
Branches Tags
filifa:main

No commits in common. "8d71455a17c2c5cbc7b63eb56fdd9f5f0c81daa8" and "ab28aadbf4d337f65b1e7afdf84f5d5fa97b3fe7" have entirely different histories.
8d71455a17 ... ab28aadbf4

7 changed files with 40 additions and 100 deletions
Show Stats Expand all files Collapse all files

25
about.html
View File

@ -1,25 +0,0 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<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>
<dd-header></dd-header>
<main>
<article>
<h1>About.</h1>
<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" />
<p>I'm in your walls.</p>
</article>
</main>
<dd-footer></dd-footer>
</body>
</html>

17
elements.js → ddheader.js
View File

@ -21,21 +21,4 @@ class DDHeader extends HTMLElement {
} }
} }
class DDFooter extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<footer>
<ul>
<li><a href="/about.html">about</a></li>
</ul>
</footer>
`;
}
}
customElements.define("dd-header", DDHeader); customElements.define("dd-header", DDHeader);
customElements.define("dd-footer", DDFooter);

BIN
favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

4
index.html
View File

@ -4,8 +4,7 @@
<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.css" />
<link rel="icon" href="favicon.ico" /> <script src="ddheader.js" type="text/javascript" defer></script>
<script src="elements.js" type="text/javascript" defer></script>
<title>Dairy Demon</title> <title>Dairy Demon</title>
</head> </head>
@ -21,6 +20,5 @@
</p> </p>
</article> </article>
</main> </main>
<dd-footer></dd-footer>
</body> </body>
</html> </html>

4
mgs/mgs.html
View File

@ -4,8 +4,7 @@
<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.css" />
<link rel="icon" href="favicon.ico" /> <script src="/ddheader.js" type="text/javascript" defer></script>
<script src="/elements.js" type="text/javascript" defer></script>
<title>Metal Gear Solid Trivia</title> <title>Metal Gear Solid Trivia</title>
</head> </head>
@ -209,6 +208,5 @@
</ul> </ul>
</article> </article>
</main> </main>
<dd-footer></dd-footer>
</body> </body>
</html> </html>

90
styles.css
View File

@ -5,40 +5,47 @@ html {
min-height: 100%; min-height: 100%;
} }
header, body {
footer, display: flex;
article, flex-direction: column;
aside { align-items: center;
border: 3px black solid; }
background: turquoise;
dd-header {
margin: 5px; margin: 5px;
width: 80ch;
max-width: 100%;
box-shadow: 5px 5px 5px; box-shadow: 5px 5px 5px;
} }
header { header {
height: 110px;
flex: auto;
display: flex; display: flex;
align-items: center; align-items: center;
} }
footer {
text-align: center;
}
#headerimg { #headerimg {
border-right: 3px solid black; border: 3px black solid;
max-height: 128px; border-right: 0;
flex: initial; max-height: 100%;
object-fit: cover;
flex: 1;
} }
#headermain { #headermain {
background: turquoise;
border: 3px black solid;
text-align: center; text-align: center;
flex: auto; height: 100%;
flex: 4;
} }
#headermain a { #headermain a {
color: blue; color: blue;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
text-align: center;
} }
#headermain a:hover { #headermain a:hover {
@ -48,86 +55,65 @@ footer {
#homelink { #homelink {
font-size: xx-large; font-size: xx-large;
font-weight: bold; font-weight: bold;
text-decoration: none;
} }
nav { nav {
font-size: x-large; font-size: x-large;
} }
nav ul, nav ul {
footer ul {
padding: 0; padding: 0;
} }
nav ul li, nav ul li {
footer ul li {
display: inline; display: inline;
} }
nav ul li + li::before, nav ul li + li::before {
footer ul li + li::before {
content: " | "; content: " | ";
} }
main {
flex: auto;
}
aside { aside {
background: turquoise;
border: 3px black solid;
margin: 5px;
padding: 10px; padding: 10px;
box-shadow: 5px 5px 5px;
} }
article { article {
background: turquoise;
border: 3px black solid;
margin: 5px;
padding: 20px; padding: 20px;
text-align: justify; text-align: justify;
hyphens: auto; hyphens: auto;
display: flow-root; box-shadow: 5px 5px 5px;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
text-align: left; text-align: left;
} }
ul {
padding-left: 2ch;
}
ol {
padding-left: 3ch;
}
ol ol {
list-style: lower-alpha
}
ol ol ol {
list-style: lower-roman
}
#usbimg {
width: 256px;
max-width: 100%;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
@media screen and (min-width: 80ch) { @media screen and (min-width: 80ch) {
body {
display: grid;
place-content: center;
}
main { main {
min-width: 100%;
display: flex; display: flex;
align-items: start; align-items: start;
} }
aside { aside {
width: 30ch;
flex: auto; flex: auto;
position: sticky; position: sticky;
top: 10px; top: 10px;
} }
article { article {
width: 80ch;
max-width: 80ch; max-width: 80ch;
flex: auto; flex: auto;
} }

BIN
usb.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB