remove custom elements

This commit is contained in:
filifa 2024-10-05 18:36:39 -05:00
parent 9e81c37bfd
commit dbe78c799a
5 changed files with 18 additions and 54 deletions

View File

@ -5,12 +5,10 @@
<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" /> <link rel="icon" href="favicon.ico" />
<script src="elements.js" type="text/javascript" defer></script>
<title>About</title> <title>About</title>
</head> </head>
<body> <body>
<dd-header></dd-header>
<main> <main>
<article> <article>
<h1>About.</h1> <h1>About.</h1>
@ -20,6 +18,5 @@
<p>I'm in your walls.</p> <p>I'm in your walls.</p>
</article> </article>
</main> </main>
<dd-footer></dd-footer>
</body> </body>
</html> </html>

View File

@ -5,12 +5,10 @@
<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" /> <link rel="icon" href="favicon.ico" />
<script src="elements.js" type="text/javascript" defer></script>
<title>Attributions</title> <title>Attributions</title>
</head> </head>
<body> <body>
<dd-header></dd-header>
<main> <main>
<article> <article>
<h1>Attributions.</h1> <h1>Attributions.</h1>
@ -30,6 +28,5 @@
</ul> </ul>
</article> </article>
</main> </main>
<dd-footer></dd-footer>
</body> </body>
</html> </html>

View File

@ -1,42 +0,0 @@
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);

View File

@ -5,12 +5,22 @@
<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" /> <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>
<body> <body>
<dd-header></dd-header> <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>
<main> <main>
<article> <article>
<h1>Hi.</h1> <h1>Hi.</h1>
@ -21,6 +31,11 @@
</p> </p>
</article> </article>
</main> </main>
<dd-footer></dd-footer> <footer>
<ul>
<li><a href="/about.html">about</a></li>
<li><a href="/attributions.html">attributions</a></li>
</ul>
</footer>
</body> </body>
</html> </html>

View File

@ -5,12 +5,10 @@
<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" /> <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>
<body> <body>
<dd-header></dd-header>
<main> <main>
<nav> <nav>
<h2>Contents</h2> <h2>Contents</h2>
@ -210,6 +208,5 @@
</ul> </ul>
</article> </article>
</main> </main>
<dd-footer></dd-footer>
</body> </body>
</html> </html>