Cheatsheet adjustments

Author: josevalim

assets/css/content/cheatsheet.css

@@ -1,42 +1,17 @@
-/* Code blocks */
-
-.page-cheatmd pre code {
-  /* -ms-overflow-style: none;
-  scrollbar-width: none;  */
-  padding: 1.5em 2em;
-}
-
-/* .page-cheatmd pre code:hover {
-  -ms-overflow-style: auto; 
-  scrollbar-width: auto; 
-} */
+/* h1 styling */
 
-/* .page-cheatmd pre code::-webkit-scrollbar {
-  display: none; 
-}
-
-.page-cheatmd pre code:hover::-webkit-scrollbar {
-  display: block;
-} */
-
-.page-cheatmd pre {
-  margin: 0;
-}
-
-.content-inner pre code::-webkit-scrollbar {
-  width: 0.4rem;
-  height: 0.3rem;
+.page-cheatmd h1 {
+  margin-bottom: 1em;
 }
 
 /* h2 styling */
 
 .page-cheatmd h2 {
-  margin: 1em 0 1em 0;
+  margin: 1em 0;
   column-span: all;
   padding-left: 3px;
-  color: var(--gray600);
+  color: var(--gray700);
   font-weight: 500;
-  font-size: 2rem;
 }
 
 .page-cheatmd.dark h2 {
@@ -54,9 +29,10 @@
   font-weight: 400;
 }
 
-.page-cheatmd .h3 {
+.page-cheatmd section.h3 {
   min-width: 300px;
   margin: 0 0 2em 0;
+  break-inside: avoid;
   -webkit-column-break-inside: avoid;
 }
 
@@ -80,7 +56,7 @@
   display: block;
   margin: 0;
   margin-bottom: -1px;
-  padding: 0.25em 2em;
+  padding: 0.25em 1.5em;
   font-weight: 400;
   background: var(--gray100);
   color: #567;
@@ -94,219 +70,220 @@
   border-bottom: 0;
 }
 
-/* Columns */
-
-.full-page {
-  display: block;
-  width: 100%;
-}
-
-.full-page > section > table {
-  width: 100%;
-}
+/* Paragraphs */
 
-.page-cheatmd section.width-50 {
+.page-cheatmd .h2 p {
+  margin:  0;
   display: block;
-  width: 50%;
-  margin: 0;
-}
-
-.width-50 > section > table {
-  width: 100%;
-}
-
-.col-2 {
-  column-count: 2;
-  column-gap: 40px;
-  height: auto;
-}
-
-.col-2-left {
-  display: grid;
-  grid-template-columns: 33% 63.2%;
-  column-gap: 40px;
+  background: var(--gray50);
+  padding: 1.5em;
 }
 
-.col-2-left > h2 {
-  display: block;
-  grid-column-end: span 2;
+.page-cheatmd.dark .h2 p {
+  background: var(--gray700);
 }
 
-.col-3 {
-  column-count: 3;
-  column-gap: 40px;
-  height: auto;
+.page-cheatmd .h2 p > code {
+  color: #eb5757;
+  border-radius: 3px;
+  padding: 0.2em 0.4em;
 }
 
-/* paragraphs */
-
-.page-cheatmd .h2 .h3 p {
-  display: block;
-  background: var(--gray50);
-  padding: 1.5em 1em;
-  padding-left: 2em;
-}
+/* Code blocks */
 
-.page-cheatmd.dark .h2 .h3 p {
-  background: var(--gray700);
+.page-cheatmd .h2 pre code {
+  padding: 1em 1.5em;
 }
 
-.page-cheatmd .h2,
-.h3 {
+.page-cheatmd .h2 pre {
   margin: 0;
 }
 
-.page-cheatmd p {
-  margin: 0;
+.page-cheatmd .h2 pre code::-webkit-scrollbar {
+  width: 0.4rem;
+  height: 0.3rem;
 }
 
-.page-cheatmd p > code {
-  color: #eb5757;
-  border-radius: 3px;
-  padding: 0.2em 0.4em;
+.page-cheatmd pre.wrap {
+  white-space: break-spaces;
 }
 
 /* Tables */
 
-.page-cheatmd table {
+.page-cheatmd .h2 table {
   display: table;
   box-sizing: border-box;
   width: 100%;
   border-collapse: collapse;
   margin: 0;
 }
 
-.page-cheatmd table th {
-  padding: 0.75em 2em;
+.page-cheatmd .h2 table th {
+  padding: 0.75em 1.5em;
   line-height: 2em;
   margin-bottom: -1px;
   vertical-align: middle;
   border-bottom: 1px solid var(--codeBorder);
 }
 
-.page-cheatmd table td {
-  padding: 0.75em 2em;
+.page-cheatmd .h2 table td {
+  padding: 0.75em 1.5em;
   border: 0;
   border-bottom: 1px solid var(--codeBorder);
 }
 
-.page-cheatmd table tr:first-child {
+.page-cheatmd .h2 table tr:first-child {
   border-top: 1px solid var(--codeBorder);
 }
 
-.page-cheatmd table td code {
+.page-cheatmd .h2 table td code {
   color: #eb5757;
   border-radius: 3px;
   padding: 0.2em 0.4em;
 }
 
-.page-cheatmd thead {
+.page-cheatmd .h2 thead {
   background-color: var(--gray50);
 }
 
-.page-cheatmd.dark thead {
+.page-cheatmd.dark .h2 thead {
   background-color: var(--gray700);
 }
 
-.page-cheatmd tbody {
+.page-cheatmd .h2 tbody {
   background-color: var(--codeBackground);
 }
 
 /* Lists */
-.page-cheatmd .h3 ul,
-ol {
+.page-cheatmd .h2 ul,
+.page-cheatmd .h2 ol {
   margin: 0;
   padding: 0;
 }
 
-.page-cheatmd .h3 li {
+.page-cheatmd .h2 li {
   list-style-position: inside;
-  padding: 0.5em;
-  padding-left: 2em;
+  padding: 0.5em 1.5em;
   line-height: 2em;
   vertical-align: middle;
   background-color: var(--codeBackground);
   border-bottom: 1px solid var(--codeBorder);
 }
 
-.page-cheatmd .h3 li > code {
+.page-cheatmd .h2 li > code {
   color: #eb5757;
   border-radius: 3px;
   padding: 0.2em 0.4em;
 }
 
-/* List Columns*/
+/* Columns */
+
+.page-cheatmd section.full-page {
+  display: block;
+  width: 100%;
+}
+
+.page-cheatmd section.full-page > section > table {
+  width: 100%;
+}
+
+.page-cheatmd section.width-50 {
+  display: block;
+  width: 50%;
+  margin: 0;
+}
+
+.page-cheatmd section.width-50 > section > table {
+  width: 100%;
+}
+
+.page-cheatmd section.col-2 {
+  column-count: 2;
+  column-gap: 40px;
+  height: auto;
+}
 
-.col-4 > ul {
+.page-cheatmd section.col-2-left {
+  display: grid;
+  grid-template-columns: 33% 63.2%;
+  column-gap: 40px;
+}
+
+.page-cheatmd section.col-2-left > h2 {
+  display: block;
+  grid-column-end: span 2;
+}
+
+.page-cheatmd section.col-3 {
+  column-count: 3;
+  column-gap: 40px;
+  height: auto;
+}
+
+.page-cheatmd section.col-4 > ul {
   display: flex;
   flex-wrap: wrap;
 }
 
-.col-4 > ul > li {
+.page-cheatmd section.col-4 > ul > li {
   flex: 0 0 25%;
 }
 
-.col-6 > ul {
+.page-cheatmd section.col-6 > ul {
   display: flex;
   flex-wrap: wrap;
 }
 
-.col-6 > ul > li {
+.page-cheatmd section.col-6 > ul > li {
   flex: 0 0 16.6667%;
 }
 
-/* Wrap */
-
-.page-cheatmd pre.wrap {
-  white-space: normal;
-}
-
-/* media query */
+/* Media query */
 
 @media (max-width: 1080px) {
-  .col-3 {
+  .page-cheatmd section.col-3 {
     column-count: 2;
     column-gap: 40px;
   }
 }
 
 @media (max-width: 850px) {
-  .col-2-left {
+  .page-cheatmd section.col-2-left {
     display: block;
     column-count: 1;
   }
 
-  .col-6 > ul > li {
+  .page-cheatmd section.col-6 > ul > li {
     flex: 0 0 25%;
   }
 }
 
 @media (max-width: 768px) {
-  .col-4 > ul > li {
+  .page-cheatmd section.col-4 > ul > li {
     flex: 0 0 33%;
   }
 
-  .col-6 > ul > li {
+  .page-cheatmd section.col-6 > ul > li {
     flex: 0 0 33%;
   }
 }
 
 @media (max-width: 680px) {
-  .col-3 {
+  .page-cheatmd section.col-3 {
     column-count: 1;
   }
 
-  .col-2 {
+  .page-cheatmd section.col-2 {
     column-count: 1;
   }
 }
 
 @media (max-width: 480px) {
-  .col-4 > ul > li {
+  .page-cheatmd section.col-4 > ul > li {
     flex: 0 0 50%;
   }
 
-  .col-6 > ul > li {
+  .page-cheatmd section.col-6 > ul > li {
     flex: 0 0 50%;
   }
 }