create stylesheets for each page
This commit is contained in:
parent
658b07f27b
commit
13f693d312
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
#usbimg {
|
||||
width: 256px;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
float: left;
|
||||
}
|
|
@ -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 */
|
||||
|
|
|
@ -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: " | ";
|
||||
}
|
Loading…
Reference in New Issue