markdown-viewer/themes/new-modern.css

/* Title: New Modern */
/* Author: Jocelyn Richard http://jocelynrichard.com/ */
/* Description: Baseline style, meant to be used on its own or to serve as development basis. */

/* ================================================ */
/* 1. Reset */
/* 2. Skeleton */
/* 3. Media Queries */
/* 4. Print Styles */
/* ================================================ */



/* ================================================ */
/* 1. Reset */
/* ================================================ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0;} /* Edited from http://www.cssreset.com/scripts/eric-meyer-reset-css/ */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display: block;} /* Semantic tags definition for IE 6/7/8/9 and Firefox 3 */

html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* Prevents iOS text size adjust after orientation change, without disabling user zoom */



/* ================================================ */
/* 2. Skeleton */
/* ================================================ */

/* ------------------------------------------------- */
/* General */
/* ------------------------------------------------- */

html {
  font-size: 14px;
}

body {
  font-family: 'Open Sans', sans-serif;
  /*margin: 3.42rem 1.71rem !important;*/ /* Get margins even if the Markdown rendering app doesn't include any */
  background-color: white;
  color: #222;
}

#wrapper { /* #wrapper: ID added by Marked */
  max-width: 42rem;
  margin: 0 auto;
  margin-left: auto !important;  /* Countering toc.css added by Marked */
  padding: 1.71rem 0 !important; /* Countering toc.css added by Marked */
}

/* ------------------------------------------------- */
/* Typography */
/* ------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 1.6rem;
}

h1,
h2 {
    margin-top: 3.2rem;
}

h1 {
    font-size:   2.82rem; /* 42.3px @15px */
    line-height: 3.2rem;  /* 48px @15px */
}

h2 {
    font-size:   1.99rem; /* 29.9px @15px */
    line-height: 2.4rem;  /* 36px @15px */
}

h3 {
    font-size:   1.41rem; /* 21.2px @15px */
    line-height: 2rem;    /* 30px @15px */
}

h4 {
    font-size:   1rem;   /* 15px @15px */
    line-height: 1.6rem; /* 24px @15px */
}

h5, h6 {
  font-size:   0.8rem;
    line-height: 1.2rem;
    text-transform: uppercase;
}

h6 {
  margin-left: 1.6rem;
}

p,
ol,
ul,
blockquote {
    font-size:     1rem;
    line-height:   1.6rem;
    margin-bottom: 1.6rem;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-left: 1.6rem;
  margin-top:  1.6rem;
}

#generated-toc ul ul, /* #generated-toc: added by Marked for its table of contents */
#generated-toc ul ol,
#generated-toc ol ul,
#generated-toc ol ol {
  margin-top:     0;
  margin-bottom:  0;
  padding-top:    0;
  padding-bottom: 0;
}

blockquote {
  margin: 0 0 1.6rem 2.4rem;
  padding-left: 0.8rem; /* Voire */
  border-left: 4px solid rgba(0,0,0,0.08);
  font-style: normal;
}

blockquote ul {
  margin-left: 0.8rem; /* Pour ne pas que les hanging bullets mordent sur le blockquote  */
}

ol li blockquote, /* So that blockquote work in lists */
ul li blockquote {
  margin-left: 0;
}

a:link {
  text-decoration: none;
  color: #165bd4;
  border-bottom: 1px solid #ccc;
}

a:visited {
  color: #7697cf;
  border-bottom: 1px solid #ccc;
}

a:hover {
  border-color: #165bd4;
}

a:active {
  background-color: #e6e6e6;
}

/* ------------------------------------------------- */
/* Tables */
/* ------------------------------------------------- */

table {
  font-size: 0.85rem;
  margin: 0 0 1.6rem 0;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

th,
td {
  padding: 0.5rem 0.75rem;
  max-width: 20rem; /* Avoid dropping lines for nothing without having ridiculously wide tables */
}

th {
  border-bottom: 2px solid #222;
}

tr {
  border-bottom: 1px solid #ccc;
}

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

table code {
  font-size: 85%;
}

/* ------------------------------------------------- */
/* Misc */
/* ------------------------------------------------- */

img {
  max-width: 100%
}

caption,
figcaption {
  font-size:   0.85rem;
    line-height: 1.6rem;
  margin: 0 1.6rem;
  text-align: left;
}

figcaption {
  margin-bottom: 1.6rem;
}

h1, /* White-space mentions in order to force wrapping */
h2,
a:link,
pre {
  white-space:      pre;      /* CSS 2.0 */
  white-space:      pre-wrap; /* CSS 2.1 */
  white-space:      pre-line; /* CSS 3.0 */
  white-space:     -pre-wrap; /* Opera 4-6 */
  white-space:   -o-pre-wrap; /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space:  -hp-pre-wrap; /* HP Printers */
  word-wrap: break-word;      /* IE 5+ */
}

code {
  font-family: "Menlo", "Courier New", "Courier", monospace;
  font-size: 85%;
  color: #666;
  background-color: rgba(0,0,0,0.08);
  padding: 2px 4px;
  border-radius: 2px;
}

pre {
  background-color: rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 0.4rem;
  margin-bottom: 1.6rem;
}

pre code { /* Counter the code mentions */
  background-color: transparent;
  padding: 0;
}

sup,
sub,
a.footnote { /* Keep line-height from being affected by sub, cf https://gist.github.com/unruthless/413930 */
   font-size: 75%;
   height: 0;
   line-height: 1;
   position: relative;
}

sup,
a.footnote {
    vertical-align:super;
}

sub {
    vertical-align: sub;
}

dt {
  font-weight: 600;
}

dd {
  font-size: 1rem;
  line-height: 1.6rem;
  margin-bottom: 1.6rem;
}

hr {
  clear: none;
  height: 0.2rem;
  border: none;
  margin: 0 auto 1.4rem auto; /* 2.4rem auto 2.2rem auto; */
  width: 100%;
  color: #ccc;
  background-color: #ccc;
}

::selection {
  background-color: #f8dc77;
}

::-moz-selection {
  background-color: #f8dc77;
}

a:focus {
  outline: 2px solid;
  outline-color: #165bd4;
}

/* ------------------------------------------------- */
/* Animations */
/* ------------------------------------------------- */

a:hover {
     -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
     -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}



/* ================================================ */
/* 3. Media Queries */
/* ================================================ */

/* Base styles are for smartphones; elements are then tweaked as the viewport grows. */

/* ------------------------------------------------- */
/* iPad and desktop */
/* ------------------------------------------------- */

@media only screen and (min-width: 641px) {

  html {
    font-size: 15px;
  }

  body {
    /*margin: 4.8em 2.4rem 3.2rem 2.4rem !important;*/
  }

  h1 {
      font-size:   3.57rem; /* 53.2px @15px */
    line-height: 4rem;    /* 60px @15px */
  }

  h2 {
    font-size:   2.24rem; /* 33.6px @15px */
    line-height: 2.8rem;  /* 42px @15px */
  }

}

/* ------------------------------------------------- */
/* Widescreens */
/* ------------------------------------------------- */

@media only screen and (min-width: 1441px) {

  html {
    font-size: 22px;
  }

}



/* ================================================ */
/* 4. Print Styles */
/* ================================================ */

/* Inconsistent and buggy across browsers */

@media print {

  * {
    background: transparent !important;
    color: #000 !important; /* Black text prints faster and browsers are inconsistent in color reproduction anyway: h5bp.com/s */
  }

  @page {
    margin: 1cm; /* Added to any #wrapper margin*/
  }

  html {
    font-size: 15px;
  }

  body {
    margin: 1rem !important; /* Security margins for browser without @page support */
  }

  #wrapper {
    max-width: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    orphans: 3;
    widows: 3;
    page-break-after: avoid;
  }

  ul,
  ol {
    list-style-position: inside !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }

  ul ul,
  ul ol,
  ol ul,
  ol ol,
  ul p:not(:first-child),
  ol p:not(:first-child) {
    margin-left: 2rem !important;
  }

  a:link,
  a:visited {
    text-decoration: underline !important;
    font-weight: normal !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; /* Do not show javascript and internal links */
  }

  a[href^="#"] {
    text-decoration: none !important;
  }

  th {
    background-color: rgba(0,0,0,0.2) !important;
    border-bottom: none !important;
  }

  tr {
    page-break-inside: avoid;
  }

  tbody tr:nth-child(even) {
    background-color: rgba(0,0,0,0.1) !important;
  }

  pre {
    border: 1px solid rgba(0,0,0,0.2);
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* #generated-toc: added by Marked for its table of contents */

  #wrapper #generated-toc ul, /* Table of contents printing in Marked */
  #wrapper #generated-toc ol {
    list-style-type: decimal;
  }

  #wrapper #generated-toc ul li,
  #wrapper #generated-toc ol li {
    margin: 1rem 0;
  }

}