templates/style/screen.css

   1 html {
   2         line-height: 1.3;
   3         -webkit-text-size-adjust:100%
   4 }
   5
   6 body {
   7         background-color: rgba(255, 255, 255);
   8         font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   9         margin: 0;
  10         padding: 0;
  11 }
  12
  13 .container {
  14         display: grid;
  15         grid-template:
  16                 "head head" 7em
  17                 "nav main" auto
  18                 "nav foot" 2em / 15em 1fr;
  19         margin: 0 auto;
  20         min-height: 100vh;
  21         padding: 0;
  22         width: 60em;
  23 }
  24
  25 header {
  26         grid-area: head;
  27 }
  28
  29 header h1 {
  30         font-size: 2em;
  31 }
  32
  33 nav {
  34         background-color: rgb(250, 250, 250);
  35         grid-area: nav;
  36         padding: 1em;
  37 }
  38
  39 nav > ul {
  40         list-style-type: none;
  41         padding: 0;
  42 }
  43
  44 nav > ul > li > ul {
  45         list-style-type: square;
  46 }
  47
  48 main {
  49         grid-area: main;
  50         padding: 1em;
  51 }
  52
  53 footer {
  54         font-size: 0.6em;
  55         grid-area: foot;
  56         padding: 1em;
  57         text-align: right;
  58 }
  59
  60 img {
  61         max-width: 100%;
  62         margin: 0 auto;
  63         max-height: 75vh;
  64         border-radius:4px
  65 }
  66
  67 a {
  68         border-bottom: 1px solid rgb(217, 217, 217);
  69         color: rgb(26, 26, 26);
  70         text-decoration: none;
  71         padding: 0 0.1em;
  72 }
  73
  74 a:hover {
  75         background: rgb(255, 250, 241);
  76         color:  #000 !important;
  77 }
  78
  79 h1, h2, h3, h4, h5, h6 {
  80         line-height: 1.3;
  81         margin-bottom: 0;
  82         padding-bottom: 0;
  83 }
  84
  85 :is(h1, h2, h3) {
  86         line-height: 1.2;
  87 }
  88
  89 :is(h1, h2) {
  90         max-width: 40ch;
  91 }
  92
  93 :is(h2, h3):not(:first-child) {
  94         margin-top: 2em;
  95 }
  96
  97 hr {
  98         margin: 4em auto;
  99         border: 0;
 100         height: 1px;
 101         background: #ccc;
 102 }
 103
 104
 105 code:not([class*="language"]) {
 106         font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 107         font-size: 1.75ex;
 108         color: #444;
 109         background-color: rgba(0, 0, 0, 0.1);
 110         padding-right: 0.15em;
 111         padding-left: 0.15em;
 112 }
 113
 114 pre code {
 115         margin: 2rem 0;
 116         padding: 0.5em 1rem;
 117         display: block;
 118         border-left: 3px solid rgba(0, 0, 0, 0.35);
 119         background-color: rgba(0, 0, 0, 0.05);
 120         border-radius: 0 0.25rem 0.25rem 0;
 121         overflow-x: auto;
 122         font-size: 0.8em !important;
 123 }
 124
 125 blockquote {
 126         margin: 2rem 0;
 127         padding: 0.5em 1rem;
 128         border-left: 3px solid rgba(0, 0, 0, 0.35);
 129         background-color: rgba(0, 0, 0, 0.05);
 130         border-radius: 0 0.25rem 0.25rem 0;
 131 }
 132
 133 a.feed {
 134         color: #f26522;
 135 }
 136
 137 a.feed:hover {
 138         background: none !important;
 139         color: #bc4e1b !important;
 140 }
 141