Compare commits
18 Commits
ab28aadbf4
...
8d71455a17
| Author | SHA1 | Date |
|---|---|---|
filifa
|
8d71455a17 | |
|
filifa
|
4bc9ac4bfa | |
|
filifa
|
68de5e6547 | |
|
filifa
|
0d63d44cfe | |
|
filifa
|
73ad0fccd1 | |
|
filifa
|
87c4ae9714 | |
|
filifa
|
6a43449b0f | |
|
filifa
|
42f501c319 | |
|
filifa
|
e73c8de725 | |
|
filifa
|
685ba98623 | |
|
filifa
|
3167974d61 | |
|
filifa
|
a1faee7307 | |
|
filifa
|
0d26a20eb7 | |
|
filifa
|
2ffb75b4aa | |
|
filifa
|
edc5e33774 | |
|
filifa
|
4eee95bdae | |
|
filifa
|
7e3d0b72dc | |
|
filifa
|
6c4268defe |
|
|
@ -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>
|
||||
|
|
@ -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-footer", DDFooter);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -4,7 +4,8 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<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>
|
||||
</head>
|
||||
|
||||
|
|
@ -20,5 +21,6 @@
|
|||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<dd-footer></dd-footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<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>
|
||||
</head>
|
||||
|
||||
|
|
@ -208,5 +209,6 @@
|
|||
</ul>
|
||||
</article>
|
||||
</main>
|
||||
<dd-footer></dd-footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
90
styles.css
90
styles.css
|
|
@ -5,47 +5,40 @@ html {
|
|||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
dd-header {
|
||||
header,
|
||||
footer,
|
||||
article,
|
||||
aside {
|
||||
border: 3px black solid;
|
||||
background: turquoise;
|
||||
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: 3px black solid;
|
||||
border-right: 0;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
flex: 1;
|
||||
border-right: 3px solid black;
|
||||
max-height: 128px;
|
||||
flex: initial;
|
||||
}
|
||||
|
||||
#headermain {
|
||||
background: turquoise;
|
||||
border: 3px black solid;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
flex: 4;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
#headermain a {
|
||||
color: blue;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#headermain a:hover {
|
||||
|
|
@ -55,65 +48,86 @@ header {
|
|||
#homelink {
|
||||
font-size: xx-large;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
nav ul,
|
||||
footer ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
nav ul li,
|
||||
footer ul li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
nav ul li + li::before {
|
||||
nav ul li + li::before,
|
||||
footer 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;
|
||||
box-shadow: 5px 5px 5px;
|
||||
display: flow-root;
|
||||
}
|
||||
|
||||
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