1  /*
  2  
  3  github.com style (c) Vasily Polovnyov <vast@whiteants.net>
  4  
  5  */
  6  
  7  .hljs {
  8    display: block;
  9    overflow-x: auto;
 10    /*padding: 0.5em;*/
 11    color: #333;
 12    background: #f8f8f8;
 13  }
 14  
 15  .hljs-comment,
 16  .hljs-quote {
 17    color: #998;
 18    font-style: italic;
 19  }
 20  
 21  .hljs-keyword,
 22  .hljs-selector-tag,
 23  .hljs-subst {
 24    color: #333;
 25    font-weight: bold;
 26  }
 27  
 28  .hljs-number,
 29  .hljs-literal,
 30  .hljs-variable,
 31  .hljs-template-variable,
 32  .hljs-tag .hljs-attr {
 33    color: #008080;
 34  }
 35  
 36  .hljs-string,
 37  .hljs-doctag {
 38    color: #d14;
 39  }
 40  
 41  .hljs-title,
 42  .hljs-section,
 43  .hljs-selector-id {
 44    color: #900;
 45    font-weight: bold;
 46  }
 47  
 48  .hljs-subst {
 49    font-weight: normal;
 50  }
 51  
 52  .hljs-type,
 53  .hljs-class .hljs-title {
 54    color: #458;
 55    font-weight: bold;
 56  }
 57  
 58  .hljs-tag,
 59  .hljs-name,
 60  .hljs-attribute {
 61    color: #000080;
 62    font-weight: normal;
 63  }
 64  
 65  .hljs-regexp,
 66  .hljs-link {
 67    color: #009926;
 68  }
 69  
 70  .hljs-symbol,
 71  .hljs-bullet {
 72    color: #990073;
 73  }
 74  
 75  .hljs-built_in,
 76  .hljs-builtin-name {
 77    color: #0086b3;
 78  }
 79  
 80  .hljs-meta {
 81    color: #999;
 82    font-weight: bold;
 83  }
 84  
 85  .hljs-deletion {
 86    background: #fdd;
 87  }
 88  
 89  .hljs-addition {
 90    background: #dfd;
 91  }
 92  
 93  .hljs-emphasis {
 94    font-style: italic;
 95  }
 96  
 97  .hljs-strong {
 98    font-weight: bold;
 99  }
100  
101  /*
102  Gutenberg: A Meaningful Web Typography Starter Kit
103  Website ....... http://matejlatin.github.io/Gutenberg/
104  Version ....... 1.2.3
105  Github ........ https://github.com/matejlatin/Gutenberg
106  Authors ....... Matej Latin (@matejlatin)
107  License ....... Creative Commmons Attribution 3.0
108  License URL ... https://raw.githubusercontent.com/matejlatin/Gutenberg/master/license.txt
109  */
110  /* Configuration
111     ========================================================================== */
112  /* Calculations
113     ========================================================================== */
114  /* Font themes
115     ========================================================================== */
116  @import url("https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic");
117  @media screen and (min-width: 40em) {
118    .floatLeft {
119      float: left;
120    }
121  }
122  
123  @media screen and (min-width: 40em) {
124    .floatCenter {
125      margin-left: auto;
126      margin-right: auto;
127    }
128  }
129  
130  @media screen and (min-width: 40em) {
131    .floatRight {
132      float: right;
133    }
134  }
135  
136  /* Grid
137     ========================================================================== */
138  .grid, .grid-double {
139    background-image: linear-gradient(to bottom, rgba(0, 170, 255, 0.3) 1px, transparent 1px);
140    background-position: left top;
141    background-repeat: repeat;
142    background-size: 100% 26px;
143    background-size: 100% 1.625rem;
144  }
145  @media screen and (min-width: 40em) {
146    .grid, .grid-double {
147      background-size: 100% 31px;
148      background-size: 100% 1.722222222222222rem;
149    }
150  }
151  
152  .grid-double {
153    background-image: linear-gradient(to bottom, rgba(0, 170, 255, 0.3) 1px, transparent 1px, transparent 13px, rgba(0, 170, 255, 0.2) 13px, transparent 14px, transparent 26px);
154  }
155  @media screen and (min-width: 40em) {
156    .grid-double {
157      background-image: linear-gradient(to bottom, rgba(0, 170, 255, 0.3) 1px, transparent 1px, transparent 15.5px, rgba(0, 170, 255, 0.2) 15.5px, transparent 16.5px, transparent 31px);
158    }
159  }
160  
161  .toggleWrapper {
162    display: block;
163    position: fixed;
164    top: 26px;
165    right: 26px;
166    background-color: #231F20;
167    border-radius: 25px;
168    padding: 0 10px 0 20px;
169    height: 32px;
170  }
171  @media screen and (min-width: 40em) {
172    .toggleWrapper {
173      right: 31px;
174      top: 31px;
175    }
176  }
177  
178  .btnToggleGrid {
179    background: url("../../assets/images/grid-icons.png") top right no-repeat;
180    background-size: 32px;
181    display: block;
182    font-size: 14px;
183    text-decoration: none;
184    padding-right: 35px;
185    height: 32px;
186    line-height: 34px;
187    font-family: Helvetica, Arial, sans-serif;
188    text-transform: uppercase;
189    font-weight: 700;
190    color: #fff;
191  }
192  @media screen and (min-width: 40em) {
193    .btnToggleGrid {
194      top: 31px;
195      right: 31px;
196    }
197  }
198  .btnToggleGrid:hover {
199    color: #fff;
200  }
201  .btnToggleGrid:active {
202    color: #f00;
203  }
204  
205  .double-grid {
206    background-position-y: -32px;
207  }
208  
209  .grid-off {
210    background-position-y: -64px;
211  }
212  
213  aside {
214    display: block;
215  }
216  
217  /* Defaults
218     ========================================================================== */
219  @media screen and (min-width: 40em) {
220    body,
221    html {
222      margin: 0;
223      width: 100%;
224      max-width: none;
225    }
226  }
227  
228  html {
229    box-sizing: border-box;
230    font-size: 16px;
231    font-size: 100%;
232    font-family: Merriweather, Georgia, serif;
233    color: #222;
234    -ms-text-size-adjust: 100%;
235    -webkit-text-size-adjust: 100%;
236  }
237  @media screen and (min-width: 40em) {
238    html {
239      font-size: 18px;
240      font-size: 1.125rem;
241    }
242  }
243  
244  * {
245    line-height: 26px;
246    line-height: 1.625rem;
247    /* margin: 0px 0px 26px; */
248    /* margin: 0rem 0rem 1.625rem; */
249  }
250  @media screen and (min-width: 40em) {
251    * {
252      line-height: 31px;
253      line-height: 1.722222222222222rem;
254      /* margin-bottom: 31px; */
255      /* margin-bottom: 1.722222222222222rem; */
256      max-width: 630px;
257      max-width: 35rem;
258      margin-left: auto;
259      margin-right: auto;
260    }
261  }
262  
263  *,
264  *::before,
265  *::after {
266    box-sizing: inherit;
267  }
268  
269  body {
270    margin: 0;
271  }
272  
273  footer {
274    display: block;
275  }
276  body > footer {
277    margin: 0 auto;
278    width: 80%;
279  }
280  
281  header {
282    display: block;
283  }
284  
285  main {
286    display: block;
287  }
288  
289  section {
290    display: block;
291  }
292  
293  /* Links
294     ========================================================================== */
295  a {
296    background: transparent;
297    color: #222;
298    transition: all .3s;
299  }
300  a:active, a:hover {
301    outline: 0;
302  }
303  a:hover {
304    color: #222;
305  }
306  a:visited {
307    color: #888;
308  }
309  a:visited:hover {
310    color: #222;
311  }
312  a:active {
313    color: #f00;
314  }
315  
316  article {
317    display: block;
318    margin: 0 auto;
319    /* width: 80%; */
320  	width: calc(90% - 1em);
321    margin-left: 1em;
322  }
323  @media screen and (min-width: 40em) {
324    article {
325      max-width: 945px;
326      max-width: 52.5rem;
327  		margin: 0 auto;
328  		width: 80%;
329  		text-align: justify;
330    }
331  }
332  
333  audio {
334    display: inline-block;
335    vertical-align: baseline;
336  }
337  audio:not([controls]) {
338    display: none;
339    height: 0;
340  }
341  
342  canvas {
343    display: inline-block;
344    vertical-align: baseline;
345  }
346  
347  pre {
348    overflow: auto;
349  }
350  
351  code,
352  kbd,
353  pre,
354  samp {
355    font-family: monospace, monospace;
356  }
357  
358  code {
359    padding: 26px;
360    padding: 1.625rem;
361    display: block;
362  }
363  @media screen and (min-width: 40em) {
364    code {
365      padding: 31px;
366      padding: 1.722222222222222rem;
367    }
368  }
369  
370  details {
371    display: block;
372  }
373  
374  summary {
375    display: block;
376  }
377  
378  figcaption {
379    line-height: 26px;
380    line-height: 1.625rem;
381    color: #222;
382    display: block;
383    font-size: .8125rem;
384    font-style: italic;
385    margin-bottom: 0;
386    text-align: center;
387  }
388  @media screen and (min-width: 40em) {
389    figcaption {
390      line-height: 31px;
391      line-height: 1.722222222222222rem;
392      margin-bottom: 0;
393    }
394  }
395  
396  figure {
397    display: block;
398  }
399  
400  @media screen and (min-width: 40em) {
401    figure.floatLeft,
402    figure.floatRight {
403      max-width: 315px;
404      max-width: 17.5rem;
405      padding: 0px 31px;
406      padding: 0rem 1.722222222222222rem;
407    }
408  }
409  @media screen and (min-width: 40em) {
410    figure.floatLeft blockquote,
411    figure.floatRight blockquote {
412      padding: 0px;
413      padding: 0rem;
414      text-align: left;
415    }
416  }
417  @media screen and (min-width: 40em) {
418    figure.floatLeft blockquote p,
419    figure.floatRight blockquote p {
420      font-size: 19.2px;
421      font-size: 1.2rem;
422      line-height: 31px;
423      line-height: 1.722222222222222rem;
424    }
425  }
426  
427  /* Headings
428     ========================================================================== */
429  h1 {
430    font-size: 40px;
431    font-size: 2.5rem;
432    line-height: 52px;
433    line-height: 3.25rem;
434    margin-top: 104px;
435    margin-top: 6.5rem;
436    margin-bottom: 26px;
437    margin-bottom: 1.625rem;
438  }
439  
440  h2 {
441    font-size: 27px;
442    font-size: 1.6875rem;
443    line-height: 39px;
444    line-height: 2.4375rem;
445    margin-top: 65px;
446    margin-top: 4.0625rem;
447    margin-bottom: 13px;
448    margin-bottom: 0.8125rem;
449  }
450  
451  h3 {
452    font-size: 22px;
453    font-size: 1.375rem;
454    line-height: 26px;
455    line-height: 1.625rem;
456    margin-top: 52px;
457    margin-top: 3.25rem;
458    margin-bottom: 13px;
459    margin-bottom: 0.8125rem;
460  }
461  
462  h4 {
463    font-size: 19.2px;
464    font-size: 1.2rem;
465    line-height: 26px;
466    line-height: 1.625rem;
467    margin-top: 39px;
468    margin-top: 2.4375rem;
469    margin-bottom: 13px;
470    margin-bottom: 0.8125rem;
471  }
472  
473  h5 {
474    font-size: 16px;
475    font-size: 1rem;
476    line-height: 26px;
477    line-height: 1.625rem;
478    margin-top: 65px;
479    margin-top: 4.0625rem;
480    margin-bottom: 13px;
481    margin-bottom: 0.8125rem;
482  }
483  
484  h6 {
485    font-size: 16px;
486    font-size: 1rem;
487    line-height: 26px;
488    line-height: 1.625rem;
489    margin-top: 65px;
490    margin-top: 4.0625rem;
491    margin-bottom: 13px;
492    margin-bottom: 0.8125rem;
493  }
494  
495  @media screen and (min-width: 40em) {
496    h1 {
497      font-size: 40px;
498      font-size: 2.5rem;
499      line-height: 62px;
500      line-height: 3.444444444444445rem;
501      margin-top: 124px;
502      margin-top: 6.888888888888889rem;
503      margin-bottom: 31px;
504      margin-bottom: 1.722222222222222rem;
505    }
506  
507    h2 {
508      font-size: 27px;
509      font-size: 1.6875rem;
510      line-height: 46.5px;
511      line-height: 2.583333333333334rem;
512      margin-top: 77.5px;
513      margin-top: 4.305555555555556rem;
514      margin-bottom: 15.5px;
515      margin-bottom: 0.861111111111111rem;
516    }
517  
518    h3 {
519      font-size: 22px;
520      font-size: 1.375rem;
521      line-height: 31px;
522      line-height: 1.722222222222222rem;
523      margin-top: 62px;
524      margin-top: 3.444444444444445rem;
525      margin-bottom: 15.5px;
526      margin-bottom: 0.861111111111111rem;
527    }
528  
529    h4 {
530      font-size: 19.2px;
531      font-size: 1.2rem;
532      line-height: 31px;
533      line-height: 1.722222222222222rem;
534      margin-top: 46.5px;
535      margin-top: 2.583333333333334rem;
536      margin-bottom: 15.5px;
537      margin-bottom: 0.861111111111111rem;
538    }
539  
540    h5 {
541      font-size: 16px;
542      font-size: 1rem;
543      line-height: 31px;
544      line-height: 1.722222222222222rem;
545      margin-top: 77.5px;
546      margin-top: 4.305555555555556rem;
547      margin-bottom: 15.5px;
548      margin-bottom: 0.861111111111111rem;
549    }
550  
551    h6 {
552      font-size: 16px;
553      font-size: 1rem;
554      line-height: 31px;
555      line-height: 1.722222222222222rem;
556      margin-top: 77.5px;
557      margin-top: 4.305555555555556rem;
558      margin-bottom: 15.5px;
559      margin-bottom: 0.861111111111111rem;
560    }
561  }
562  h1 + h2 {
563    margin-top: 26px;
564    margin-top: 1.625rem;
565  }
566  @media screen and (min-width: 40em) {
567    h1 + h2 {
568      margin-top: 31px;
569      margin-top: 1.722222222222222rem;
570    }
571  }
572  
573  h2 + h3,
574  h3 + h4,
575  h4 + h5 {
576    margin-top: 13px;
577    margin-top: 0.8125rem;
578  }
579  @media screen and (min-width: 40em) {
580    h2 + h3,
581    h3 + h4,
582    h4 + h5 {
583      margin-top: 15.5px;
584      margin-top: 0.861111111111111rem;
585    }
586  }
587  
588  h5 + h6 {
589    margin-top: -13px;
590    margin-top: -0.8125rem;
591  }
592  @media screen and (min-width: 40em) {
593    h5 + h6 {
594      margin-top: -15.5px;
595      margin-top: -0.861111111111111rem;
596    }
597  }
598  
599  h6 {
600    font-style: italic;
601    font-weight: normal;
602  }
603  
604  hgroup {
605    display: block;
606  }
607  
608  hr {
609    margin-top: 52px;
610    margin-top: 3.25rem;
611    margin-bottom: 52px;
612    margin-bottom: 3.25rem;
613    box-sizing: content-box;
614    border: 0;
615    color: #222;
616    display: block;
617    height: 26px;
618    height: 1.625rem;
619    margin-right: auto;
620    margin-left: auto;
621    background-size: 100% 26px;
622    background-size: 100% 1.625rem;
623    background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
624    width: 100px;
625  }
626  @media screen and (min-width: 40em) {
627    hr {
628      margin-top: 62px;
629      margin-top: 3.444444444444445rem;
630      margin-bottom: 62px;
631      margin-bottom: 3.444444444444445rem;
632      height: 31px;
633      height: 1.722222222222222rem;
634    }
635  }
636  @media screen and (min-width: 40em) {
637    hr {
638      background-size: 100% 31px;
639      background-size: 100% 1.722222222222222rem;
640      background-image: linear-gradient(to bottom, transparent 1px, transparent 13.5px, #222 13.5px, #222 17.5px, transparent 17.5px, transparent 31px);
641    }
642  }
643  
644  img {
645    border: 0;
646    max-width: 100%;
647    display: block;
648    margin: inherit auto;
649  }
650  
651  svg:not(:root) {
652    overflow: hidden;
653  }
654  
655  ul li,
656  ol li {
657    margin-bottom: 0;
658  }
659  
660  nav {
661    display: block;
662  }
663  
664  progress {
665    display: inline-block;
666    vertical-align: baseline;
667  }
668  
669  blockquote {
670    font-style: italic;
671    padding-left: 1.4375rem;
672  }
673  @media screen and (min-width: 40em) {
674    blockquote {
675      padding-left: 2rem;
676    }
677  }
678  
679  cite {
680    display: block;
681    font-style: normal;
682  }
683  
684  figure blockquote {
685    padding: 26px 0px;
686    padding: 1.625rem 0rem;
687  }
688  @media screen and (min-width: 40em) {
689    figure blockquote {
690      padding: 62px 0px 31px;
691      padding: 3.444444444444445rem 0rem 1.722222222222222rem;
692      text-align: center;
693    }
694  }
695  figure blockquote p {
696    font-size: 27px;
697    font-size: 1.6875rem;
698    line-height: 39px;
699    line-height: 2.4375rem;
700  }
701  @media screen and (min-width: 40em) {
702    figure blockquote p {
703      font-size: 27px;
704      font-size: 1.6875rem;
705      line-height: 46.5px;
706      line-height: 2.583333333333334rem;
707    }
708  }
709  
710  table {
711    border-collapse: collapse;
712    border-spacing: 0;
713  }
714  
715  td,
716  th {
717    padding: 0;
718  }
719  
720  [hidden],
721  template {
722    display: none;
723  }
724  
725  br {
726    margin-bottom: 0;
727  }
728  
729  abbr {
730    letter-spacing: 0.1em;
731  }
732  
733  abbr[title] {
734    border-bottom: 1px dotted;
735  }
736  
737  b,
738  strong {
739    font-weight: bold;
740  }
741  
742  dfn {
743    font-style: italic;
744  }
745  
746  em,
747  i {
748    line-height: 0;
749    position: relative;
750    vertical-align: baseline;
751  }
752  
753  mark {
754    background: #ff0;
755    color: #000;
756  }
757  
758  small {
759    line-height: 13px;
760    line-height: 0.8125rem;
761    font-size: 70%;
762  }
763  @media screen and (min-width: 40em) {
764    small {
765      line-height: 15.5px;
766      line-height: 0.861111111111111rem;
767    }
768  }
769  
770  sub,
771  sup {
772    font-size: 75%;
773    line-height: 0;
774    position: relative;
775    vertical-align: baseline;
776  }
777  
778  sup {
779    top: -0.5em;
780  }
781  
782  sub {
783    bottom: -0.25em;
784  }
785  
786  /* Paragraph
787  ========================================================================== */
788  .attention-grabber {
789    font-size: 19.2px;
790    font-size: 1.2rem;
791  }
792  
793  .alignLeft {
794    text-align: left;
795  }
796  
797  .alignCenter {
798    text-align: center;
799  }
800  
801  .alignRight {
802    text-align: right;
803  }
804  
805  .uppercase {
806    letter-spacing: .1em;
807    text-transform: uppercase;
808  }
809  
810  video {
811    display: inline-block;
812    vertical-align: baseline;
813  }
814  
815  /* TODOs:
816   - some line heights produce margins with .5 results, seemingly breaking the gird (?),
817   - add table and side comments elements,
818   */
819  
820  /*# sourceMappingURL=gutenberg.css.map */