Added wordpress

1 files changed, 948 insertions, 0 deletions

diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/style-editor.scss b/srcs/wordpress/wp-content/themes/twentynineteen/style-editor.scss
new file mode 100644
index 0000000..1c6c4de
--- /dev/null
+++ b/srcs/wordpress/wp-content/themes/twentynineteen/style-editor.scss
@@ -0,0 +1,948 @@
+/*!
+Twenty Nineteen Editor Styles
+*/
+
+/** === Includes === */
+
+@import "sass/variables-site/variables-site";
+@import "sass/mixins/mixins-master";
+
+/** === Editor Frame === */
+
+body {
+
+	.wp-block[data-align="full"] {
+		width: 100%;
+	}
+
+	@include media(mobile) {
+
+		.wp-block[data-align="full"] {
+			width: calc( 100% + 90px );
+			max-width: calc( 100% + 90px );
+		}
+	}
+
+	@include media(tablet) {
+
+		.editor-writing-flow {
+			max-width: 80%;
+			margin: 0 10%;
+		}
+
+		.editor-post-title__block,
+		.editor-default-block-appender,
+		.editor-block-list__block {
+			margin-left: 0;
+			margin-right: 0;
+		}
+
+		.wp-block[data-align="wide"] {
+			width: 100%;
+		}
+
+		.wp-block[data-align="full"] {
+			position: relative;
+			left: calc( -12.5% - 14px );
+			width: calc( 125% + 116px );
+			max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages.
+		}
+
+		.wp-block[data-align="right"] {
+			max-width: 125%;
+		}
+	}
+}
+
+/** === Content Width === */
+
+.wp-block {
+	width: calc(100vw - (2 * #{$size__spacing-unit}));
+	max-width: 100%;
+
+	@include media(tablet) {
+		width: calc(8 * (100vw / 12));
+	}
+
+	@include media(desktop) {
+		width: calc(6 * (100vw / 12 ));
+	}
+
+	// Only the top level blocks need specific widths, therefore override for every nested block.
+	.wp-block {
+		width: 100%;
+	}
+}
+
+/** === Base Typography === */
+
+body {
+	font-size: $font__size_base;
+	@include font-family( $font__body );
+	line-height: $font__line-height-body;
+	color: $color__text-main;
+}
+
+p {
+	font-size: $font__size_base;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@include font-family( $font__heading );
+	font-weight: 700;
+}
+
+h1 {
+	font-size: $font__size-xl;
+	@include post-section-dash;
+
+	@include media(tablet) {
+		font-size: $font__size-xxl;
+	}
+}
+
+h2 {
+	font-size: $font__size-lg;
+	@include post-section-dash;
+
+	@include media(tablet) {
+		font-size: $font__size-xl;
+	}
+}
+
+h3 {
+	font-size: $font__size-lg;
+}
+
+h4 {
+	font-size: $font__size-md;
+}
+
+h5 {
+	font-size: $font__size-sm;
+}
+
+h6 {
+	font-size: $font__size-xs;
+}
+
+a {
+	@include link-transition;
+	color: $color__link;
+
+	*:visited {
+
+	}
+
+	&:hover,
+	&:active {
+		color: $color__link-hover;
+		outline: 0;
+		text-decoration: none;
+	}
+
+	&:focus {
+		outline: 0;
+		text-decoration: underline;
+	}
+}
+
+// Use white text against these backgrounds by default.
+.has-primary-background-color,
+.has-secondary-background-color,
+.has-dark-gray-background-color,
+.has-light-gray-background-color {
+	color: $color__background-body;
+
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	a {
+		color: $color__background-body;
+	}
+}
+
+// Use dark gray text against this background by default.
+.has-white-background-color {
+	color: $color__text-main;
+
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	a {
+		color: $color__text-main;
+	}
+}
+
+figcaption,
+.gallery-caption {
+	@include font-family( $font__heading );
+	font-size: $font__size-xs;
+	line-height: 1.6;
+	color: $color__text-light;
+}
+
+/** === Post Title === */
+
+.editor-post-title__block {
+	@include post-section-dash;
+
+	&:before {
+		width: $font__size-xxl;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-left: 1em;
+		position: relative;
+		top: 0.5em;
+	}
+
+	.editor-post-title__input {
+		@include font-family( $font__heading );
+		font-size: $font__size-xxl;
+		font-weight: 700;
+	}
+}
+
+/** === Default Appender === */
+
+.editor-default-block-appender .editor-default-block-appender__content {
+	@include font-family( $font__body );
+	font-size: $font__size_base;
+}
+
+/** === Heading === */
+
+.wp-block-heading {
+	strong {
+		font-weight: bolder;
+	}
+}
+/** === Paragraph === */
+
+.wp-block-paragraph {
+
+	&.has-drop-cap:not(:focus)::first-letter {
+		@include font-family( $font__heading );
+		font-size: $font__size-xxxl;
+		line-height: 1;
+		font-weight: bold;
+		margin: 0 0.25em 0 0;
+	}
+}
+
+/** === Table === */
+
+.wp-block-table {
+	@include font-family( $font__heading );
+}
+
+/** === Cover === */
+
+.wp-block-cover {
+
+	h2,
+	.wp-block-cover-text {
+		@include font-family( $font__heading );
+		font-size: $font__size-lg;
+		font-weight: bold;
+		line-height: 1.4;
+		padding-left: $size__spacing-unit;
+		padding-right: $size__spacing-unit;
+
+		strong {
+			font-weight: bolder;
+		}
+
+		@include media(tablet) {
+			margin-left: auto;
+			margin-right: auto;
+			padding: 0;
+		}
+	}
+
+	@include media(tablet) {
+		padding-left: 10%;
+		padding-right: 10%;
+
+		h2,
+		.wp-block-cover-text {
+			font-size: $font__size-xl;
+		}
+	}
+}
+
+.wp-block[data-type="core/cover"][data-align="left"],
+.wp-block[data-type="core/cover"][data-align="right"] {
+
+	.editor-block-list__block-edit {
+		width: calc(4 * (100vw / 12));
+	}
+
+	.wp-block-cover {
+		width: 100%;
+		max-width: 100%;
+		padding: calc(1.375 * #{$size__spacing-unit});
+
+		p {
+			padding-left: 0;
+			padding-right: 0;
+		}
+
+		@include media(tablet) {
+			padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit});
+		}
+	}
+}
+
+.wp-block[data-type="core/cover"][data-align="wide"],
+.wp-block[data-type="core/cover"][data-align="full"] {
+
+	@include media(tablet) {
+
+		h2,
+		.wp-block-cover-text {
+			max-width: calc(8 * (100vw / 12));
+		}
+	}
+
+	@include media(desktop) {
+
+		h2,
+		.wp-block-cover-text {
+			max-width: calc(6 * (100vw / 12));
+		}
+	}
+}
+
+.wp-block[data-type="core/cover"][data-align="full"] {
+
+	@include media(tablet) {
+
+		.wp-block-cover {
+			padding-left: calc(10% + 64px);
+			padding-right: calc(10% + 64px);
+		}
+	}
+}
+
+/** === Gallery === */
+
+.wp-block-gallery {
+
+	.blocks-gallery-image figcaption,
+	.blocks-gallery-item figcaption,
+	.gallery-item .gallery-caption {
+		font-size: $font__size-xs;
+		line-height: 1.6;
+	}
+}
+
+/** === Button === */
+
+.wp-block-button {
+
+	.wp-block-button__link {
+		line-height: 1.8;
+		@include font-family( $font__heading );
+		font-size: $font__size-sm;
+		font-weight: bold;
+	}
+
+	&:not(.is-style-outline) .wp-block-button__link {
+		background: $color__background-button;
+	}
+
+	&:not(.is-style-squared) .wp-block-button__link {
+		border-radius: 5px;
+	}
+
+	&.is-style-outline,
+	&.is-style-outline:hover,
+	&.is-style-outline:focus,
+	&.is-style-outline:active {
+		background: transparent;
+		color: $color__background-button;
+
+		.wp-block-button__link {
+			background: transparent;
+
+			&:not(.has-text-color) {
+				color: $color__background-button;
+			}
+		}
+	}
+}
+
+/** === Blockquote === */
+
+.wp-block-quote {
+
+	&:not(.is-large):not(.is-style-large) {
+		border-width: 2px;
+		border-color: $color__link;
+	}
+
+	&.is-large,
+	&.is-style-large {
+		margin-top: $font__size-xxl;
+		margin-bottom: $font__size-xxl;
+	}
+
+	&.is-large p,
+	&.is-style-large p {
+		font-size: $font__size-lg;
+		line-height: 1.3;
+		margin-bottom: 0.5em;
+		margin-top: 0.5em;
+	}
+
+	cite,
+	footer,
+	.wp-block-quote__citation {
+		@include font-family( $font__heading );
+		font-size: $font__size-xs;
+		line-height: 1.6;
+		color: $color__text-light;
+	}
+}
+
+/** === Pullquote === */
+
+.wp-block-pullquote {
+	border-color: transparent;
+	border-width: 2px;
+	color: #000;
+
+	blockquote {
+		margin-top: calc(3 * #{ $size__spacing-unit});
+		margin-bottom: calc(3.33 * #{ $size__spacing-unit});
+		hyphens: auto;
+		word-break: break-word;
+	}
+
+	&:not(.is-style-solid-color) .wp-block-pullquote__citation {
+		color: $color__text-light;
+	}
+
+	&.is-style-solid-color {
+
+		blockquote {
+			width: calc(100% - (2 * #{ $size__spacing-unit}));
+			max-width: calc( 100% - (2 * #{ $size__spacing-unit}));
+
+			a,
+			&.has-text-color p,
+			&.has-text-color a {
+				color: inherit;
+			}
+
+			&:not(.has-text-color) {
+				color: $color__background-body;
+			}
+
+			@include media(tablet) {
+				max-width: 80%;
+			}
+		}
+
+		&:not(.has-background-color) {
+			background-color: $color__link;
+		}
+	}
+}
+
+.wp-block[data-type="core/pullquote"],
+.wp-block[data-type="core/pullquote"][data-align="left"],
+.wp-block[data-type="core/pullquote"][data-align="right"] {
+
+	blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
+	blockquote > .editor-rich-text p,
+	p {
+		font-size: $font__size-lg;
+		font-style: italic;
+		line-height: 1.3;
+		margin-bottom: 0.5em;
+		margin-top: 0.5em;
+
+		@include media(tablet) {
+			font-size: $font__size-xl;
+		}
+	}
+
+	.wp-block-pullquote__citation {
+		@include font-family( $font__heading );
+		font-size: $font__size-xs;
+		line-height: 1.6;
+		text-transform: none;
+	}
+
+	em {
+		font-style: normal;
+	}
+}
+
+.wp-block[data-type="core/pullquote"][data-align="left"],
+.wp-block[data-type="core/pullquote"][data-align="right"] {
+
+	.editor-block-list__block-edit {
+		width: calc(4 * (100vw / 12));
+		max-width: 50%;
+
+		.wp-block-pullquote:not(.is-style-solid-color) {
+			padding: 0;
+		}
+
+		.wp-block-pullquote.is-style-solid-color {
+			padding: 1em;
+		}
+	}
+
+	blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
+	blockquote > .editor-rich-text p,
+	p,
+	.wp-block-pullquote__citation {
+		text-align: left;
+	}
+}
+
+.wp-block[data-type="core/pullquote"][data-align="full"] {
+
+	@include media(tablet) {
+
+		.wp-block-pullquote blockquote {
+			max-width: calc(80% - 128px);
+		}
+	}
+}
+
+
+/** === File === */
+
+.wp-block-file {
+	@include font-family( $font__heading );
+
+	.wp-block-file__textlink {
+		text-decoration: underline;
+		color: $color__link;
+
+		&:hover {
+			color: $color__link-hover;
+			text-decoration: none;
+		}
+	}
+
+	.wp-block-file__button {
+		display: table;
+		line-height: 1.8;
+		font-size: $font__size-sm;
+		font-weight: bold;
+		background-color: $color__link;
+		border-radius: 5px;
+	}
+
+	.wp-block-file__button-richtext-wrapper {
+		display: block;
+		margin-top: calc(0.75 * #{$size__spacing-unit});
+		margin-left: 0;
+	}
+
+}
+
+/** === Verse === */
+
+.wp-block-verse,
+.wp-block-verse pre {
+	padding: 0;
+}
+
+/** === Code === */
+
+.wp-block-code {
+	border-radius: 0;
+}
+
+/** === Table === */
+
+.wp-block-table {
+
+	td, th {
+		border-color: $color__text-light;
+	}
+}
+
+/** === Separator === */
+
+.wp-block-separator {
+
+	&:not(.is-style-dots) {
+		background-color: $color__text-light;
+		height: 2px;
+	}
+
+	&:not(.is-style-wide):not(.is-style-dots) {
+		width: $font__size-xl;
+		margin-left: 0;
+	}
+
+	&.is-style-dots {
+		color: $color__text-light;
+	}
+
+	&.is-style-dots:before {
+		font-size: $font__size-lg;
+		letter-spacing: calc(2 * #{$size__spacing-unit});
+		padding-left: calc(2 * #{$size__spacing-unit});
+	}
+}
+
+/* Remove duplicate rule-line when a separator
+ * is followed by an H1, or H2 */
+.wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before,
+.wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before {
+	display: none;
+}
+
+/** === Latest Posts, Archives, Categories === */
+
+ul.wp-block-archives,
+.wp-block-categories,
+.wp-block-latest-posts {
+	padding: 0;
+	list-style-type: none;
+
+	ul {
+		padding: 0;
+		list-style-type: none;
+	}
+
+	li {
+
+		> a {
+			@include font-family( $font__heading );
+			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
+			font-weight: bold;
+			line-height: $font__line-height-heading;
+			text-decoration: none;
+		}
+
+		ul {
+			padding-left: $size__spacing-unit;
+		}
+	}
+}
+
+.wp-block-categories {
+
+	ul {
+		padding-top: ( .75 * $size__spacing-unit );
+		@include nestedSubMenuPadding();
+	}
+
+	li ul {
+		list-style: none;
+		padding-left: 0;
+		margin-bottom: ( -.75 * $size__spacing-unit );
+	}
+
+}
+
+/** === Latest Posts === */
+.wp-block-latest-posts {
+
+	.wp-block-latest-posts__post-date {
+		@include font-family( $font__heading );
+		font-size: $font__size-xs;
+		color: $color__text-light;
+		line-height: 1.2;
+	}
+
+	.wp-block-latest-posts__post-full-content,
+	.wp-block-latest-posts__post-excerpt {
+		margin-top: $font__size_base;
+		margin-bottom: $font__size_base;
+
+		> div > p:first-child {
+			margin-top: $font__size_base;
+		}
+	}
+
+	li {
+		padding-bottom: ( .5 * $size__spacing-unit );
+
+		&.menu-item-has-children,
+		&:last-child {
+			padding-bottom: 0;
+		}
+
+		:not(:last-child) .wp-block-latest-posts__post-excerpt {
+			padding-bottom: ( .5 * $size__spacing-unit );
+		}
+	}
+
+	&.is-grid {
+		li {
+			border-top: 2px solid $color__border;
+			padding-top: (1 * $size__spacing-unit);
+			margin-bottom: (2 * $size__spacing-unit);
+			a {
+				&:after {
+					content: '';
+				}
+			}
+			&:last-child {
+				margin-bottom: auto;
+				a:after {
+					content: '';
+				}
+			}
+		}
+	}
+}
+
+/** === Latest Comments === */
+
+.wp-block-latest-comments {
+
+	.wp-block-latest-comments__comment-meta {
+		@include font-family( $font__heading );
+		font-weight: bold;
+
+		.wp-block-latest-comments__comment-date {
+			font-weight: normal;
+		}
+	}
+
+	.wp-block-latest-comments__comment,
+	.wp-block-latest-comments__comment-date,
+	.wp-block-latest-comments__comment-excerpt p {
+		font-size: inherit;
+	}
+
+	.wp-block-latest-comments__comment-date {
+		font-size: $font__size-xs;
+	}
+}
+
+/** === Classic Editor === */
+
+/* Properly center-align captions in the classic-editor block */
+.wp-caption {
+	dd {
+		color: $color__text-light;
+ 		font-size: $font__size-xs;
+ 		@include font-family( $font__heading );
+ 		line-height: $font__line-height-pre;
+ 		margin: 0;
+ 		padding: ( $size__spacing-unit * .5 );
+ 		text-align: left;
+		text-align: center;
+		-webkit-margin-start: 0px;
+		margin-inline-start: 0px;
+	}
+}
+
+.wp-block-freeform {
+
+	/* Add style for galleries in classic-editor block */
+	blockquote {
+		border-left: 2px solid $color__link;
+
+		cite {
+			@include font-family( $font__heading );
+			font-size: $font__size-xs;
+			font-style: normal;
+			line-height: 1.6;
+			color: $color__text-light;
+		}
+	}
+}
+
+/** === Group Block === */
+
+// This matches the 22px value for 1rem that used on the front end.
+// It must be specified in pixels for the editor, since the root font 
+// size is different here. 
+$group-block-background__padding: $font__size_base;
+
+.wp-block[data-type="core/group"] {
+
+	// Group block base styles
+	> .editor-block-list__block-edit > div > .wp-block-group {
+
+		// Child: Full alignment
+		> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+			left: 0;
+		}
+	}
+
+	// Group block with background color
+	> .editor-block-list__block-edit > div > .wp-block-group.has-background {
+		padding: $group-block-background__padding;
+
+		// Child: Full alignment
+		> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+			margin-left: -$group-block-background__padding;
+			width: calc(100% + #{$group-block-background__padding * 2});
+			max-width: calc(100% + #{$group-block-background__padding * 2});
+		}
+	}
+
+	// Wide and full alignments
+	&[data-align="wide"] {
+
+		// Group block base styles.
+		> .editor-block-list__block-edit > div > .wp-block-group {
+
+			// Child blocks: Default alignments
+			> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+				@include media(tablet) {
+					width: calc(8 * (100vw / 12));
+				}
+
+				@include media(desktop) {
+					width: calc(6 * (100vw / 12 ));
+				}
+			}
+		}
+
+		// Group block with background color
+		> .editor-block-list__block-edit > div > .wp-block-group.has-background {
+			
+			// Child blocks: Default alignments
+			> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+				@include media(tablet) {
+					width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
+				}
+
+				@include media(desktop) {
+					width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
+				}
+			}
+		}
+	}
+
+	// Full alignment
+	&[data-align="full"] {
+
+		// Max-width needs to be a pixel narrower than usual to prevent horizontal scrolling.
+		@include media(mobile) {
+			max-width: calc(100% + 89px);
+		}
+		@include media(tablet) {
+			max-width: calc(125% + 114px);
+		}
+
+		// Group block base styles
+		> .editor-block-list__block-edit > div > .wp-block-group {
+
+			// Margins & padding are added to this container to mimic 
+			// the style + spacing of the .editor-writing-flow global 
+			// container. This way, child items sync up with the placement 
+			// and size of other top-level blocks. 
+			> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
+
+				@include media(mobile) {
+					padding-left: 46px;
+					padding-right: 46px;
+				}
+
+				// 2px of extra padding are added to each side here
+				// To better match up with the spacing of the whole 
+				// document. 
+				@include media(tablet) {
+					width: 80%;
+					margin-left: 10%;
+					margin-right: 10%;
+					padding-left: 48px;
+					padding-right: 48px; 
+				}
+
+				// Child blocks: All alignments except full
+				 > .wp-block:not([data-align="full"]) {
+					max-width: calc(100vw - (2 * 1rem));
+
+					@include media(tablet) {
+						max-width: calc(8 * (100vw / 12));
+					}
+
+					@include media(desktop) {
+						max-width: calc(6 * (100vw / 12));
+					}
+				}
+
+				// Child blocks: Right alignments
+				> .wp-block[data-align="right"] {
+
+					@include media(tablet) {
+						max-width: 125%;
+					}
+				}
+
+				// Child blocks: Wide alignments
+				> .wp-block[data-align="wide"] {
+
+					@include media(tablet) {
+						width: calc(100% + 4px);
+						max-width: calc(100% + 4px);
+					}
+				}
+
+				// Child blocks: Full alignments
+				> .wp-block[data-align=full] {
+					max-width: calc(100vw + (2 * 1rem));
+
+					@include media(mobile) {
+						width: calc(100% + 92px);
+						left: -46px;
+					}
+
+					@include media(tablet) {
+						left: calc(-12.5% - 58px);
+						width: calc(125% + 120px);
+						max-width: calc(125% + 119px);
+					}
+				}
+			}
+		}
+
+		// Group block with background color
+		> .editor-block-list__block-edit > div > .wp-block-group.has-background {
+
+			// When the Group block is full width, we can remove the left/right padding
+			// and let this inherit the 
+			padding: $group-block-background__padding 0;
+
+			@include media(mobile) {
+				padding-left: 0;
+				padding-right: 0;
+			}
+
+			// Child blocks: Full alignment
+			> .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+				margin-left: 0;
+				width: 100%;
+
+				@include media(mobile) {
+					width: calc(100% + 92px);
+				}
+
+				@include media(tablet) {
+					width: calc(125% + 120px);
+				}
+			}
+		}
+	}
+}