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

try to fix header on webkit browsers

This commit is contained in:
filifa 2024-03-25 22:44:54 -05:00
parent afdb07bec3
commit ab28aadbf4
4 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ddheader.js
View File

@ -5,18 +5,20 @@ class DDHeader extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<img id="headerimg" src="/dairydemon.jpg" alt="cow with glowing eyes" />
<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>
<img id="headerimg" src="/dairydemon.jpg" alt="cow with glowing eyes" />
<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>
`;
}
}
customElements.define("dd-header", DDHeader, { extends: "header" });
customElements.define("dd-header", DDHeader);

2
index.html
View File

@ -9,7 +9,7 @@
</head>
<body>
<header is="dd-header"></header>
<dd-header></dd-header>
<main>
<article>
<h1>Hi.</h1>

2
mgs/mgs.html
View File

@ -9,7 +9,7 @@
</head>
<body>
<header is="dd-header"></header>
<dd-header></dd-header>
<main>
<aside>
<ol>

7
styles.css
View File

@ -11,12 +11,15 @@ body {
align-items: center;
}
header {
dd-header {
margin: 5px;
width: 80ch;
max-width: 100%;
height: 110px;
box-shadow: 5px 5px 5px;
}
header {
height: 110px;
flex: auto;
display: flex;
align-items: center;