From e6ca58831f114a27e225e54413796eb8ca5b4946 Mon Sep 17 00:00:00 2001
From: Carl Richter <carl.richter@tyclipso.net>
Date: Fri, 18 Dec 2020 20:29:52 +0100
Subject: [PATCH] feat: add styles for content wrapper, headlines and code

---
 client/themes/tyclipso/components/page.vue |   41 +-
 client/themes/tyclipso/scss/app.scss       | 1009 ++------------------
 2 files changed, 122 insertions(+), 928 deletions(-)

diff --git a/client/themes/tyclipso/components/page.vue b/client/themes/tyclipso/components/page.vue
index 8d5b222d..d4464e72 100644
--- a/client/themes/tyclipso/components/page.vue
+++ b/client/themes/tyclipso/components/page.vue
@@ -48,11 +48,12 @@
             .caption.red--text {{$t('common:page.unpublished')}}
             status-indicator.ml-3(negative, pulse)
         v-divider
-      v-container.grey.pa-0(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`')
-        v-row(no-gutters, align-content='center', style='height: 90px;')
-          v-col.page-col-content.is-page-header(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`')
-            .headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
-            .caption.grey--text.text--darken-1 {{description}}
+      v-container.grey.pa-0.pl-5(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`')
+        v-row(align-content='center', style='height: 90px;')
+          v-col.page-col-content.is-page-header.pl-0(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;')
+            .ty-max-width.px-12
+              .headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
+              .caption.grey--text.text--darken-1 {{description}}
       v-divider
       v-container.pl-5.pt-4(fluid, grid-list-xl)
         v-layout(row)
@@ -185,7 +186,7 @@
                   span {{$t('common:page.printFormat')}}
                 v-spacer
 
-          v-flex.page-col-content(xs12, lg9, xl10)
+          v-flex.page-col-content.ty-max-width.px-12(xs12, lg9, xl10)
             v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions')
               template(v-slot:activator='{ on: onEditActivator }')
                 v-speed-dial(
@@ -563,11 +564,39 @@ export default {
           ev.preventDefault()
           ev.stopPropagation()
           this.$vuetify.goTo(decodeURIComponent(ev.target.hash), this.scrollOpts)
+          this.copyToClipboard(decodeURIComponent(ev.target.hash))
         }
       })
+
+      this.hydratePageContent()
     })
   },
   methods: {
+    hydratePageContent() {
+      const c = this.$refs.container
+
+      // get code language from pre's class
+      c.querySelectorAll('pre.prismjs').forEach(el => {
+        const langClass = Array.from(el.classList).find(str => str.startsWith('language-'))
+        if (langClass) {
+          el.dataset.lang = langClass.split('language-')[1]
+        }
+      })
+
+      // remove empty divs
+      c.querySelectorAll('div:not([class]):not([id])').forEach(el => {
+        if (el.innerHTML === '') el.remove()
+      })
+
+      // add click listerers for images
+      c.querySelectorAll('p > img').forEach(el => el.addEventListener('click', () => {
+        window.open(el.src, '_blank')
+      }))
+    },
+    copyToClipboard(hash) {
+      const url = window.location.origin + window.location.pathname + hash
+      navigator.clipboard.writeText(url)
+    },
     goHome () {
       window.location.assign('/')
     },
diff --git a/client/themes/tyclipso/scss/app.scss b/client/themes/tyclipso/scss/app.scss
index f49873b0..28bc9815 100644
--- a/client/themes/tyclipso/scss/app.scss
+++ b/client/themes/tyclipso/scss/app.scss
@@ -1,532 +1,88 @@
 /* THEME SPECIFIC STYLES */
 
-.v-main .contents {
-  color: mc('grey', '800');
-  padding: .5rem 0 50px;
-  position: relative;
-
-  > div > *:first-child {
-    margin-top: 0;
-  }
+@import "../../default/scss/app";
 
-  @at-root .theme--dark & {
-    color: mc('grey', '300');
-  }
-
-  // ---------------------------------
-  // LINKS
-  // ---------------------------------
-
-  a {
-    color: mc('blue', '700');
-
-    &.is-internal-link.is-invalid-page {
-      color: mc('red', '700');
-
-      @at-root .theme--dark & {
-        color: mc('red', '200');
-      }
-    }
-
-    &.is-external-link {
-      padding-right: 3px;
-
-      &::after {
-        font-family: 'Material Design Icons', sans-serif;
-        font-size: 24px/1;
-        padding-left: 3px;
-        display: inline-block;
-        content: '\F03CC';
-        color: mc('grey', '500');
-        text-decoration: none;
-      }
-    }
-
-    @at-root .theme--dark & {
-      color: mc('blue', '200');
-    }
-  }
+.ty-max-width {
+  max-width: 840px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
 
+.v-main .contents {
   // ---------------------------------
   // HEADERS
   // ---------------------------------
 
   h1, h2, h3, h4, h5, h6 {
-    position: relative;
+    color: mc('grey', '800');
 
-    &:first-child {
-      padding-top: 0;
-    }
+    .toc-anchor {
+      top: 0;
+      font-size: inherit;
+      overflow: hidden;
+      left: -1em;
+      right: 0;
+      color: transparent;
 
-    &:hover {
-      .toc-anchor {
-        display: block;
+      &::before {
+        content: '#';
+        color: mc('theme', 'primary');
       }
     }
 
-    .toc-anchor {
-      display: none;
-      position: absolute;
-      right: 1rem;
-      bottom: .5rem;
-      font-size: 1.25rem;
-      text-decoration: none;
-      color: mc('grey', '500');
-    }
-
-    & + h2, & + h3, & + h4, & + h5, & + h6 {
-      margin-top: 8px;
+    &:not(:first-child) {
+      margin-top: 1.25em;
     }
   }
 
-  h1 {
-    padding: 0;
-    color: mc('blue', '800');
-    margin-top: 2rem;
-    position: relative;
-
-    @at-root .theme--dark & {
-      color: mc('grey', '300');
-    }
-
+  // remove underline
+  h1, h4, h5, h6 {
     &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 2px;
-      background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
-      border-radius: 3px;
-
-      @at-root .theme--dark & {
-        background: linear-gradient(to right, mc('blue', '300') 0%, mc('blue', '500') 10%, rgba(mc('blue', '900'), 0) 100%);
-      }
-
-      @at-root .is-rtl & {
-        background: linear-gradient(to left, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
-      }
-      @at-root .theme--dark.is-rtl & {
-        background: linear-gradient(to left, mc('grey', '600'), rgba(mc('grey', '600'), 0));
-      }
+      display: none;
     }
   }
-  h2 {
-    margin: 1rem 0 0 0;
-    color: mc('grey', '800');
-    position: relative;
-
-    @at-root .theme--dark & {
-      color: mc('grey', '400');
-    }
 
+  h2, h3 {
     &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));
+      background: mc('grey', '300');
 
       @at-root .theme--dark & {
-        background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
-      }
-
-      @at-root .is-rtl & {
-        background: linear-gradient(to left, mc('grey', '700'), rgba(mc('grey', '700'), 0));
-      }
-      @at-root .theme--dark.is-rtl & {
-        background: linear-gradient(to left, mc('grey', '300'), rgba(mc('grey', '700'), 0));
+        background: mc('grey', '300');
       }
     }
   }
-  h3 {
-    margin: 8px 0 0 0;
-    color: mc('grey', '700');
-    position: relative;
-
-    @at-root .theme--dark & {
-      color: mc('grey', '600');
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 90%);
-    }
-  }
-  h4, h5, h6 {
-    font-size: 1rem;
-    margin: 8px 0 0 0;
-    color: mc('grey', '700');
-    position: relative;
-
-    @at-root .theme--dark & {
-      color: mc('grey', '600');
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 70%);
-    }
-  }
-  h5 {
-    &::after {
-      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 50%);
-    }
-  }
-  h6 {
-    &::after {
-      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 30%);
-    }
-  }
-
-  // ---------------------------------
-  // PARAGRAPHS
-  // ---------------------------------
 
-  p {
-    padding: 1rem 0 0 0;
-    margin: 0;
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 500;
 
-    @at-root .contents > div > p:first-child {
-      padding-top: 0;
+    &:not(:first-child) {
+      margin-top: 1em;
     }
 
-    @at-root .v-application & {
-      margin-bottom: 0;
+    & + h2 {
+      margin-top: 1em !important;
     }
   }
 
-  hr {
-    margin: 1rem 0;
-    height: 1px;
-    border: none;
-    background-color: mc('grey', '400');
-
-    @at-root .theme--dark & {
-      background-color: mc('grey', '700');
-    }
-  }
-
-  .emoji {
-    height: 1.25em;
-    margin: 0 1px -4px;
-  }
-
-  blockquote {
-    padding: 0 1rem 1rem 1rem;
-    background-color: mc('blue-grey', '50');
-    border-left: 55px solid mc('blue-grey', '500');
-    border-radius: .5rem;
-    margin: 1rem 0;
-    position: relative;
-
-    @at-root .theme--dark & {
-      background-color: mc('blue-grey', '900');
-    }
-
-    &::before {
-      display: inline-block;
-      font: normal normal normal 24px/1 "Material Design Icons", sans-serif;
-      position: absolute;
-      margin-top: -12px;
-      top: 50%;
-      left: -38px;
-      color: rgba(255, 255, 255, .7);
-      content: "\F0757";
-    }
-
-    > p:first-child .emoji {
-      margin-right: .5rem;
-    }
-
-    &.valign-center > p {
-      display: flex;
-      align-items: center;
-    }
-
-    &.is-info {
-      background-color: mc('blue', '50');
-      border-color: mc('blue', '300');
-      color: mc('blue', '900');
-
-      &::before {
-        content: "\F02FC";
-      }
-
-      code {
-        background-color: mc('blue', '50');
-        color: mc('blue', '800');
-      }
-
-      @at-root .theme--dark & {
-        background-color: mc('blue', '900');
-        color: mc('blue', '50');
-        border-color: mc('blue', '500');
-      }
-    }
-    &.is-warning {
-      background-color: mc('orange', '50');
-      border-color: mc('orange', '300');
-      color: darken(mc('orange', '900'), 10%);
-
-      &::before {
-        content: "\F0026";
-      }
-
-      code {
-        background-color: mc('orange', '50');
-        color: mc('orange', '800');
-      }
-
-      @at-root .theme--dark & {
-        background-color: darken(mc('orange', '900'), 5%);
-        color: mc('orange', '100');
-        border-color: mc('orange', '500');
-        box-shadow: 0 0 2px 0 mc('grey', '900');
-      }
-    }
-    &.is-danger {
-      background-color: mc('red', '50');
-      border-color: mc('red', '300');
-      color: mc('red', '900');
-
-      &::before {
-        content: "\F0159";
-      }
-
-      code {
-        background-color: mc('red', '50');
-        color: mc('red', '800');
-      }
-
-      @at-root .theme--dark & {
-        background-color: mc('red', '900');
-        color: mc('red', '100');
-        border-color: mc('red', '500');
-      }
-    }
-    &.is-success {
-      background-color: mc('green', '50');
-      border-color: mc('green', '300');
-      color: mc('green', '900');
-
-      &::before {
-        content: "\F0E1E";
-      }
-
-      code {
-        background-color: mc('green', '50');
-        color: mc('green', '800');
-      }
-
-      @at-root .theme--dark & {
-        background-color: mc('green', '900');
-        color: mc('green', '50');
-        border-color: mc('green', '500');
-      }
-    }
+  h2 {
+    font-size: 1.75rem;
+    font-weight: 500;
   }
 
-  // ---------------------------------
-  // LISTS
-  // ---------------------------------
-
-  ol, ul:not(.tabset-tabs) {
-    padding-top: 1rem;
-    width: 100%;
-
-    @at-root .is-rtl & {
-      padding-left: 0;
-      padding-right: 1rem;
-    }
-
-    li > ul, li > ol {
-      padding-top: .5rem;
-      padding-left: 1rem;
-
-      @at-root .is-rtl & {
-        padding-left: 0;
-        padding-right: 1rem;
-      }
-    }
-
-    li + li {
-      margin-top: .5rem;
-    }
-
-    &.links-list {
-      padding-left: 0;
-      list-style-type: none;
-
-      @at-root .is-rtl & {
-        padding-right: 0;
-      }
-
-      li {
-        background-color: mc('grey', '50');
-        background-image: linear-gradient(to bottom, #FFF, mc('grey', '50'));
-        border-right: 1px solid mc('grey', '200');
-        border-bottom: 1px solid mc('grey', '200');
-        border-left: 5px solid mc('grey', '300');
-        box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
-        padding: 1rem;
-        border-radius: 5px;
-        font-weight: 500;
-
-        @at-root .is-rtl & {
-          border-left-width: 1px;
-          border-right-width: 5px;
-        }
-
-        &:hover {
-          background-image: linear-gradient(to bottom, #FFF, lighten(mc('blue', '50'), 4%));
-          border-left-color: mc('blue', '500');
-          cursor: pointer;
-
-          @at-root .is-rtl & {
-            border-left-color: mc('grey', '200');
-            border-right-width: mc('blue', '500');
-          }
-        }
-
-        &::before {
-          content: '';
-          display: none;
-        }
-
-        > a {
-          display: block;
-          text-decoration: none;
-          margin: -1rem;
-          padding: 1rem;
-
-          > em {
-            font-weight: 400;
-            font-style: normal;
-            color: mc('grey', '700');
-            display: inline-block;
-            padding-left: .5rem;
-            border-left: 1px solid mc('grey', '300');
-            margin-left: .5rem;
-
-            &.is-block {
-              display: block;
-              padding-left: 0;
-              margin-left: 0;
-              border-left: none;
-            }
-          }
-        }
-
-        > em {
-          font-weight: 400;
-          font-style: normal;
-        }
-
-        @at-root .theme--dark & {
-          background-color: mc('grey', '50');
-          background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 5%), mc('grey', '900'));
-          border-right: 1px solid mc('grey', '900');
-          border-bottom: 1px solid mc('grey', '900');
-          border-left: 5px solid mc('grey', '700');
-          box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
-
-          @at-root .theme--dark.is-rtl & {
-            border-left-width: 1px;
-            border-right-width: 5px;
-          }
-
-          &:hover {
-            background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 2%), darken(mc('grey', '900'), 3%));
-            border-left-color: mc('indigo', '300');
-            cursor: pointer;
-
-            @at-root .theme--dark.is-rtl & {
-              border-left-color: mc('grey', '900');
-              border-right-width: mc('indigo', '300');
-            }
-          }
-        }
-      }
-    }
-
-    &.grid-list {
-      margin: 1rem 0 0 0;
-      background-color: #FFF;
-      border: 1px solid mc('grey', '200');
-      padding: 1px;
-      display: inline-block;
-      list-style-type: none;
-
-      @at-root .theme--dark & {
-        background-color: #000;
-        border: 1px solid mc('grey', '800');
-      }
-
-      li {
-        background-color: mc('grey', '50');
-        padding: .6rem 1rem;
-        display: block;
-
-        &:nth-child(odd) {
-          background-color: mc('grey', '100');
-        }
-
-        & + li {
-          margin-top: 0;
-        }
-
-        &::before {
-          content: '';
-          display: none;
-        }
+  ul:not(.tabset-tabs) {
+    list-style: disc;
 
-        @at-root .theme--dark & {
-          background-color: mc('grey', '900');
+    ul {
+      list-style: circle;
 
-          &:nth-child(odd) {
-            background-color: darken(mc('grey', '900'), 5%);
-          }
-        }
+      ul {
+        list-style: square;
       }
     }
-  }
 
-  ul:not(.tabset-tabs) {
-    list-style: none;
-    > li::before {
-      position: absolute;
-      left: -1.1rem;
-      content: '\25b8';
-      color: mc('grey', '600');
-      width: 1.35rem;
-
-      @at-root .is-rtl & {
-        right: -1.1rem;
-        content: '\25C3';
-      }
-    }
-  }
-  ol, ul:not(.tabset-tabs) {
-    > li {
-      position: relative;
-      > p {
-        display:inline-block;
-        vertical-align:top;
-        padding-top:0;
-      }
+    li::before {
+      display: none;
     }
   }
 
@@ -535,180 +91,57 @@
   // ---------------------------------
 
   code {
-    background-color: mc('indigo', '50');
-    padding: 0 5px;
-    color: mc('indigo', '800');
-    font-family: 'Roboto Mono', monospace;
-    font-weight: normal;
-    font-size: 1rem;
-    box-shadow: none;
+    background: mc('grey', '200');
+    padding: .1em .5em;
+    border-radius: 4px;
+    font-size: 85%;
+    text-shadow: none;
+    color: mc('grey', '800');
+  }
 
-    &::before, &::after {
-      display: none;
-    }
+  .code-toolbar .toolbar {
+    top: 4px;
+    right: 8px;
 
-    @at-root .theme--dark & {
-      background-color: darken(mc('grey', '900'), 5%);
-      color: mc('indigo', '100');
+    button {
+      padding: .25em .5em;
     }
   }
 
-  .prismjs{
+  .prismjs {
     border: none;
-    border-radius: 5px;
+    border-radius: 4px;
     box-shadow: initial;
     background-color: mc('grey', '900');
     padding: 1rem 1rem 1rem 3rem;
-    margin: 1rem 0;
+    margin: 1.25rem 0;
 
-    @at-root .theme--dark & {
-      background-color: darken(mc('grey', '900'), 5%);
+    .token.bold, .token.important {
+      font-weight: 400;
     }
 
-    > code {
-      background-color: transparent;
-      padding: 0;
-      color: #FFF;
-      box-shadow: initial;
-      display: block;
-      font-size: .85rem;
-      font-family: 'Roboto Mono', monospace;
-
-      &:after, &:before {
-        content: initial;
-        letter-spacing: initial;
-      }
+    * {
+      text-shadow: none !important;
     }
-  }
-
-  .diagram {
-    margin-top: 1rem;
-    svg:first-child {
-      direction: ltr;
-    }
-  }
-
-  // ---------------------------------
-  // TASK LISTS
-  // ---------------------------------
-
-  .task-list-item {
-    position: relative;
-    list-style-type: none;
-
-    &-checkbox[disabled] {
-      display: none;
 
-      & + label {
-        padding-left: 1.5rem;
-      }
+    &[data-lang] {
+      position: relative;
+      padding-top: 3rem;
 
-      & + label::before {
+      &::before {
+        content: attr(data-lang);
         position: absolute;
+        top: 0;
         left: 0;
-        top: 2px;
-        content: ' ';
-        display: block;
-        width: 1.1rem;
-        height: 1.1rem;
-        background-color: #FFF;
-        border: 1px solid mc('grey', '400');
-        border-radius: 2px;
-        font-weight: bold;
+        text-shadow: none;
+        width: 100%;
+        height: 2rem;
+        background: rgba(mc('grey', '800'), .5);
+        text-transform: uppercase;
+        letter-spacing: .1em;
+        font-family: "Roboto", sans-serif;
         font-size: .8rem;
-        line-height: 1rem;
-        text-align: center;
-
-        @at-root .theme--dark & {
-          background-color: mc('grey', '900');
-          border-color: mc('grey', '700');
-        }
-      }
-
-      &[checked] + label::before  {
-        content: '✓';
-      }
-    }
-
-    .contains-task-list {
-      padding: .5rem 0 0 1.5rem;
-    }
-  }
-
-  // ---------------------------------
-  // TABLES
-  // ---------------------------------
-
-  table {
-    margin: .5rem 1.75rem;
-    border-spacing: 0;
-
-    th {
-      padding: .75rem;
-      border-bottom: 2px solid mc('grey', '500');
-      color: mc('grey', '600');
-    }
-
-    td {
-      padding: .75rem;
-    }
-
-    tr {
-      td {
-        border-bottom: 1px solid mc('grey', '200');
-      }
-    }
-  }
-
-  figure.table {
-    margin: 0;
-
-    > table {
-      background-color: #FFF;
-      margin: 0;
-      border-collapse: collapse;
-      box-shadow: 0 0 5px 0 rgba(0, 0, 0, .07);
-
-      @at-root .theme--dark & {
-        background-color: darken(mc('grey', '900'), 3%);
-      }
-
-      td, th {
-        border: 1px solid mc('blue-grey', '100');
-        box-shadow: inset -1px -1px 0 0 #FFF, inset 1px 0 0 #FFF;
-        padding: .5rem .75rem;
-
-        @at-root .theme--dark & {
-          border-color: mc('grey', '700');
-          box-shadow: inset -1px -1px 0 0 rgba(0,0,0, .5);
-        }
-      }
-
-      th {
-        background-color: lighten(mc('blue-grey', '50'), 1%);
-        font-weight: 700;
-        color: mc('blue-grey', '700');
-
-        @at-root .theme--dark & {
-          background-color: mc('grey', '800');
-          color: mc('grey', '400');
-        }
-      }
-
-      thead th {
-        border-bottom: 2px solid mc('blue-grey', '100');
-
-        @at-root .theme--dark & {
-          border-bottom: none;
-        }
-      }
-
-      tbody th {
-        background-color: lighten(mc('blue-grey', '50'), 4%);
-
-        @at-root .theme--dark & {
-          background-color: darken(mc('grey', '800'), 8%);
-        }
+        padding: 7px 16px;
       }
     }
   }
@@ -717,289 +150,21 @@
   // IMAGES
   // ---------------------------------
 
-  img {
-    max-width: 100%;
-
-    &.align-left {
-      float: left;
-      margin: 0 1rem 1rem 0;
-    }
-    &.align-right {
-      float: right;
-      margin: 0 0 1rem 1rem;
-      z-index: 1;
-      position: relative;
-    }
-    &.align-center {
+  p {
+    > img:first-child,
+    > br + img {
       display: block;
-      max-width: 100%;
-      margin: auto;
-    }
-    &.align-abstopright {
-      position: absolute;
-      top: -90px;
-      right: 1rem;
-      height: calc(90px - 32px);
-      width: auto;
-
-      @at-root .is-rtl & {
-        left: 1rem;
-        right: initial;
-      }
-    }
-    &.decor-shadow {
-      box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
-    }
-    &.decor-outline {
-      border: 1px solid mc('grey', '400');
-    }
-    &.uml-diagram {
-      margin: 1rem 0;
-    }
-  }
-
-  figure.image {
-    margin: 1rem 0 0 0;
-
-    img {
-      margin: 0 auto;
-    }
-    figcaption {
-      padding: 4px 1rem;
-      text-align: center;
-      font-size: 12px;
-      color: mc('grey', '700');
-      background-color: mc('grey', '100');
-
-      @at-root .theme--dark & {
-        color: mc('grey', '400');
-        background-color: mc('grey', '800');
-      }
-    }
-  }
-
-  figure.image-style-align-right {
-    float: right;
-  }
-
-  figure.image-style-align-left {
-    float: left;
-  }
-
-  // ---------------------------------
-  // DETAILS
-  // ---------------------------------
-
-  details {
-    background-color: mc('grey', '50');
-    margin: 1rem 2rem;
-    border: 1px solid mc('grey', '300');
-    border-radius: 7px;
-
-    > p {
-      padding-left: 0;
-    }
-
-    summary {
-      border-radius: 7px;
-      background-color: mc('grey', '50');
+      overflow: hidden;
+      margin: 12px 0;
+      border-radius: 4px;
+      box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12) !important;
+      transition: transform .2s ease;
       cursor: pointer;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 1rem;
-      transition: background-color .4s ease;
 
-      &:focus {
-        outline: none;
-        background-color: mc('grey', '100');
+      &:hover {
+        transform: scale(1.05);
       }
     }
-
-    &[open] {
-      padding: 1rem;
-
-      summary {
-        background-color: mc('grey', '100');
-        border-bottom: 1px solid mc('grey', '300');
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        margin: -1rem -1rem 1rem -1rem;
-      }
-    }
-
-    @at-root .theme--dark & {
-      background-color: mc('grey', '900');
-      border-color: mc('grey', '700');
-
-      summary {
-        background-color: mc('grey', '900');
-        border-color: mc('grey', '700');
-      }
-
-      &[open] summary {
-        background-color: lighten(mc('grey', '900'), 5%);
-      }
-    }
-
-  }
-
-  // ---------------------------------
-  // HIGHLIGHTING
-  // ---------------------------------
-
-  mark {
-    &.pen-red {
-      color: mc('red', '500');
-      background-color: initial;
-    }
-    &.pen-green {
-      color: mc('green', '500');
-      background-color: initial;
-    }
-    &.marker-blue {
-      background-color: mc('blue', '300');
-    }
-    &.marker-yellow {
-      background-color: mc('yellow', '300');
-    }
-    &.marker-pink {
-      background-color: mc('pink', '300');
-    }
-    &.marker-green {
-      background-color: mc('green', '300');
-    }
   }
 
-  .mention {
-    background-color: rgba(153, 0, 48, .1);
-    color: #990030;
-
-    @at-root .theme--dark & {
-      color: mc('pink', '500');
-    }
-  }
-
-}
-
-// ---------------------------------
-// COMMENTS
-// ---------------------------------
-
-.comments {
-  &-container {
-    border-radius: 7px;
-  }
-
-  &-header {
-    color: #FFF;
-    padding: 8px 20px;
-    font-size: 16px;
-    font-weight: 500;
-    background-color: mc('blue-grey', '500');
-    border-radius: 7px 7px 0 0;
-
-    @at-root .theme--dark & {
-      background-color: lighten(mc('blue-grey', '900'), 5%);
-    }
-  }
-
-  &-main {
-    background-color: mc('blue-grey', '50');
-    border-radius: 0 0 7px 7px;
-    padding: 20px;
-
-    @at-root .theme--dark & {
-      background-color: darken(mc('grey', '900'), 5%);
-    }
-  }
-}
-
-// ---------------
-// RTL FIXES
-// Vuetify GH Issue: https://github.com/vuetifyjs/vuetify/issues/6317
-// ---------------
-
-.is-rtl {
-  .page-col-content.is-page-header {
-    @each $size, $width in $grid-breakpoints {
-      @media (min-width: $width) {
-        @for $n from 0 through 12 {
-          &.offset-#{$size}-#{$n} {
-            margin-left: 0;
-            margin-right: ($n / 12 * 100) * 1%;
-          }
-        }
-      }
-    }
-  }
-}
-
-// ---------------
-// PRINT OVERRIDES
-// ---------------
-
-@media print {
-  .nav-header,
-  .v-navigation-drawer,
-  .v-btn--fab,
-  .page-col-sd,
-  .v-tooltip__content
-  {
-    display: none !important;
-  }
-
-  .layout {
-    display: block !important;
-  }
-
-  .page-col-content {
-    flex-basis: 100% !important;
-    flex-grow: 1 !important;
-    max-width: 100% !important;
-    margin-left: 0 !important;
-
-    > .v-toolbar {
-      border: 1px solid mc('grey', '300') !important;
-      border-radius: 7px !important;
-
-      & + .v-divider {
-        display: none !important;
-      }
-    }
-  }
-
-  .v-main {
-    padding: 0 !important;
-    font-size: 14px;
-    background-color: #FFF;
-  }
-
-  .v-main .contents {
-    color: #000;
-    background-color: #FFF;
-
-    @at-root .theme--dark & {
-      color: #000;
-    }
-
-    .prismjs{
-      box-shadow: none;
-      background-color: #FFF;
-
-      @at-root .theme--dark & {
-        background-color: #FFF;
-      }
-
-      > code {
-        color: #000;
-        box-shadow: none;
-        text-shadow: none;
-      }
-    }
-  }
-
-  .comments-container {
-    display: none;
-  }
 }