Skip to content

Commit

Permalink
Cheatsheet adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@josevalim
josevalim committed Oct 19, 2022
1 parent 99fc6c1 commit e85a7ea
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 128 deletions.
223 changes: 100 additions & 123 deletions assets/css/content/cheatsheet.css
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}

Expand All @@ -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;
Expand All @@ -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%;
}
}
Loading

0 comments on commit e85a7ea

Please sign in to comment.