New colors
[blog.git] / css / application.min.css
1 pre, code {
2   font-family: "Source Code Pro", monospace; }
3
4 p code, li code {
5   background-color: #fef8f8;
6   border-radius: 3px;
7   padding: 2px 5px; }
8
9 pre code, table.sourcetable pre, .source pre {
10   font-size: 0.95em;
11   line-height: 1.6em;
12   margin: 0; }
13
14 .source {
15   display: inline-block;
16   margin: 1em 1.5em; }
17
18 pre code {
19   display: block; }
20
21 pre code, div[class^='brush: '] {
22   background-color: #fef8f8;
23   width: 100%;
24   overflow: auto;
25   -webkit-overflow-scrolling: touch; }
26
27 table.sourcetable {
28   width: 100%; }
29   table.sourcetable td.linenos {
30     color: #d9b6b6;
31     white-space: nowrap;
32     width: 1%;
33     font-weight: 300; }
34   table.sourcetable pre {
35     margin: 0; }
36
37 pre code, table.sourcetable {
38   padding: 20px; }
39
40 td.linenos {
41   padding-right: 15px; }
42
43 html {
44   background-color: #fffcfc;
45   font-family: "Merriweather", serif; }
46
47 * {
48   -webkit-box-sizing: border-box;
49           box-sizing: border-box;
50   -webkit-text-size-adjust: 100%;
51   -moz-text-size-adjust: 100%;
52   -ms-text-size-adjust: 100%; }
53
54 html, body {
55   margin: 0;
56   padding: 0;
57   height: 100%;
58   width: 100%; }
59
60 #page-content {
61   display: -webkit-box;
62   display: -ms-flexbox;
63   display: flex;
64   -webkit-box-orient: vertical;
65   -webkit-box-direction: normal;
66       -ms-flex-direction: column;
67           flex-direction: column;
68   width: 100%;
69   min-height: 100%; }
70
71 #page-content > section[role=main] {
72   -webkit-box-flex: 1;
73       -ms-flex: 1;
74           flex: 1;
75   padding: 0 30px; }
76   #page-content > section[role=main] > .content {
77     margin: 0 auto;
78     padding: 40px 0;
79     max-width: 780px; }
80     @media (max-width: 550px) {
81       #page-content > section[role=main] > .content {
82         padding: 30px 0; } }
83   #page-content > section[role=main] p {
84     line-height: 1.9em; }
85   #page-content > section[role=main] li {
86     line-height: 1.8em; }
87   #page-content > section[role=main] a {
88     color: #c54747; }
89     #page-content > section[role=main] a:hover {
90       color: #d16e6e;
91       text-decoration: none; }
92
93 @media (max-width: 550px) {
94   #blog-title-header {
95     display: none; } }
96
97 #page-content > footer {
98   background-color: #e45b5b;
99   color: #fadede;
100   font-family: "Merriweather Sans", sans-serif;
101   text-align: center; }
102   #page-content > footer > .content {
103     margin: 0 auto;
104     padding: 10px 0;
105     max-width: 940px; }
106   #page-content > footer a {
107     color: inherit;
108     font-weight: bold;
109     text-decoration: underline; }
110   #page-content > footer h2, #page-content > footer h3 {
111     font-weight: 300;
112     margin: 0.8em; }
113   #page-content > footer h2 {
114     font-size: 1.1em; }
115   #page-content > footer h3 {
116     font-size: 0.8em; }
117
118 article > header .date-and-tags time {
119   color: #473737;
120   font-size: 1.5em;
121   font-weight: 300; }
122
123 article > header .tags a {
124   color: #c54747; }
125
126 article.inline > header .title {
127   font-size: 2.3em;
128   margin-bottom: 10px; }
129   @media (max-width: 550px) {
130     article.inline > header .title {
131       font-size: 2em; } }
132
133 article.inline > header .date-and-tags {
134   margin-bottom: 20px; }
135
136 article.main > header .title {
137   font-size: 2.7em;
138   margin-bottom: 10px;
139   margin-top: 0; }
140   @media (max-width: 550px) {
141     article.main > header .title {
142       font-size: 2.2em; } }
143
144 article.main > header .date-and-tags {
145   margin-bottom: 2em; }
146
147 .content h1 {
148   font-size: 2em;
149   margin-top: 2em; }
150
151 .footnotes {
152   font-size: small;
153   margin-top: 4em; }
154
155 article.main > footer {
156   margin-top: 40px; }
157
158 h1, h2, h3, h4, h5, h6 {
159   font-family: "Merriweather Sans", sans-serif; }
160
161 a {
162   text-decoration: none;
163   -webkit-transition: color 0.15s ease-in-out;
164   transition: color 0.15s ease-in-out; }
165   a:hover {
166     text-decoration: underline; }
167
168 blockquote {
169   background-color: #F6F6F6;
170   margin: 0;
171   padding: 0.5em 35px; }
172
173 .navigation-bar {
174   -webkit-box-align: center;
175       -ms-flex-align: center;
176           align-items: center;
177   background-color: #e45b5b;
178   display: -webkit-box;
179   display: -ms-flexbox;
180   display: flex;
181   font-size: 1.2em;
182   font-family: "Merriweather Sans", sans-serif;
183   font-weight: 300;
184   width: 100%; }
185   .navigation-bar a {
186     color: #fadede;
187     display: block;
188     letter-spacing: 0.1em;
189     text-transform: uppercase;
190     text-decoration: none; }
191     .navigation-bar a:hover {
192       color: white; }
193   .navigation-bar h1 {
194     margin: 5px 0;
195     text-decoration: none;
196     font-size: 1.5em;
197     font-weight: inherit; }
198   .navigation-bar .navigation-items {
199     padding: 0; }
200     .navigation-bar .navigation-items.left, .navigation-bar .navigation-items.right {
201       margin: 15px; }
202     .navigation-bar .navigation-items.center {
203       -webkit-box-flex: 1;
204           -ms-flex: 1;
205               flex: 1; }
206     .navigation-bar .navigation-items li {
207       display: inline-block;
208       margin: 0 20px; }
209
210 .pagination {
211   display: -webkit-box;
212   display: -ms-flexbox;
213   display: flex;
214   margin-top: 4em;
215   padding: 0; }
216   .pagination li {
217     -webkit-box-flex: 1;
218         -ms-flex: 1;
219             flex: 1;
220     list-style: none;
221     text-align: center; }
222     .pagination li a {
223       display: block;
224       -webkit-transition: background-color 0.25s ease-in-out;
225       transition: background-color 0.25s ease-in-out;
226       width: 90%; }
227     .pagination li.active a {
228       cursor: default; }
229     .pagination li a:hover, .pagination li.active a {
230       background-color: #e45b5b;
231       color: white !important; }
232
233 div.figure > img, article.main > p > a > img {
234   max-width: 100%; }