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

Compare commits

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

18 Commits
ab28aadbf4 ... 8d71455a17

Author SHA1 Message Date
filifa 8d71455a17 add favicon 2024-05-27 21:44:16 -05:00
filifa 4bc9ac4bfa change file name 2024-05-27 21:39:50 -05:00
filifa 68de5e6547 minor adjustments 2024-05-27 21:33:47 -05:00
filifa 0d63d44cfe change max-width 2024-05-27 21:00:27 -05:00
filifa 73ad0fccd1 float the usb guy 2024-05-27 20:59:40 -05:00
filifa 87c4ae9714 group common styling 2024-05-27 20:31:44 -05:00
filifa 6a43449b0f mess with header 2024-05-27 20:25:00 -05:00
filifa 42f501c319 move border and background to header 2024-05-27 18:35:52 -05:00
filifa e73c8de725 remove custom component styles 2024-05-27 18:32:59 -05:00
filifa 685ba98623 move usbimg to media query 2024-05-27 18:31:28 -05:00
filifa 3167974d61 combine header and footer element styles 2024-05-27 18:30:56 -05:00
filifa a1faee7307 move the whole grid display to the media query 2024-05-27 17:46:20 -05:00
filifa 0d26a20eb7 fix width on about page 2024-05-27 17:16:06 -05:00
filifa 2ffb75b4aa fix slight width inconsistencies 2024-05-27 16:56:31 -05:00
filifa edc5e33774 add footer styling 2024-05-27 15:24:03 -05:00
filifa 4eee95bdae add a footer 2024-05-27 15:17:21 -05:00
filifa 7e3d0b72dc add an about page 2024-05-27 14:39:07 -05:00
filifa 6c4268defe adjust list styling 2024-05-27 09:37:59 -05:00
7 changed files with 100 additions and 40 deletions
Show Stats Expand all files Collapse all files

25
about.html Normal file
View File

@ -0,0 +1,25 @@
<!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
ddheader.js → elements.js
View File

@ -21,4 +21,21 @@ 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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
index.html
View File

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

4
mgs/mgs.html
View File

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

90
styles.css
View File

@ -5,47 +5,40 @@ html {
min-height: 100%; min-height: 100%;
} }
body { header,
display: flex; footer,
flex-direction: column; article,
align-items: center; aside {
} 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: 3px black solid; border-right: 3px solid black;
border-right: 0; max-height: 128px;
max-height: 100%; flex: initial;
object-fit: cover;
flex: 1;
} }
#headermain { #headermain {
background: turquoise;
border: 3px black solid;
text-align: center; text-align: center;
height: 100%; flex: auto;
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 {
@ -55,65 +48,86 @@ header {
#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;
box-shadow: 5px 5px 5px; display: flow-root;
} }
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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB