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         max-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 @media (max-width: 800px) {
  61         .container {
  62                 grid-template:
  63                         "head" 7em
  64                         "main" auto
  65                         "nav" auto
  66                         "foot" 2em / 1fr;
  67         }
  68
  69         header {
  70                 padding: 1em;
  71         }
  72 }
  73
  74 img {
  75         max-width: 100%;
  76         margin: 0 auto;
  77         max-height: 75vh;
  78         border-radius:4px
  79 }
  80
  81 a {
  82         border-bottom: 1px solid rgb(217, 217, 217);
  83         color: rgb(26, 26, 26);
  84         text-decoration: none;
  85         padding: 0 0.1em;
  86 }
  87
  88 a:hover {
  89         background: rgb(255, 250, 241);
  90         color:  #000 !important;
  91 }
  92
  93 h1, h2, h3, h4, h5, h6 {
  94         line-height: 1.3;
  95         margin-bottom: 0;
  96         padding-bottom: 0;
  97 }
  98
  99 :is(h1, h2, h3) {
 100         line-height: 1.2;
 101 }
 102
 103 :is(h1, h2) {
 104         max-width: 40ch;
 105 }
 106
 107 :is(h2, h3):not(:first-child) {
 108         margin-top: 2em;
 109 }
 110
 111 hr {
 112         margin: 4em auto;
 113         border: 0;
 114         height: 1px;
 115         background: #ccc;
 116 }
 117
 118
 119 code:not([class*="language"]) {
 120         font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 121         font-size: 1.75ex;
 122         color: #444;
 123         background-color: rgba(0, 0, 0, 0.1);
 124         padding-right: 0.15em;
 125         padding-left: 0.15em;
 126 }
 127
 128 pre code {
 129         margin: 2rem 0;
 130         padding: 0.5em 1rem;
 131         display: block;
 132         border-left: 3px solid rgba(0, 0, 0, 0.35);
 133         background-color: rgba(0, 0, 0, 0.05);
 134         border-radius: 0 0.25rem 0.25rem 0;
 135         overflow-x: auto;
 136         font-size: 0.8em !important;
 137 }
 138
 139 blockquote {
 140         margin: 2rem 0;
 141         padding: 0.5em 1rem;
 142         border-left: 3px solid rgba(0, 0, 0, 0.35);
 143         background-color: rgba(0, 0, 0, 0.05);
 144         border-radius: 0 0.25rem 0.25rem 0;
 145 }
 146
 147 a.feed {
 148         color: #f26522;
 149 }
 150
 151 a.feed:hover {
 152         background: none !important;
 153         color: #bc4e1b !important;
 154 }
 155