]> git.bts.cx Git - garden.git/blob - templates/style/screen.css
Better phone support for layout
[garden.git] / 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