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

redo css

Browse Source
This commit is contained in:
filifa
2025-12-29 18:40:15 -05:00
parent 55e889b71d
commit d32c065d30
3 changed files with 9 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -11,7 +11,7 @@
<body> <body>
<header> <header>
<div id="headerimg"></div> <img id="headerimg" src="/images/watching.jpg" alt="cows with red eyes" width="128" height="128" />
<div id="headermain"> <div id="headermain">
<a id="homelink" href="/">dairydemon.net</a> <a id="homelink" href="/">dairydemon.net</a>
<p id="tagline">located several wrong turns off the Information Superhighway</p> <p id="tagline">located several wrong turns off the Information Superhighway</p>

37
styles/default.css
View File

@@ -6,19 +6,15 @@ html {
min-height: 100%; min-height: 100%;
} }
header, body {
footer,
article,
main nav {
border: 3px black solid;
background: turquoise; background: turquoise;
margin: 5px; max-width: 80ch;
box-shadow: 2px 2px 2px; margin: 0 auto;
} }
/* header and footer */ /* header and footer */
header { header {
text-align: center; padding: 1rem;
} }
#homelink { #homelink {
@@ -68,30 +64,7 @@ ol ol ol {
} }
@media screen and (min-width: 80ch) { @media screen and (min-width: 80ch) {
/* to avoid zoom issues, grid layout is only used when mid-width is
* large enough */
body { body {
display: grid; border: 3px black solid;
justify-content: center;
}
main {
/* min-width is set due to zoom issues */
min-width: 100%;
display: flex;
align-items: start;
}
main nav {
flex: auto;
position: sticky;
top: 10px;
}
article {
/* width is set for the about page */
width: 80ch;
max-width: 80ch;
flex: auto;
} }
} }

13
styles/index.css
View File

@@ -1,8 +1,6 @@
/* header and footer */ /* header and footer */
header { header {
display: flex; padding: 0;
align-items: center;
flex-flow: wrap;
} }
footer { footer {
@@ -10,16 +8,11 @@ footer {
} }
#headerimg { #headerimg {
border-right: 3px solid black; float: right;
width: 128px;
background-image: url("/images/watching.jpg");
flex: initial;
align-self: stretch;
} }
#headermain { #headermain {
text-align: center; padding: 1rem;
flex: auto;
} }
#headermain a { #headermain a {