jekyll-theme-gouvfr 0.0.1

data/assets/template.css

@@ -0,0 +1,1686 @@
+body {
+  font-family: "Source Sans Pro", Arial, sans-serif;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Evolventa", "Trebuchet MS", sans-serif;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.25em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+p {
+  line-height: 1.5em;
+}
+
+.subtitle {
+  color: #8393a7;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+blockquote {
+  background-color: #ebeff3;
+  border-left: 8px solid #c9d3df;
+  padding: 4px 0 4px 25px;
+}
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+  font-size: 16px;
+}
+
+#icon-search {
+  fill: #adb9c9;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  position: relative;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+  background: #ebeff3;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+a,
+a:hover,
+a:focus,
+a:visited,
+a:active {
+  color: #0081d5;
+  text-decoration: none;
+  -webkit-transition: color 0.2s ease-out;
+  transition: color 0.2s ease-out;
+}
+
+small {
+  font-size: 0.875em;
+}
+
+.tag-list {
+  padding: 0;
+  margin: 0;
+}
+
+.tag {
+  background: #0081d5;
+  border-radius: 3px;
+  display: inline-block;
+  padding: 0.3em 0.8em;
+  margin-right: 0.5em;
+  color: #fff;
+}
+
+.tag a {
+  color: #fff;
+}
+
+.modals .button {
+  margin: auto;
+}
+
+table {
+  background: #fff;
+  border: #c9d3df;
+  border-radius: 2px;
+  -webkit-box-shadow: 0 1px 4px #c9d3df;
+          box-shadow: 0 1px 4px #c9d3df;
+  position: relative;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+td,
+th {
+  padding: 1em;
+  text-align: left;
+}
+
+td {
+  border-top: 1px solid #adb9c9;
+}
+
+thead th {
+  background: #ebeff3;
+  font-size: 1.1em;
+}
+
+tr:hover {
+  background: #fafbfc;
+}
+
+pre {
+  display: block;
+  margin-top: 1em;
+}
+
+code {
+  background: #ebeff3;
+  border-radius: 3px;
+  padding: 0.5em;
+  font-family: 'Courier New';
+  word-break: break-word;
+  white-space: pre-wrap;
+  vertical-align: middle;
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+pre code {
+  font-size: 1em;
+  padding: 1em;
+}
+
+a.button,
+a.button:focus,
+a.button:active,
+a.button:visited,
+button.button,
+button.button:focus,
+button.button:active,
+button.button:visited,
+input[type="button"],
+input[type="button"]:focus,
+input[type="button"]:active,
+input[type="button"]:visited {
+  display: inline-block;
+  padding: 0.5em 2em;
+  color: #fff;
+  background-color: #0081d5;
+  border-radius: 3px;
+  border: 0;
+  -webkit-box-shadow: 0 2px #006cb0;
+          box-shadow: 0 2px #006cb0;
+  font-family: "Source Sans Pro", Arial, sans-serif;
+  font-size: 1em;
+  position: relative;
+  top: 0;
+  overflow: hidden;
+}
+
+a.button:hover,
+button.button:hover,
+input[type="button"]:hover {
+  background: #006cb0;
+}
+
+a.button:active,
+button.button:active,
+input[type="button"]:hover {
+  -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+  border-bottom: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+a.button.small,
+button.button.small,
+input[type="button"].small {
+  font-size: 0.825em;
+  padding: 0.25em 1em;
+}
+
+a.button.large,
+button.button.large,
+input[type="button"].large {
+  font-size: 1.25em;
+}
+
+.button.warning,
+a.button.warning {
+  background-color: #d1335b;
+  -webkit-box-shadow: 0 2px #a13030;
+          box-shadow: 0 2px #a13030;
+}
+
+.button.warning:hover,
+.button.warning:active {
+  background-color: #a13030;
+}
+
+.button.secondary,
+a.button.secondary {
+  background-color: #adb9c9;
+  -webkit-box-shadow: 0 2px #8393a7;
+          box-shadow: 0 2px #8393a7;
+}
+
+.button.secondary:hover,
+.button.secondary:active {
+  background-color: #8393a7;
+}
+
+.button + .button {
+  margin-left: 1em;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.container h1:first-of-type {
+  margin-top: 0;
+}
+
+.article__container {
+  max-width: 35em;
+}
+
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0;
+  }
+}
+
+@media (min-width: 550px) {
+  .container {
+    width: 80%;
+  }
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../fonts/Source Sans Pro/SourceSansPro-Regular.otf");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../fonts/Source Sans Pro/SourceSansPro-Bold.otf");
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: "Source Sans Pro";
+  src: url("../fonts/Source Sans Pro/SourceSansPro-It.otf");
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Evolventa";
+  src: url("../fonts/Evolventa/Evolventa-Bold.ttf");
+  font-weight: 800;
+}
+
+.notification {
+  color: #0081d5;
+  background: #b4e1fa;
+  border: 1px solid #0081d5;
+  border-radius: 3px;
+  padding: 1em;
+  margin-bottom: 1em;
+  position: relative;
+}
+
+.notification .close {
+  border: 0;
+  background: 0;
+  color: currentColor;
+  position: absolute;
+  right: 1em;
+}
+
+.notification .icon {
+  fill: currentColor;
+  width: 20px;
+  height: 20px;
+}
+
+.notification.closable {
+  padding-right: 3em;
+}
+
+.notification.full-width {
+  width: 100%;
+  margin-bottom: 0;
+  text-align: center;
+  border: 0;
+}
+
+.notification.full-width.closable .close {
+  right: unset;
+}
+
+.notification.success {
+  color: #03bd5b;
+  background: #daf5e7;
+  border-color: #03bd5b;
+}
+
+.notification.warning {
+  color: #ff9947;
+  background: #fff0e4;
+  border-color: #ff9947;
+}
+
+.notification.error {
+  color: #d1335b;
+  background: #f8e1e7;
+  border-color: #d1335b;
+}
+
+.footer {
+  background: #26353f;
+  color: #fff;
+  padding: 2em 0;
+}
+
+.footer .container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.footer ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.footer__social {
+  margin-top: 1em;
+}
+
+.footer__social li {
+  display: inline;
+  margin-right: 1em;
+}
+
+.footer__social .icon {
+  width: 35px;
+  height: 35px;
+  fill: #fff;
+}
+
+.footer__links {
+  margin: 0;
+  line-height: 2em;
+}
+
+.footer__links h2 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+.footer__links a {
+  color: #fff;
+}
+
+.footer__logo {
+  width: 300px;
+  height: auto;
+}
+
+.footer__logo img {
+  width: 100%;
+}
+
+@media (max-width: 999px) {
+  .footer .container {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+
+.hero {
+  width: 100%;
+  color: #fff;
+  background: #0081d5;
+}
+
+.hero__container {
+  min-height: 38vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 2em;
+}
+
+.hero__white-background {
+  padding: 10px 1em;
+  background-color: white;
+}
+
+h1.hero__white-background {
+  color: #26353f;
+  margin: 0;
+}
+
+.hero p {
+  margin: 1em auto;
+  color: #26353f;
+  font-size: 1.2em;
+  font-style: italic;
+}
+
+.navbar {
+  border-bottom: 1px solid #c9d3df;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+          box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+  width: 100%;
+  background: #fff;
+  z-index: 100;
+}
+
+.nav-fixed {
+  position: fixed;
+  top: 0;
+}
+
+.navbar__container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 1em;
+}
+
+.navbar__home {
+  height: 40px;
+}
+
+.navbar__logo {
+  height: 100%;
+}
+
+.nav__links {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.nav__item {
+  padding: 0;
+  display: inline-block;
+}
+
+.nav__item a,
+.nav__item .dropdown {
+  color: #1c1c1c;
+  padding: 0.4em 0.8em;
+  border-radius: 3px;
+}
+
+.nav__links a::after {
+  content: none;
+}
+
+.nav__item a:hover,
+.nav__item .dropdown:hover {
+  background: #ebeff3;
+}
+
+.nav__item a.active {
+  background: #0081d5;
+  color: #fff;
+}
+
+@media (max-width: 749px) {
+  .navbar__container {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+  }
+
+  .nav__links {
+    padding-top: 1em;
+  }
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #fff;
+  min-width: 110px;
+  text-align: center;
+  top: 2em;
+  right: 0;
+  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
+          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {
+  background-color: #c9d3df;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  width: 100%;
+}
+
+.row .column {
+  margin: 0 2em;
+  max-width: 50em;
+}
+
+.row .column + .column {
+  margin-left: 2em;
+}
+
+@media (max-width: 749px) {
+  .row {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+
+  .row .column:not(:last-child) {
+    margin-bottom: 2em;
+  }
+
+  .row p + p {
+    margin-top: 1em;
+  }
+}
+
+.column img {
+  width: 100%;
+}
+
+.panel {
+  background: #fff;
+  border-radius: 2px;
+  -webkit-box-shadow: 0 1px 4px #c9d3df;
+          box-shadow: 0 1px 4px #c9d3df;
+  padding: 2em;
+  position: relative;
+}
+
+.panel + * {
+  margin-top: 2em;
+}
+
+.panel > :first-child {
+  margin-top: 0;
+}
+
+.panel > :last-child {
+  margin-bottom: 0;
+}
+
+.panel__header::after {
+  content: '';
+  display: block;
+  width: calc(100% + 4em);
+  position: relative;
+  left: -2em;
+  border-bottom: 1px solid #adb9c9;
+  margin-bottom: 2em;
+}
+
+.panel__header h3 {
+  display: inline-block;
+}
+
+.panel__header h3:first-of-type {
+  margin-top: 0;
+}
+
+.panel__header-extra {
+  margin-left: 1em;
+  color: #8393a7;
+}
+
+section {
+  padding: 5em 0;
+  background-color: #fff;
+  color: #1c1c1c;
+}
+
+.section-grey {
+  background-color: #ebeff3;
+  color: #1c1c1c;
+}
+
+.section-dark {
+  background-color: #1c1c1c;
+  color: #fff;
+}
+
+.section-color {
+  background-color: #0081d5;
+  color: #fff;
+}
+
+.section__subtitle {
+  margin: 0 auto 2em;
+  max-width: 640px;
+  font-size: 1.3em;
+  font-style: italic;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+.section__subtitle:not(:last-child) {
+  margin-bottom: 3em;
+}
+
+.section__title + .section__subtitle {
+  margin-top: -3em;
+}
+
+.section__title {
+  margin: 0 0 3em;
+  text-align: center;
+}
+
+form {
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  outline: none;
+  padding: 8px 14px;
+  font: inherit;
+  line-height: 1.6;
+  color: #1c1c1c;
+  border-radius: 3px;
+  border: 1px solid #adb9c9;
+  background: #fff;
+  vertical-align: middle;
+  position: relative;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  border-color: #0081d5;
+  -webkit-transition: border-color 0.2s ease-out;
+  transition: border-color 0.2s ease-out;
+  -webkit-box-shadow: 0 0 1px 1px #b4e1fa;
+          box-shadow: 0 0 1px 1px #b4e1fa;
+}
+
+input:disabled,
+select:disabled {
+  background-color: #ebeff3;
+}
+
+input[type=radio],
+input[type=checkbox] {
+  margin-right: 6px;
+  margin-top: 0;
+}
+
+input[type=radio] {
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  display: inline-block;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+}
+
+input[type=radio]::before {
+  content: '';
+  border-color: #0081d5;
+  border-radius: 50%;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  width: 8px;
+  height: 8px;
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+
+input[type=radio]:checked {
+  background-color: #fff;
+  border-color: #0081d5;
+  opacity: 1;
+}
+
+input[type=radio]:checked::before {
+  background-color: #0081d5;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+  transition: -webkit-transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  height: 22px;
+  width: 22px;
+  padding: 0;
+}
+
+input[type="checkbox"]:checked {
+  background-color: #0081d5;
+  border-color: #0081d5;
+  opacity: 1;
+  -webkit-transition: border-color 0.2s ease-in, background-color 0.2s ease-out;
+  transition: border-color 0.2s ease-in, background-color 0.2s ease-out;
+}
+
+input[type="checkbox"]::before {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  height: 14px;
+  width: 14px;
+  background: url("../images/icons/tick.svg") center center no-repeat;
+}
+
+input[type="checkbox"]:checked::before {
+  color: #fff;
+  display: block;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+  -webkit-transition: -webkit-transform 0.2s ease-out;
+  transition: -webkit-transform 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
+}
+
+select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: #fff url("../images/icons/arrow-down.svg") no-repeat;
+  background-position: center right 1em;
+  background-size: 15px;
+  padding-right: 45px;
+  border-radius: 3px;
+  width: auto;
+}
+
+select:focus {
+  outline: none;
+}
+
+select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #000;
+}
+
+label,
+legend {
+  display: block;
+  margin-bottom: 0.5em;
+  color: #26353f;
+}
+
+label.label-inline {
+  display: inline;
+  color: #1c1c1c;
+}
+
+.label-inline + input[type=radio],
+.label-inline + input[type=checkbox] {
+  margin-left: 10px;
+}
+
+.form__container {
+  max-width: 30em;
+  margin: auto;
+}
+
+.form__group {
+  position: relative;
+  display: block;
+}
+
+.form__group + .form__group {
+  margin-top: 2em;
+}
+
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.overlay-button {
+  position: absolute;
+  right: 21px;
+  top: 12px;
+  background: 0;
+  border: 0;
+  width: 15px;
+  height: 15px;
+}
+
+.search__group {
+  position: relative;
+}
+
+.overlayed-button .icon-search {
+  height: 15px;
+  width: 15px;
+}
+
+.input__group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.input__group .icon-button,
+.input__group .icon-button:active {
+  margin-left: 1em;
+  padding: 0 0.8em;
+}
+
+.input__group .icon-button .icon {
+  width: 16px;
+  height: 16px;
+}
+
+.richtext img {
+  /* Prevent larger images to break layout */
+  max-width: 100%;
+
+  /* Center images smaller than width */
+  margin: auto;
+  display: block;
+}
+
+/* Allow images legends with the following syntax:
+  ![](path_to_image)
+  *image_caption* */
+.richtext img + em {
+  display: block;
+  text-align: center;
+  margin: 0.3em 0.1em;
+}
+
+/* Disable lists default indentation */
+.richtext ol,
+.richtext ul {
+  margin: 0;
+  padding: 0 0 0 1em;
+}
+
+.richtext li {
+  padding-left: 0.5em;
+}
+
+/* Lighter inline code element */
+.richtext code {
+  padding: 0 0.1em;
+  border-radius: 0.2em;
+}
+
+/* But <pre> block should be spaced */
+.richtext pre {
+  padding: 0.5em;
+  margin: 0.5em 0;
+  border-radius: 0.5em;
+  background-color: #ebeff3;
+}
+
+.documentation {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.side-pane {
+  background: #ebeff3;
+  padding: 2em;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 25%;
+          flex: 0 0 25%;
+  border-right: 1px solid #c9d3df;
+}
+
+.side-pane .side-pane__menu {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 400px;
+  float: right;
+}
+
+.side-pane__title {
+  padding: 0 1em;
+}
+
+.side-pane .side-pane__link {
+  padding: 0.5em 1em;
+  display: block;
+  width: 100%;
+  border-radius: 5px;
+  margin-bottom: 0.5em;
+  color: #26353f;
+}
+
+.side-pane li:hover .side-pane__link {
+  background: #c9d3df;
+}
+
+.side-pane li.active .side-pane__link {
+  background: #0081d5;
+  color: #fff;
+}
+
+.side-pane li.side-pane__dropdown .side-pane__link {
+  background: url("../images/icons/arrow-right.svg") no-repeat;
+  background-position: center right 1em;
+  background-size: 15px 15px;
+}
+
+.side-pane li.side-pane__dropdown:hover .side-pane__link {
+  background: #c9d3df url("../images/icons/arrow-right.svg") no-repeat;
+  background-position: center right 1em;
+  background-size: 15px 15px;
+}
+
+.side-pane li.unfolded.side-pane__dropdown .side-pane__link,
+.side-pane li.unfolded.side-pane__dropdown:hover .side-pane__link {
+  background-image: url("../images/icons/arrow-down.svg");
+  background-color: transparent;
+}
+
+.side-pane li.unfolded.active.side-pane__dropdown .side-pane__link {
+  background-color: #0081d5;
+}
+
+.side-pane__dropdown.unfolded .side-pane__submenu {
+  display: block;
+}
+
+.side-pane__submenu {
+  padding-left: 2em;
+  margin-bottom: 0.5em;
+  display: none;
+}
+
+.side-pane__sublink,
+.side-pane__sublink:visited {
+  padding: 0.5em;
+  list-style-type: none;
+  color: #53657d;
+  border-radius: 5px;
+}
+
+.side-pane__submenu li {
+  list-style-type: none;
+  margin: 1em 0;
+}
+
+.side-pane__submenu .side-pane__sublink:hover {
+  color: #26353f;
+  background: #c9d3df;
+}
+
+.side-pane__submenu li.active {
+  list-style-type: disc;
+  color: #0081d5;
+}
+
+.side-pane__submenu li.active .side-pane__sublink {
+  font-weight: 700;
+  color: #26353f;
+}
+
+.main-pane {
+  padding: 3em 5em;
+  background: #fff;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+
+.main-pane h1:first-child {
+  margin-top: 0;
+}
+
+@media (max-width: 749px) {
+  .documentation {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+
+  .side-pane {
+    border-right: none;
+    border-bottom: 1px solid #c9d3df;
+    -webkit-box-flex: 1;
+        -ms-flex: auto;
+            flex: auto;
+  }
+}
+
+@media (min-width: 1000px) {
+  .main-pane .markdown {
+    width: 80%;
+  }
+
+  .side-pane {
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 350px;
+            flex: 0 0 350px;
+  }
+}
+
+.dashboard {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  min-height: calc(100vh - 73px);
+}
+
+.dashboard .side-menu {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  background: #fff;
+}
+
+.dashboard .side-menu ul {
+  margin-top: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.dashboard .side-menu a {
+  padding: 1em 2em;
+  display: block;
+  width: 100%;
+  color: #8393a7;
+}
+
+.dashboard .side-menu a.active {
+  background: linear-gradient(to right, #0081d5, #0081d5 5px, #ebeff3 5px, #ebeff3);
+  color: #53657d;
+}
+
+.dashboard .side-menu a:hover {
+  color: #0081d5;
+}
+
+.dashboard .main {
+  padding: 2em;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 75%;
+          flex: 1 1 75%;
+  background: #ebeff3;
+}
+
+.dashboard .main > :first-child {
+  margin-top: 0;
+}
+
+.dashboard table {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.article {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-font-feature-settings: "liga" on;
+  padding: 0;
+  background: #fff;
+  color: #1c1c1c;
+  line-height: 1.5;
+  margin: 0 auto;
+}
+
+.article__hero {
+  height: 38vh;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.article__hero img {
+  width: 100%;
+  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.5" /><feFuncG type="linear" slope="0.5" /><feFuncB type="linear" slope="0.5" /></feComponentTransfer></filter></svg>#filter');
+  -webkit-filter: brightness(0.5);
+          filter: brightness(0.5);
+  position: absolute;
+  z-index: 5;
+}
+
+.article__hero .article__container {
+  z-index: 10;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
+  width: 100%;
+}
+
+.article__content {
+  margin: 0;
+}
+
+.article__content .article__container {
+  margin: 0 auto;
+  padding: 2em 0 4em;
+}
+
+.richtext + .article__author {
+  margin-top: 1em;
+}
+
+.article__author-list {
+  padding-top: 1em;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.article__author {
+  display: inline-block;
+  width: 50%;
+  padding: 1em;
+  font-size: 15px;
+}
+
+.article__author + .article__author {
+  margin-left: 1em;
+  margin-top: 0;
+}
+
+.article__author img {
+  height: 32px;
+  width: 32px;
+  border-radius: 50%;
+  display: inline-block;
+  float: right;
+}
+
+.article__author-info {
+  display: inline-block;
+}
+
+.article__author-name {
+  font-weight: 700;
+}
+
+.article__author-role {
+  color: #8393a7;
+  font-size: 0.9em;
+  line-height: 0.8em;
+}
+
+/* article list for blog and alike */
+.article.article__preview {
+  margin: 0 auto;
+  padding: 2em;
+}
+
+.article__preview + .article__preview {
+  margin-top: 2em;
+}
+
+.article__preview .article__author {
+  width: auto;
+  padding: 0;
+  font-size: 14px;
+}
+
+.article__preview .article__author img {
+  float: none;
+  vertical-align: middle;
+}
+
+.article__preview img + .article__author-name {
+  margin-left: 0.5em;
+}
+
+a.article__link {
+  color: #26353f;
+}
+
+a.article__link:hover {
+  color: #0081d5;
+}
+
+.article__title {
+  margin-bottom: 0;
+}
+
+.article__meta {
+  margin-bottom: 1em;
+}
+
+.article__thumbnail {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  position: relative;
+}
+
+.article__thumbnail img {
+  width: 100%;
+  position: relative;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+@media (max-width: 549px) {
+  .article__container,
+  .article__hero .article__container {
+    width: 85%;
+    padding: 0;
+  }
+
+  .article__author-list {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+
+  .article__author-list .article__author {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .article__author-list .article__author + .article__author {
+    margin-top: 1em;
+    margin-left: 0;
+  }
+}
+
+.card {
+  background: #fff;
+  border-radius: 2px;
+  -webkit-box-shadow: 0 1px 4px #c9d3df;
+          box-shadow: 0 1px 4px #c9d3df;
+  position: relative;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.card + .card {
+  margin-left: 2em;
+}
+
+@media (max-width: 749px) {
+  .card + .card {
+    margin-left: 0;
+    margin-top: 2em;
+  }
+}
+
+.card__cover {
+  height: 250px;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.card__cover img {
+  -o-object-fit: cover;
+     object-fit: cover; /* will not work on IE and Edge < 16 */
+  height: 100%;
+  width: 100%;
+}
+
+.card__content {
+  padding: 2em;
+}
+
+.card__content h3 {
+  margin: 0;
+}
+
+.card__content .card__meta {
+  color: #8393a7;
+}
+
+.card__content .card__meta time::after {
+  content: " • ";
+}
+
+.card__content :last-child {
+  margin-bottom: 0;
+}
+
+.modal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, .5);
+  height: 100%;
+  width: 100%;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: none;
+  z-index: 10;
+}
+
+/* no js modal */
+.modal__backdrop:target {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.modal {
+  border-radius: 3px;
+  -webkit-box-shadow: #c9d3df;
+          box-shadow: #c9d3df;
+  background: #fff;
+  padding: 2em;
+  max-width: 32em;
+}
+
+.modal > :first-child {
+  margin-top: 0;
+}
+
+.modal .button__group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-top: 2em;
+}
+
+.modal .button__group .button {
+  margin: 0;
+}
+
+.modal .button__group .button + .button {
+  margin-left: 1em;
+}
+
+.hero {
+  background: -webkit-gradient(linear, left top, right top, from(#c969a6), color-stop(15%, #e795a8), color-stop(43%, #a4cfcd), color-stop(65%, #45adc5), to(#265c9f));
+  background: linear-gradient(to right, #c969a6 0%, #e795a8 15%, #a4cfcd 43%, #45adc5 65%, #265c9f 100%);
+}
+
+.typography__sample {
+  margin-bottom: 1em;
+}
+
+.typography__sample > * {
+  margin: 0;
+}
+
+.color-panel {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  margin-bottom: 2em;
+}
+
+.color-panel__block {
+  margin-bottom: 1em;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.color-panel__sample {
+  margin-right: 1em;
+  width: 50px;
+  height: 50px;
+  border-radius: 2px;
+  vertical-align: middle;
+}
+
+.color-panel__name {
+  padding: 0.5em 0;
+  vertical-align: middle;
+}
+
+.color-panel__name h4 {
+  margin: 0;
+}
+
+.color-panel__sample-double {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-radius: 2px;
+  overflow: hidden;
+  margin-right: 1em;
+}
+
+.color-panel__sample-double .color-panel__sample {
+  border-radius: 0;
+  margin-right: 0;
+}
+
+/* color blocks */
+.color-panel__sample.primary-medium {
+  background: #0081d5;
+}
+
+.color-panel__sample.primary-light {
+  background: #1e90da;
+}
+
+.color-panel__sample.primary-dark {
+  background: #006cb0;
+}
+
+.color-panel__sample.white {
+  background: #fff;
+  border: 1px solid #c9d3df;
+}
+
+.color-panel__sample.lighter-grey {
+  background: #ebeff3;
+}
+
+.color-panel__sample.light-grey {
+  background: #c9d3df;
+}
+
+.color-panel__sample.grey {
+  background: #adb9c9;
+}
+
+.color-panel__sample.dark-grey {
+  background: #8393a7;
+}
+
+.color-panel__sample.darker-grey {
+  background: #53657d;
+}
+
+.color-panel__sample.almost-black {
+  background: #26353f;
+}
+
+.color-panel__sample.black {
+  background: #1c1c1c;
+}
+
+.color-panel__sample.green {
+  background: #03bd5b;
+}
+
+.color-panel__sample.light-green {
+  background: #daf5e7;
+}
+
+.color-panel__sample.orange {
+  background: #ff9947;
+}
+
+.color-panel__sample.light-orange {
+  background: #fff0e4;
+}
+
+.color-panel__sample.red {
+  background: #d1335b;
+}
+
+.color-panel__sample.light-red {
+  background: #f8e1e7;
+}
+
+.color-panel__sample.blue {
+  background: #0081d5;
+}
+
+.color-panel__sample.light-blue {
+  background: #b4e1fa;
+}
+
+.documentation {
+  border-top: 1px solid #c9d3df;
+  border-bottom: 1px solid #c9d3df;
+}
+
+@media (max-width: 749px) {
+  .color-panel {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dashboard,
+.cards {
+  border-top: 1px solid #adb9c9;
+}
+
+.form__group + .button {
+  margin-top: 2em;
+}