create stylesheets for each page

This commit is contained in:
filifa 2024-10-05 19:15:34 -05:00
parent 658b07f27b
commit 13f693d312
7 changed files with 70 additions and 58 deletions

View File

@ -4,13 +4,14 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/styles/default.css" />
<link rel="stylesheet" href="/styles/about.css" />
<link rel="icon" href="/images/favicon.ico" />
<title>About</title>
</head>
<body>
<header>
<p id="headermain"><a id="homelink" href="/">dairydemon.net</a></p>
<p><a id="homelink" href="/">dairydemon.net</a></p>
</header>
<main>
<article>

View File

@ -10,7 +10,7 @@
<body>
<header>
<p id="headermain"><a id="homelink" href="/">dairydemon.net</a></p>
<p><a id="homelink" href="/">dairydemon.net</a></p>
</header>
<main>
<article>

View File

@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/styles/default.css" />
<link rel="stylesheet" href="/styles/index.css" />
<link rel="icon" href="/images/favicon.ico" />
<title>Dairy Demon</title>
</head>

View File

@ -10,7 +10,7 @@
<body>
<header>
<p id="headermain"><a id="homelink" href="/">dairydemon.net</a></p>
<p><a id="homelink" href="/">dairydemon.net</a></p>
</header>
<main>
<nav>

8
styles/about.css Normal file
View File

@ -0,0 +1,8 @@
#usbimg {
width: 256px;
height: auto;
max-width: 100%;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}

View File

@ -18,60 +18,19 @@ main nav {
/* header and footer */
header {
display: flex;
align-items: center;
min-width: min-content;
}
footer {
text-align: center;
}
#headerimg {
border-right: 3px solid black;
width: 128px;
background-image: url("/images/watching.jpg");
flex: initial;
align-self: stretch;
}
#headermain {
text-align: center;
flex: auto;
}
#headermain a {
color: blue;
text-decoration: none;
text-transform: uppercase;
}
#headermain a:hover {
text-decoration: underline;
}
#homelink {
color: blue;
text-decoration: none;
text-transform: uppercase;
font-size: xx-large;
font-weight: bold;
}
#headermain nav {
font-size: x-large;
}
nav ul,
footer ul {
padding: 0;
}
nav ul li,
footer ul li {
display: inline;
}
nav ul li + li::before,
footer ul li + li::before {
content: " | ";
#homelink:hover {
text-decoration: underline;
}
/* main content */
@ -108,15 +67,6 @@ ol ol ol {
list-style: lower-roman
}
#usbimg {
width: 256px;
height: auto;
max-width: 100%;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
@media screen and (min-width: 80ch) {
/* to avoid zoom issues, grid layout is only used when mid-width is
* large enough */

52
styles/index.css Normal file
View File

@ -0,0 +1,52 @@
/* header and footer */
header {
display: flex;
align-items: center;
min-width: min-content;
}
footer {
text-align: center;
}
#headerimg {
border-right: 3px solid black;
width: 128px;
background-image: url("/images/watching.jpg");
flex: initial;
align-self: stretch;
}
#headermain {
text-align: center;
flex: auto;
}
#headermain a {
color: blue;
text-decoration: none;
text-transform: uppercase;
}
#headermain a:hover {
text-decoration: underline;
}
#headermain nav {
font-size: x-large;
}
nav ul,
footer ul {
padding: 0;
}
nav ul li,
footer ul li {
display: inline;
}
nav ul li + li::before,
footer ul li + li::before {
content: " | ";
}