diff --git a/.nav.html b/.nav.html
index a5ae347..90e41f5 100644
--- a/.nav.html
+++ b/.nav.html
@@ -1,5 +1,9 @@
+
-
+
+
+
+
\ No newline at end of file
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
new file mode 100644
index 0000000..b487fa3
Binary files /dev/null and b/android-chrome-192x192.png differ
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
new file mode 100644
index 0000000..ff39388
Binary files /dev/null and b/android-chrome-512x512.png differ
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644
index 0000000..72d064b
Binary files /dev/null and b/apple-touch-icon.png differ
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..0246ca9
Binary files /dev/null and b/favicon-16x16.png differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..4443f0d
Binary files /dev/null and b/favicon-32x32.png differ
diff --git a/favicon.ico b/favicon.ico
index d8f549d..63006c0 100644
Binary files a/favicon.ico and b/favicon.ico differ
diff --git a/style.css b/style.css
index 5167903..ec19602 100644
--- a/style.css
+++ b/style.css
@@ -2,136 +2,136 @@
* opportunity. */
body {
- color: beige ;
- background: #111 ;
- margin-bottom: 200px ;
- font-family: sans-serif ;
+ color: beige;
+ background: #111;
+ margin-bottom: 200px;
+ font-family: monospace;
}
h1 {
- text-align: center ;
- color: lightgreen ;
+ text-align: center;
+ color: lightgreen;
}
header h1 {
- font-size: 40px ;
+ font-size: 40px;
}
h2 {
- text-align: center ;
- color: deeppink ;
+ text-align: center;
+ color: deeppink;
font-variant: small-caps;
- font-size: 24pt ;
- border-bottom: dashed #ddd 1px ;
- max-width: 500px ;
- margin: 1em auto ;
+ font-size: 24pt;
+ border-bottom: dashed #ddd 1px;
+ max-width: 500px;
+ margin: 1em auto;
}
h3 {
- color: gold ;
+ color: gold;
}
/* "a" is for links. */
a {
- color: lightblue ;
+ 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 ;
+ color: white;
}
dt {
- font-weight: bold ;
+ 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 ;
+ color: lime;
+ border-radius: 5px;
}
pre {
- background: #111222 ;
- border: 1px solid lime ;
- border-radius: 20px ;
- padding: 1em ;
+ background: #111222;
+ border: 1px solid lime;
+ border-radius: 20px;
+ padding: 1em;
white-space: pre-wrap;
- overflow-wrap: break-word ;
- max-width: 600px ;
- margin: auto ;
+ overflow-wrap: break-word;
+ max-width: 600px;
+ margin: auto;
}
-.wide { max-width: inherit ; }
+.wide { max-width: inherit; }
p img, li img, h1 img, h2 img, h3 img, h4 img, dt img {
- vertical-align: middle ;
+ vertical-align: middle;
max-width: 1em;
max-height: 1em;
- border: none ;
- display: inline ;
+ border: none;
+ display: inline;
}
img {
- max-width: 90% ;
- margin: auto ;
- display: block ;
- border: solid 5px beige ;
+ max-width: 90%;
+ margin: auto;
+ display: block;
+ border: solid 5px beige;
}
.titleimg {
- border: none ;
- height: 150px ;
+ border: none;
+ height: 150px;
}
strong {
- color: orange ;
+ color: orange;
}
footer {
- text-align: center ;
- font-variant: small-caps ;
- clear: both ;
- padding: 2em 0 ;
+ text-align: center;
+ font-variant: small-caps;
+ clear: both;
+ padding: 2em 0;
}
footer li {
- display: inline-block ;
- padding: 0 .5em ;
- font-size: x-large ;
+ display: inline-block;
+ padding: 0 .5em;
+ font-size: x-large;
}
footer li:hover {
- background: lightblue ;
+ background: lightblue;
}
-nav { font-size: small ;}
+nav { font-size: small;}
-footer { font-size: large ; }
+footer { font-size: large; }
nav ul, footer ul, #taglist {
padding: 0;
}
main {
- margin: auto ;
+ 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 ;
+ border: solid 1px black;
+ border-radius: 20px;
+ padding: 0 1em 0 1em;
+ font-size: small;
}
aside p {
- color: gray ;
+ color: gray;
}
aside code {
- color: green ;
+ color: green;
}
/* .callout here is refencing any aside given the class name callout
@@ -141,7 +141,7 @@ aside.callout {
}
.cnp {
- width: 100% ;
+ width: 100%;
}
@@ -157,93 +157,73 @@ aside.callout {
}
.resright, .disappear {
- display: block ;
+ display: block;
float: right;
- padding: 20px ;
- clear: both ;
- max-height: 400px ;
- max-width: 300px ;
+ padding: 20px;
+ clear: both;
+ max-height: 400px;
+ max-width: 300px;
}
- header { max-width: 900px ; margin: auto;}
- main { max-width: 850px ; }
+ header { max-width: 900px; margin: auto;}
+ main { max-width: 850px; }
}
.ll {
- font-size: large ;
- line-height: 1.3em ;
+ font-size: large;
+ line-height: 1.3em;
max-width: 600px;
- margin: auto ;
+ margin: auto;
}
.ll dd {
- display: inline ;
+ display: inline;
}
.ll dt {
- display: inline-block ;
- width: 6em ;
+ display: inline-block;
+ width: 6em;
}
.ll dd:after {
display:block;
- content: '' ;
-}
-
-
-/* These settings are for the cryptocurrency donation QR codes and info on the
- * main page. */
-.qr { max-width: 150px ; padding: 10px; border: none; }
-.cryptocontainer {
- display: flex ;
- flex-wrap: wrap ;
- justify-content: center ;
-}
-.cryptoinfo {
- max-width: 350px ;
- text-align: center ;
- padding-left: 10px ;
- padding-right: 10px ;
-}
-.cryptoinfo code,.crypto {
- font-size: small ;
- overflow-wrap: break-word ;
+ content: '';
}
/* The "Next Article" Button changes color and also has a 👉 automatically
* added to its front. */
@-webkit-keyframes next {
- 0% {color: yellow ;}
+ 0% {color: yellow;}
100% {color: lightblue}
}
.prev {
- font-size: large ;
- text-align: center ;
- margin: auto ;
- display: block ;
- font-weight: bold ;
+ font-size: large;
+ text-align: center;
+ margin: auto;
+ display: block;
+ font-weight: bold;
}
.prev:before {
- content: "👈" ;
+ content: "👈";
}
.next a {
- color: inherit ;
+ 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 ;
+ -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: "👉" ;
+ content: "👉";
}