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

4
ddheader.js
View File

@ -5,6 +5,7 @@ class DDHeader extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<header>
<img id="headerimg" src="/dairydemon.jpg" alt="cow with glowing eyes" /> <img id="headerimg" src="/dairydemon.jpg" alt="cow with glowing eyes" />
<div id="headermain"> <div id="headermain">
<p><a id="homelink" href="/">dairydemon.net</a></p> <p><a id="homelink" href="/">dairydemon.net</a></p>
@ -15,8 +16,9 @@ class DDHeader extends HTMLElement {
</ul> </ul>
</nav> </nav>
</div> </div>
</header>
`; `;
} }
} }
customElements.define("dd-header", DDHeader, { extends: "header" }); customElements.define("dd-header", DDHeader);

2
index.html
View File

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

2
mgs/mgs.html
View File

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

7
styles.css
View File

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