sawv.org CSS as of May 2019

created May 22, 2019

A few weeks ago, I modified the inline CSS that I use in web posts, created and updated here. I'm not going to rebuild the old posts to use the new CSS. The new CSS is not a lot different. It's smaller and simpler.

body{
  /* font size approx 22 px */
  font:1.375em/1.62 sans-serif;
  margin: 0 auto 1em auto;
  max-width:30em;
  padding:0 .62em;
  color: #222; 
  background-color: #fff8dc; /* cornsilk */
}
body {font-family: system-ui, sans-serif;}
body {font-family: system-ui, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", Verdana, "Helvetica", sans-serif;}
h1,h2,h3 {line-height:1.2;}
h1 {font-size: 1.4em; margin: .7em 0 0 0;}
h2 {font-size: 1.3em; font-weight: 400;}
h3 {font-size: 1.2em; margin-top: 3em;}
h4 {font-size: 1.05em;}
p {margin: 1.8em 0 1.8em 0;}
img {max-width: 100%;}
pre,code{font-size: 1em; line-height: 1; background: #f8f8f8; white-space: -moz-pre-wrap; white-space: pre-wrap;}
blockquote {background: #E3F2FD; border-left: 1px solid #666; padding: 0 0 0 .681em;}
a:visited {color: purple;}
a {color: blue; text-decoration: underline;}
li {margin-top: .2em; margin-bottom: .2em;}
b,h1,h3,h4,h5,strong { color: #000;}
blockquote {margin: 1.8em 0 1.8em .7em;}
ul {margin-bottom: 1.8em;}
li ul {margin-bottom:0; padding-bottom:0;}
@media print{
   body {
      max-width:none;
      font-size: 18px;
      color: #000;
      background: #fff;
      line-height: normal;
   }
}
/* sawv.org specific */
.home-link {
  float: right; 
  display: inline; 
  font-size: 80%;
  text-align: right;
  width: 100%;
  top: 5px;
  left: 0;
  position: absolute;
  height: 20px;
  text-transform: lowercase;
  line-height: 90%;
}
.sitewide-footer {text-align: center; font-size: .9em;}
.home-link a,
.sitewide-footer a,
.home-link a:visited,
.sitewide-footer a:visited {
    color: #666;
    text-decoration: none;
}
.blacklinks a,
.blacklinks a:visited {
    color: #222;
    text-decoration: none
}
.home-link a:hover, 
.sitewide-footer a:hover,
.blacklinks a:hover {
    color: #000;
    text-decoration: underline
}

I tested the above CSS for a while at this page.

http://sora.soupmode.com/more-article-format-testing-2.html

If less CSS was desired, I probably use what exists within this page.

http://sora.soupmode.com/2019/01/03/web-article-design-testing-03jan2019.html

body{
    margin:1em auto;
    max-width: 30em;
    padding:0 .62em;
    font-size: 1.375em;
    line-height: 1.62;
    font-family: sans-serif;
    overflow-wrap: break-word;
    /*overflow-wrap: anywhere;*/ 
}
h1,h2,h3 {line-height:1.2;}
h1 {font-size: 1.3em;}
h2 {font-size: 1.2em;}
h3 {font-size: 1.1em;}
p {margin: 1.8em 0 1.8em 0;}
img {max-width: 100%;}
@media print{
    body{max-width:none}
}

I rarely use my table of contents feature in web posts. I removed the following CSS from my new May 2019 inline CSS.

#toc {
    font-size: .8em;
    float: right;
    background: #f0fff0;
    display: inline;
    width: 12.5em;
    text-align: left;
    border: 1px solid #ccc;
    line-height: 1.2em;
    padding-top: .3em;
    padding-bottom: .3em;
    margin: 1.2em -3em 1.2em 1.2em;
}

.toclevel1 {margin-left:0;}
.toclevel2 {margin-left:.3em;}
.toclevel3 {margin-left:.6em;}
.toclevel4 {margin-left:.9em;}
.toclevel5 {margin-left:1.2em;}
.toclevel6 {margin-left:1.5em;}

Aug 21, 2019

I added the following to the body tag

overflow-wrap: break-word;
/*overflow-wrap: anywhere;*/

Aug 27, 2019

"Show HN: A clean and minimalist theme for Jekyll (github.com)"
https://github.com/huangyz0918/moving
https://news.ycombinator.com/item?id=20806300

That HN thread contains links to other similar projects. This is nice, minimalist theme for reading and writing websites.

https://bradleytaunt.com/typesafe-css
https://bradleytaunt.com/

The theme contains a very small amount of CSS, which is wonderful. I may test some of it, especially these aspects.

ul li, ol li {
    margin-top: 0.5rem;
}

table {
    border-collapse: collapse;
    margin: 2rem 0;
    text-align: left;
    width: 100%;
}

tr {
    border-bottom: 1px solid lightgrey;
}

th,td {
    padding: 0.5rem;
}

hr {
    background: lightgrey;
    border: 0;
    height: 1px;
    margin: 2rem 0;
}

Interesting small CSS framework.

https://concrete.style

-30-