Editor and content style refactoring part 2
This commit is contained in:
Tetrakern
parent
7c0c515f0e
commit
003838fef8
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,3 +1,42 @@
|
||||
// =============================================================================
|
||||
// GENERAL
|
||||
// =============================================================================
|
||||
|
||||
[class*="wp-block-"]:not(p, h1, h2, h3, h4, h5, h6, .wp-block-separator, .wp-block-spacer, .wp-block-image:where(.alignright, .alignleft)) {
|
||||
clear: both;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: max(2.5rem, var(--paragraph-spacing) + 1rem);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: max(2.5rem, var(--paragraph-spacing) + 1rem);
|
||||
}
|
||||
|
||||
&.aligncenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.alignright {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// INLINE
|
||||
// =============================================================================
|
||||
|
||||
sup[data-fn] {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
padding-left: .15em;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// SEPARATOR
|
||||
// =============================================================================
|
||||
|
||||
.wp-block-separator {
|
||||
border: 0;
|
||||
border-bottom: var(--layout-hr-border);
|
||||
@ -22,17 +61,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
[class*="wp-block-"]:not(p, .wp-block-separator, .wp-block-image:where(.alignright, .alignleft)) {
|
||||
clear: both;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: max(2.5rem, var(--paragraph-spacing) + 1rem);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: max(2.5rem, var(--paragraph-spacing) + 1rem);
|
||||
}
|
||||
}
|
||||
// =============================================================================
|
||||
// IMAGES
|
||||
// =============================================================================
|
||||
|
||||
.wp-block-image {
|
||||
&.alignright {
|
||||
@ -45,6 +76,11 @@
|
||||
margin: .5em 1.5em .5em 0;
|
||||
}
|
||||
|
||||
&.aligncenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&:where(.alignright, .alignleft) {
|
||||
max-width: min(calc(45vw - 2 * var(--layout-spacing-horizontal-small)), 50%);
|
||||
}
|
||||
@ -54,6 +90,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// (FIG-) CAPTIONS
|
||||
// =============================================================================
|
||||
|
||||
[class*="wp-block-"] {
|
||||
figcaption {
|
||||
color: var(--fg-700); // Done
|
||||
@ -66,93 +106,148 @@
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// PARAGRAPHS
|
||||
// =============================================================================
|
||||
|
||||
p.has-drop-cap::first-letter {
|
||||
font-size: 3.75em !important;
|
||||
padding-right: .05em;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// CODE BLOCK
|
||||
// =============================================================================
|
||||
|
||||
// // =============================================================================
|
||||
// // GENERAL - TEXT ALIGN
|
||||
// // =============================================================================
|
||||
.wp-block-code {
|
||||
letter-spacing: 0;
|
||||
border-style: solid;
|
||||
border-radius: var(--layout-border-radius-small);
|
||||
overflow: auto;
|
||||
|
||||
// .has-text-align-right {
|
||||
// text-align: right;
|
||||
// }
|
||||
code {
|
||||
display: block;
|
||||
font-family: var(--ff-mono);
|
||||
line-height: 1.7;
|
||||
white-space: pre;
|
||||
border-radius: var(--layout-border-radius-small);
|
||||
}
|
||||
|
||||
// .has-text-align-center {
|
||||
// text-align: center;
|
||||
// }
|
||||
&:not([style*=padding]) {
|
||||
code {
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// .has-text-align-left {
|
||||
// text-align: left;
|
||||
// }
|
||||
&:not([class*=font-size]) {
|
||||
code {
|
||||
font-size: var(--fs-xxs);
|
||||
}
|
||||
}
|
||||
|
||||
// // =============================================================================
|
||||
// // GENERAL (LEGACY) - BLOCK ALIGN
|
||||
// // =============================================================================
|
||||
&:not([class*=background-color]) {
|
||||
code {
|
||||
background: var(--code-background);
|
||||
}
|
||||
}
|
||||
|
||||
// figure {
|
||||
// &.aligncenter {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// }
|
||||
&:not([class*=text-color]) {
|
||||
color: var(--code-color);
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// TABLES
|
||||
// =============================================================================
|
||||
|
||||
.wp-block-table {
|
||||
float: none;
|
||||
overflow-x: auto;
|
||||
|
||||
&:where(.min-480, .min-640, .min-768) {
|
||||
min-width: unset; // Delegate to table child
|
||||
}
|
||||
|
||||
&.min-480 table {
|
||||
min-width: 480px;
|
||||
}
|
||||
|
||||
&.min-640 table {
|
||||
min-width: 640px;
|
||||
}
|
||||
|
||||
&.min-768 table {
|
||||
min-width: 768px;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 75%; // Scales with custom formatting
|
||||
border-style: solid;
|
||||
border-color: var(--table-border-color);
|
||||
border-collapse: collapse;
|
||||
|
||||
@include bp(480px) {
|
||||
font-size: 87.5%; // Scales with custom formatting
|
||||
}
|
||||
}
|
||||
|
||||
:is(thead, tbody, tfoot, tr, td, th) {
|
||||
border-style: inherit;
|
||||
border-color: inherit;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
:is(th, td) {
|
||||
padding: .5em .75em;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
font-weight: var(--font-weight-strong);
|
||||
vertical-align: top;
|
||||
border-top-width: 3px;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: var(--font-weight-strong);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
padding-bottom: .5rem; // Place for scrollbar on mobile
|
||||
}
|
||||
|
||||
&.is-style-stripes {
|
||||
border-bottom: none;
|
||||
|
||||
tfoot {
|
||||
border-top-color: var(--table-border-color-striped);
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:nth-child(odd) {
|
||||
background: var(--table-background-striped);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// &.alignright {
|
||||
// float: right;
|
||||
// margin-left: 2rem;
|
||||
// }
|
||||
|
||||
// &.alignleft {
|
||||
// float: left;
|
||||
// margin-right: 2rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // GENERAL - BORDER RADIUS
|
||||
// // =============================================================================
|
||||
|
||||
// :is(.wp-block-image, .wp-block-gallery) {
|
||||
// img {
|
||||
// border-radius: var(--layout-border-radius-small);
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // GENERAL - FIGCAPTIONS
|
||||
// // =============================================================================
|
||||
|
||||
// :is(.wp-block-image, .wp-block-embed, .wp-block-audio, .wp-block-video, .wp-block-table, .wp-block-quote, .wp-block-pullquote, .wp-block-gallery) {
|
||||
// margin: 0;
|
||||
|
||||
// figcaption {
|
||||
// color: var(--fg-800);
|
||||
// font-family: var(--ff-note);
|
||||
// font-size: 75%; // Scales with custom formatting
|
||||
// line-height: 1.3;
|
||||
// text-align: center;
|
||||
// padding: .5rem 1rem 0;
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // GENERAL - SPACING
|
||||
// // =============================================================================
|
||||
|
||||
// :is(.wp-block-embed, .wp-block-audio, .wp-block-video, .wp-block-table, .wp-block-quote, .wp-block-pullquote, .wp-block-gallery, .wp-block-code, .wp-block-preformatted) {
|
||||
// clear: both;
|
||||
|
||||
// &:not(:first-child) {
|
||||
// margin-top: unquote("max(2.5rem, var(--paragraph-spacing) + 1rem)");
|
||||
// }
|
||||
|
||||
// &:not(:last-child) {
|
||||
// margin-bottom: unquote("max(2.5rem, var(--paragraph-spacing) + 1rem)");
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // BLOCKQUOTE
|
||||
@ -300,90 +395,6 @@ p.has-drop-cap::first-letter {
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // SEPARATOR
|
||||
// // =============================================================================
|
||||
|
||||
// .wp-block-separator {
|
||||
// border-top: none;
|
||||
|
||||
// &:not(.is-style-wide, .is-style-dots) {
|
||||
// width: 128px;
|
||||
// max-width: 75%;
|
||||
// }
|
||||
|
||||
// &.is-style-dots {
|
||||
// text-align: center;
|
||||
// line-height: 1;
|
||||
// border: none;
|
||||
|
||||
// &::before {
|
||||
// content: '···';
|
||||
// color: var(--fg-900);
|
||||
// font-size: 1.5em;
|
||||
// letter-spacing: 2em;
|
||||
// padding-left: 2em;
|
||||
// font-family: serif;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // IMAGE
|
||||
// // =============================================================================
|
||||
|
||||
// .wp-block-image {
|
||||
// flex-wrap: wrap;
|
||||
|
||||
// figcaption {
|
||||
// flex-basis: 100%;
|
||||
// }
|
||||
|
||||
// img {
|
||||
// display: block;
|
||||
// height: auto;
|
||||
// border-style: solid;
|
||||
// border-color: currentColor;
|
||||
// }
|
||||
|
||||
// &.aligncenter {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// }
|
||||
|
||||
// &:is(.alignright, .alignleft) {
|
||||
// margin-top: .25rem;
|
||||
// margin-bottom: 1rem;
|
||||
// max-width: 30%;
|
||||
// }
|
||||
|
||||
// &:not(.alignright, .alignleft) {
|
||||
// &:not(:first-child) {
|
||||
// margin-top: 2rem;
|
||||
// }
|
||||
|
||||
// &:not(:last-child) {
|
||||
// margin-bottom: 2rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.alignright {
|
||||
// float: right;
|
||||
// margin-left: 2rem;
|
||||
// }
|
||||
|
||||
// &.alignleft {
|
||||
// float: left;
|
||||
// margin-right: 2rem;
|
||||
// }
|
||||
|
||||
// &.is-style-rounded {
|
||||
// img {
|
||||
// border-radius: 9999px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // VIDEO
|
||||
// // =============================================================================
|
||||
@ -506,113 +517,6 @@ p.has-drop-cap::first-letter {
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // TABLES
|
||||
// // =============================================================================
|
||||
|
||||
// .wp-block-table {
|
||||
// overflow-x: auto;
|
||||
|
||||
// &.min-480 {
|
||||
// min-width: unset;
|
||||
|
||||
// table {
|
||||
// min-width: 480px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.min-640 {
|
||||
// min-width: unset;
|
||||
|
||||
// table {
|
||||
// min-width: 640px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.min-768 {
|
||||
// min-width: unset;
|
||||
|
||||
// table {
|
||||
// min-width: 768px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// table {
|
||||
// font-size: 80%; // Scales with custom formatting
|
||||
// border-collapse: collapse;
|
||||
// border-spacing: 0;
|
||||
// border: 1px solid transparent;
|
||||
// width: auto;
|
||||
// margin: 0 auto;
|
||||
|
||||
// @include bp(480px) {
|
||||
// font-size: 87.5%; // Scales with custom formatting
|
||||
// }
|
||||
// }
|
||||
|
||||
// :is(thead, tbody, tfoot, tr, td, th) {
|
||||
// border-width: inherit;
|
||||
// border-style: solid;
|
||||
// border-color: inherit;
|
||||
// overflow-wrap: break-word;
|
||||
// }
|
||||
|
||||
// th {
|
||||
// font-weight: var(--font-weight-strong);
|
||||
// vertical-align: bottom;
|
||||
// }
|
||||
|
||||
// :is(th, td) {
|
||||
// padding: .5em .75em;
|
||||
|
||||
// @include bp(480px) {
|
||||
// padding: .5rem .75rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// tfoot {
|
||||
// td {
|
||||
// font-size: 87.5%; // Scales with custom formatting
|
||||
// font-weight: var(--font-weight-strong);
|
||||
// vertical-align: top;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.is-style-regular {
|
||||
// table {
|
||||
// border-color: var(--table-border-color);
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.is-style-stripes {
|
||||
// :is(th, td) {
|
||||
// padding: .675em 1em;
|
||||
|
||||
// @include bp(480px) {
|
||||
// padding: .675rem 1rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// tbody {
|
||||
// tr {
|
||||
// &:nth-child(odd) {
|
||||
// background: var(--table-stripe-background);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// tfoot {
|
||||
// td {
|
||||
// padding: .375rem 1rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// figcaption {
|
||||
// padding-bottom: .5rem; // Place for scrollbar on mobile
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // FILE DOWNLOADS
|
||||
// // =============================================================================
|
||||
@ -785,46 +689,7 @@ p.has-drop-cap::first-letter {
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // CODE BLOCk
|
||||
// // =============================================================================
|
||||
|
||||
// .wp-block-code {
|
||||
// letter-spacing: 0;
|
||||
// border-radius: var(--layout-border-radius-small);
|
||||
// overflow: auto;
|
||||
|
||||
// code {
|
||||
// display: block;
|
||||
// font-family: var(--ff-mono);
|
||||
// line-height: 1.7;
|
||||
// white-space: pre;
|
||||
// border-radius: var(--layout-border-radius-small);
|
||||
// }
|
||||
|
||||
// &:not([style*=padding]) {
|
||||
// code {
|
||||
// padding: 1rem;
|
||||
// overflow: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
// &:not([class*=font-size]) {
|
||||
// code {
|
||||
// font-size: var(--fs-xxs);
|
||||
// }
|
||||
// }
|
||||
|
||||
// &:not([class*=background-color]) {
|
||||
// code {
|
||||
// background: var(--code-background);
|
||||
// }
|
||||
// }
|
||||
|
||||
// &:not([class*=text-color]) {
|
||||
// color: var(--code-color);
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // PRE BLOCK
|
||||
|
||||
@ -111,7 +111,7 @@ p a,
|
||||
img {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
transform: translateY(0.2em);
|
||||
transform: translateY(.1em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
|
||||
// === TABLES ================================================================
|
||||
--table-border-color: var(--fg-900);
|
||||
--table-stripe-background: hsl(var(--bg-1000-free) / 5%);
|
||||
--table-background-striped: hsl(var(--bg-1000-free) / 5%);
|
||||
|
||||
// === FONT SETTINGS =========================================================
|
||||
--font-smoothing-webkit: subpixel-antialiased;
|
||||
|
||||
@ -110,7 +110,8 @@
|
||||
--embed-box-shadow: var(--box-shadow-m);
|
||||
|
||||
--table-border-color: var(--fg-900);
|
||||
--table-stripe-background: rgb(0 0 0 / 15%);
|
||||
--table-border-color-striped: rgb(0 0 0 / 30%);
|
||||
--table-background-striped: rgb(0 0 0 / 15%);
|
||||
|
||||
--paragraph-spacing: 1.5rem;
|
||||
--blockquote-background: rgb(0 0 0 / 15%);
|
||||
|
||||
@ -19,11 +19,77 @@ body {
|
||||
line-height: 1.8;
|
||||
padding: var(--editor-padding);
|
||||
|
||||
// =============================================================================
|
||||
// INLINE
|
||||
// =============================================================================
|
||||
|
||||
code:not([role=textbox]) {
|
||||
display: inline-block;
|
||||
background: rgb(0 0 0 / 7%);
|
||||
font-family: var(--ff-mono);
|
||||
font-size: .75em;
|
||||
line-height: inherit;
|
||||
word-wrap: break-word;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
padding: .125em .25em;
|
||||
border-radius: 2px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
background: rgb(0 0 0 / 7%);
|
||||
font-family: var(--ff-mono);
|
||||
font-size: .75em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
padding: 0 0.375em;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 1px currentColor, 0 1px 1px rgb(0 0 0 / 20%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
sup[data-fn] {
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
padding-left: .15em;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
p.has-drop-cap::first-letter {
|
||||
position: static;
|
||||
float: left;
|
||||
display: block;
|
||||
font-size: 3.75em;
|
||||
font-weight: inherit;
|
||||
line-height: .9;
|
||||
padding: 0 .05em 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
img:not(.wp-more-tag) {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
transform: translateY(0.1em);
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// GENERAL
|
||||
// =============================================================================
|
||||
|
||||
.wp-block {
|
||||
margin: 28px auto;
|
||||
max-width: var(--editor-max-width);
|
||||
|
||||
figcaption {
|
||||
color: rgb(0 0 0 / 70%);
|
||||
font-size: 75%; // Scales with custom formatting
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
@ -32,11 +98,51 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// HEADINGS
|
||||
// =============================================================================
|
||||
|
||||
:where(h1, h2, h3, h4, h5, h6) {
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
|
||||
> strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: get_relative_clamp(1.5, 2.25, 320, $full-width, 'vw', 'em');
|
||||
letter-spacing: get_clamp(-0.48, 0.8, 320, 375);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: get_relative_clamp(1.25, 1.75, 320, $full-width, 'vw', 'em');
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: get_relative_clamp(1.2, 1.4, 320, $full-width, 'vw', 'em');
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: get_relative_clamp(1.1, 1.2, 320, $full-width, 'vw', 'em');
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: get_relative_clamp(1.05, 1.125, 320, $full-width, 'vw', 'em');
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// SEPARATORS
|
||||
// =============================================================================
|
||||
|
||||
.wp-block-separator {
|
||||
margin: 48px auto;
|
||||
border: 0;
|
||||
border-bottom: var(--layout-hr-border);
|
||||
border-color: rgb(0 0 0 / 30%);
|
||||
@ -61,6 +167,10 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// IMAGES
|
||||
// =============================================================================
|
||||
|
||||
.wp-block-image {
|
||||
&.alignright {
|
||||
float: right;
|
||||
@ -77,13 +187,139 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
p.has-drop-cap::first-letter {
|
||||
font-size: 3.75em !important;
|
||||
line-height: 0.8;
|
||||
padding-right: .05em;
|
||||
// =============================================================================
|
||||
// CODE BLOCK
|
||||
// =============================================================================
|
||||
|
||||
.wp-block-code {
|
||||
padding: 1rem;
|
||||
border-radius: var(--layout-border-radius-small);
|
||||
overflow: auto;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
font-family: var(--ff-mono);
|
||||
line-height: 1.7;
|
||||
white-space: pre !important;
|
||||
border-radius: var(--layout-border-radius-small);
|
||||
}
|
||||
|
||||
&:not([class*=font-size]) {
|
||||
code {
|
||||
font-size: var(--fs-xxs);
|
||||
}
|
||||
}
|
||||
|
||||
&:not([class*=background-color]) {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
&:not([class*=text-color]) {
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// TABLES
|
||||
// =============================================================================
|
||||
|
||||
.wp-block-table {
|
||||
float: none !important;
|
||||
overflow-x: auto;
|
||||
|
||||
&.alignright {
|
||||
margin-left: auto;
|
||||
margin-right: calc((100% - min(100%, var(--editor-max-width))) / 2);
|
||||
}
|
||||
|
||||
&.alignleft {
|
||||
margin-left: calc((100% - min(100%, var(--editor-max-width))) / 2);
|
||||
margin-right: calc((100% - min(100%, var(--editor-max-width))) / 2);
|
||||
}
|
||||
|
||||
&:where(.min-480, .min-640, .min-768) {
|
||||
min-width: unset; // Delegate to table child
|
||||
}
|
||||
|
||||
&.min-480 table {
|
||||
min-width: 480px;
|
||||
}
|
||||
|
||||
&.min-640 table {
|
||||
min-width: 640px;
|
||||
}
|
||||
|
||||
&.min-768 table {
|
||||
min-width: 768px;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 75%; // Scales with custom formatting
|
||||
border-style: solid;
|
||||
border-color: rgb(0 0 0 / 30%);
|
||||
border-collapse: collapse;
|
||||
|
||||
@include bp(480px) {
|
||||
font-size: 87.5%; // Scales with custom formatting
|
||||
}
|
||||
}
|
||||
|
||||
:is(thead, tbody, tfoot, tr, td, th) {
|
||||
border-style: inherit;
|
||||
border-color: inherit;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
:is(th, td) {
|
||||
padding: .5em .75em;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
font-weight: 700;
|
||||
vertical-align: top;
|
||||
border-top-width: 3px;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 700;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
padding-bottom: .5rem; // Place for scrollbar on mobile
|
||||
}
|
||||
|
||||
&.is-style-stripes {
|
||||
border-bottom: none;
|
||||
|
||||
tfoot {
|
||||
border-top-color: rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:nth-child(odd) {
|
||||
background: rgb(0 0 0 / 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Automatically becomes .editor-styles-wrapper
|
||||
// body {
|
||||
// font-family: var(--wp--preset--font-family--system-fonts);
|
||||
@ -107,64 +343,11 @@ body {
|
||||
// max-width: min(calc(100% - 16px), calc(var(--site-width) - 2 * var(--layout-spacing-horizontal)));
|
||||
// }
|
||||
|
||||
// :is(h1, h2, h3, h4, h5, h6) {
|
||||
// display: block;
|
||||
// font-weight: 700;
|
||||
// line-height: 1.3;
|
||||
|
||||
// > strong {
|
||||
// font-weight: 700;
|
||||
// }
|
||||
// }
|
||||
|
||||
// h1 {
|
||||
// font-size: get_relative_clamp(1.5, 2.25, 320, $full-width, 'vw', 'em');
|
||||
// letter-spacing: get_clamp(-0.48, 0.8, 320, 375);
|
||||
// }
|
||||
|
||||
// h2 {
|
||||
// font-size: get_relative_clamp(1.25, 1.75, 320, $full-width, 'vw', 'em');
|
||||
// }
|
||||
|
||||
// h3 {
|
||||
// font-size: get_relative_clamp(1.2, 1.4, 320, $full-width, 'vw', 'em');
|
||||
// }
|
||||
|
||||
// h4 {
|
||||
// font-size: get_relative_clamp(1.1, 1.2, 320, $full-width, 'vw', 'em');
|
||||
// }
|
||||
|
||||
// h5 {
|
||||
// font-size: get_relative_clamp(1.05, 1.125, 320, $full-width, 'vw', 'em');
|
||||
// }
|
||||
|
||||
// h6 {
|
||||
// font-size: 1em;
|
||||
// }
|
||||
|
||||
// :is(h1, h2, h3, h4, h5, h6) {
|
||||
// &:not(:first-child) {
|
||||
// margin-top: 32px;
|
||||
// }
|
||||
|
||||
// &:not(:last-child) {
|
||||
// margin-bottom: 20px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// figcaption {
|
||||
// font-size: 75%; // Scales with custom formatting
|
||||
// text-align: center;
|
||||
// padding: 8px 16px 0;
|
||||
// }
|
||||
|
||||
// p {
|
||||
// img:not(.wp-more-tag) {
|
||||
// display: inline-block;
|
||||
// height: auto;
|
||||
// transform: translateY(0.2em);
|
||||
// }
|
||||
// }
|
||||
|
||||
// :is(ul, ol) {
|
||||
// padding-left: 28px;
|
||||
@ -180,19 +363,7 @@ body {
|
||||
// }
|
||||
// }
|
||||
|
||||
// code:not([role=textbox]) {
|
||||
// display: inline-block;
|
||||
// background: rgb(0 0 0 / 7%);
|
||||
// font-family: var(--ff-mono);
|
||||
// font-size: .75em;
|
||||
// line-height: inherit;
|
||||
// word-wrap: break-word;
|
||||
// -webkit-box-decoration-break: clone;
|
||||
// box-decoration-break: clone;
|
||||
// padding: .125em .25em;
|
||||
// border-radius: 2px;
|
||||
// transform: translateY(-1px);
|
||||
// }
|
||||
|
||||
|
||||
// acronym,
|
||||
// abbr {
|
||||
@ -201,19 +372,7 @@ body {
|
||||
// text-underline-offset: 0.125em;
|
||||
// }
|
||||
|
||||
// kbd {
|
||||
// display: inline-block;
|
||||
// background: rgb(0 0 0 / 7%);
|
||||
// font-family: var(--ff-mono);
|
||||
// font-size: .75em;
|
||||
// font-weight: 700;
|
||||
// letter-spacing: 0;
|
||||
// white-space: nowrap;
|
||||
// padding: 0 0.375em;
|
||||
// border-radius: 3px;
|
||||
// box-shadow: 0 0 1px currentColor, 0 1px 1px rgb(0 0 0 / 20%);
|
||||
// transform: translateY(-1px);
|
||||
// }
|
||||
|
||||
|
||||
// :is(.wp-block-embed, .wp-block-audio, .wp-block-video, .wp-block-table, .wp-block-quote, .wp-block-pullquote, .wp-block-gallery, .wp-block-code, .wp-block-preformatted) {
|
||||
// clear: both;
|
||||
@ -425,56 +584,6 @@ body {
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // SEPARATORS
|
||||
// // =============================================================================
|
||||
|
||||
// .wp-block-separator {
|
||||
// padding: 0;
|
||||
// margin: 40px auto !important;
|
||||
// border-top: none;
|
||||
// border-bottom: 2px solid;
|
||||
// border-color: #a0a0a0;
|
||||
|
||||
// &:not(.is-style-wide, .is-style-dots) {
|
||||
// width: 128px;
|
||||
// max-width: 75%;
|
||||
// }
|
||||
|
||||
// &.is-style-dots {
|
||||
// text-align: center;
|
||||
// line-height: 1;
|
||||
// border: none;
|
||||
|
||||
// &::before {
|
||||
// content: '···';
|
||||
// color: #a0a0a0;
|
||||
// font-size: 1.5em;
|
||||
// letter-spacing: 2em;
|
||||
// padding-left: 2em;
|
||||
// font-family: serif;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // ALIGNMENTS
|
||||
// // =============================================================================
|
||||
|
||||
// .wp-block-image.alignleft {
|
||||
// float: left;
|
||||
// margin: 24px 32px 16px 0 !important;
|
||||
// }
|
||||
|
||||
// .wp-block-image.alignright {
|
||||
// float: right;
|
||||
// margin: 24px 0 16px 32px !important;
|
||||
// }
|
||||
|
||||
// .wp-block:is(.alignleft, .alignright) {
|
||||
// max-width: min(30%, 220px);
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // TABLES
|
||||
// // =============================================================================
|
||||
@ -556,20 +665,6 @@ body {
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // IMAGE BLOCK
|
||||
// // =============================================================================
|
||||
|
||||
// .wp-block-image {
|
||||
// figcaption {
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
// .components-resizable-box__container {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // GALLERY
|
||||
// // =============================================================================
|
||||
@ -696,33 +791,7 @@ body {
|
||||
// // CODE BLOCK
|
||||
// // =============================================================================
|
||||
|
||||
// .wp-block-code {
|
||||
// padding: 1rem;
|
||||
// border-radius: var(--layout-border-radius-small);
|
||||
// overflow: auto;
|
||||
|
||||
// code {
|
||||
// display: block;
|
||||
// font-family: var(--ff-mono);
|
||||
// line-height: 1.7;
|
||||
// white-space: pre !important;
|
||||
// border-radius: var(--layout-border-radius-small);
|
||||
// }
|
||||
|
||||
// &:not([class*=font-size]) {
|
||||
// code {
|
||||
// font-size: var(--fs-xxs);
|
||||
// }
|
||||
// }
|
||||
|
||||
// &:not([class*=background-color]) {
|
||||
// background: #e5e5e5;
|
||||
// }
|
||||
|
||||
// &:not([class*=text-color]) {
|
||||
// color: #444;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // =============================================================================
|
||||
// // PREFORMATTED BLOCK
|
||||
|
||||
33
theme.json
33
theme.json
@ -4,6 +4,8 @@
|
||||
"settings": {
|
||||
"appearanceTools": true,
|
||||
"color": {
|
||||
"link": false,
|
||||
"custom": false,
|
||||
"duotone": [],
|
||||
"customDuotone": false,
|
||||
"defaultDuotone": false,
|
||||
@ -11,59 +13,74 @@
|
||||
"customGradient": false,
|
||||
"defaultGradients": false
|
||||
},
|
||||
"dimensions": {
|
||||
"minHeight": false
|
||||
},
|
||||
"layout": {
|
||||
"contentSize": "840px",
|
||||
"wideSize": "840px"
|
||||
},
|
||||
"position": {
|
||||
"sticky": false
|
||||
},
|
||||
"spacing": {
|
||||
"blockGap": null,
|
||||
"margin": false,
|
||||
"padding": false,
|
||||
"units": ["px", "em", "rem"],
|
||||
"spacingScale": {}
|
||||
},
|
||||
"shadow": {
|
||||
"defaultPresets": false
|
||||
},
|
||||
"useRootPaddingAwareAlignments": false,
|
||||
"typography": {
|
||||
"dropCap": true,
|
||||
"lineHeight": false,
|
||||
"textTransform": false,
|
||||
"letterSpacing": false,
|
||||
"customFontSize": false,
|
||||
"fluid": false,
|
||||
"fontFamilies": [],
|
||||
"fontSizes": [
|
||||
{
|
||||
"size": "var(--fs-xxs)",
|
||||
"name": "Extra Small",
|
||||
"shortName": "XXS",
|
||||
"slug": "extra-small"
|
||||
},
|
||||
{
|
||||
"size": "var(--fs-xs)",
|
||||
"name": "Small",
|
||||
"shortName": "XS",
|
||||
"slug": "small"
|
||||
},
|
||||
{
|
||||
"size": "var(--fs-s)",
|
||||
"name": "Normal",
|
||||
"shortName": "S",
|
||||
"slug": "normal"
|
||||
},
|
||||
{
|
||||
"size": "var(--fs-m)",
|
||||
"name": "Medium",
|
||||
"shortName": "M",
|
||||
"slug": "medium"
|
||||
},
|
||||
{
|
||||
"size": "var(--fs-l)",
|
||||
"name": "Large",
|
||||
"shortName": "L",
|
||||
"slug": "large"
|
||||
},
|
||||
{
|
||||
"size": "var(--fs-xl)",
|
||||
"name": "Extra Large",
|
||||
"shortName": "XL",
|
||||
"slug": "extra-large"
|
||||
},
|
||||
{
|
||||
"size": "var(--fs-xxl)",
|
||||
"name": "Huge",
|
||||
"shortName": "XXL",
|
||||
"slug": "huge"
|
||||
},
|
||||
{
|
||||
"size": "var(--fs-xxxl)",
|
||||
"name": "Gigantic",
|
||||
"shortName": "XXXL",
|
||||
"slug": "gigantic"
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user