improvement: customize styling for code blocks

client/themes/tyclipso/components/page.vue

@@ -51,7 +51,7 @@
       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
+            .ty-max-width.px-3.px-md-6.px-lg-12
               .headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
               .caption.grey--text.text--darken-1 {{description}}
       v-divider
@@ -186,7 +186,7 @@
                   span {{$t('common:page.printFormat')}}
                 v-spacer
 
-          v-flex.page-col-content.ty-max-width.px-12(xs12, lg9, xl10)
+          v-flex.page-col-content.ty-max-width.px-md-6.px-lg-12(xs12, lg9, xl10)
             v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions')
               template(v-slot:activator='{ on: onEditActivator }')
                 v-speed-dial(
@@ -579,7 +579,7 @@ export default {
       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]
+          el.parentElement.dataset.lang = langClass.split('language-')[1]
         }
       })
 

client/themes/tyclipso/scss/app.scss

@@ -3,9 +3,12 @@
 @import "../../default/scss/app";
 
 .ty-max-width {
-  max-width: 840px !important;
   margin-left: auto !important;
   margin-right: auto !important;
+
+  @media screen and (min-width: 1500px) {
+    max-width: 840px !important;
+  }
 }
 
 .v-main .contents {
@@ -86,6 +89,29 @@
     }
   }
 
+  h3 {
+    font-size: 1.4rem;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+  }
+
+  h5 {
+    font-size: 1.1rem;
+  }
+
+  h6 {
+    font-size: 1rem;
+  }
+
+  h4, h5, h6 {
+    & + p {
+      padding-top: 8px;
+    }
+  }
+
   // ---------------------------------
   // CODE
   // ---------------------------------
@@ -102,12 +128,40 @@
   .code-toolbar .toolbar {
     top: 4px;
     right: 8px;
+    z-index: 1;
 
     button {
       padding: .25em .5em;
     }
   }
 
+  .code-toolbar[data-lang] {
+    position: relative;
+
+    &::after {
+      content: attr(data-lang);
+      position: absolute;
+      top: 0;
+      left: 0;
+      text-shadow: none;
+      width: 100%;
+      height: 2rem;
+      background: rgba(mc('grey', '800'), .5);
+      color: mc('grey', '200');
+      text-transform: uppercase;
+      letter-spacing: .1em;
+      font-family: "Roboto", sans-serif;
+      font-size: .8rem;
+      padding: 7px 16px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+
+    .prismjs {
+      padding-top: 3rem;
+    }
+  }
+
   .prismjs {
     border: none;
     border-radius: 4px;
@@ -123,27 +177,6 @@
     * {
       text-shadow: none !important;
     }
-
-    &[data-lang] {
-      position: relative;
-      padding-top: 3rem;
-
-      &::before {
-        content: attr(data-lang);
-        position: absolute;
-        top: 0;
-        left: 0;
-        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;
-        padding: 7px 16px;
-      }
-    }
   }
 
   // ---------------------------------