230 lines
3.6 KiB
CSS
230 lines
3.6 KiB
CSS
/* Since this site is about teaching web concepts, even this file is a learning
|
|
* opportunity. */
|
|
|
|
body {
|
|
color: beige;
|
|
background: #111;
|
|
margin-bottom: 200px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: lightgreen;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
color: deeppink;
|
|
font-variant: small-caps;
|
|
font-size: 24pt;
|
|
border-bottom: dashed #ddd 1px;
|
|
max-width: 500px;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
h3 {
|
|
color: gold;
|
|
}
|
|
|
|
/* "a" is for links. */
|
|
a {
|
|
color: lightblue;
|
|
}
|
|
|
|
/* The "hover" option, which can be used with pretty much anything, allows you
|
|
* to set different settings if someone hovers over something with their mouse.
|
|
* */
|
|
a:hover {
|
|
color: white;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* code and pre are for formatting monospace text commands. Use code generally,
|
|
* but pre is for separate code blocks. pre is also sensitive to whitespace,
|
|
* unlike most of HTML. */
|
|
code {
|
|
color: lime;
|
|
border-radius: 5px;
|
|
}
|
|
pre {
|
|
background: #111222;
|
|
border: 1px solid lime;
|
|
border-radius: 20px;
|
|
padding: 1em;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
max-width: 600px;
|
|
margin: auto;
|
|
}
|
|
|
|
.wide { max-width: inherit; }
|
|
|
|
p img, li img, h1 img, h2 img, h3 img, h4 img, dt img {
|
|
vertical-align: middle;
|
|
max-width: 1em;
|
|
max-height: 1em;
|
|
border: none;
|
|
display: inline;
|
|
}
|
|
|
|
img {
|
|
max-width: 90%;
|
|
margin: auto;
|
|
display: block;
|
|
border: solid 5px beige;
|
|
}
|
|
.titleimg {
|
|
border: none;
|
|
height: 150px;
|
|
}
|
|
strong {
|
|
color: orange;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
font-variant: small-caps;
|
|
clear: both;
|
|
padding: 2em 0;
|
|
}
|
|
footer li {
|
|
display: inline-block;
|
|
padding: 0 .5em;
|
|
font-size: x-large;
|
|
}
|
|
footer li:hover {
|
|
background: lightblue;
|
|
}
|
|
|
|
nav { font-size: small;}
|
|
|
|
footer { font-size: large; }
|
|
|
|
nav ul, footer ul, #taglist {
|
|
padding: 0;
|
|
}
|
|
|
|
main {
|
|
margin: auto;
|
|
}
|
|
|
|
/* asides are used for minor tangential notes. I have them shrunk down in
|
|
* softer colors in a box with soft corners (border-radius). */
|
|
|
|
aside {
|
|
border: solid 1px black;
|
|
border-radius: 20px;
|
|
padding: 0 1em 0 1em;
|
|
font-size: small;
|
|
}
|
|
|
|
aside p {
|
|
color: gray;
|
|
}
|
|
|
|
aside code {
|
|
color: green;
|
|
}
|
|
|
|
/* .callout here is refencing any aside given the class name callout
|
|
* An example being: <aside class="callout"> */
|
|
aside.callout {
|
|
border: solid 1px orange;
|
|
}
|
|
|
|
.cnp {
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
/* This "@media" block defines rules that will only be applied when the minimum
|
|
* width of the screen is 55em or greater. In essence, they are settings that
|
|
* only apply on normal weide screens, but *not* phones and low res monitors.
|
|
* Since we have more room on widescreens, we change a couple things. */
|
|
|
|
@media (min-width: 55em) {
|
|
|
|
aside {
|
|
margin: 0 30px 0 30px;
|
|
}
|
|
|
|
.resright, .disappear {
|
|
display: block;
|
|
float: right;
|
|
padding: 20px;
|
|
clear: both;
|
|
max-height: 400px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
header { max-width: 900px; margin: auto;}
|
|
main { max-width: 850px; }
|
|
}
|
|
|
|
.ll {
|
|
font-size: large;
|
|
line-height: 1.3em;
|
|
max-width: 600px;
|
|
margin: auto;
|
|
}
|
|
|
|
.ll dd {
|
|
display: inline;
|
|
}
|
|
|
|
.ll dt {
|
|
display: inline-block;
|
|
width: 6em;
|
|
}
|
|
|
|
.ll dd:after {
|
|
display:block;
|
|
content: '';
|
|
}
|
|
|
|
/* The "Next Article" Button changes color and also has a 👉 automatically
|
|
* added to its front. */
|
|
|
|
@-webkit-keyframes next {
|
|
0% {color: yellow;}
|
|
100% {color: lightblue}
|
|
}
|
|
|
|
.prev {
|
|
font-size: large;
|
|
text-align: center;
|
|
margin: auto;
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.prev:before {
|
|
content: "👈";
|
|
}
|
|
|
|
.next a {
|
|
color: inherit;
|
|
}
|
|
|
|
.next {
|
|
-webkit-animation:next 1s infinite alternate;
|
|
font-size: xx-large;
|
|
text-align: center;
|
|
margin: auto;
|
|
display: block;
|
|
font-weight: bold;
|
|
padding: 0 1em 1em 1em;
|
|
}
|
|
|
|
.next:before {
|
|
content: "👉";
|
|
}
|