new favicon
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Ben Harris 2021-10-10 18:15:00 -04:00
parent 448e5169a0
commit 3441d65ada
8 changed files with 90 additions and 106 deletions

View File

@ -1,5 +1,9 @@
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="theme-color" content="#DDD">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="stylesheet" type="text/css" href="/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml"> <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml">

BIN
android-chrome-192x192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
android-chrome-512x512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 B

BIN
favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.7 KiB

After

Width:  |  Height:  |  Size: 15 KiB

190
style.css
View File

@ -2,136 +2,136 @@
* opportunity. */ * opportunity. */
body { body {
color: beige ; color: beige;
background: #111 ; background: #111;
margin-bottom: 200px ; margin-bottom: 200px;
font-family: sans-serif ; font-family: monospace;
} }
h1 { h1 {
text-align: center ; text-align: center;
color: lightgreen ; color: lightgreen;
} }
header h1 { header h1 {
font-size: 40px ; font-size: 40px;
} }
h2 { h2 {
text-align: center ; text-align: center;
color: deeppink ; color: deeppink;
font-variant: small-caps; font-variant: small-caps;
font-size: 24pt ; font-size: 24pt;
border-bottom: dashed #ddd 1px ; border-bottom: dashed #ddd 1px;
max-width: 500px ; max-width: 500px;
margin: 1em auto ; margin: 1em auto;
} }
h3 { h3 {
color: gold ; color: gold;
} }
/* "a" is for links. */ /* "a" is for links. */
a { a {
color: lightblue ; color: lightblue;
} }
/* The "hover" option, which can be used with pretty much anything, allows you /* 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. * to set different settings if someone hovers over something with their mouse.
* */ * */
a:hover { a:hover {
color: white ; color: white;
} }
dt { dt {
font-weight: bold ; font-weight: bold;
} }
/* code and pre are for formatting monospace text commands. Use code generally, /* 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, * but pre is for separate code blocks. pre is also sensitive to whitespace,
* unlike most of HTML. */ * unlike most of HTML. */
code { code {
color: lime ; color: lime;
border-radius: 5px ; border-radius: 5px;
} }
pre { pre {
background: #111222 ; background: #111222;
border: 1px solid lime ; border: 1px solid lime;
border-radius: 20px ; border-radius: 20px;
padding: 1em ; padding: 1em;
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: break-word ; overflow-wrap: break-word;
max-width: 600px ; max-width: 600px;
margin: auto ; margin: auto;
} }
.wide { max-width: inherit ; } .wide { max-width: inherit; }
p img, li img, h1 img, h2 img, h3 img, h4 img, dt img { p img, li img, h1 img, h2 img, h3 img, h4 img, dt img {
vertical-align: middle ; vertical-align: middle;
max-width: 1em; max-width: 1em;
max-height: 1em; max-height: 1em;
border: none ; border: none;
display: inline ; display: inline;
} }
img { img {
max-width: 90% ; max-width: 90%;
margin: auto ; margin: auto;
display: block ; display: block;
border: solid 5px beige ; border: solid 5px beige;
} }
.titleimg { .titleimg {
border: none ; border: none;
height: 150px ; height: 150px;
} }
strong { strong {
color: orange ; color: orange;
} }
footer { footer {
text-align: center ; text-align: center;
font-variant: small-caps ; font-variant: small-caps;
clear: both ; clear: both;
padding: 2em 0 ; padding: 2em 0;
} }
footer li { footer li {
display: inline-block ; display: inline-block;
padding: 0 .5em ; padding: 0 .5em;
font-size: x-large ; font-size: x-large;
} }
footer li:hover { 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 { nav ul, footer ul, #taglist {
padding: 0; padding: 0;
} }
main { main {
margin: auto ; margin: auto;
} }
/* asides are used for minor tangential notes. I have them shrunk down in /* asides are used for minor tangential notes. I have them shrunk down in
* softer colors in a box with soft corners (border-radius). */ * softer colors in a box with soft corners (border-radius). */
aside { aside {
border: solid 1px black ; border: solid 1px black;
border-radius: 20px ; border-radius: 20px;
padding: 0 1em 0 1em ; padding: 0 1em 0 1em;
font-size: small ; font-size: small;
} }
aside p { aside p {
color: gray ; color: gray;
} }
aside code { aside code {
color: green ; color: green;
} }
/* .callout here is refencing any aside given the class name callout /* .callout here is refencing any aside given the class name callout
@ -141,7 +141,7 @@ aside.callout {
} }
.cnp { .cnp {
width: 100% ; width: 100%;
} }
@ -157,93 +157,73 @@ aside.callout {
} }
.resright, .disappear { .resright, .disappear {
display: block ; display: block;
float: right; float: right;
padding: 20px ; padding: 20px;
clear: both ; clear: both;
max-height: 400px ; max-height: 400px;
max-width: 300px ; max-width: 300px;
} }
header { max-width: 900px ; margin: auto;} header { max-width: 900px; margin: auto;}
main { max-width: 850px ; } main { max-width: 850px; }
} }
.ll { .ll {
font-size: large ; font-size: large;
line-height: 1.3em ; line-height: 1.3em;
max-width: 600px; max-width: 600px;
margin: auto ; margin: auto;
} }
.ll dd { .ll dd {
display: inline ; display: inline;
} }
.ll dt { .ll dt {
display: inline-block ; display: inline-block;
width: 6em ; width: 6em;
} }
.ll dd:after { .ll dd:after {
display:block; display:block;
content: '' ; 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 ;
} }
/* The "Next Article" Button changes color and also has a 👉 automatically /* The "Next Article" Button changes color and also has a 👉 automatically
* added to its front. */ * added to its front. */
@-webkit-keyframes next { @-webkit-keyframes next {
0% {color: yellow ;} 0% {color: yellow;}
100% {color: lightblue} 100% {color: lightblue}
} }
.prev { .prev {
font-size: large ; font-size: large;
text-align: center ; text-align: center;
margin: auto ; margin: auto;
display: block ; display: block;
font-weight: bold ; font-weight: bold;
} }
.prev:before { .prev:before {
content: "👈" ; content: "👈";
} }
.next a { .next a {
color: inherit ; color: inherit;
} }
.next { .next {
-webkit-animation:next 1s infinite alternate ; -webkit-animation:next 1s infinite alternate;
font-size: xx-large ; font-size: xx-large;
text-align: center ; text-align: center;
margin: auto ; margin: auto;
display: block ; display: block;
font-weight: bold ; font-weight: bold;
padding: 0 1em 1em 1em ; padding: 0 1em 1em 1em;
} }
.next:before { .next:before {
content: "👉" ; content: "👉";
} }