/* Theme Name: Affinity Description: Used to style Gutenberg Blocks. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 General Block Styles 2.0 Blocks - Common Blocks 3.0 Blocks - Formatting 4.0 Blocks - Layout Elements 5.0 Blocks - Widgets 6.0 Blocks - Colors --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 General Block Styles --------------------------------------------------------------*/ /* Captions */ [class^="wp-block-"] figcaption { font-size: 13.2px; font-style: italic; margin-bottom: 1.6em; max-width: 100%; } /*-------------------------------------------------------------- 2.0 Blocks - Common Blocks --------------------------------------------------------------*/ /* Paragraph */ p.has-drop-cap:not(:focus)::first-letter { font-family: Lora, Baskerville, Georgia, Times, serif; font-size: 64px; } /* Images */ .wp-block-cover { display: flex; } /* Full Width */ .no-sidebar.page figure.alignfull, .no-sidebar.page .wp-block-cover.alignfull, .no-sidebar.page .wp-block-gallery.alignfull, .no-sidebar.page .wp-block-embed.is-type-video.alignfull { width: 100vw; max-width: 100vw; margin-left: 0; margin-right: 0; position: relative; left: 50%; transform: translateX( -50% ); } .rtl.no-sidebar.page figure.alignfull, .rtl.no-sidebar.page .wp-block-cover.alignfull, .rtl.no-sidebar.page .wp-block-gallery.alignfull, .rtl.no-sidebar.page .wp-block-embed.is-type-video.alignfull { left: auto; right: 50%; transform: translateX( 50% ); } .no-sidebar.page .wp-block-embed.is-type-video.alignfull:before { content: ""; display: block; } .no-sidebar.page .wp-block-embed.is-type-video.alignfull iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .wp-embed-aspect-1-1:before { padding-top: 100%; } .wp-embed-aspect-2-1:before { padding-top: 50%; } .wp-embed-aspect-1-2:before { padding-top: 200%; } .wp-embed-aspect-4-3:before { padding-top: 75%; } .wp-embed-aspect-16-9:before { padding-top: 56.25%; } /* Wide Width */ @media screen and ( min-width: 48em ) { figure.alignwide.below-sidebar.below-entry-meta, .wp-block-cover.alignwide.below-sidebar.below-entry-meta, .wp-block-gallery.alignwide.below-sidebar.below-entry-meta, .wp-block-embed.is-type-video.alignwide.below-sidebar.below-entry-meta { width: 120%; max-width: 120%; margin-left: -10%; margin-right: -10%; position: relative; } .wp-block-embed.is-type-video.alignwide.below-sidebar.below-entry-meta:before { content: ""; display: block; } .wp-block-embed.is-type-video.alignwide.below-sidebar.below-entry-meta iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } } /* Gallery */ .wp-block-gallery { margin-bottom: 1.6em; margin-left: auto; } /* Quote */ .wp-block-quote:not(.is-large):not(.is-style-large).alignleft, .wp-block-quote:not(.is-large):not(.is-style-large).alignright { } .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft, .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright { } .wp-block-quote cite { display: block; text-align: right; font-style: normal; font-size: 16px; } .wp-block-quote cite:before { } .wp-block-quote.is-large, .wp-block-quote.is-style-large { padding: .4em 0 .8em; } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-size: 26px; } /* Audio */ .wp-block-audio audio { display: block; width: 100%; } /* File */ .wp-block-file .wp-block-file__button { background: #1a1a1a; border: 0; border-radius: 2px; color: #fff; font-family: Montserrat, "Helvetica Neue", sans-serif; font-weight: 700; letter-spacing: 0.046875em; line-height: 1; padding: 0.84375em 0.875em 0.78125em; text-transform: uppercase; } .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus { background: #007acc; } .wp-block-file .wp-block-file__button:focus { outline: thin dotted; outline-offset: -4px; } .rtl .wp-block-file * + .wp-block-file__button { margin-left: 0.75em; margin-right: 0; } /*-------------------------------------------------------------- 3.0 Blocks - Formatting Blocks --------------------------------------------------------------*/ /* Verse */ .wp-block-verse { background-color: transparent; padding: 0; font-family: inherit; color: inherit; font-size: inherit; } /* Code */ .wp-block-code { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 13.2px; } /* Pullquote */ .wp-block-pullquote { padding: 0; } .wp-block-pullquote blockquote { color: #99908a; font-size: 18px; font-style: italic; margin: 0; border-top: 3px solid #e8e9ea; padding-top: .8em; border-bottom: 1px solid #e8e9ea; margin-bottom: .8em; padding-bottom: .8em; } .wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p { font-size: 18px; } .rtl .wp-block-pullquote blockquote { } .wp-block-pullquote p { } .wp-block-pullquote cite { color: #99908a; display: block; text-transform: uppercase; text-align: center; font-size: 14px; } .wp-block-pullquote cite:before { } /* Table */ .wp-block-table, .wp-block-table th, .wp-block-table td { } .wp-block-table { } .wp-block-table th, .wp-block-table td { } .wp-block-table th { } .wp-block-table td { } .rtl .wp-block-table th, .rtl .wp-block-table td { } /*-------------------------------------------------------------- 4.0 Blocks - Layout Elements --------------------------------------------------------------*/ /* Buttons */ .wp-block-button .wp-block-button__link { border-radius: 0; color: white; display: inline-block; font-size: 13.2px; font-family: Raleway, "Helvetica Neue", sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; line-height: 1; transition: 0.3s; text-decoration: none; } .wp-block-button__link:not(.has-background) { background-color: #99908a; outline: 4px solid #99908a; border: 2px solid white; position: relative; left: 4px; } .wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus { } .wp-block-button__link:not(.has-background):active, .wp-block-button__link:not(.has-background):focus, .wp-block-button__link:not(.has-background):hover { outline-color: #5e5853; background-color: #5e5853; } /* Seperator */ hr.wp-block-separator { border: 0; } .wp-block-separator { margin-left: auto; margin-right: auto; max-width: 66%; } .wp-block-separator.is-style-wide { max-width: 100%; } /*-------------------------------------------------------------- 5.0 Blocks - Widget Blocks --------------------------------------------------------------*/ /* Latest Comments */ .wp-block-latest-comments__comment-meta a { box-shadow: none; font-weight: 700; } .wp-block-latest-comments__comment-date { font-size: 13px; } .wp-block-latest-comments .wp-block-latest-comments__comment { margin-bottom: 0; padding: 1.6em 0; } .wp-block-latest-comments__comment-excerpt p:last-child { margin-bottom: 0; } /*-------------------------------------------------------------- 6.0 Blocks - Colors --------------------------------------------------------------*/ .has-dark-gray-color { color: #1a1a1a; } .has-dark-gray-background-color { background-color: #1a1a1a; } .has-medium-gray-color { color: #686868; } .has-medium-gray-background-color { background-color: #686868; } .has-light-gray-color { color: #e5e5e5; } .has-light-gray-background-color { background-color: #e5e5e5; } .has-white-color { color: #fff; } .has-white-background-color { background-color: #fff; } .has-blue-gray-color { color: #4d545c; } .has-blue-gray-background-color { background-color: #4d545c; } .has-bright-blue-color { color: #007acc; } .has-bright-blue-background-color { background-color: #007acc; } .has-light-blue-color { color: #9adffd; } .has-light-blue-background-color { background-color: #9adffd; } .has-dark-brown-color { color: #402b30; } .has-dark-brown-background-color { background-color: #402b30; } .has-medium-brown-color { color: #774e24; } .has-medium-brown-background-color { background-color: #774e24; } .has-dark-red-color { color: #640c1f; } .has-dark-red-background-color { background-color: #640c1f; } .has-bright-red-color { color: #ff675f; } .has-bright-red-background-color { background-color: #ff675f; } .has-yellow-color { color: #ffef8e; } .has-yellow-background-color { background-color: #ffef8e; } /* Media queries */ @media screen and ( min-width: 68em ) { .wp-block-quote, .wp-block-pullquote blockquote { font-size: 26px; } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-size: 36px; } }