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,33 +128,17 @@
   .code-toolbar .toolbar {
     top: 4px;
     right: 8px;
+    z-index: 1;
 
     button {
       padding: .25em .5em;
     }
   }
 
-  .prismjs {
+  .code-toolbar[data-lang] {
-    border: none;
-    border-radius: 4px;
-    box-shadow: initial;
-    background-color: mc('grey', '900');
-    padding: 1rem 1rem 1rem 3rem;
-    margin: 1.25rem 0;
-
-    .token.bold, .token.important {
-      font-weight: 400;
-    }
-
-    * {
-      text-shadow: none !important;
-    }
-
-    &[data-lang] {
     position: relative;
-      padding-top: 3rem;
 
-      &::before {
+    &::after {
       content: attr(data-lang);
       position: absolute;
       top: 0;
@@ -137,12 +147,35 @@
       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;
+    box-shadow: initial;
+    background-color: mc('grey', '900');
+    padding: 1rem 1rem 1rem 3rem;
+    margin: 1.25rem 0;
+
+    .token.bold, .token.important {
+      font-weight: 400;
+    }
+
+    * {
+      text-shadow: none !important;
     }
   }