Compare commits
No commits in common. "8d71455a17c2c5cbc7b63eb56fdd9f5f0c81daa8" and "ab28aadbf4d337f65b1e7afdf84f5d5fa97b3fe7" have entirely different histories.
8d71455a17
...
ab28aadbf4
25
about.html
25
about.html
|
|
@ -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>
|
||||
|
|
@ -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-footer", DDFooter);
|
||||
BIN
favicon.ico
BIN
favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -4,8 +4,7 @@
|
|||
<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>
|
||||
<script src="ddheader.js" type="text/javascript" defer></script>
|
||||
<title>Dairy Demon</title>
|
||||
</head>
|
||||
|
||||
|
|
@ -21,6 +20,5 @@
|
|||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<dd-footer></dd-footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<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>
|
||||
<script src="/ddheader.js" type="text/javascript" defer></script>
|
||||
<title>Metal Gear Solid Trivia</title>
|
||||
</head>
|
||||
|
||||
|
|
@ -209,6 +208,5 @@
|
|||
</ul>
|
||||
</article>
|
||||
</main>
|
||||
<dd-footer></dd-footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
90
styles.css
90
styles.css
|
|
@ -5,40 +5,47 @@ html {
|
|||
min-height: 100%;
|
||||
}
|
||||
|
||||
header,
|
||||
footer,
|
||||
article,
|
||||
aside {
|
||||
border: 3px black solid;
|
||||
background: turquoise;
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
dd-header {
|
||||
margin: 5px;
|
||||
width: 80ch;
|
||||
max-width: 100%;
|
||||
box-shadow: 5px 5px 5px;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 110px;
|
||||
flex: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#headerimg {
|
||||
border-right: 3px solid black;
|
||||
max-height: 128px;
|
||||
flex: initial;
|
||||
border: 3px black solid;
|
||||
border-right: 0;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#headermain {
|
||||
background: turquoise;
|
||||
border: 3px black solid;
|
||||
text-align: center;
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
#headermain a {
|
||||
color: blue;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#headermain a:hover {
|
||||
|
|
@ -48,86 +55,65 @@ footer {
|
|||
#homelink {
|
||||
font-size: xx-large;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
nav ul,
|
||||
footer ul {
|
||||
nav ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li,
|
||||
footer ul li {
|
||||
nav ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
nav ul li + li::before,
|
||||
footer ul li + li::before {
|
||||
nav ul li + li::before {
|
||||
content: " | ";
|
||||
}
|
||||
|
||||
main {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
aside {
|
||||
background: turquoise;
|
||||
border: 3px black solid;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
box-shadow: 5px 5px 5px;
|
||||
}
|
||||
|
||||
article {
|
||||
background: turquoise;
|
||||
border: 3px black solid;
|
||||
margin: 5px;
|
||||
padding: 20px;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
display: flow-root;
|
||||
box-shadow: 5px 5px 5px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
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) {
|
||||
body {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
main {
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 30ch;
|
||||
flex: auto;
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 80ch;
|
||||
max-width: 80ch;
|
||||
flex: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue