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