static/sakura.css (view raw)
1/* Sakura.css v1.0.0
2 * ================
3 * Minimal css theme.
4 * Project: https://github.com/oxalorg/sakura
5 */
6/* Body */
7html {
8 font-size: 62.5%;
9 font-family: serif; }
10
11body {
12 font-size: 1.8rem;
13 line-height: 1.618;
14 max-width: 38em;
15 margin: auto;
16 margin-top: 10%;
17 color: #4a4a4a;
18 background-color: #f9f9f9;
19 padding: 13px; }
20
21@media (max-width: 684px) {
22 body {
23 font-size: 1.53rem; } }
24
25@media (max-width: 382px) {
26 body {
27 font-size: 1.35rem; } }
28
29h1, h2, h3, h4, h5, h6 {
30 line-height: 1.1;
31 font-family: Verdana, Geneva, sans-serif;
32 font-weight: 700;
33 overflow-wrap: break-word;
34 word-wrap: break-word;
35 -ms-word-break: break-all;
36 word-break: break-word;
37 -ms-hyphens: auto;
38 -moz-hyphens: auto;
39 -webkit-hyphens: auto;
40 hyphens: auto; }
41
42h1 {
43 font-size: 2.35em; }
44
45h2 {
46 font-size: 2.00em; }
47
48h3 {
49 font-size: 1.75em; }
50
51h4 {
52 font-size: 1.5em; }
53
54h5 {
55 font-size: 1.25em; }
56
57h6 {
58 font-size: 1em; }
59
60small, sub, sup {
61 font-size: 75%; }
62
63hr {
64 border-color: #2c8898; }
65
66a {
67 text-decoration: none;
68 color: #2c8898; }
69 a:hover {
70 color: #982c61;
71 border-bottom: 2px solid #4a4a4a; }
72
73ul {
74 padding-left: 1.4em; }
75
76li {
77 margin-bottom: 0.4em; }
78
79blockquote {
80 font-style: italic;
81 margin-left: 1.5em;
82 padding-left: 1em;
83 border-left: 3px solid #2c8898; }
84
85img {
86 max-width: 100%; }
87
88/* Pre and Code */
89pre {
90 background-color: #f1f1f1;
91 display: block;
92 padding: 1em;
93 overflow-x: auto; }
94
95code {
96 font-size: 0.9em;
97 padding: 0 0.5em;
98 background-color: #f1f1f1;
99 white-space: pre-wrap; }
100
101pre > code {
102 padding: 0;
103 background-color: transparent;
104 white-space: pre; }
105
106/* Tables */
107table {
108 text-align: justify;
109 width: 100%;
110 border-collapse: collapse; }
111
112td, th {
113 padding: 0.5em;
114 border-bottom: 1px solid #f1f1f1; }
115
116/* Buttons, forms and input */
117input, textarea {
118 border: 1px solid #4a4a4a; }
119 input:focus, textarea:focus {
120 border: 1px solid #2c8898; }
121
122textarea {
123 width: 100%; }
124
125.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
126 display: inline-block;
127 padding: 5px 10px;
128 text-align: center;
129 text-decoration: none;
130 white-space: nowrap;
131 background-color: #2c8898;
132 color: #f9f9f9;
133 border-radius: 1px;
134 border: 1px solid #2c8898;
135 cursor: pointer;
136 box-sizing: border-box; }
137 .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
138 cursor: default;
139 opacity: .5; }
140 .button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover {
141 background-color: #982c61;
142 border-color: #982c61;
143 color: #f9f9f9;
144 outline: 0; }
145
146textarea, select, input[type] {
147 color: #4a4a4a;
148 padding: 6px 10px;
149 /* The 6px vertically centers text on FF, ignored by Webkit */
150 margin-bottom: 10px;
151 background-color: #f1f1f1;
152 border: 1px solid #f1f1f1;
153 border-radius: 4px;
154 box-shadow: none;
155 box-sizing: border-box; }
156 textarea:focus, select:focus, input[type]:focus {
157 border: 1px solid #2c8898;
158 outline: 0; }
159
160input[type="checkbox"]:focus {
161 outline: 1px dotted #2c8898; }
162
163label, legend, fieldset {
164 display: block;
165 margin-bottom: .5rem;
166 font-weight: 600; }