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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
about.html
View File

@ -4,13 +4,14 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<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/default.css" /> <link rel="stylesheet" href="/styles/default.css" />
<link rel="stylesheet" href="/styles/about.css" />
<link rel="icon" href="/images/favicon.ico" /> <link rel="icon" href="/images/favicon.ico" />
<title>About</title> <title>About</title>
</head> </head>
<body> <body>
<header> <header>
<p id="headermain"><a id="homelink" href="/">dairydemon.net</a></p> <p><a id="homelink" href="/">dairydemon.net</a></p>
</header> </header>
<main> <main>
<article> <article>

2
attributions.html
View File

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

1
index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<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/default.css" /> <link rel="stylesheet" href="/styles/default.css" />
<link rel="stylesheet" href="/styles/index.css" />
<link rel="icon" href="/images/favicon.ico" /> <link rel="icon" href="/images/favicon.ico" />
<title>Dairy Demon</title> <title>Dairy Demon</title>
</head> </head>

2
mgs/mgs.html
View File

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

60
styles/default.css
View File

@ -18,60 +18,19 @@ main nav {
/* header and footer */ /* header and footer */
header { header {
display: flex;
align-items: center;
min-width: min-content;
}
footer {
text-align: center; 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 { #homelink {
color: blue;
text-decoration: none;
text-transform: uppercase;
font-size: xx-large; font-size: xx-large;
font-weight: bold; font-weight: bold;
} }
#headermain nav { #homelink:hover {
font-size: x-large; text-decoration: underline;
}
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: " | ";
} }
/* main content */ /* main content */
@ -108,15 +67,6 @@ ol ol ol {
list-style: lower-roman 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) { @media screen and (min-width: 80ch) {
/* to avoid zoom issues, grid layout is only used when mid-width is /* to avoid zoom issues, grid layout is only used when mid-width is
* large enough */ * 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: " | ";
}