├── .gitattributes
├── screenshot.png
├── scss
    ├── blocks
    │   ├── _misc.scss
    │   ├── _more.scss
    │   ├── _blockgallery.scss
    │   ├── _verse.scss
    │   ├── _table.scss
    │   ├── _audio-video.scss
    │   ├── _code.scss
    │   ├── _embed.scss
    │   ├── _font-sizes.scss
    │   ├── _list.scss
    │   ├── _preformatted.scss
    │   ├── _file.scss
    │   ├── _paragraph.scss
    │   ├── _captions.scss
    │   ├── _archives-categories.scss
    │   ├── _latest-comments.scss
    │   ├── _separator.scss
    │   ├── _image.scss
    │   ├── _cover.scss
    │   ├── _gallery.scss
    │   ├── _button.scss
    │   ├── _color-palette.scss
    │   ├── _quote.scss
    │   ├── _latest-posts.scss
    │   ├── _columns.scss
    │   ├── _pullquote.scss
    │   ├── _blocks.scss
    │   └── _coblocks.scss
    ├── modules
    │   ├── _clearings.scss
    │   ├── _error404.scss
    │   ├── _night-mode.scss
    │   ├── _cf7.scss
    │   ├── _pagination.scss
    │   ├── _ninja.scss
    │   ├── _gravity.scss
    │   ├── _accessibility.scss
    │   ├── _icons.scss
    │   ├── _print.scss
    │   ├── _customizer.scss
    │   ├── _comments.scss
    │   └── night-mode-content.scss
    ├── layout
    │   ├── _main.scss
    │   ├── _layout.scss
    │   ├── _search.scss
    │   ├── _footer.scss
    │   ├── _header-search.scss
    │   ├── _header.scss
    │   └── _posts.scss
    ├── navigation
    │   ├── _links.scss
    │   ├── _social.scss
    │   ├── _dropdown.scss
    │   └── _navigation.scss
    ├── typography
    │   ├── _typography.scss
    │   ├── _copy.scss
    │   └── _headings.scss
    ├── media
    │   ├── _media.scss
    │   ├── _galleries.scss
    │   └── _captions.scss
    ├── elements
    │   ├── _elements.scss
    │   ├── _fields.scss
    │   └── _buttons.scss
    ├── _normalize.scss
    ├── widgets
    │   └── _widgets.scss
    ├── _variables.scss
    ├── _base.scss
    ├── style.scss
    └── _mixins.scss
├── assets
    ├── images
    │   └── logo.png
    └── js
    │   ├── skip-link-focus-fix.js
    │   ├── customize-control-range.js
    │   ├── customize-controls.js
    │   ├── global.js
    │   ├── navigation.js
    │   └── customize-preview.js
├── .gitignore
├── inc
    ├── customizer
    │   ├── scss
    │   │   ├── _variables.scss
    │   │   ├── customize-controls.scss
    │   │   └── customize-range-control.scss
    │   ├── defaults.php
    │   ├── class-coblocks-upgrade-control.php
    │   ├── sanitization.php
    │   ├── customizer-editor.php
    │   ├── class-coblocks-range-control.php
    │   └── customizer-css.php
    ├── template-functions.php
    ├── auto-load-next-post.php
    ├── icons.php
    ├── back-compat.php
    ├── jetpack.php
    └── plugins.php
├── 404.php
├── sidebar.php
├── page.php
├── searchform.php
├── components
    ├── post
    │   ├── content-excerpt.php
    │   └── content.php
    └── page
    │   └── content-page.php
├── single.php
├── README.md
├── archive.php
├── footer.php
├── package.json
├── index.php
├── search.php
├── CONTRIBUTING.md
├── comments.php
├── header.php
└── README.txt


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/godaddy-wordpress/coblocks-theme/HEAD/screenshot.png


--------------------------------------------------------------------------------
/scss/blocks/_misc.scss:
--------------------------------------------------------------------------------
1 | .entry-content > iframe[id*="blubrryplayer"] {
2 | 	display: block;
3 | }
4 | 


--------------------------------------------------------------------------------
/scss/blocks/_more.scss:
--------------------------------------------------------------------------------
1 | .entry-content {
2 | 	> [id*="more-"] {
3 | 		display: none;
4 | 	}
5 | }
6 | 


--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/godaddy-wordpress/coblocks-theme/HEAD/assets/images/logo.png


--------------------------------------------------------------------------------
/scss/modules/_clearings.scss:
--------------------------------------------------------------------------------
1 | .clear,
2 | .clearfix,
3 | .textwidget,
4 | .site-footer,
5 | .entry-content,
6 | .primary-menu,
7 | article[class^="post-"] {
8 | 	@include clearfix;
9 | }


--------------------------------------------------------------------------------
/scss/modules/_error404.scss:
--------------------------------------------------------------------------------
 1 | .error404 {
 2 | 
 3 | 	.page-header {
 4 | 		margin: 0 auto 30px;
 5 | 	}
 6 | 
 7 | 	.search-form {
 8 | 		max-width: 300px;
 9 | 		margin: 0 auto;
10 | 	}
11 | }
12 | 


--------------------------------------------------------------------------------
/scss/layout/_main.scss:
--------------------------------------------------------------------------------
 1 | .site-content {
 2 | 	overflow: hidden;
 3 | 	z-index: 2;
 4 | 	padding-top: 3em;
 5 | 
 6 | 	@media only screen and (min-width: 700px) {
 7 | 		padding-top: 4em;
 8 | 	}
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.cache
 2 | .ftppass
 3 | *.sublime-project
 4 | *.sublime-workspace
 5 | *.DS_Store
 6 | *.log
 7 | *.zip
 8 | *.map
 9 | *.pot
10 | *.css
11 | *.min.css
12 | *.min.js
13 | _demo/
14 | _dist/
15 | node_modules
16 | environment.json
17 | 


--------------------------------------------------------------------------------
/scss/blocks/_blockgallery.scss:
--------------------------------------------------------------------------------
 1 | .wp-block-blockgallery-stacked {
 2 | 
 3 | 	.blockgallery--caption {
 4 | 		margin-bottom: 0 !important;
 5 | 	}
 6 | 
 7 | 	li:last-child .blockgallery--caption {
 8 | 		margin-bottom: -10px !important;
 9 | 	}
10 | }
11 | 


--------------------------------------------------------------------------------
/scss/blocks/_verse.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-verse {
 3 | 		@include blockMobileDisplay();
 4 | 		font-size: $font__size-xs;
 5 | 		line-height: 1.8;
 6 | 		padding-top: 0.7em;
 7 | 		padding-bottom: 0.65em;
 8 | 		padding-left: 1em;
 9 | 	}
10 | }
11 | 


--------------------------------------------------------------------------------
/scss/blocks/_table.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-table {
 3 | 		@include blockMobileDisplay();
 4 | 		padding: 20px 25px;
 5 | 
 6 | 		@media screen and (max-width: $content__width) {
 7 | 			width: calc( 100% - #{$content__padding * 2} );
 8 | 		}
 9 | 	}
10 | }
11 | 


--------------------------------------------------------------------------------
/scss/blocks/_audio-video.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-audio {
 3 | 		audio {
 4 | 			margin-bottom: -10px;
 5 | 			width: 100%;
 6 | 		}
 7 | 	}
 8 | 
 9 | 	.wp-block-video {
10 | 		video {
11 | 			margin-bottom: -10px;
12 | 			width: 100%;
13 | 		}
14 | 	}
15 | }
16 | 


--------------------------------------------------------------------------------
/scss/blocks/_code.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-code {
 3 | 		@include blockMobileDisplay();
 4 | 		padding: 0.8em 1.1em;
 5 | 
 6 | 		&,
 7 | 		code {
 8 | 			background: none;
 9 | 		}
10 | 
11 | 		code {
12 | 			font-size: 14px;
13 | 			line-height: 1.8;
14 | 			padding: 0;
15 | 			top: 0;
16 | 		}
17 | 	}
18 | }


--------------------------------------------------------------------------------
/scss/blocks/_embed.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-embed {
 3 | 		.jetpack-video-wrapper,
 4 | 		.fluid-width-video-wrapper {
 5 | 			margin: 0;
 6 | 		}
 7 | 
 8 | 		&-twitter {
 9 | 			.twitter-tweet {
10 | 				margin-bottom: 0 !important;
11 | 				margin-left: auto;
12 | 				margin-right: auto;
13 | 			}
14 | 		}
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/scss/blocks/_font-sizes.scss:
--------------------------------------------------------------------------------
 1 | .has-small-font-size {
 2 | 	font-size: $font__size-editor--small;
 3 | }
 4 | 
 5 | .has-medium-font-size {
 6 | 	font-size: $font__size-editor--medium;
 7 | }
 8 | 
 9 | .has-large-font-size {
10 | 	font-size: $font__size-editor--large;
11 | }
12 | 
13 | .has-huge-font-size {
14 | 	font-size: $font__size-editor--huge;
15 | }
16 | 


--------------------------------------------------------------------------------
/inc/customizer/scss/_variables.scss:
--------------------------------------------------------------------------------
 1 | // Transitions.
 2 | $range--opacity-speed: 150ms;
 3 | $range--opacity-cubic: cubic-bezier(0.694, 0.0482, 0.335, 1);
 4 | 
 5 | // Colors.
 6 | $white: #fff;
 7 | $gray: #555d66;
 8 | $blue: #0073aa;
 9 | $red: #dc3232;
10 | $customizer_blue: #0085ba;
11 | $customizer_blue_bg: rgba(0, 167, 233, 0.075);
12 | 
13 | $background: #eee;
14 | $border-color: #b4b9be;
15 | 


--------------------------------------------------------------------------------
/scss/modules/_night-mode.scss:
--------------------------------------------------------------------------------
 1 | $night_mode_background_base: #1c1b1b;
 2 | $night_mode_background: #1c1b1b !important;
 3 | $night_mode_text: #939393 !important;
 4 | $night_mode_heading: #d3d3d3 !important;
 5 | 
 6 | .night-mode {
 7 | 	@import "night-mode-content";
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 | 	@import "night-mode-content";
12 | 
13 | 	#night-mode-toggle {
14 | 		display: none !important;
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/scss/blocks/_list.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	ul,
 3 | 	ol {
 4 | 
 5 | 		li {
 6 | 			margin: 0 0 5px 20px;
 7 | 		}
 8 | 
 9 | 		ol {
10 | 			margin-top: 7px;
11 | 			margin-bottom: 7px;
12 | 			padding-left: 0;
13 | 
14 | 			li {
15 | 				list-style: decimal;
16 | 			}
17 | 		}
18 | 
19 | 		ul {
20 | 			margin-top: 7px;
21 | 			margin-bottom: 7px;
22 | 			padding-left: 0;
23 | 
24 | 			li {
25 | 				list-style: circle;
26 | 			}
27 | 		}
28 | 	}
29 | }
30 | 


--------------------------------------------------------------------------------
/scss/blocks/_preformatted.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-preformatted {
 3 | 		background: none;
 4 | 		font-size: $font__size-xs;
 5 | 		line-height: 1.8;
 6 | 		margin-bottom: $content__spacer--mobile + 4px;
 7 | 		margin-top: $content__spacer--mobile + 5px;
 8 | 		white-space: pre-wrap;
 9 | 
10 | 		@media screen and (min-width: $content__media-query) {
11 | 			margin-bottom: $content__spacer + 5px;
12 | 			margin-top: $content__spacer + 6px;
13 | 		}
14 | 	}
15 | }
16 | 


--------------------------------------------------------------------------------
/scss/blocks/_file.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-file {
 3 | 		a {
 4 | 			box-shadow: none;
 5 | 		}
 6 | 
 7 | 		a:not(.wp-block-file__button) {
 8 | 			text-decoration: underline;
 9 | 		}
10 | 
11 | 		.wp-block-file__button {
12 | 			background: $black;
13 | 			font-size: $font__size-xs;
14 | 			font-weight: 500;
15 | 			font-family: $font__heading;
16 | 			left: 10px;
17 | 			padding: 0.6em 1.2em 0.55em;
18 | 			position: relative;
19 | 			top: -2px;
20 | 		}
21 | 	}
22 | }
23 | 


--------------------------------------------------------------------------------
/scss/navigation/_links.scss:
--------------------------------------------------------------------------------
 1 | a {
 2 | 	color: inherit;
 3 | 	text-decoration: none;
 4 | 
 5 | 	&:hover,
 6 | 	&:active {
 7 | 		outline: 0;
 8 | 	}
 9 | }
10 | 
11 | .pingback a:not(.comment-edit-link),
12 | .entry-content a:not(.wp-block-button__link) {
13 | 	box-shadow: inset 0 -1px 0 currentColor;
14 | 	text-decoration: none;
15 | 
16 | 	&:focus {
17 | 		outline: thin dotted;
18 | 	}
19 | 
20 | 	&:hover,
21 | 	&:focus {
22 | 		box-shadow: inset 0 0 0 currentColor, 0 3px 0 currentColor;
23 | 	}
24 | }
25 | 


--------------------------------------------------------------------------------
/scss/modules/_cf7.scss:
--------------------------------------------------------------------------------
 1 | .wpcf7-form {
 2 | 
 3 | 	.wpcf7-not-valid-tip {
 4 | 		@include font-size(15px);
 5 | 		margin-bottom: .9em;
 6 | 		margin-top: -1.3em;
 7 | 	}
 8 | 
 9 | 	.wpcf7-response-output {
10 | 		@include font-size(14px);
11 | 		background: $background;
12 | 		border-radius: 4px;
13 | 		border: none;
14 | 		font-family: $font__heading;
15 | 		font-style: inherit;
16 | 		text-align: center;
17 | 		padding-top: .4em;
18 | 		padding-bottom: .4em;
19 | 		margin-left: auto;
20 | 		margin-right: auto;
21 | 	}
22 | }
23 | 


--------------------------------------------------------------------------------
/scss/typography/_typography.scss:
--------------------------------------------------------------------------------
 1 | body,
 2 | button,
 3 | input,
 4 | select,
 5 | textarea {
 6 | 	@include fluid-type(600px, 1200px, 17px, 19px);
 7 | 	@include fluid-line-height(600px, 820px, 1.8, calc(1.4em + (1.6 - 1.3) * ((100vw - 18em)/(35 - 18))), 1.8);
 8 | 	color: $color__text-main;
 9 | 	font-family: $font__body;
10 | 	line-height: $font__line-height-body;
11 | }
12 | 
13 | body {
14 | 	-webkit-overflow-scrolling: touch;
15 | 	-webkit-text-size-adjust: none;
16 | 	text-rendering: optimizeLegibility;
17 | 	word-wrap: break-word;
18 | }
19 | 
20 | @import "headings";
21 | 
22 | @import "copy";
23 | 


--------------------------------------------------------------------------------
/scss/blocks/_paragraph.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.has-drop-cap {
 3 | 		&:not(:focus)::first-letter {
 4 | 			font-size: 62px;
 5 | 			font-weight: 800;
 6 | 			line-height: 1;
 7 | 			margin: 0 0.275em 0 0;
 8 | 			padding-top: 7px;
 9 | 			margin-bottom: -3px;
10 | 		}
11 | 	}
12 | 
13 | 	p.has-background {
14 | 		@include blockMobileDisplay();
15 | 		margin-bottom: $content__spacer--mobile;
16 | 		margin-top: $content__spacer--mobile;
17 | 
18 | 		@media screen and (min-width: $content__media-query) {
19 | 			margin-bottom: $content__spacer + 12px;
20 | 			margin-top: $content__spacer + 12px;
21 | 		}
22 | 	}
23 | }
24 | 


--------------------------------------------------------------------------------
/scss/modules/_pagination.scss:
--------------------------------------------------------------------------------
 1 | .pagination {
 2 | 	margin-top: 80px;
 3 | 	text-align: center;
 4 | 	@include clearfix();
 5 | 
 6 | 	a,
 7 | 	span {
 8 | 		color: $black;
 9 | 		@include font-size(12px);
10 | 		text-transform: uppercase;
11 | 		transform: translate3d(0, 0, 0);
12 | 		letter-spacing: 0.15em;
13 | 		text-decoration: none;
14 | 		display: inline-block;
15 | 		font-weight: 400;
16 | 		vertical-align: middle;
17 | 		transition: opacity 200ms cubic-bezier(0.33,0,0.2,1);
18 | 	}
19 | 
20 | 	a:hover {
21 | 		opacity: 0.4;
22 | 	}
23 | 
24 | 	.page-numbers:not(.next):not(.prev) {
25 | 		display: none;
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/scss/blocks/_captions.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 
 3 | 	figcaption {
 4 | 		display: block;
 5 | 		font-family: $font__figcaption;
 6 | 		font-size: $font__size-xs;
 7 | 		line-height: $font__line-height-pre;
 8 | 		margin: 0 0 -10px !important;
 9 | 		padding-top: 10px;
10 | 		text-align: center;
11 | 
12 | 		a {
13 | 			color: inherit;
14 | 		}
15 | 	}
16 | 
17 | 	figcaption:not(.blockgallery--caption),
18 | 	.blockgallery:not(.has-caption-color) figcaption {
19 | 		color: $gray;
20 | 	}
21 | 
22 | 	.wp-block-gallery .blocks-gallery-item figcaption {
23 | 		color: $white !important;
24 | 		margin: 0 !important;
25 | 		padding-bottom: 10px;
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/scss/media/_media.scss:
--------------------------------------------------------------------------------
 1 | .size-full,
 2 | .size-large,
 3 | .alignnone:not(.wp-block-gallery) {
 4 | 	display: block;
 5 | 	height: auto;
 6 | 	max-width: 100%;
 7 | }
 8 | 
 9 | /* Make sure embeds and iframes fit their containers. */
10 | embed,
11 | iframe,
12 | object {
13 | 	max-width: 100%;
14 | }
15 | 
16 | /*--------------------------------------------------------------
17 | ## Galleries
18 | --------------------------------------------------------------*/
19 | @import "galleries";
20 | 
21 | /*--------------------------------------------------------------
22 | ## Captions
23 | --------------------------------------------------------------*/
24 | @import "captions";
25 | 


--------------------------------------------------------------------------------
/404.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying 404 pages (not found)
 4 |  *
 5 |  * @package CoBlocks
 6 |  */
 7 | 
 8 | get_header(); ?>
 9 | 
10 | <section class="error-404 container center-align top-spacer bottom-spacer not-found">
11 | 	<header class="page-header">
12 | 		<h1 class="h1"><?php echo esc_html( apply_filters( 'coblocks_404', esc_html__( 'Yikes!', 'coblocks' ) ) ); ?></h1>
13 | 		<h2 class="h2"><?php echo esc_html( apply_filters( 'coblocks_404_text', esc_html__( 'It looks like you\'re lost.', 'coblocks' ) ) ); ?></h2>
14 | 	</header>
15 | 	<div class="page-content container--sml">
16 | 		<?php get_search_form(); ?>
17 | 	</div>
18 | </section>
19 | 
20 | <?php
21 | get_footer();
22 | 


--------------------------------------------------------------------------------
/sidebar.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The sidebar containing the main widget area
 4 |  *
 5 |  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | if ( ! is_active_sidebar( 'sidebar-1' ) ) {
11 | 	return;
12 | }
13 | ?>
14 | 
15 | <aside id="secondary" class="widget-area" role="complementary">
16 | 
17 | 	<div class="widget-area__inner">
18 | 
19 | 		<div class="widget-area__wrapper">
20 | 
21 | 			<?php do_action( 'coblocks_before_footer_widgets' ); ?>
22 | 
23 | 			<?php dynamic_sidebar( 'sidebar-1' ); ?>
24 | 
25 | 			<?php do_action( 'coblocks_after_footer_widgets' ); ?>
26 | 		</div>
27 | 
28 | 	</div>
29 | </aside>
30 | 


--------------------------------------------------------------------------------
/scss/blocks/_archives-categories.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-archives,
 3 | 	.wp-block-categories {
 4 | 
 5 | 		&.alignleft {
 6 | 			@media screen and (min-width: $content__media-query) {
 7 | 				margin-bottom: 1em;
 8 | 				padding-left: 0;
 9 | 			}
10 | 		}
11 | 
12 | 		&.alignright {
13 | 
14 | 			@media screen and (min-width: $content__media-query) {
15 | 				margin-bottom: 1em;
16 | 				padding-right: 0;
17 | 			}
18 | 
19 | 			@media screen and (max-width: $content__width) {
20 | 				margin-left: 0;
21 | 			}
22 | 		}
23 | 
24 | 		&.aligncenter {
25 | 			list-style: none;
26 | 			padding-left: 0;
27 | 			text-align: center;
28 | 		}
29 | 
30 | 		&.alignfull {
31 | 			padding-left: 20px;
32 | 		}
33 | 	}
34 | }
35 | 


--------------------------------------------------------------------------------
/scss/modules/_ninja.scss:
--------------------------------------------------------------------------------
 1 | .nf-form-content {
 2 | 	margin-top: 2em;
 3 | 
 4 | 	.nf-field-label {
 5 | 		margin-bottom: 0 !important;
 6 | 
 7 | 		label {
 8 | 			font-weight: 500;
 9 | 		}
10 | 	}
11 | 
12 | 	.ninja-forms-field {
13 | 		border-width: 2px !important;
14 | 	}
15 | 
16 | 	.nf-error-msg {
17 | 		@include font-size(15px);
18 | 		font-family: $font__heading;
19 | 	}
20 | }
21 | 
22 | .nf-error-field-errors {
23 | 	@include font-size(14px);
24 | 	background: $background;
25 | 	border-radius: 4px;
26 | 	border: none;
27 | 	color: $black !important;
28 | 	font-family: $font__heading;
29 | 	font-style: inherit;
30 | 	text-align: center;
31 | 	padding-top: .4em;
32 | 	padding-bottom: .4em;
33 | 	margin-left: auto;
34 | 	margin-right: auto;
35 | }
36 | 


--------------------------------------------------------------------------------
/scss/modules/_gravity.scss:
--------------------------------------------------------------------------------
 1 | .gform_wrapper {
 2 | 	max-width: $content__width !important;
 3 | 
 4 | 	ul,
 5 | 	.gfield {
 6 | 		list-style: none;
 7 | 		padding: 0;
 8 | 		margin: 0;
 9 | 	}
10 | 
11 | 	.gfield_checkbox {
12 | 		margin-top: 0;
13 | 	}
14 | 
15 | 	.gfield_select {
16 | 		margin-bottom: 15px;
17 | 	}
18 | 
19 | 	.ginput_container_checkbox {
20 | 		margin-bottom: 25px !important;
21 | 	}
22 | 
23 | 	ul li.field_description_below div.ginput_container_checkbox, ul li.field_description_below div.ginput_container_radio {
24 | 		margin-top: 0 !important;
25 | 	}
26 | 
27 | 	input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
28 | 		padding: .36em .95em .3em !important;
29 | 	}
30 | }
31 | 


--------------------------------------------------------------------------------
/scss/modules/_accessibility.scss:
--------------------------------------------------------------------------------
 1 | // Text meant only for screen readers.
 2 | .screen-reader-text {
 3 | 	clip: rect(1px, 1px, 1px, 1px);
 4 | 	height: 1px;
 5 | 	overflow: hidden;
 6 | 	position: absolute !important;
 7 | 	width: 1px;
 8 | 	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 9 | 
10 | 	&:focus {
11 | 		@include font-size(15px);
12 | 		background-color: $color--background-screen;
13 | 		border-radius: 3px;
14 | 		clip: auto;
15 | 		color: $color--text-screen;
16 | 		display: block;
17 | 		height: auto;
18 | 		left: 5px;
19 | 		line-height: normal;
20 | 		padding: 0.9375rem;
21 | 		text-decoration: none;
22 | 		top: 5px;
23 | 		width: auto;
24 | 		z-index: 100000;
25 | 	}
26 | }
27 | 


--------------------------------------------------------------------------------
/scss/blocks/_latest-comments.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-latest-comments {
 3 | 		margin: $content__spacer--mobile + 7px auto $content__spacer--mobile + 5px;
 4 | 		padding-left: 0;
 5 | 
 6 | 		@media screen and (min-width: $content__media-query) {
 7 | 			margin-bottom: $content__spacer + 5px;
 8 | 			margin-top: $content__spacer + 5px;
 9 | 		}
10 | 
11 | 		&.alignwide {
12 | 			@include blockWideDisplay();
13 | 		}
14 | 
15 | 		&__comment {
16 | 			@include font-size(17px);
17 | 			margin-bottom: 1.4em !important;
18 | 		}
19 | 
20 | 		&__comment-date {
21 | 			@include font-size(14px);
22 | 			color: $gray;
23 | 			font-family: $font__figcaption;
24 | 			margin-top: 0.75em;
25 | 		}
26 | 
27 | 		&__comment-excerpt p {
28 | 			font-size: 17px;
29 | 			line-height: 1.6;
30 | 			margin-bottom: 0;
31 | 		}
32 | 	}
33 | }
34 | 


--------------------------------------------------------------------------------
/assets/js/skip-link-focus-fix.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * File skip-link-focus-fix.js.
 3 |  *
 4 |  * Helps with accessibility for keyboard only users.
 5 |  *
 6 |  * Learn more: https://git.io/vWdr2
 7 |  */
 8 | (function() {
 9 | 	var isIe = /(trident|msie)/i.test( navigator.userAgent );
10 | 
11 | 	if ( isIe && document.getElementById && window.addEventListener ) {
12 | 		window.addEventListener( 'hashchange', function() {
13 | 			var id = location.hash.substring( 1 ),
14 | 				element;
15 | 
16 | 			if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
17 | 				return;
18 | 			}
19 | 
20 | 			element = document.getElementById( id );
21 | 
22 | 			if ( element ) {
23 | 				if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
24 | 					element.tabIndex = -1;
25 | 				}
26 | 
27 | 				element.focus();
28 | 			}
29 | 		}, false );
30 | 	}
31 | })();
32 | 


--------------------------------------------------------------------------------
/inc/customizer/scss/customize-controls.scss:
--------------------------------------------------------------------------------
 1 | /* Upgrade to the pro version button */
 2 | #customize-controls .control-section-upgrade-theme .accordion-section-title:hover,
 3 | #customize-controls .control-section-upgrade-theme .accordion-section-title:focus {
 4 | 	background-color: #fff;
 5 | }
 6 | 
 7 | .control-section-upgrade-theme .accordion-section-title .button {
 8 | 	margin-top: -4px !important;
 9 | 	font-weight: 400;
10 | 	margin-left: 8px;
11 | }
12 | 
13 | .rtl .control-section-upgrade-theme .accordion-section-title .button {
14 | 	margin-left: 0;
15 | 	margin-right: 8px;
16 | }
17 | 
18 | /* Minor positioning fixes */
19 | #customize-control-blogname {
20 | 	margin-top: 5px;
21 | }
22 | 
23 | #customize-control-custom_logo_border_radius {
24 | 	margin-top: -5px;
25 | 
26 | 	.customize-control-title {
27 | 		font-weight: 600;
28 | 	}
29 | }
30 | 


--------------------------------------------------------------------------------
/scss/modules/_icons.scss:
--------------------------------------------------------------------------------
 1 | #sprite {
 2 | 	@include hide;
 3 | }
 4 | 
 5 | .svg-fallback {
 6 | 	display: none;
 7 | 
 8 | 	.no-svg & {
 9 | 		display: inline-block;
10 | 	}
11 | }
12 | 
13 | /* Dropdown toggle fallbacks */
14 | 
15 | .no-svg .dropdown-toggle {
16 | 	padding: 0.5em 0 0;
17 | 	right: 0;
18 | 	text-align: center;
19 | 	width: 2em;
20 | 
21 | 	.svg-icon {
22 | 		display: none;
23 | 	}
24 | 
25 | 	.svg-fallback.icon-down {
26 | 		@include font-size(15px);
27 | 		font-weight: bold;
28 | 		line-height: 1;
29 | 		transform: rotate(180deg);
30 | 		color: $gray;
31 | 		position: relative;
32 | 		top: -3px;
33 | 		right: -10px;
34 | 	}
35 | }
36 | 
37 | .no-svg .dropdown-toggle.toggled-on .svg-fallback.icon-down {
38 | 	top: 2px;
39 | 	transform: rotate(0);
40 | }
41 | 
42 | .no-svg .dropdown-toggle .svg-fallback.icon-down:before {
43 | 	content: "\005E";
44 | }
45 | 


--------------------------------------------------------------------------------
/scss/blocks/_separator.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-separator {
 3 | 		background: none;
 4 | 		border-bottom-color: $black;
 5 | 		max-width: $content__width--less-padding - $content__padding * 2;
 6 | 
 7 | 		&:not(.is-style-wide):not(.is-style-dots) {
 8 | 			width: calc(100px - #{$content__padding} * 2);
 9 | 		}
10 | 
11 | 		&.is-style-wide {
12 | 			margin-left: $content__padding;
13 | 			margin-right: $content__padding;
14 | 
15 | 			@media screen and (min-width: $content__media-query) {
16 | 				margin-left: auto;
17 | 				margin-right: auto;
18 | 			}
19 | 		}
20 | 
21 | 		&.is-style-dots {
22 | 			opacity: 1;
23 | 			line-height: 1.7;
24 | 
25 | 			&::before {
26 | 				font-size: 36px;
27 | 				font-weight: 800;
28 | 				letter-spacing: 0.55em;
29 | 				margin-left: 19px;
30 | 				padding-left: 0;
31 | 				top: calc(50% - 28px);
32 | 			}
33 | 		}
34 | 	}
35 | }
36 | 


--------------------------------------------------------------------------------
/inc/template-functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Additional features to allow styling of the templates.
 4 |  *
 5 |  * Eventually, some of the functionality here could be replaced by core features.
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | /**
11 |  * Adds custom classes to the array of body classes.
12 |  *
13 |  * @param array $classes Classes for the body element.
14 |  * @return array (Maybe) filtered body classes.
15 |  */
16 | function coblocks_body_classes( $classes ) {
17 | 	global $post;
18 | 
19 | 	// If comments are open and there are no comments.
20 | 	if ( ! is_404() && ( ! get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) ) {
21 | 		if ( comments_open() && ! get_comments_number() ) {
22 | 			$classes[] = 'has-no-comments';
23 | 		}
24 | 	}
25 | 
26 | 	return $classes;
27 | }
28 | add_filter( 'body_class', 'coblocks_body_classes' );
29 | 


--------------------------------------------------------------------------------
/assets/js/customize-control-range.js:
--------------------------------------------------------------------------------
 1 | ( function( $, api ) {
 2 | 
 3 | 	api.controlConstructor['coblocks-range'] = api.Control.extend( {
 4 | 
 5 | 		ready: function() {
 6 | 			var control = this;
 7 | 
 8 | 			this.container.on( 'change', 'input[data-input-type="range"]', function() {
 9 | 				value = $( this ).val();
10 | 				$( this ).prev( '.coblocks-range__value' ).find( 'span' ).html( value );
11 | 				control.setting.set( value );
12 | 			} );
13 | 
14 | 			$( '.coblocks-range__reset' ).on( 'click', function () {
15 | 				var
16 | 				input        = $( this ).prev( $( 'input[data-input-type="range"]' ) ),
17 | 				defaultValue = input.data( 'default-value' );
18 | 
19 | 				input.val( defaultValue );
20 | 
21 | 				var value = input.val();
22 | 				input.prev( '.coblocks-range__value' ).find( 'span' ).html( value );
23 | 				input.change();
24 | 			});
25 | 		}
26 | 	} );
27 | 
28 | } )( jQuery, wp.customize );
29 | 


--------------------------------------------------------------------------------
/page.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying all pages.
 4 |  *
 5 |  * This is the template that displays all pages by default.
 6 |  * Please note that this is the WordPress construct of pages
 7 |  * and that other 'pages' on your WordPress site may use a
 8 |  * different template.
 9 |  *
10 |  * @link https://codex.wordpress.org/Template_Hierarchy
11 |  *
12 |  * @package CoBlocks
13 |  */
14 | 
15 | get_header();
16 | 
17 | while ( have_posts() ) :
18 | 
19 | 	the_post();
20 | 
21 | 	get_template_part( 'components/page/content', 'page' );
22 | 
23 | 	do_action( 'coblocks_before_comments' );
24 | 
25 | 	// If comments are open or we have at least one comment, load up the comment template.
26 | 	if ( comments_open() || get_comments_number() ) :
27 | 		comments_template();
28 | 	endif;
29 | 
30 | 	do_action( 'coblocks_after_comments' );
31 | 
32 | endwhile; // End of the loop.
33 | 
34 | get_footer();
35 | 


--------------------------------------------------------------------------------
/scss/layout/_layout.scss:
--------------------------------------------------------------------------------
 1 | /*--------------------------------------------------------------
 2 | # Main
 3 | --------------------------------------------------------------*/
 4 | @import "main";
 5 | 
 6 | /*--------------------------------------------------------------
 7 | # Header
 8 | --------------------------------------------------------------*/
 9 | @import "header";
10 | 
11 | /*--------------------------------------------------------------
12 | # Footer
13 | --------------------------------------------------------------*/
14 | @import "footer";
15 | 
16 | /*--------------------------------------------------------------
17 | # Posts
18 | --------------------------------------------------------------*/
19 | @import "posts";
20 | 
21 | /*--------------------------------------------------------------
22 | # Search
23 | --------------------------------------------------------------*/
24 | @import "search";
25 | @import "header-search";
26 | 


--------------------------------------------------------------------------------
/searchform.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Template for displaying search forms in CoBlocks
 4 |  *
 5 |  * @package CoBlocks
 6 |  */
 7 | 
 8 | $unique_id = esc_attr( uniqid( 'search-form-' ) ); ?>
 9 | 
10 | <form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
11 | 	<label for="<?php echo esc_attr( $unique_id ); ?>">
12 | 		<span class="screen-reader-text"><?php echo esc_html_x( 'Search for:', 'label', 'coblocks' ); ?></span>
13 | 	</label>
14 | 	<input type="search" id="<?php echo esc_attr( $unique_id ); ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'coblocks' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
15 | 	<button type="submit" class="button--chromeless search-submit"><?php echo coblocks_get_icon_svg( 'search', 27 ); ?><span class="screen-reader-text"><?php echo esc_html_x( 'Search', 'submit button', 'coblocks' ); ?></span></button>
16 | </form>
17 | 


--------------------------------------------------------------------------------
/scss/layout/_search.scss:
--------------------------------------------------------------------------------
 1 | .search-form {
 2 | 	position: relative;
 3 | 
 4 | 	.search-field {
 5 | 		margin: 0;
 6 | 	}
 7 | 
 8 | 	.search-submit {
 9 | 		bottom: 3px;
10 | 		padding: 0.2em 0.8em;
11 | 		position: absolute;
12 | 		right: -2px;
13 | 		top: 2px;
14 | 		height: 46px;
15 | 
16 | 		.svg-icon {
17 | 			fill: $black;
18 | 			top: 0.05em;
19 | 			position: relative;
20 | 		}
21 | 	}
22 | }
23 | 
24 | .search-no-results {
25 | 
26 | 	.site-main {
27 | 		@media only screen and (min-height: 500px) {
28 | 			display: flex;
29 | 			align-items: center;
30 | 			margin: 0;
31 | 			padding: 0;
32 | 			width: 100vw;
33 | 			height: 100vh;
34 | 			position: absolute;
35 | 			top: 0;
36 | 			z-index: -1;
37 | 		}
38 | 	}
39 | 
40 | 	.search-wrapper {
41 | 		margin: 0 auto !important;
42 | 		padding: 0;
43 | 		text-align: center;
44 | 	}
45 | 
46 | 	.page-header {
47 | 		margin: 0 auto 15px;
48 | 	}
49 | 
50 | 	.site-footer {
51 | 		display: none;
52 | 	}
53 | }
54 | 
55 | 


--------------------------------------------------------------------------------
/scss/media/_galleries.scss:
--------------------------------------------------------------------------------
 1 | .gallery-item {
 2 | 	display: inline-block;
 3 | 	text-align: left;
 4 | 	vertical-align: top;
 5 | 	margin: 0 0 1.5em;
 6 | 	padding: 0 1em 0 0;
 7 | 	width: 50%;
 8 | 
 9 | 	a {
10 | 		box-shadow: none !important;
11 | 	}
12 | }
13 | 
14 | .gallery-columns-1 .gallery-item {
15 | 	width: 100%;
16 | }
17 | 
18 | .gallery-columns-2 .gallery-item {
19 | 	max-width: 50%;
20 | }
21 | 
22 | .gallery-columns-3 .gallery-item {
23 | 	max-width: 33.33%;
24 | }
25 | 
26 | .gallery-item a,
27 | .gallery-item a:hover,
28 | .gallery-item a:focus {
29 | 	box-shadow: none;
30 | 	background: none;
31 | 	display: inline-block;
32 | 	max-width: 100%;
33 | }
34 | 
35 | .gallery-item a img {
36 | 	display: block;
37 | 	transition: filter 0.2s ease-in;
38 | 	backface-visibility: hidden;
39 | }
40 | 
41 | .gallery-item a:hover img,
42 | .gallery-item a:focus img {
43 | 	filter: opacity(60%);
44 | }
45 | 
46 | .gallery-caption {
47 | 	display: block;
48 | 	text-align: left;
49 | 	padding: 0 10px 0 0;
50 | 	margin-bottom: 0;
51 | }
52 | 


--------------------------------------------------------------------------------
/scss/navigation/_social.scss:
--------------------------------------------------------------------------------
 1 | .social-navigation ul li a {
 2 | 	cursor: pointer;
 3 | 	display: inline-block;
 4 | 	overflow: hidden;
 5 | 	color: $black;
 6 | }
 7 | 
 8 | .social-navigation {
 9 | 	transition: margin 0.3s cubic-bezier(0.694, 0.0482, 0.335, 1);
10 | 
11 | 	@media only screen and (max-width: 299px) {
12 | 		display: none;
13 | 	}
14 | 
15 | 	li {
16 | 		display: inline-block;
17 | 		transform: translate3d(0, 0, 0);
18 | 		line-height: 1;
19 | 		padding: 0 1px;
20 | 		max-height: 24px;
21 | 
22 | 		&:first-child {
23 | 			padding-left: 0;
24 | 		}
25 | 
26 | 		&:last-child {
27 | 			padding-right: 0;
28 | 		}
29 | 	}
30 | 
31 | 	a {
32 | 		transition: opacity 100ms cubic-bezier(0.645, 0.045, 0.355, 1);
33 | 
34 | 		@include hover {
35 | 
36 | 			&:hover {
37 | 				opacity: 0.7;
38 | 			}
39 | 		}
40 | 
41 | 	}
42 | 
43 | 	.site-header & {
44 | 		position: relative;
45 | 		margin-left: 7px;
46 | 
47 | 		svg {
48 | 			fill: $black;
49 | 		}
50 | 	}
51 | 
52 | 	.customize-partial-edit-shortcut button {
53 | 		display: none;
54 | 	}
55 | }
56 | 


--------------------------------------------------------------------------------
/components/post/content-excerpt.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Template part for displaying posts with excerpts
 4 |  *
 5 |  * Used in Search Results.
 6 |  *
 7 |  * @link https://codex.wordpress.org/Template_Hierarchy
 8 |  *
 9 |  * @package CoBlocks
10 |  */
11 | 
12 | ?>
13 | <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
14 | 
15 | 	<header class="entry-header top-spacer bottom-spacer">
16 | 
17 | 		<?php
18 | 		if ( is_front_page() && ! is_home() ) {
19 | 			// The excerpt is being displayed within a front page section, so it's a lower hierarchy than h2.
20 | 			the_title( sprintf( '<h3 class="h1"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' );
21 | 		} else {
22 | 			the_title( sprintf( '<h2 class="h1"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
23 | 		}
24 | 
25 | 		coblocks_posted_on();
26 | 		?>
27 | 
28 | 	</header>
29 | 
30 | 	<?php do_action( 'coblocks_before_content' ); ?>
31 | 
32 | 	<div class="entry-content entry-summary">
33 | 		<?php the_excerpt(); ?>
34 | 	</div>
35 | 
36 | 	<?php do_action( 'coblocks_after_content' ); ?>
37 | 
38 | </article><!-- #post-## -->
39 | 


--------------------------------------------------------------------------------
/scss/blocks/_image.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-image {
 3 | 		img {
 4 | 			display: block;
 5 | 
 6 | 			@media screen and (max-width: $content__align--mobile-media-query--max) {
 7 | 				width: 100%;
 8 | 			}
 9 | 		}
10 | 
11 | 		.alignleft {
12 | 			margin-right: $content__padding;
13 | 
14 | 			@media screen and (min-width: $content__align--mobile-media-query--min) {
15 | 				margin-right: 40px;
16 | 			}
17 | 		}
18 | 
19 | 		.alignright {
20 | 			margin-left: $content__padding;
21 | 
22 | 			@media screen and (min-width: $content__align--mobile-media-query--min) {
23 | 				margin-left: 40px;
24 | 			}
25 | 		}
26 | 
27 | 		.alignleft,
28 | 		.alignright {
29 | 			max-width: 100%;
30 | 
31 | 			@media screen and (min-width: $content__align--mobile-media-query--min) {
32 | 				margin-bottom: 1.75em;
33 | 				margin-top: 0.5em;
34 | 			}
35 | 
36 | 			// Override theme styles from core.
37 | 			@media screen and (max-width: $content__align--mobile-media-query--max) {
38 | 				display: block;
39 | 				float: none;
40 | 				margin-left: 0;
41 | 				margin-right: 0;
42 | 			}
43 | 		}
44 | 
45 | 		.alignfull img {
46 | 			margin-left: auto;
47 | 			margin-right: auto;
48 | 			width: 100vw;
49 | 		}
50 | 	}
51 | }
52 | 


--------------------------------------------------------------------------------
/scss/typography/_copy.scss:
--------------------------------------------------------------------------------
 1 | em,
 2 | cite {
 3 | 	font-style: italic;
 4 | }
 5 | 
 6 | b,
 7 | strong {
 8 | 	font-weight: bold;
 9 | }
10 | 
11 | p {
12 | 	margin: 0 0 1em;
13 | }
14 | 
15 | dfn,
16 | cite,
17 | em,
18 | i {
19 | 	font-style: italic;
20 | }
21 | 
22 | q {
23 | 	quotes: "“" "”" "‘" "’";
24 | }
25 | 
26 | address {
27 | 	font-style: italic;
28 | 	margin: 0 0 1.75em;
29 | }
30 | 
31 | code,
32 | kbd,
33 | tt,
34 | var,
35 | samp,
36 | pre {
37 | 	font-family: Menlo, Consolas, monaco, monospace;
38 | 	font-size: $font__size-xs;
39 | }
40 | 
41 | pre {
42 | 	background-color: $color--background-pre;
43 | 	clear: both;
44 | 	display: block;
45 | 	overflow: auto;
46 | 	white-space: pre-wrap;
47 | 	word-wrap: break-word;
48 | }
49 | 
50 | code {
51 | 	@include font-size(15px);
52 | 	padding: 3px 10px;
53 | 	position: relative;
54 | 	top: -1px;
55 | 	border-radius: 3px;
56 | 	background-color: $color--background-pre;
57 | }
58 | 
59 | abbr,
60 | acronym {
61 | 	border-bottom: 1px dotted $color--border-abbr;
62 | 	cursor: help;
63 | }
64 | 
65 | ins {
66 | 	background: $color--background-ins;
67 | 	text-decoration: none;
68 | }
69 | 
70 | big {
71 | 	font-size: 125%;
72 | }
73 | 
74 | strike,
75 | del {
76 | 	text-decoration: line-through;
77 | }


--------------------------------------------------------------------------------
/single.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying all single posts.
 4 |  *
 5 |  * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | get_header();
11 | 
12 | // Start the loop.
13 | while ( have_posts() ) :
14 | 
15 | 	the_post();
16 | 
17 | 	/*
18 | 	 * Include the Post-Format-specific template for the content.
19 | 	 * If you want to override this in a child theme, then include a file
20 | 	 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
21 | 	 */
22 | 	get_template_part( 'components/post/content', get_post_format() );
23 | 
24 | 	do_action( 'coblocks_before_comments' );
25 | 
26 | 	/*
27 | 	 * If comments are open or we have at least one comment, load up the comment template.
28 | 	 *
29 | 	 * @link https://codex.wordpress.org/Function_Reference/comments_open/
30 | 	 * @link https://codex.wordpress.org/Template_Tags/get_comments_number/
31 | 	 * @link https://developer.wordpress.org/reference/functions/comments_template/
32 | 	 */
33 | 	if ( comments_open() || get_comments_number() ) :
34 | 		comments_template();
35 | 	endif;
36 | 
37 | 	do_action( 'coblocks_after_comments' );
38 | 
39 | endwhile;
40 | 
41 | get_footer();
42 | 


--------------------------------------------------------------------------------
/components/page/content-page.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Template part for displaying page content in page.php
 4 |  *
 5 |  * @link https://codex.wordpress.org/Template_Hierarchy
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | ?>
11 | <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
12 | 
13 | 	<div class="page-wrapper">
14 | 
15 | 		<?php
16 | 		// Don't show the entry title on any Beaver Builder enabled pages.
17 | 		if ( ! class_exists( 'FLBuilder' ) || ! FLBuilderModel::is_builder_enabled() ) {
18 | 		?>
19 | 
20 | 			<header class="entry-header top-spacer bottom-spacer">
21 | 
22 | 				<?php do_action( 'coblocks_before_entry_title' ); ?>
23 | 
24 | 				<?php the_title( '<h1 class="entry-title h1">', '</h1>' ); ?>
25 | 
26 | 				<?php do_action( 'coblocks_after_entry_title' ); ?>
27 | 
28 | 				<?php coblocks_posted_on(); ?>
29 | 
30 | 			</header>
31 | 
32 | 		<?php } ?>
33 | 
34 | 		<?php do_action( 'coblocks_before_content' ); ?>
35 | 
36 | 		<div class="entry-content">
37 | 			<?php
38 | 				the_content();
39 | 
40 | 				wp_link_pages(
41 | 					array(
42 | 						'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'coblocks' ),
43 | 						'after'  => '</div>',
44 | 					)
45 | 				);
46 | 			?>
47 | 		</div>
48 | 
49 | 		<?php do_action( 'coblocks_after_content' ); ?>
50 | 
51 | 	</div>
52 | 
53 | </article>
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CoBlocks WordPress Theme
 2 | 
 3 | #### Notice: The CoBlocks WordPress theme in being deprecated in favor of the uber-flexible <a href="https://github.com/godaddy-wordpress/go">Go WordPress theme</a>. Go was built by the team who builds CoBlocks, and with it you'll have access to at least five global design styles, innovative design controls, header/footer variations, and WooCommerce support.
 4 | 
 5 | ## Development ##
 6 | 1. Clone the GitHub repository: `https://github.com/godaddy/coblocks-theme.git`
 7 | 2. Browse to the folder in the command line.
 8 | 3. Run the `npm install` command to install the theme's dependencies within a /node_modules/ folder.
 9 | 4. Run the `default` gulp task for development.
10 | 5. Run the `build` gulp task to process build files and generate a zip.
11 | 
12 | ## Contributions ##
13 | Please read the [guidelines for contributing](https://github.com/godaddy/coblocks-theme/blob/master/CONTRIBUTING.md) to CoBlocks. Anyone is welcome to contribute!
14 | 
15 | There are various ways you can contribute:
16 | 
17 | 1. Raise an [Issue](https://github.com/godaddy/coblocks-theme/issues/new) on GitHub
18 | 2. Send a pull request with your bug fixes and/or new features
19 | 3. Provide feedback and suggestions on [enhancements](https://github.com/godaddy/coblocks-theme/issues?direction=desc&labels=Enhancement&page=1&sort=created&state=open)


--------------------------------------------------------------------------------
/scss/blocks/_cover.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-cover {
 3 | 		@include blockMobileDisplay();
 4 | 		width: auto;
 5 | 
 6 | 		.wp-block-cover-text {
 7 | 			font-family: $font__heading;
 8 | 			font-size: $font__size-lg;
 9 | 			font-weight: $font__weight-heading;
10 | 			max-width: 600px;
11 | 			width: calc(100vw - (2 * 30px));
12 | 		}
13 | 
14 | 		&.alignwide {
15 | 			@include blockWideDisplay();
16 | 
17 | 			.wp-block-cover-text {
18 | 				max-width: calc(5 * (100vw / 12));
19 | 				padding: 30px;
20 | 			}
21 | 		}
22 | 
23 | 		&.alignfull {
24 | 			.wp-block-cover-text {
25 | 				max-width: calc(5.5 * (100vw / 12));
26 | 				padding: 50px;
27 | 			}
28 | 		}
29 | 
30 | 		&.alignleft,
31 | 		&.alignright,
32 | 		&.aligncenter {
33 | 			.wp-block-cover-text {
34 | 				left: 50%;
35 | 				padding: 20px;
36 | 				position: absolute;
37 | 				top: 50%;
38 | 				transform: translate(-50%, -50%);
39 | 				width: 100%;
40 | 				z-index: 1;
41 | 			}
42 | 		}
43 | 
44 | 		&.alignleft,
45 | 		&.alignright {
46 | 			width: calc(100% - (2 * #{$content__padding}));
47 | 
48 | 			@media screen and (min-width: $content__align--mobile-media-query--min) {
49 | 				margin-top: 0.5em;
50 | 				width: 100%;
51 | 			}
52 | 		}
53 | 
54 | 		&.has-left-content {
55 | 			justify-content: flex-start;
56 | 		}
57 | 
58 | 		&.has-right-content {
59 | 			justify-content: flex-end;
60 | 		}
61 | 	}
62 | }
63 | 


--------------------------------------------------------------------------------
/inc/customizer/defaults.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Customizer defaults
 4 |  *
 5 |  * @package CoBlocks
 6 |  */
 7 | 
 8 | /**
 9 |  * Get the default option for CoBlocks's Customizer settings.
10 |  *
11 |  * @param  string|string $name Option key name to get.
12 |  * @return mixin
13 |  */
14 | function coblocks_defaults( $name ) {
15 | 	static $defaults;
16 | 
17 | 	if ( ! $defaults ) {
18 | 		$defaults = apply_filters(
19 | 			'coblocks_defaults', array(
20 | 
21 | 				// Identity.
22 | 				'site_title'                   => false,
23 | 				'custom_logo_max_width'        => 50,
24 | 				'custom_logo_mobile_max_width' => 50,
25 | 				'custom_logo_border_radius'    => true,
26 | 
27 | 				// Colors.
28 | 				'heading_color'                => '#191521',
29 | 				'alt_heading_color'            => '#565d67',
30 | 				'text_color'                   => '#191521',
31 | 				'header_icon_color'            => '#191521',
32 | 				'nav_color'                    => '#565d67',
33 | 				'mobile_nav_color'             => '#191521',
34 | 				'footer_bg_color'              => '#f1f1f1',
35 | 				'footer_text_color'            => '#191521',
36 | 
37 | 				// Options.
38 | 				'header_search'                => true,
39 | 				'night_mode'                   => true,
40 | 				'categories'                   => true,
41 | 				'tags'                         => true,
42 | 				'author_meta'                  => true,
43 | 			)
44 | 		);
45 | 	}
46 | 
47 | 	return isset( $defaults[ $name ] ) ? $defaults[ $name ] : null;
48 | }
49 | 


--------------------------------------------------------------------------------
/archive.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying archive pages.
 4 |  *
 5 |  * @link http://codex.wordpress.org/Template_Hierarchy
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | get_header();
11 | 
12 | if ( have_posts() ) :
13 | 
14 | 	/* Start the Loop */
15 | 	while ( have_posts() ) :
16 | 
17 | 		the_post();
18 | 
19 | 		/*
20 | 		 * Include the Post-Format-specific template for the content.
21 | 		 * If you want to override this in a child theme, then include a file
22 | 		 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
23 | 		 */
24 | 		get_template_part( 'components/post/content', get_post_format() );
25 | 
26 | 	endwhile;
27 | 
28 | 	/*
29 | 	 * The posts pagination outputs a set of page numbers with links to the previous and next pages of posts.
30 | 	 *
31 | 	 * @link https://codex.wordpress.org/Function_Reference/the_posts_pagination
32 | 	 */
33 | 	the_posts_pagination(
34 | 		array(
35 | 			'prev_text'          => coblocks_get_icon_svg( 'chevron_left', 40 ) . '<span class="screen-reader-text">' . __( 'Previous page', 'coblocks' ) . '</span>',
36 | 			'next_text'          => '<span class="screen-reader-text">' . __( 'Next page', 'coblocks' ) . '</span>' . coblocks_get_icon_svg( 'chevron_right', 22 ),
37 | 			'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'coblocks' ) . ' </span>',
38 | 		)
39 | 	);
40 | 
41 | else :
42 | 	get_template_part( 'components/post/content', 'none' );
43 | endif;
44 | 
45 | get_footer();
46 | 


--------------------------------------------------------------------------------
/inc/auto-load-next-post.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Auto Load Next Post compatibility file.
 4 |  * See https://wordpress.org/plugins/auto-load-next-post/
 5 |  *
 6 |  * @package CoBlocks
 7 |  */
 8 | 
 9 | if ( ! function_exists( 'coblocks_alnp_setup' ) ) :
10 | 	/**
11 | 	 * Add Auto Load Next Post support.
12 | 	 */
13 | 	function coblocks_alnp_setup() {
14 | 		add_theme_support(
15 | 			'auto-load-next-post', array(
16 | 				'content_container'    => 'main.site-main',
17 | 				'title_selector'       => 'h1.entry-title',
18 | 				'navigation_container' => 'nav.post-navigation',
19 | 				'comments_container'   => 'div#comments',
20 | 			)
21 | 		);
22 | 	}
23 | endif;
24 | add_action( 'after_setup_theme', 'coblocks_alnp_setup' );
25 | 
26 | /**
27 |  * Filter the location of the auto load next post template.
28 |  */
29 | function coblocks_alnp_template_location() {
30 | 	return '/components/post/';
31 | }
32 | add_filter( 'alnp_template_location', 'coblocks_alnp_template_location' );
33 | 
34 | /**
35 |  * Modify the post divider with a little more pizazz.
36 |  */
37 | function coblocks_alnp_post_divider() {
38 | 	?>
39 | 	<div class="alnp--read-more center-align">
40 | 		<span id="alnp--read-more__text" class="display-inline-block sans-serif-font gray">
41 | 			<?php echo esc_html( apply_filters( 'coblocks_post_up_next', esc_html__( 'Read my next article', 'coblocks' ) ) ); ?>
42 | 		</span>
43 | 		<?php echo coblocks_get_icon_svg( 'arrow-down', 20 ); ?>
44 | 	</div>
45 | <?php
46 | }
47 | 
48 | add_action( 'alnp_load_before_loop', 'coblocks_alnp_post_divider', 0 );
49 | 


--------------------------------------------------------------------------------
/scss/blocks/_gallery.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-gallery {
 3 | 		&:not([class*="align"]) {
 4 | 			margin-bottom: -6px;
 5 | 			margin-top: $content__spacer--mobile + 12px;
 6 | 
 7 | 			@media screen and (min-width: $content__media-query) {
 8 | 				margin-top: $content__spacer + 12px;
 9 | 			}
10 | 		}
11 | 
12 | 		.blocks-gallery-item:last-child {
13 | 			margin-bottom: 16px;
14 | 		}
15 | 
16 | 		&.alignleft {
17 | 			padding-right: 0 !important;
18 | 		}
19 | 
20 | 		&.alignright {
21 | 			padding-left: 0 !important;
22 | 		}
23 | 
24 | 		&.alignleft,
25 | 		&.alignright {
26 | 			margin-top: $content__spacer - 17px;
27 | 
28 | 			@media screen and (max-width: $content__align--mobile-media-query--max) {
29 | 				margin-bottom: $content__spacer - 38px !important;
30 | 				margin-top: $content__spacer !important;
31 | 				max-width: none;
32 | 				width: calc(100% - #{$content__padding});
33 | 			}
34 | 
35 | 			@media screen and (min-width: $content__media-query) {
36 | 				padding-left: 0;
37 | 				padding-right: 0;
38 | 			}
39 | 		}
40 | 
41 | 		&.alignwide {
42 | 			margin: $content__spacer + 8px auto $content__spacer - 10px;
43 | 
44 | 			@media screen and (min-width: $content__media-query) {
45 | 				margin-bottom: $content__spacer + 6px;
46 | 				margin-top: $content__spacer + 20px;
47 | 			}
48 | 		}
49 | 
50 | 		&.alignfull {
51 | 			margin: $content__spacer + 8px 0 $content__spacer - 10px;
52 | 
53 | 			@media screen and (min-width: $content__media-query) {
54 | 				margin-bottom: $content__spacer + 15px;
55 | 				margin-top: $content__spacer + 30px;
56 | 			}
57 | 		}
58 | 	}
59 | }
60 | 


--------------------------------------------------------------------------------
/scss/elements/_elements.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 | 	box-sizing: border-box;
 3 | }
 4 | 
 5 | *,
 6 | *::before,
 7 | *::after {
 8 | 	// Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 9 | 	box-sizing: inherit;
10 | }
11 | 
12 | body {
13 | 	background: $color--background-body; // Fallback for when there is no custom background color defined.
14 | 
15 | 	&.custom-background.nav-open {
16 | 		// Hide the background image when the mobile navigation is open, because we don't want to blur the body.
17 | 		background-image: none;
18 | 	}
19 | }
20 | 
21 | hr {
22 | 	background-color: $black;
23 | 	opacity: .1;
24 | 	border: 0;
25 | 	height: 1px;
26 | 	margin: 0 0 1.5em;
27 | 
28 | 	@media (min-width: 600px) {
29 | 		margin: 0 0 1.85em;
30 | 	}
31 | 
32 | 	&.wp-block-separator {
33 | 		background: none;
34 | 	}
35 | }
36 | 
37 | img {
38 | 	height: auto; // Make sure images are scaled correctly.
39 | 	max-width: 100%; // Adhere to container width.
40 | 	vertical-align: middle;
41 | }
42 | 
43 | /*--------------------------------------------------------------
44 | #  Buttons
45 | --------------------------------------------------------------*/
46 | @import "buttons";
47 | 
48 | /*--------------------------------------------------------------
49 | # Fields
50 | --------------------------------------------------------------*/
51 | @import "fields";
52 | 
53 | .wp-activate-container {
54 | 	@include structure;
55 | 	text-align: center;
56 | 
57 | 	h2 {
58 | 		margin-bottom: .3em;
59 | 	}
60 | }


--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying the footer.
 4 |  *
 5 |  * Contains the closing of the #page div and all content after
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | ?>
11 | 
12 | 			</main>
13 | 
14 | 		</div>
15 | 
16 | 		<?php do_action( 'coblocks_before_footer' ); ?>
17 | 
18 | 		<footer class="site-footer">
19 | 
20 | 			<?php get_sidebar(); ?>
21 | 
22 | 			<div class="site-info container center-align h6 medium smooth sans-serif-font gray" role="contentinfo">
23 | 
24 | 				<span class="site-title">
25 | 					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">&copy; <?php echo esc_html( date_i18n( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></a>
26 | 				</span>
27 | 
28 | 				<span class="site-theme">
29 | 					<?php /* translators: 1: theme, 2: designer */ ?>
30 | 					<a href="https://coblocks.com/" class="powered-by-coblocks"><?php printf( esc_html__( 'Powered by %1$s', 'coblocks' ), 'CoBlocks' ); ?></a>
31 | 				</span>
32 | 
33 | 			</div>
34 | 
35 | 			<?php if ( has_nav_menu( 'footer' ) ) : ?>
36 | 
37 | 				<nav class="footer-navigation container" aria-label="<?php esc_attr_e( 'Footer Menu', 'coblocks' ); ?>">
38 | 
39 | 					<?php
40 | 					wp_nav_menu(
41 | 						array(
42 | 							'theme_location' => 'footer',
43 | 							'menu_class'     => 'footer-menu sans-serif-font medium gray smooth h6 list-reset',
44 | 							'depth'          => '1',
45 | 						)
46 | 					);
47 | 					?>
48 | 
49 | 				</nav>
50 | 
51 | 			<?php endif; ?>
52 | 
53 | 		</footer>
54 | 
55 | 		<?php do_action( 'coblocks_after_footer' ); ?>
56 | 
57 | 	</div>
58 | 
59 | 	<?php wp_footer(); ?>
60 | 
61 | 	</body>
62 | 
63 | </html>
64 | 


--------------------------------------------------------------------------------
/scss/typography/_headings.scss:
--------------------------------------------------------------------------------
 1 | h1,
 2 | h2,
 3 | h3,
 4 | h4,
 5 | h5,
 6 | h6 {
 7 | 	clear: both;
 8 | 	color: $color__text-heading;
 9 | 	font-family: $font__heading;
10 | 	font-weight: $font__weight-heading;
11 | 	line-height: $font__line-height-heading;
12 | 	margin: 0;
13 | 
14 | 	.entry-content & {
15 | 		margin-bottom: 0 !important;
16 | 		padding-top: 10px;
17 | 		position: relative;
18 | 
19 | 		&:target::before {
20 | 			border-left: 5px solid $black;
21 | 			content: "";
22 | 			height: 50%;
23 | 			height: calc(100% - 5px);
24 | 			left: 0;
25 | 			position: absolute;
26 | 			top: 5px;
27 | 		}
28 | 
29 | 		+ p {
30 | 			margin-top: $content__spacer / 2;
31 | 		}
32 | 
33 | 		+ ul,
34 | 		+ ol {
35 | 			margin-top: round($content__spacer / 2);
36 | 		}
37 | 
38 | 		+ .wp-block-image,
39 | 		+ .wp-block-gallery {
40 | 			margin-top: ($content__spacer / 2) + 10 !important;
41 | 		}
42 | 
43 | 		+ div[class*="blockgallery"] {
44 | 			margin-top: ($content__spacer / 2) + 10;
45 | 		}
46 | 	}
47 | }
48 | 
49 | h1,
50 | .h1 {
51 | 	@include fluid-type(514px, 1200px, 32px, 55px);
52 | }
53 | 
54 | h2,
55 | .h2 {
56 | 	@include fluid-type(514px, 820px, 28px, 34px);
57 | }
58 | 
59 | h3,
60 | .h3 {
61 | 	@include fluid-type(514px, 820px, 24px, 28px);
62 | }
63 | 
64 | h4,
65 | .h4 {
66 | 	@include fluid-type(514px, 820px, 20px, 25px);
67 | }
68 | 
69 | h5,
70 | .h5 {
71 | 	@include font-size(19px);
72 | 
73 | 	@media only screen and (min-width: 600px) {
74 | 		@include font-size(20px);
75 | 	}
76 | }
77 | 
78 | h6,
79 | .h6 {
80 | 	@include font-size(17px);
81 | 
82 | 	@media only screen and (min-width: 600px) {
83 | 		@include font-size(18px);
84 | 	}
85 | }
86 | 


--------------------------------------------------------------------------------
/scss/modules/_print.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | @media print {
 3 | 
 4 | 	/* Hide elements */
 5 | 
 6 | 	form,
 7 | 	button,
 8 | 	input,
 9 | 	select,
10 | 	textarea,
11 | 	.navigation-top,
12 | 	.social-navigation,
13 | 	.content-bottom-widgets,
14 | 	.header-image,
15 | 	.page-links,
16 | 	#secondary,
17 | 	.edit-link,
18 | 	.post-navigation,
19 | 	.pagination.navigation,
20 | 	.comments-pagination,
21 | 	.comment-respond,
22 | 	.comment-edit-link,
23 | 	.comment-reply-link,
24 | 	.comment-metadata .edit-link,
25 | 	.pingback .edit-link,
26 | 	.site-info,
27 | 	.comments-area--wrapper {
28 | 		display: none !important;
29 | 	}
30 | 
31 | 	/* Font sizes */
32 | 
33 | 	body {
34 | 		font-size: 12pt;
35 | 	}
36 | 
37 | 	h1 {
38 | 		font-size: 24pt;
39 | 	}
40 | 
41 | 	h2 {
42 | 		font-size: 22pt;
43 | 	}
44 | 
45 | 	h3 {
46 | 		font-size: 17pt;
47 | 	}
48 | 
49 | 	h4 {
50 | 		font-size: 12pt;
51 | 	}
52 | 
53 | 	h5 {
54 | 		font-size: 11pt;
55 | 	}
56 | 
57 | 	h6 {
58 | 		font-size: 12pt;
59 | 	}
60 | 
61 | 	.entry-title {
62 | 		font-size: 25pt !important;
63 | 		line-height: 40pt !important;
64 | 	}
65 | 
66 | 	.post .entry-header {
67 | 		padding: 0 !important;
68 | 	}
69 | 
70 | 	/* Layout */
71 | 
72 | 	.site-content {
73 | 		padding-left: 5% !important;
74 | 		padding-right: 5% !important;
75 | 		max-width: none;
76 | 	}
77 | 
78 | 	/* Site Branding */
79 | 
80 | 	.site-header {
81 | 		background: transparent;
82 | 		padding-left: 5% !important;
83 | 		margin-top: 50px;
84 | 		padding-right: 5% !important;
85 | 		padding: 0;
86 | 		position: relative;
87 | 
88 | 		&--right {
89 | 			display: none;
90 | 		}
91 | 	}
92 | 
93 | 	.site-title {
94 | 		font-size: 25pt;
95 | 	}
96 | }
97 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "CoBlocks",
 3 | 	"version": "1.2.4",
 4 | 	"slug": "coblocks",
 5 | 	"textdomain": "coblocks",
 6 | 	"private": false,
 7 | 	"description": "CoBlocks is a beautiful Gutenberg WordPress theme for writers, publishers and content marketers.",
 8 | 	"theme_uri": "https://richtabor.com/coblocks-wordpress-theme/",
 9 | 	"author": "Rich Tabor of CoBlocks <hello@coblocks.com>",
10 | 	"author_uri": "https://richtabor.com",
11 | 	"author_shop": "CoBlocks",
12 | 	"license": "GPL-3.0",
13 | 	"devDependencies": {
14 | 		"browser-sync": "^2.26.7",
15 | 		"del": "^5.1.0",
16 | 		"gulp": "^4.0.2",
17 | 		"gulp-autoprefixer": "^7.0.1",
18 | 		"gulp-cache": "^1.1.3",
19 | 		"gulp-concat": "^2.5.2",
20 | 		"gulp-copy": "^4.0.1",
21 | 		"gulp-filter": "^6.0.0",
22 | 		"gulp-hub": "^4.2.0",
23 | 		"gulp-if": "^3.0.0",
24 | 		"gulp-line-ending-corrector": "^1.0.3",
25 | 		"gulp-merge-media-queries": "^0.2.1",
26 | 		"gulp-notify": "^3.2.0",
27 | 		"gulp-rename": "^2.0.0",
28 | 		"gulp-replace-task": "^0.11.0",
29 | 		"gulp-sass": "^4.0.2",
30 | 		"gulp-sort": "^2.0.0",
31 | 		"gulp-sourcemaps": "^2.6.5",
32 | 		"gulp-uglify": "^3.0.2",
33 | 		"gulp-uglifycss": "^1.1.0",
34 | 		"gulp-watch": "^5.0.1",
35 | 		"gulp-wp-pot": "^2.3.6",
36 | 		"gulp-zip": "^5.0.1",
37 | 		"stylelint-config-wordpress": "^16.0.0"
38 | 	},
39 | 	"dependencies": {
40 | 		"postcss": "^7.0.27",
41 | 		"stylelint": "^13.2.0"
42 | 	},
43 | 	"stylelint": {
44 | 		"extends": "stylelint-config-wordpress/scss",
45 | 		"rules": {
46 | 			"at-rule-empty-line-before": null,
47 | 			"no-descending-specificity": null
48 | 		}
49 | 	},
50 | 	"scripts": {
51 | 		"start": "gulp",
52 | 		"build": "gulp build"
53 | 	}
54 | }
55 | 


--------------------------------------------------------------------------------
/scss/blocks/_button.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 
 3 | 	.wp-block-button {
 4 | 
 5 | 		.wp-block-button__link {
 6 | 			@include fluid-type(600px, 1200px, 17px, 19px);
 7 | 			font-weight: 500;
 8 | 			font-family: $font__heading;
 9 | 			padding: 9px 30px 8px;
10 | 			transition: background 200ms cubic-bezier(0.645, 0.045, 0.355, 1), border 200ms cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 200ms cubic-bezier(0.645, 0.045, 0.355, 1), color 200ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
11 | 
12 | 			&:not(.has-background) {
13 | 				background-color: $black;
14 | 			}
15 | 
16 | 			&:not(.has-text-color) {
17 | 				color: #fff;
18 | 			}
19 | 
20 | 			&:hover {
21 | 				opacity: 0.88;
22 | 			}
23 | 		}
24 | 
25 | 		&:not(.is-style-squared) .wp-block-button__link {
26 | 			border-radius: 5px;
27 | 		}
28 | 
29 | 		&:not(.is-style-shadow):not(.is-style-3d) .wp-block-button__link {
30 | 
31 | 			&,
32 | 			&:hover {
33 | 				box-shadow: none;
34 | 			}
35 | 		}
36 | 
37 | 		&.is-style-outline .wp-block-button__link {
38 | 			padding-top: 7px;
39 | 			padding-bottom: 6px;
40 | 		}
41 | 
42 | 		&.is-style-outline .wp-block-button__link,
43 | 		&.is-style-outline .wp-block-button__link:focus,
44 | 		&.is-style-outline .wp-block-button__link:active {
45 | 			border-width: 2px;
46 | 			border-style: solid;
47 | 
48 | 			&:not(.has-background) {
49 | 				background: transparent;
50 | 			}
51 | 
52 | 			&:not(.has-text-color) {
53 | 				color: $black;
54 | 				border-color: currentColor;
55 | 			}
56 | 		}
57 | 
58 | 		&.is-style-3d .wp-block-button__link:not(.has-background) {
59 | 			box-shadow: inset 0 -3px 0 0 #000 !important;
60 | 		}
61 | 	}
62 | }
63 | 


--------------------------------------------------------------------------------
/scss/blocks/_color-palette.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | $color_1: #191521;
 3 | $color_2: #363b40;
 4 | $color_3: #565d67;
 5 | $color_4: #8f949e;
 6 | $color_5: #f5f5f5;
 7 | $color_6: #ffffff;
 8 | $color_7: #1e35b9;
 9 | $color_8: #E7E9FB;
10 | $color_9: #d0eac4;
11 | $color_10: #fbf3d6;
12 | 
13 | $colors: (first, $color_1), (second, $color_2), (third, $color_3), (fourth, $color_4), (fifth, $color_5), (sixth, $color_6),
14 | 	(seventh, $color_7), (eigth, $color_8), (nineth, $color_9), (tenth, $color_10);
15 | 
16 | @each $name, $color in $colors {
17 | 	.has-#{$name}-color {
18 | 		color: $color;
19 | 	}
20 | 
21 | 	.has-#{$name}-background-color {
22 | 		background-color: $color;
23 | 	}
24 | }
25 | 
26 | // Fallback color for .has-background-color.
27 | .has-background:not([class*="background-color"]) {
28 | 	background-color: $color--has-background-color-fallback;
29 | }
30 | 
31 | // Fallbacks
32 | $color_1: #040402;
33 | $color_2: #191521;
34 | $color_3: #565d67;
35 | $color_4: #8f949e;
36 | $color_5: #f8f8f8;
37 | $color_6: #575ffd;
38 | $color_7: #21e8af;
39 | $color_8: #ff5b44;
40 | $color_9: #fee13d;
41 | 
42 | $colors: (dark-black, $color_1), (black, $color_2), (gray, $color_3), (medium-gray, $color_4), (light-gray, $color_5), (coblocks-blue, $color_6),
43 | 	(coblocks-green, $color_7), (coblocks-orange, $color_8), (coblocks-yellow, $color_9);
44 | 
45 | @each $name, $color in $colors {
46 | 	.has-#{$name}-color {
47 | 		color: $color;
48 | 	}
49 | 
50 | 	.has-#{$name}-background-color {
51 | 		background-color: $color;
52 | 	}
53 | }
54 | 
55 | // Fallback color for .has-background-color.
56 | .has-background:not([class*="background-color"]) {
57 | 	background-color: $color--has-background-color-fallback;
58 | }
59 | 


--------------------------------------------------------------------------------
/scss/blocks/_quote.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	blockquote,
 3 | 	.wp-block-quote {
 4 | 		@include blockMobileDisplay();
 5 | 
 6 | 		&:not(.is-style-large) {
 7 | 			border-left: $block__quote--border-width solid $black;
 8 | 			padding-left: 20px;
 9 | 
10 | 			@media screen and (min-width: 600px) {
11 | 				padding-left: 30px;
12 | 			}
13 | 
14 | 			p {
15 | 				font-size: $font__size-md;
16 | 				font-family: $font__heading;
17 | 				font-weight: 500;
18 | 				font-style: normal;
19 | 
20 | 				@media screen and (min-width: 600px) {
21 | 					font-size: $font__size-mdlrg;
22 | 				}
23 | 			}
24 | 
25 | 			cite {
26 | 				font-family: $block__quote--cite-font;
27 | 			}
28 | 		}
29 | 
30 | 		p {
31 | 			line-height: 1.4;
32 | 
33 | 			&:last-of-type {
34 | 				margin-bottom: 0;
35 | 			}
36 | 		}
37 | 
38 | 		cite {
39 | 			color: $gray;
40 | 			display: block;
41 | 			font-size: $font__size-sm;
42 | 			font-weight: 500;
43 | 			margin-top: 15px;
44 | 		}
45 | 
46 | 		&.is-style-large {
47 | 			border-left: none;
48 | 			margin: $content__spacer auto;
49 | 			padding-left: 50px;
50 | 
51 | 			@media screen and (min-width: $content__media-query) {
52 | 				margin-bottom: $content__spacer + 12px;
53 | 				margin-top: $content__spacer + 12px;
54 | 				padding-left: 60px;
55 | 			}
56 | 
57 | 			p:first-of-type {
58 | 				font-size: $font__size-md;
59 | 				font-style: italic;
60 | 				line-height: 1.5;
61 | 
62 | 				@media screen and (min-width: 600px) {
63 | 					font-size: $font__size-mdlrg;
64 | 					line-height: 1.4;
65 | 				}
66 | 			}
67 | 
68 | 			cite {
69 | 				font-size: $font__size-sm;
70 | 				margin-top: 0.35em;
71 | 				text-align: inherit;
72 | 				font-style: italic;
73 | 			}
74 | 		}
75 | 	}
76 | }
77 | 


--------------------------------------------------------------------------------
/scss/blocks/_latest-posts.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-latest-posts {
 3 | 		&.alignfull:not(.is-grid) {
 4 | 			padding-left: 20px;
 5 | 		}
 6 | 
 7 | 		&.alignwide {
 8 | 			@include blockWideDisplay();
 9 | 		}
10 | 
11 | 		&.is-grid {
12 | 			@include blockMobileDisplay();
13 | 			margin-bottom: -6px;
14 | 			margin-top: $content__spacer--mobile + 12px;
15 | 
16 | 			@media screen and (min-width: $content__media-query) {
17 | 				margin-top: $content__spacer + 12px;
18 | 			}
19 | 
20 | 			&.alignwide {
21 | 				@include blockWideDisplay();
22 | 			}
23 | 
24 | 			&.alignfull {
25 | 				margin-left: 0;
26 | 				margin-right: 0;
27 | 			}
28 | 
29 | 			li {
30 | 				background: $color--background-pre;
31 | 				border: none;
32 | 				display: flex;
33 | 				flex-direction: column;
34 | 				font-family: $font__heading;
35 | 				font-weight: 500;
36 | 				line-height: 1.4;
37 | 				padding: 1em 1em 1.1em;
38 | 
39 | 				@media (max-width: 599px) {
40 | 					margin-right: 0;
41 | 				}
42 | 
43 | 				a {
44 | 					box-shadow: none;
45 | 					flex: 1 1 auto;
46 | 
47 | 					&:hover {
48 | 						opacity: 0.6;
49 | 					}
50 | 
51 | 					&::after {
52 | 						content: '';
53 | 					}
54 | 				}
55 | 
56 | 				&:last-child {
57 | 
58 | 					a::after {
59 | 						content: '';
60 | 					}
61 | 				}
62 | 			}
63 | 
64 | 			.wp-block-latest-posts__post-date {
65 | 				flex: 0 0 auto;
66 | 				margin-top: 10px;
67 | 			}
68 | 		}
69 | 
70 | 		&:not(.is-grid) {
71 | 			padding-bottom: 4px;
72 | 
73 | 			li {
74 | 				margin-bottom: 10px;
75 | 
76 | 				&:last-child {
77 | 					margin-bottom: 0;
78 | 				}
79 | 			}
80 | 		}
81 | 
82 | 		&__post-date {
83 | 			@include font-size(14px);
84 | 			color: $gray;
85 | 			font-weight: 400;
86 | 			margin-top: 2px;
87 | 		}
88 | 	}
89 | }
90 | 


--------------------------------------------------------------------------------
/components/post/content.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Template part for displaying the singular post.
 4 |  *
 5 |  * @link https://codex.wordpress.org/Template_Hierarchy
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | ?>
11 | <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
12 | 
13 | 	<header class="entry-header top-spacer bottom-spacer">
14 | 
15 | 		<?php
16 | 		do_action( 'coblocks_before_entry_title' );
17 | 
18 | 		if ( is_single() ) {
19 | 			the_title( '<h1 class="entry-title h1">', '</h1>' );
20 | 		} else {
21 | 			the_title( '<h2 class="entry-title h1"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
22 | 		}
23 | 
24 | 		do_action( 'coblocks_after_entry_title' );
25 | 		?>
26 | 
27 | 		<?php coblocks_posted_on(); ?>
28 | 
29 | 	</header>
30 | 
31 | 	<?php coblocks_post_thumbnail(); ?>
32 | 
33 | 	<?php do_action( 'coblocks_before_content' ); ?>
34 | 
35 | 	<div class="entry-content">
36 | 
37 | 		<?php
38 | 		the_content();
39 | 
40 | 		wp_link_pages(
41 | 			array(
42 | 				'before'      => '<div class="page-links">' . __( 'Pages:', 'coblocks' ),
43 | 				'after'       => '</div>',
44 | 				'link_before' => '<span class="page-number">',
45 | 				'link_after'  => '</span>',
46 | 			)
47 | 		);
48 | 		?>
49 | 
50 | 	</div>
51 | 
52 | 	<?php do_action( 'coblocks_after_content' ); ?>
53 | 
54 | 	<?php if ( is_single() ) { ?>
55 | 
56 | 		<footer class="entry-footer flex justify-between">
57 | 
58 | 			<div class="entry-footer__taxonomy justify-start self-center items-center">
59 | 
60 | 				<?php coblocks_categories(); ?>
61 | 
62 | 				<?php coblocks_tags(); ?>
63 | 
64 | 			</div>
65 | 
66 | 		</footer>
67 | 
68 | 	<?php } ?>
69 | 
70 | 	<nav class="post-navigation">
71 | 		<?php previous_post_link(); ?>
72 | 		<?php next_post_link(); ?>
73 | 	</nav>
74 | 
75 | </article><!-- #post-## -->
76 | 


--------------------------------------------------------------------------------
/scss/blocks/_columns.scss:
--------------------------------------------------------------------------------
 1 | .entry-content {
 2 | 	.wp-block-columns {
 3 | 		margin: $content__spacer--mobile auto;
 4 | 
 5 | 		@media screen and (min-width: $content__media-query) {
 6 | 			margin-bottom: $content__spacer;
 7 | 			margin-top: $content__spacer;
 8 | 		}
 9 | 
10 | 		.wp-block-column {
11 | 			margin-bottom: $content__spacer--mobile;
12 | 
13 | 			@media all and (min-width: 600px) {
14 | 				margin-bottom: 0;
15 | 				margin-top: 0;
16 | 			}
17 | 
18 | 			&:last-of-type {
19 | 				@media all and (max-width: 599px) {
20 | 					margin-bottom: 0;
21 | 					margin-top: 0;
22 | 				}
23 | 			}
24 | 		}
25 | 
26 | 		* {
27 | 			margin-bottom: $content__spacer--mobile;
28 | 			margin-top: $content__spacer--mobile;
29 | 
30 | 			@media screen and (min-width: $content__media-query) {
31 | 				margin-bottom: $content__spacer;
32 | 				margin-top: $content__spacer;
33 | 			}
34 | 
35 | 			&:first-child {
36 | 				margin-top: 0 !important;
37 | 			}
38 | 
39 | 			&:last-child {
40 | 				margin-bottom: 0 !important;
41 | 			}
42 | 		}
43 | 
44 | 		*:not(p):not(ul):not(ol) {
45 | 			margin: $content__spacer--mobile + 12px auto;
46 | 
47 | 			@media screen and (min-width: $content__media-query) {
48 | 				margin-bottom: $content__spacer + 12px;
49 | 				margin-top: $content__spacer + 12px;
50 | 			}
51 | 		}
52 | 	}
53 | }
54 | 
55 | // Spacing between columns.
56 | .wp-block-columns {
57 | 	@media all and (min-width: 600px) {
58 | 		flex-wrap: nowrap;
59 | 	}
60 | 
61 | 	@media all and (min-width: 600px) {
62 | 		.wp-block-column > * {
63 | 
64 | 			&:first-child {
65 | 				margin-top: 0;
66 | 			}
67 | 
68 | 			&:last-child {
69 | 				margin-bottom: 0;
70 | 			}
71 | 		}
72 | 
73 | 		&[class*='has-'] > * {
74 | 			margin-left: 0 !important;
75 | 			margin-right: 40px !important;
76 | 
77 | 			&:last-child {
78 | 				margin-right: 0 !important;
79 | 			}
80 | 		}
81 | 	}
82 | }
83 | 


--------------------------------------------------------------------------------
/assets/js/customize-controls.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Scripts within the customizer controls window.
 3 |  *
 4 |  * Contextually shows the color hue control and informs the preview
 5 |  * when users open or close the front page sections section.
 6 |  */
 7 | 
 8 | ( function() {
 9 | 
10 | 	// Extends our custom "upgrade-theme" section.
11 | 	wp.customize.sectionConstructor['upgrade-theme'] = wp.customize.Section.extend( {
12 | 
13 | 		// No events for this type of section.
14 | 		attachEvents: function () {},
15 | 
16 | 		// Always make the section active.
17 | 		isContextuallyActive: function () {
18 | 			return true;
19 | 		}
20 | 	} );
21 | 
22 | 	wp.customize.bind( 'ready', function() {
23 | 
24 | 		/**
25 | 		 * Function to hide/show Customizer options, based on another control.
26 | 		 *
27 | 		 * Parent option, Affected Control, Value which affects the control.
28 | 		 */
29 | 		function customizer_image_option_display( parent_setting, affected_control, speed ) {
30 | 			wp.customize( parent_setting, function( setting ) {
31 | 				wp.customize.control( affected_control, function( control ) {
32 | 					var visibility = function() {
33 | 						if ( setting.get() && 'none' !== setting.get() && '0' !== setting.get() ) {
34 | 							control.container.slideDown( speed );
35 | 						} else {
36 | 							control.container.slideUp( speed );
37 | 						}
38 | 					};
39 | 
40 | 					visibility();
41 | 					setting.bind( visibility );
42 | 				});
43 | 			});
44 | 		}
45 | 
46 | 		// Only show the logo max width options, if a logo is uploaded.
47 | 		customizer_image_option_display( 'custom_logo', 'custom_logo_max_width', 140 );
48 | 		customizer_image_option_display( 'custom_logo', 'custom_logo_mobile_max_width', 140 );
49 | 		customizer_image_option_display( 'custom_logo', 'custom_logo_border_radius', 140 );
50 | 		customizer_image_option_display( 'custom_logo', 'site_title', 140 );
51 | 	});
52 | 
53 | } )( jQuery );
54 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The main template file
 4 |  *
 5 |  * This is the most generic template file in a WordPress theme and one of the
 6 |  * two required files for a theme (the other being style.css).
 7 |  * It is used to display a page when nothing more specific matches a query.
 8 |  * For example, it puts together the home page when no home.php file exists.
 9 |  *
10 |  * @link http://codex.wordpress.org/Template_Hierarchy
11 |  *
12 |  * @package CoBlocks
13 |  */
14 | 
15 | get_header();
16 | 
17 | if ( have_posts() ) :
18 | 
19 | 	/* Start the Loop */
20 | 	while ( have_posts() ) :
21 | 
22 | 		the_post();
23 | 
24 | 		/*
25 | 		 * Include the Post-Format-specific template for the content.
26 | 		 * If you want to override this in a child theme, then include a file
27 | 		 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
28 | 		 */
29 | 		get_template_part( 'components/post/content', get_post_format() );
30 | 
31 | 	endwhile;
32 | 
33 | 	if ( ! class_exists( 'Jetpack' ) || ! Jetpack::is_module_active( 'infinite-scroll' ) ) :
34 | 		/*
35 | 		 * The posts pagination outputs a set of page numbers with links to the previous and next pages of posts.
36 | 		 *
37 | 		 * @link https://codex.wordpress.org/Function_Reference/the_posts_pagination
38 | 		 */
39 | 		the_posts_pagination(
40 | 			array(
41 | 				'prev_text'          => coblocks_get_icon_svg( 'chevron_left', 40 ) . '<span class="screen-reader-text">' . __( 'Previous', 'coblocks' ) . '</span>',
42 | 				'next_text'          => '<span class="screen-reader-text">' . __( 'Next', 'coblocks' ) . '</span>' . coblocks_get_icon_svg( 'chevron_right', 40 ),
43 | 				'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'coblocks' ) . ' </span>',
44 | 			)
45 | 		);
46 | 	endif;
47 | 
48 | else :
49 | 	get_template_part( 'components/post/content', 'none' );
50 | endif;
51 | 
52 | get_footer();
53 | 


--------------------------------------------------------------------------------
/scss/elements/_fields.scss:
--------------------------------------------------------------------------------
 1 | select,
 2 | textarea,
 3 | input[type="text"],
 4 | input[type="email"],
 5 | input[type="url"],
 6 | input[type="password"],
 7 | input[type="search"] {
 8 | 	@include font-size(18px);
 9 | 	appearance: none;
10 | 	background-color: $white;
11 | 	border: 2px solid #dfdfdf;
12 | 	box-shadow: none;
13 | 	font-family: $font__heading;
14 | 	border-radius: 5px;
15 | 	font-weight: 400;
16 | 	color: $color--text-input;
17 | 	display: inline-block;
18 | 	margin: 0 0 25px 0;
19 | 	line-height: 1.7;
20 | 	outline: none;
21 | 	padding: 0.36em 0.95em 0.25em;
22 | 	position: relative;
23 | 	vertical-align: middle;
24 | 	width: 100%;
25 | 
26 | 	&:focus {
27 | 		border-color: $black;
28 | 		outline: none;
29 | 		color: $black;
30 | 	}
31 | 
32 | 	.comments & {
33 | 		font-family: $font__body;
34 | 	}
35 | }
36 | 
37 | textarea {
38 | 	padding: 0.5em 0.95em;
39 | 	min-height: 220px;
40 | }
41 | 
42 | label {
43 | 	@include font-size(16px);
44 | 	@include font-smoothing();
45 | 	@extend .sans-serif-font;
46 | 	color: $gray;
47 | 	display: block;
48 | 	font-weight: 500;
49 | 	margin-bottom: 2px;
50 | 	z-index: 99;
51 | 
52 | 	@media only screen and (min-width: 600px) {
53 | 		@include font-size(18px);
54 | 	}
55 | }
56 | 
57 | form p {
58 | 	margin-bottom: 0;
59 | }
60 | 
61 | ::-webkit-input-placeholder {
62 | 	color: $color--text-input-placeholder;
63 | 
64 | 	.js--focus & {
65 | 		color: $color--text-input-placeholder;
66 | 	}
67 | }
68 | 
69 | :-moz-placeholder {
70 | 	color: $color--text-input-placeholder;
71 | 
72 | 	.js--focus & {
73 | 		color: $color--text-input-placeholder;
74 | 	}
75 | }
76 | 
77 | ::-moz-placeholder {
78 | 	color: $color--text-input-placeholder;
79 | 	opacity: 1;
80 | 
81 | 	.js--focus & {
82 | 		color: $color--text-input-placeholder;
83 | 	}
84 | }
85 | 
86 | :-ms-input-placeholder {
87 | 	color: $color--text-input-placeholder;
88 | 
89 | 	.js--focus & {
90 | 		color: $color--text-input-placeholder;
91 | 	}
92 | }


--------------------------------------------------------------------------------
/search.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying search results pages
 4 |  *
 5 |  * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | get_header(); ?>
11 | 
12 | <section class="search-wrapper">
13 | 
14 | 	<header class="page-header container center-align bottom-spacer">
15 | 		<?php if ( have_posts() ) : ?>
16 | 			<?php /* translators: 1: search query */ ?>
17 | 			<h1 class="h2"><?php printf( esc_html__( 'Searching for: %s', 'coblocks' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
18 | 		<?php else : ?>
19 | 			<h1 class="h2"><?php esc_html_e( 'Nothing Found', 'coblocks' ); ?></h1>
20 | 		<?php endif; ?>
21 | 	</header>
22 | 
23 | 	<?php
24 | 	if ( have_posts() ) :
25 | 		/* Start the Loop */
26 | 		while ( have_posts() ) :
27 | 
28 | 			the_post();
29 | 
30 | 			/**
31 | 			 * Run the loop for the search to output the results.
32 | 			 * If you want to overload this in a child theme then include a file
33 | 			 * called content-search.php and that will be used instead.
34 | 			 */
35 | 			get_template_part( 'components/post/content', 'excerpt' );
36 | 
37 | 		endwhile; // End of the loop.
38 | 
39 | 		the_posts_pagination(
40 | 			array(
41 | 				'prev_text'          => coblocks_get_icon_svg( 'chevron_left', 40 ) . '<span class="screen-reader-text">' . __( 'Previous', 'coblocks' ) . '</span>',
42 | 				'next_text'          => '<span class="screen-reader-text">' . __( 'Next', 'coblocks' ) . '</span>' . coblocks_get_icon_svg( 'chevron_right', 22 ),
43 | 				'before_page_number' => '<span class="meta-nav screen-reader-text">' . esc_html__( 'Page', 'coblocks' ) . ' </span>',
44 | 			)
45 | 		);
46 | 
47 | 	else :
48 | 	?>
49 | 
50 | 		<div class="container--sml center-align">
51 | 			<p><?php esc_html_e( 'Sorry, but nothing matched your search terms. Please try searching again.', 'coblocks' ); ?></p>
52 | 			<?php get_search_form(); ?>
53 | 		</div>
54 | 
55 | 	<?php endif; ?>
56 | 
57 | </section>
58 | 
59 | <?php
60 | get_footer();
61 | 


--------------------------------------------------------------------------------
/inc/customizer/class-coblocks-upgrade-control.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Theme upgrade control.
 4 |  *
 5 |  * @package CoBlocks
 6 |  */
 7 | 
 8 | // Exit if accessed directly.
 9 | if ( ! defined( 'ABSPATH' ) ) {
10 | 	exit;
11 | }
12 | 
13 | // Exit if WP_Customize_Control does not exsist.
14 | if ( ! class_exists( 'WP_Customize_Control' ) ) {
15 | 	return null;
16 | }
17 | 
18 | /**
19 |  * Custom control to display a pro upgrade button in the Customizer.
20 |  *
21 |  * @access public
22 |  */
23 | class CoBlocks_Upgrade_Control extends WP_Customize_Section {
24 | 
25 | 	/**
26 | 	 * The type of customize section being rendered.
27 | 	 *
28 | 	 * @since  1.0.0
29 | 	 * @access public
30 | 	 * @var    string
31 | 	 */
32 | 	public $type = 'upgrade-theme';
33 | 
34 | 	/**
35 | 	 * Custom button text to output.
36 | 	 *
37 | 	 * @since  1.0.0
38 | 	 * @access public
39 | 	 * @var    string
40 | 	 */
41 | 	public $pro_text = '';
42 | 
43 | 	/**
44 | 	 * Custom pro button URL.
45 | 	 *
46 | 	 * @since  1.0.0
47 | 	 * @access public
48 | 	 * @var    string
49 | 	 */
50 | 	public $pro_url = '';
51 | 
52 | 	/**
53 | 	 * Add custom parameters to pass to the JS via JSON.
54 | 	 *
55 | 	 * @since  1.0.0
56 | 	 * @access public
57 | 	 */
58 | 	public function json() {
59 | 		$json = parent::json();
60 | 
61 | 		$json['pro_text'] = $this->pro_text;
62 | 		$json['pro_url']  = esc_url( $this->pro_url );
63 | 
64 | 		return $json;
65 | 	}
66 | 
67 | 	/**
68 | 	 * Outputs the Underscore.js template.
69 | 	 *
70 | 	 * @since  1.0.0
71 | 	 * @access public
72 | 	 */
73 | 	protected function render_template() {
74 | 	?>
75 | 
76 | 		<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }} cannot-expand">
77 | 
78 | 			<h3 class="accordion-section-title">
79 | 				{{ data.title }}
80 | 				<# if ( data.pro_text && data.pro_url ) { #>
81 | 					<a href="{{ data.pro_url }}" class="button button-secondary alignright" target="_blank">{{ data.pro_text }}</a>
82 | 				<# } #>
83 | 			</h3>
84 | 		</li>
85 | 	<?php
86 | 	}
87 | }
88 | 


--------------------------------------------------------------------------------
/inc/icons.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * SVG icons related functions and filters
 4 |  *
 5 |  * @package CoBlocks
 6 |  */
 7 | 
 8 | /**
 9 |  * Gets the SVG code for a given icon.
10 |  */
11 | function coblocks_get_icon_svg( $icon, $size = 24 ) {
12 | 	return CoBlocks_SVG_Icons::get_svg( 'ui', $icon, $size );
13 | }
14 | 
15 | /**
16 |  * Gets the SVG code for a given social icon.
17 |  */
18 | function coblocks_get_social_icon_svg( $icon, $size = 24 ) {
19 | 	return CoBlocks_SVG_Icons::get_svg( 'social', $icon, $size );
20 | }
21 | 
22 | /**
23 |  * Detects the social network from a URL and returns the SVG code for its icon.
24 |  */
25 | function coblocks_get_social_link_svg( $uri, $size = 24 ) {
26 | 	return CoBlocks_SVG_Icons::get_social_link_svg( $uri, $size );
27 | }
28 | 
29 | /**
30 |  * Display SVG icons in social links menu.
31 |  *
32 |  * @param  string  $item_output The menu item output.
33 |  * @param  WP_Post $item        Menu item object.
34 |  * @param  int     $depth       Depth of the menu.
35 |  * @param  array   $args        wp_nav_menu() arguments.
36 |  * @return string  $item_output The menu item output with social icon.
37 |  */
38 | function coblocks_nav_menu_social_icons( $item_output, $item, $depth, $args ) {
39 | 	// Change SVG icon inside social links menu if there is supported URL.
40 | 	if ( 'social' === $args->theme_location ) {
41 | 		$svg = coblocks_get_social_link_svg( $item->url, 24 );
42 | 		if ( empty( $svg ) ) {
43 | 			$svg = coblocks_get_icon_svg( 'chain' );
44 | 		}
45 | 		$item_output = str_replace( $args->link_after, '</span>' . $svg, $item_output );
46 | 	}
47 | 
48 | 	return $item_output;
49 | }
50 | add_filter( 'walker_nav_menu_start_el', 'coblocks_nav_menu_social_icons', 10, 4 );
51 | 
52 | /**
53 |  * Adds data attributes to the body, based on Customizer entries.
54 |  */
55 | function coblocks_svg_allowed_html() {
56 | 
57 | 	$array = array(
58 | 		'svg' => array(
59 | 			'class'       => array(),
60 | 			'aria-hidden' => array(),
61 | 			'role'        => array(),
62 | 		),
63 | 		'use' => array(
64 | 			'xlink:href' => array(),
65 | 		),
66 | 	);
67 | 
68 | 	return apply_filters( 'coblocks_svg_allowed_html', $array );
69 | }
70 | 


--------------------------------------------------------------------------------
/scss/media/_captions.scss:
--------------------------------------------------------------------------------
  1 | .wp-caption {
  2 | 	margin-bottom: 1.5em;
  3 | 	max-width: 100%;
  4 | 	text-align: center;
  5 | 
  6 | 	img[class*="wp-image-"] {
  7 | 		margin-left: auto;
  8 | 		margin-right: auto;
  9 | 	}
 10 | }
 11 | 
 12 | .wp-caption-text {
 13 | 	@include font-size(12px);
 14 | 	color: $gray;
 15 | 	font-family: $font__heading;
 16 | 	line-height: 1.5;
 17 | 	margin-top: 15px;
 18 | 	margin-bottom: 30px;
 19 | 
 20 | 	@media (min-width: 600px) {
 21 | 		@include font-size(13px);
 22 | 		margin-bottom: 40px;
 23 | 	}
 24 | 
 25 | 	.alignleft &,
 26 | 	.alignright & {
 27 | 		margin-bottom: 0;
 28 | 	}
 29 | }
 30 | 
 31 | // Captions
 32 | .wp-block-image,
 33 | .wp-block-gallery .blocks-gallery-item {
 34 | 
 35 | 	figcaption {
 36 | 		@extend .gray;
 37 | 		@extend .extra-small;
 38 | 		@extend .sans-serif-font;
 39 | 		background: transparent;
 40 | 		margin-bottom: -0.3em;
 41 | 		margin-top: 0.85em;
 42 | 
 43 | 		a:hover {
 44 | 			color: $black;
 45 | 		}
 46 | 	}
 47 | 
 48 | 	&.aligncenter figcaption,
 49 | 	&.alignfull figcaption {
 50 | 		margin-bottom: -0.5em;
 51 | 
 52 | 		@media (min-width: 600px) {
 53 | 			margin-bottom: -0.8em;
 54 | 		}
 55 | 	}
 56 | 
 57 | }
 58 | 
 59 | .wp-block-gallery {
 60 | 
 61 | 	.blocks-gallery-item {
 62 | 
 63 | 		figcaption {
 64 | 			background: rgba($white, 0.7);
 65 | 			padding-top: 0.6em;
 66 | 			padding-bottom: 0.5em;
 67 | 			bottom: 4px;
 68 | 		}
 69 | 
 70 | 		// Position captions better for galleries with just one image.
 71 | 		&:nth-child(1):last-child {
 72 | 
 73 | 			figcaption {
 74 | 				bottom: -34px;
 75 | 			}
 76 | 
 77 | 			.has-caption {
 78 | 				position: relative;
 79 | 				margin-bottom: 1.7rem;
 80 | 
 81 | 				@media (min-width: 600px) {
 82 | 					margin-bottom: 1.3rem;
 83 | 				}
 84 | 			}
 85 | 		}
 86 | 	}
 87 | 
 88 | 	&.columns-1 .blocks-gallery-item {
 89 | 
 90 | 		figcaption {
 91 | 			background: $white;
 92 | 		}
 93 | 
 94 | 		&:not(:last-child) {
 95 | 
 96 | 			figcaption {
 97 | 				padding-top: 0.75em;
 98 | 				padding-bottom: 1.5rem;
 99 | 			}
100 | 		}
101 | 
102 | 		&:last-child {
103 | 
104 | 			figcaption {
105 | 				padding-bottom: 0;
106 | 				margin-bottom: -0.25rem;
107 | 			}
108 | 		}
109 | 	}
110 | }
111 | 


--------------------------------------------------------------------------------
/scss/layout/_footer.scss:
--------------------------------------------------------------------------------
  1 | .site-footer {
  2 | 	overflow: hidden;
  3 | 	padding: 4em 0;
  4 | 	margin: 0;
  5 | 	position: relative;
  6 | 
  7 | 	@media only screen and (min-width: 700px) {
  8 | 		padding: 7em 0;
  9 | 	}
 10 | 
 11 | 	.widget {
 12 | 		margin-bottom: 2em;
 13 | 		margin-left: auto;
 14 | 		margin-right: auto;
 15 | 		max-width: 440px;
 16 | 
 17 | 		&.optin-monster-api {
 18 | 			min-height: 155px;
 19 | 		}
 20 | 
 21 | 		&:last-of-type {
 22 | 			margin-bottom: 0;
 23 | 		}
 24 | 
 25 | 		h2,
 26 | 		.h2 {
 27 | 			margin-bottom: 15px;
 28 | 		}
 29 | 
 30 | 		p:last-of-type {
 31 | 			margin-bottom: 0;
 32 | 		}
 33 | 	}
 34 | 
 35 | 	.footer-navigation {
 36 | 		padding: 0.75em 0 0;
 37 | 	}
 38 | 
 39 | 	.footer-menu {
 40 | 		text-align: center;
 41 | 
 42 | 		li {
 43 | 			margin-bottom: 5px;
 44 | 
 45 | 			@media only screen and (min-width: 400px) {
 46 | 				display: inline-block;
 47 | 				margin: 0 5px;
 48 | 			}
 49 | 
 50 | 			@include hover {
 51 | 				a:hover {
 52 | 					color: $black;
 53 | 				}
 54 | 			}
 55 | 		}
 56 | 	}
 57 | }
 58 | 
 59 | .widget-area {
 60 | 
 61 | 	&__inner {
 62 | 		@include structure;
 63 | 	}
 64 | 
 65 | 	&__wrapper {
 66 | 		padding: 35px 30px 35px;
 67 | 		background: $background;
 68 | 		position: relative;
 69 | 
 70 | 		@media only screen and (min-width: 600px) {
 71 | 			margin-left: -4vw;
 72 | 			width: calc(100% + 8vw);
 73 | 		}
 74 | 
 75 | 		@media only screen and (min-width: 700px) {
 76 | 			padding: 6.5vw 7vw;
 77 | 		}
 78 | 
 79 | 		@media only screen and (min-width: 850px) {
 80 | 			margin-left: -7vw;
 81 | 			width: calc(100% + 14vw);
 82 | 		}
 83 | 
 84 | 		@media only screen and (min-width: 1400px) {
 85 | 			padding: 90px 100px;
 86 | 		}
 87 | 	}
 88 | 
 89 | }
 90 | 
 91 | .site-info {
 92 | 	padding-bottom: 1em;
 93 | 
 94 | 	@media only screen and (min-width: 700px) {
 95 | 		padding-bottom: 0;
 96 | 	}
 97 | 
 98 | 	.widget-area + & {
 99 | 		padding-top: 6em;
100 | 
101 | 		@media only screen and (min-width: 700px) {
102 | 			padding-top: 9em;
103 | 		}
104 | 	}
105 | 
106 | 	p {
107 | 		margin-bottom: 0;
108 | 	}
109 | 
110 | 	.site-theme {
111 | 		display: block;
112 | 		margin-top: 1em;
113 | 	}
114 | 
115 | 	@include hover {
116 | 		a:hover {
117 | 			color: $black;
118 | 		}
119 | 	}
120 | }
121 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Contribute To CoBlocks
 2 | 
 3 | Community made patches, localisations, bug reports and contributions are always welcome!
 4 | 
 5 | When contributing please ensure you follow the guidelines below so that we can keep on top of things.
 6 | 
 7 | __Please Note:__ GitHub is for bug reports and contributions only - if you have a support question head over to the [support forum on WordPress.org](https://wordpress.org/support/theme/coblocks).
 8 | 
 9 | ## Getting Started
10 | 
11 | * __Do not report potential security vulnerabilities here. Email them privately to me at [help at coblocks dot com](mailto:help@coblocks.com)__
12 | * Before submitting a ticket, please be sure to replicate the behavior with no other plugins active and on a base theme like Twenty Seventeen.
13 | * Submit a ticket for your issue, assuming one does not already exist.
14 |   * Raise it on our [Issue Tracker](https://github.com/godaddy/coblocks-theme/issues)
15 |   * Clearly describe the issue including steps to reproduce the bug.
16 |   * Make sure you fill in the earliest version that you know has the issue as well as the version of WordPress you're using.
17 | 
18 | ## Making Changes
19 | 
20 | * Fork the repository on GitHub
21 | * Make the changes to your forked repository
22 |   * Ensure you stick to the [WordPress Coding Standards](https://codex.wordpress.org/WordPress_Coding_Standards)
23 | * When committing, reference your issue (if present) and include a note about the fix
24 | * If possible, and if applicable, please also add/update unit tests for your changes
25 | * Push the changes to your fork and submit a pull request to the 'master' branch of the CoBlocks repository
26 | 
27 | ## Code Documentation
28 | 
29 | * We ensure that every CoBlocks function is documented well and follows the standards set by phpDoc
30 | * Finally, please use tabs and not spaces. The tab indent size should be 8.
31 | 
32 | At this point you're waiting on us to merge your pull request. We'll review all pull requests, and make suggestions and changes if necessary.
33 | 
34 | # Additional Resources
35 | * [General GitHub Documentation](https://help.github.com/)
36 | * [GitHub Pull Request documentation](https://help.github.com/send-pull-requests/)
37 | * [PHPUnit Tests Guide](https://phpunit.de/manual/current/en/writing-tests-for-phpunit.html)
38 | 


--------------------------------------------------------------------------------
/inc/back-compat.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Theme backwards compatibility functionality
 4 |  *
 5 |  * Prevents CoBlocks from running on WordPress versions prior to 4.7,
 6 |  * since this theme is not meant to be backward compatible beyond that and
 7 |  * relies on many newer functions and markup changes introduced in 4.7.
 8 |  *
 9 |  * @package CoBlocks
10 |  */
11 | 
12 | /**
13 |  * Prevent switching to CoBlocks on old versions of WordPress.
14 |  *
15 |  * Switches to the default theme.
16 |  */
17 | function coblocks_switch_theme() {
18 | 	switch_theme( WP_DEFAULT_THEME, WP_DEFAULT_THEME );
19 | 	unset( $_GET['activated'] );
20 | 	add_action( 'admin_notices', 'coblocks_upgrade_notice' );
21 | }
22 | add_action( 'after_switch_theme', 'coblocks_switch_theme' );
23 | 
24 | /**
25 |  * Add message for unsuccessful theme switch.
26 |  *
27 |  * Prints an update nag after an unsuccessful attempt to switch to
28 |  * this theme on WordPress versions prior to 4.7.
29 |  */
30 | function coblocks_upgrade_notice() {
31 | 	/* translators: WordPress version */
32 | 	$message = sprintf( esc_html__( 'CoBlocks requires at least WordPress version 4.7. You are running version %s. Please upgrade and try again.', 'coblocks' ), $GLOBALS['wp_version'] );
33 | 	printf( '<div class="error"><p>%s</p></div>', esc_html( $message ) );
34 | }
35 | 
36 | /**
37 |  * Prevent the Customizer from being loaded on WordPress versions prior to 4.7.
38 |  */
39 | function coblocks_customize() {
40 | 	wp_die(
41 | 		/* translators: WordPress version */
42 | 		sprintf( esc_html__( 'CoBlocks requires at least WordPress version 4.7. You are running version %s. Please upgrade and try again.', 'coblocks' ), esc_html( $GLOBALS['wp_version'] ) ), '', array(
43 | 			'back_link' => true,
44 | 		)
45 | 	);
46 | }
47 | add_action( 'load-customize.php', 'coblocks_customize' );
48 | 
49 | /**
50 |  * Prevent the Theme Preview from being loaded on WordPress versions prior to 4.7.
51 |  */
52 | function coblocks_preview() {
53 | 	if ( isset( $_GET['preview'] ) ) {
54 | 		/* translators: WordPress version */
55 | 		wp_die( sprintf( esc_html__( 'CoBlocks requires at least WordPress version 4.7. You are running version %s. Please upgrade and try again.', 'coblocks' ), esc_html( $GLOBALS['wp_version'] ) ) );
56 | 	}
57 | }
58 | add_action( 'template_redirect', 'coblocks_preview' );
59 | 


--------------------------------------------------------------------------------
/inc/jetpack.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Jetpack Compatibility File
 4 |  *
 5 |  * @package CoBlocks
 6 |  */
 7 | 
 8 | /**
 9 |  * Add JetPack support.
10 |  */
11 | function coblocks_jetpack_setup() {
12 | 
13 | 	/**
14 | 	 * Add support for JetPack Infinite scrolling.
15 | 	 *
16 | 	 * @see https://jetpack.com/support/infinite-scroll/
17 | 	 * @since CoBlocks 1.0.5
18 | 	 */
19 | 	add_theme_support(
20 | 		'infinite-scroll', array(
21 | 			'container' => 'main',
22 | 			'footer'    => false,
23 | 			'render'    => 'coblocks_infinite_scroll',
24 | 		)
25 | 	);
26 | 
27 | }
28 | add_action( 'after_setup_theme', 'coblocks_jetpack_setup' );
29 | 
30 | /**
31 |  * Custom Infinite Scroll Render function.
32 |  */
33 | function coblocks_infinite_scroll() {
34 | 	while ( have_posts() ) {
35 | 		the_post();
36 | 		get_template_part( 'components/post/content', get_post_format() );
37 | 	}
38 | }
39 | 
40 | /**
41 |  * Filter Jetpack's Infinite Scroll text on button that loads more posts.
42 |  *
43 |  * @param array $settings An array of settings for infinite scroll.
44 |  */
45 | function coblocks_filter_jetpack_infinite_scroll_button_text( $settings ) {
46 | 
47 | 	$text = apply_filters( 'coblocks_infinite_scroll_button_text', esc_html__( 'Load More...', 'coblocks' ) );
48 | 
49 | 	$settings['text'] = esc_html( $text );
50 | 
51 | 	return $settings;
52 | }
53 | add_filter( 'infinite_scroll_js_settings', 'coblocks_filter_jetpack_infinite_scroll_button_text' );
54 | 
55 | /**
56 |  * Remove sharing, so we can place it elsewhere.
57 |  */
58 | function coblocks_filter_jetpack_sharing() {
59 | 	remove_filter( 'the_content', 'sharing_display', 19 );
60 | 	remove_filter( 'the_excerpt', 'sharing_display', 19 );
61 | }
62 | add_action( 'loop_start', 'coblocks_filter_jetpack_sharing' );
63 | 
64 | if ( ! function_exists( 'coblocks_jetpack_sharing' ) ) :
65 | 	/**
66 | 	 * Jetpack's sharing module.
67 | 	 *
68 | 	 * Create your own coblocks_jetpack_sharing() to override in a child theme.
69 | 	 */
70 | 	function coblocks_jetpack_sharing() {
71 | 
72 | 		if ( ! class_exists( 'Jetpack' ) ) {
73 | 			return;
74 | 		}
75 | 
76 | 		if ( function_exists( 'sharing_display' ) ) :
77 | 
78 | 			echo '<div class="container">';
79 | 
80 | 			if ( function_exists( 'sharing_display' ) ) {
81 | 				sharing_display( '', true );
82 | 			}
83 | 			echo '</div>';
84 | 
85 | 		endif;
86 | 
87 | 	}
88 | endif;
89 | add_action( 'coblocks_after_comments', 'coblocks_jetpack_sharing' );
90 | 


--------------------------------------------------------------------------------
/comments.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying comments.
 4 |  *
 5 |  * This is the template that displays the area of the page that contains both the current comments
 6 |  * and the comment form.
 7 |  *
 8 |  * @link https://codex.wordpress.org/Template_Hierarchy
 9 |  *
10 |  * @package CoBlocks
11 |  */
12 | 
13 | /*
14 |  * If the current post is protected by a password and
15 |  * the visitor has not yet entered the password we will
16 |  * return early without loading the comments.
17 |  */
18 | if ( post_password_required() ) {
19 | 	return;
20 | } ?>
21 | 
22 | <div id="comments" class="comments">
23 | 
24 | 	<div class="comments__inner container">
25 | 
26 | 		<?php
27 | 		if ( have_comments() ) :
28 | 			?>
29 | 
30 | 			<h2 class="comments-title h4">
31 | 				<?php
32 | 				$comments_number = get_comments_number();
33 | 				if ( '1' === $comments_number ) {
34 | 					/* translators: %s: post title */
35 | 					printf( _x( 'One reply to &ldquo;%s&rdquo;', 'comments title', 'coblocks' ), get_the_title() );
36 | 				} else {
37 | 					printf(
38 | 						/* translators: 1: number of comments, 2: post title */
39 | 						_nx(
40 | 							'%1$s reply to &ldquo;%2$s&rdquo;',
41 | 							'%1$s replies to &ldquo;%2$s&rdquo;',
42 | 							$comments_number,
43 | 							'comments title',
44 | 							'coblocks'
45 | 						),
46 | 						number_format_i18n( $comments_number ),
47 | 						get_the_title()
48 | 					);
49 | 				}
50 | 				?>
51 | 			</h2>
52 | 
53 | 			<ol class="comment-list list-reset">
54 | 				<?php
55 | 				wp_list_comments(
56 | 					array(
57 | 						'avatar_size' => 100,
58 | 						'style'       => 'ol',
59 | 						'short_ping'  => true,
60 | 					)
61 | 				);
62 | 				?>
63 | 			</ol>
64 | 
65 | 			<?php
66 | 			the_comments_pagination(
67 | 				array(
68 | 					'prev_text' => coblocks_get_icon_svg( 'chevron_left', 40 ) . '<span class="screen-reader-text">' . __( 'Previous', 'coblocks' ) . '</span>',
69 | 					'next_text' => '<span class="screen-reader-text">' . __( 'Next', 'coblocks' ) . '</span>' . coblocks_get_icon_svg( 'chevron_right', 22 ),
70 | 				)
71 | 			);
72 | 
73 | 		endif; // Check for have_comments().
74 | 
75 | 		comment_form();
76 | 
77 | 		// If comments are closed and there are comments, let's leave a little note, shall we?
78 | 		if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
79 | 			?>
80 | 			<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'coblocks' ); ?></p>
81 | 		<?php
82 | 		endif;
83 | 		?>
84 | 
85 | 	</div>
86 | 
87 | </div>
88 | 


--------------------------------------------------------------------------------
/inc/plugins.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * TGMPA Plugins.
 4 |  *
 5 |  * Register the plugins for this theme.
 6 |  *
 7 |  * @package CoBlocks
 8 |  */
 9 | 
10 | /**
11 |  * Load the TGMPA class.
12 |  */
13 | require get_parent_theme_file_path( '/inc/class-tgm-plugin-activation.php' );
14 | 
15 | /**
16 |  * Register the required plugins for this theme.
17 |  *
18 |  * This function is hooked into `tgmpa_register`, which is fired on the WP `init` action on priority 10.
19 |  */
20 | function coblocks_register_required_plugins() {
21 | 	/*
22 | 	 * Array of plugin arrays. Required keys are name and slug.
23 | 	 * If the source is NOT from the .org repo, then source is also required.
24 | 	 */
25 | 	$plugins = array(
26 | 		array(
27 | 			'name'     => esc_html__( 'CoBlocks', 'coblocks' ),
28 | 			'slug'     => 'coblocks',
29 | 			'required' => false,
30 | 		),
31 | 		array(
32 | 			'name'     => esc_html__( 'Block Gallery', 'coblocks' ),
33 | 			'slug'     => 'block-gallery',
34 | 			'required' => false,
35 | 		),
36 | 		array(
37 | 			'name'     => esc_html__( 'Login Designer', 'coblocks' ),
38 | 			'slug'     => 'login-designer',
39 | 			'required' => false,
40 | 		),
41 | 	);
42 | 
43 | 	/*
44 | 	 * Array of configuration settings. Amend each line as needed.
45 | 	 *
46 | 	 * TGMPA will start providing localized text strings soon. If you already have translations of our standard
47 | 	 * strings available, please help us make TGMPA even better by giving us access to these translations or by
48 | 	 * sending in a pull-request with .po file(s) with the translations.
49 | 	 *
50 | 	 * Only uncomment the strings in the config array if you want to customize the strings.
51 | 	 */
52 | 	$config = array(
53 | 		'id'           => 'coblocks',              // Unique ID for hashing notices for multiple instances of TGMPA.
54 | 		'default_path' => '',                      // Default absolute path to bundled plugins.
55 | 		'menu'         => 'tgmpa-install-plugins', // Menu slug.
56 | 		'has_notices'  => true,                    // Show admin notices or not.
57 | 		'dismissable'  => true,                    // If false, a user cannot dismiss the nag message.
58 | 		'dismiss_msg'  => '',                      // If 'dismissable' is false, this message will be at the top of nag.
59 | 		'is_automatic' => false,                   // Automatically activate plugins after installation or not.
60 | 		'message'      => '',                      // Message to output right before the plugins table.
61 | 	);
62 | 
63 | 	tgmpa( $plugins, $config );
64 | }
65 | 
66 | add_action( 'tgmpa_register', 'coblocks_register_required_plugins' );
67 | 


--------------------------------------------------------------------------------
/scss/layout/_header-search.scss:
--------------------------------------------------------------------------------
  1 | .search-toggle {
  2 | 	padding: 0 7px;
  3 | 
  4 | 	.svg-icon {
  5 | 		fill: $black;
  6 | 		position: relative;
  7 | 		top: 2px;
  8 | 
  9 | 		@include hover {
 10 | 
 11 | 			&:hover {
 12 | 				opacity: 0.7;
 13 | 			}
 14 | 		}
 15 | 	}
 16 | }
 17 | 
 18 | .site-search {
 19 | 	z-index: 9999;
 20 | 	transition: transform 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955), visibility 0ms cubic-bezier(0.694, 0, 0.335, 1) 300ms;
 21 | 
 22 | 	label {
 23 | 		@include hide;
 24 | 	}
 25 | 
 26 | 	input {
 27 | 		@include font-size(19px);
 28 | 		background: $white;
 29 | 		border-radius: 0;
 30 | 		border: 0;
 31 | 		box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.05);
 32 | 		height: 80px;
 33 | 		margin: 0 !important;
 34 | 		padding-left: 3.5em;
 35 | 		transition: height .3s cubic-bezier(.694,.0482,.335,1);
 36 | 		z-index: 99999;
 37 | 
 38 | 		@media only screen and (min-width: 600px) {
 39 | 			@include font-size(21px);
 40 | 		}
 41 | 	}
 42 | 
 43 | 	.search-form {
 44 | 		left: 0;
 45 | 		position: fixed;
 46 | 		right: 0;
 47 | 		top: 0;
 48 | 		transform: translateY(-150%);
 49 | 		transition: transform 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955), visibility 0ms cubic-bezier(0.694, 0, 0.335, 1) 300ms;
 50 | 		visibility: hidden;
 51 | 		z-index: 99998;
 52 | 
 53 | 		.admin-bar & {
 54 | 			top: 32px;
 55 | 
 56 | 			@media only screen and (max-width: 782px) {
 57 | 				top: 46px;
 58 | 			}
 59 | 		}
 60 | 
 61 | 		.search-submit {
 62 | 			top: 0;
 63 | 			bottom: 0;
 64 | 			left: 0;
 65 | 			padding: 0 2em;
 66 | 			z-index: 99999999999;
 67 | 			right: initial;
 68 | 
 69 | 			.svg-icon {
 70 | 				top: 1.1em;
 71 | 			}
 72 | 		}
 73 | 	}
 74 | 
 75 | 	&-overlay {
 76 | 		background: rgba(0, 0, 0, 0.05);
 77 | 		position: fixed;
 78 | 		transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1), visibility 0ms cubic-bezier(0.694, 0, 0.335, 1) 300ms;
 79 | 		top: 0;
 80 | 		right: 0;
 81 | 		left: 0;
 82 | 		bottom: 0;
 83 | 		height: 100%;
 84 | 		width: 100%;
 85 | 		z-index: 99997;
 86 | 		cursor: pointer;
 87 | 		visibility: hidden;
 88 | 		opacity: 0;
 89 | 	}
 90 | }
 91 | 
 92 | .header-is-sticky.site-search-open .site-header {
 93 | 	transform: translateY(-150%);
 94 | }
 95 | 
 96 | .site-search-open {
 97 | 
 98 | 	.site-search .search-form {
 99 | 		visibility: visible;
100 | 		transform: translateY(0);
101 | 		transition: transform 400ms cubic-bezier(0.694, 0, 0.335, 1), visibility 0ms cubic-bezier(0.694, 0, 0.335, 1);
102 | 	}
103 | 
104 | 	.site-search input {
105 | 		box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.08);
106 | 	}
107 | 
108 | 	.site-search-overlay {
109 | 		opacity: 1;
110 | 		transition: opacity 400ms cubic-bezier(0.694, 0, 0.335, 1), visibility 0ms cubic-bezier(0.694, 0, 0.335, 1);
111 | 		visibility: visible;
112 | 		pointer-events: normal;
113 | 	}
114 | 
115 | 	.drop-in--from-bottom.drop-in--pinned {
116 | 		transform: translateY(150%);
117 | 	}
118 | 
119 | }


--------------------------------------------------------------------------------
/inc/customizer/sanitization.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Customizer: Sanitization Callbacks
 4 |  *
 5 |  * This file defines sanitization callback functions for various data types
 6 |  * referred to in the Customizer.
 7 |  *
 8 |  * @see https://github.com/WPTRT/code-examples/blob/master/customizer/sanitization-callbacks.php
 9 |  *
10 |  * @package CoBlocks
11 |  */
12 | 
13 | /**
14 |  * Checkbox sanitization callback example.
15 |  *
16 |  * Sanitization callback for 'checkbox' type controls. This callback sanitizes `$checked`
17 |  * as a boolean value, either TRUE or FALSE.
18 |  *
19 |  * @param bool $checked Whether the checkbox is checked.
20 |  * @return bool Whether the checkbox is checked.
21 |  */
22 | function coblocks_sanitize_checkbox( $checked ) {
23 | 	// Boolean check.
24 | 	return ( ( isset( $checked ) && true === $checked ) ? true : false );
25 | }
26 | 
27 | /**
28 |  * Sanitization: html
29 |  * Control: textarea
30 |  *
31 |  * Sanitization callback for 'html' type text inputs. This
32 |  * callback sanitizes $input for HTML allowable in posts.
33 |  *
34 |  * https://codex.wordpress.org/Function_Reference/wp_kses
35 |  * https://gist.github.com/adamsilverstein/10783774
36 |  * https://github.com/devinsays/options-framework-plugin/blob/master/options-check/functions.php#L69
37 |  * http://ottopress.com/2010/wp-quickie-kses/
38 |  *
39 |  * @uses wp_filter_post_kses() https://developer.wordpress.org/reference/functions/wp_filter_post_kses/
40 |  * @uses wp_kses() https://developer.wordpress.org/reference/functions/wp_kses/
41 |  *
42 |  * @param string|string $input Text to sanitize.
43 |  */
44 | function coblocks_sanitize_html( $input ) {
45 | 	global $allowedposttags;
46 | 	return wp_kses( $input, $allowedposttags );
47 | }
48 | 
49 | /**
50 |  * Select sanitization callback example.
51 |  *
52 |  * - Sanitization: select
53 |  * - Control: select, radio
54 |  *
55 |  * Sanitization callback for 'select' and 'radio' type controls. This callback sanitizes `$input`
56 |  * as a slug, and then validates `$input` against the choices defined for the control.
57 |  *
58 |  * @see sanitize_key()               https://developer.wordpress.org/reference/functions/sanitize_key/
59 |  * @see $wp_customize->get_control() https://developer.wordpress.org/reference/classes/wp_customize_manager/get_control/
60 |  *
61 |  * @param string|string        $input   Slug to sanitize.
62 |  * @param WP_Customize_Setting $setting Setting instance.
63 |  * @return string Sanitized slug if it is a valid choice; otherwise, the setting default.
64 |  */
65 | function coblocks_sanitize_select( $input, $setting ) {
66 | 
67 | 	// Ensure input is a slug.
68 | 	$input = sanitize_key( $input );
69 | 
70 | 	// Get list of choices from the control associated with the setting.
71 | 	$choices = $setting->manager->get_control( $setting->id )->choices;
72 | 
73 | 	// If the input is a valid key, return it; otherwise, return the default.
74 | 	return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
75 | }
76 | 


--------------------------------------------------------------------------------
/scss/layout/_header.scss:
--------------------------------------------------------------------------------
  1 | .site-header {
  2 | 	@include clearfix;
  3 | 	margin: 0 auto;
  4 | 	padding: 15px 0;
  5 | 
  6 | 	@media only screen and (max-width: 599px) {
  7 | 
  8 | 		&::after {
  9 | 			content: "";
 10 | 			display: none;
 11 | 			position: fixed;
 12 | 			z-index: 99999999;
 13 | 			top: 100px;
 14 | 			right: 0;
 15 | 			left: 0;
 16 | 			height: 40px;
 17 | 			width: 100%;
 18 | 			background: transparent;
 19 | 			background: linear-gradient($white 0%, rgba($white, 0));
 20 | 			pointer-events: none;
 21 | 		}
 22 | 	}
 23 | 
 24 | 	&__button {
 25 | 		padding: 5px;
 26 | 
 27 | 		.svg-icon {
 28 | 			backface-visibility: hidden;
 29 | 			fill: $black;
 30 | 			position: relative;
 31 | 
 32 | 			@include hover {
 33 | 
 34 | 				&:hover {
 35 | 					opacity: 0.7;
 36 | 				}
 37 | 			}
 38 | 		}
 39 | 	}
 40 | 
 41 | 	.site-logo {
 42 | 
 43 | 		&.no-border-radius img {
 44 | 			border-radius: 0;
 45 | 		}
 46 | 
 47 | 		img {
 48 | 			border-radius: 100%;
 49 | 			transition: transform 0.3s cubic-bezier(.694,.0482,.335,1), box-shadow 300ms cubic-bezier(0.694, 0.0482, 0.335, 1), border-radius .2s cubic-bezier(.694,.0482,.335,1);
 50 | 		}
 51 | 	}
 52 | 
 53 | 	.site-title.with-custom-logo {
 54 | 		margin-left: 10px;
 55 | 
 56 | 		.customize-partial-edit-shortcut-blogname {
 57 | 			display: none;
 58 | 		}
 59 | 	}
 60 | 
 61 | 	.sep {
 62 | 		height: 24px;
 63 | 		display: inline-block;
 64 | 		position: relative;
 65 | 		padding-left: 7px;
 66 | 		margin-left: 20px;
 67 | 		border-left: 1px solid rgba(0, 0, 0, .15);
 68 | 		transition: all 100ms cubic-bezier(0.645, 0.045, 0.355, 1);
 69 | 
 70 | 		@media only screen and (max-width: 299px) {
 71 | 			display: none;
 72 | 		}
 73 | 	}
 74 | 
 75 | 	.site-description {
 76 | 		@include font-size(18px);
 77 | 		line-height: 1;
 78 | 		display: none;
 79 | 	}
 80 | 
 81 | 	.nav {
 82 | 
 83 | 		div {
 84 | 			display: inline-block;
 85 | 			margin-right: 20px;
 86 | 		}
 87 | 
 88 | 		li {
 89 | 			position: relative;
 90 | 			text-align: right;
 91 | 
 92 | 			@media only screen and (min-width: 600px) {
 93 | 				display: inline-block;
 94 | 				text-align: left;
 95 | 			}
 96 | 
 97 | 			a {
 98 | 				@include font-size(17px);
 99 | 				display: inline-block;
100 | 
101 | 				@media only screen and (min-width: 600px) {
102 | 					padding: 0.25em 0.6em;
103 | 				}
104 | 
105 | 				@media only screen and (min-width: 600px) and (max-width: 700px) {
106 | 					@include font-size(16px);
107 | 					padding: 0.25em 0.4em;
108 | 				}
109 | 
110 | 				@include hover {
111 | 					&:hover {
112 | 						color: $black;
113 | 					}
114 | 				}
115 | 			}
116 | 
117 | 			&.current_page_item > a {
118 | 				opacity: .7;
119 | 			}
120 | 
121 | 			&.current_page_item .svg-icon {
122 | 				opacity: .7;
123 | 			}
124 | 		}
125 | 
126 | 		.sep {
127 | 			padding-left: 0;
128 | 			margin-left: -5px;
129 | 			margin-right: 14px;
130 | 			display: none;
131 | 
132 | 			@media only screen and (min-width: 600px) {
133 | 				display: inline-block;
134 | 			}
135 | 		}
136 | 	}
137 | }
138 | 


--------------------------------------------------------------------------------
/inc/customizer/customizer-editor.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Add customizer colors to the block editor.
 4 |  *
 5 |  * @package     CoBlocks
 6 |  */
 7 | 
 8 | /**
 9 |  * Add customizer colors to the block editor.
10 |  */
11 | function coblocks_editor_customizer_generated_values() {
12 | 
13 | 	// Retrieve colors from the Customizer.
14 | 	$background_color  = get_theme_mod( 'background_color', '#ffffff' );
15 | 	$text_color        = get_theme_mod( 'text_color', coblocks_defaults( 'text_color' ) );
16 | 	$heading_color     = get_theme_mod( 'heading_color', coblocks_defaults( 'heading_color' ) );
17 | 	$alt_heading_color = get_theme_mod( 'alt_heading_color', coblocks_defaults( 'alt_heading_color' ) );
18 | 
19 | 	// Fonts.
20 | 	$heading_font = get_theme_mod( 'heading_font', coblocks_defaults( 'heading_font' ) );
21 | 	$body_font    = get_theme_mod( 'body_font', coblocks_defaults( 'body_font' ) );
22 | 
23 | 	if ( 'System Fonts' === $heading_font ) {
24 | 		$heading_font = '-apple-system, BlinkMacSystemFont, segoe ui, fira sans, helvetica neue, arial, sans-serif';
25 | 	}
26 | 
27 | 	if ( 'System Fonts' === $body_font ) {
28 | 		$body_font = '-apple-system, BlinkMacSystemFont, segoe ui, fira sans, helvetica neue, arial, sans-serif';
29 | 	}
30 | 
31 | 	if ( 'System Serif' === $heading_font ) {
32 | 		$heading_font = 'serif';
33 | 	}
34 | 
35 | 	if ( 'System Serif' === $body_font ) {
36 | 		$body_font = 'serif';
37 | 	}
38 | 
39 | 	// Build styles.
40 | 	$css = '';
41 | 
42 | 	$css .= '.block-editor__container { background-color: #' . esc_attr( $background_color ) . '; }';
43 | 	$css .= '.editor-styles-wrapper.edit-post-visual-editor { color: ' . esc_attr( $text_color ) . '; }';
44 | 	$css .= '.wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3, .wp-block-heading h4, .wp-block-heading h5, .wp-block-heading h6 { color: ' . esc_attr( $heading_color ) . ' !important; }';
45 | 	$css .= '.editor-styles-wrapper.edit-post-visual-editor .editor-post-title__block .editor-post-title__input { color: ' . esc_attr( $heading_color ) . '; }';
46 | 	$css .= '.editor-styles-wrapper.edit-post-visual-editor figcaption:not(.blockgallery--caption), .editor-styles-wrapper.edit-post-visual-editor .blockgallery:not(.has-caption-color) figcaption { color: ' . esc_attr( $alt_heading_color ) . ' }';
47 | 
48 | 	return wp_strip_all_tags( apply_filters( 'coblocks_editor_customizer_generated_values', $css ) );
49 | }
50 | 
51 | /**
52 |  * Enqueue Customizer settings into the block editor.
53 |  */
54 | function coblocks_editor_customizer_styles() {
55 | 
56 | 	// Register Customizer styles within the editor to use for inline additions.
57 | 	wp_register_style( 'coblocks-editor-customizer-styles', false, '@@pkg.version', 'all' );
58 | 
59 | 	// Enqueue the Customizer style.
60 | 	wp_enqueue_style( 'coblocks-editor-customizer-styles' );
61 | 
62 | 	// Add custom colors to the editor.
63 | 	wp_add_inline_style( 'coblocks-editor-customizer-styles', coblocks_editor_customizer_generated_values() );
64 | }
65 | add_action( 'enqueue_block_editor_assets', 'coblocks_editor_customizer_styles' );
66 | 


--------------------------------------------------------------------------------
/header.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * The header for our theme.
  4 |  *
  5 |  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  6 |  *
  7 |  * @package CoBlocks
  8 |  */
  9 | 
 10 | ?><!DOCTYPE html>
 11 | <html <?php language_attributes(); ?> class="no-js no-svg">
 12 | <head>
 13 | 	<meta charset="<?php bloginfo( 'charset' ); ?>">
 14 | 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 15 | 	<link rel="profile" href="http://gmpg.org/xfn/11">
 16 | 	<?php wp_head(); ?>
 17 | </head>
 18 | 
 19 | <body <?php body_class(); ?>>
 20 | 
 21 | <div id="page" class="site">
 22 | 
 23 | 	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'coblocks' ); ?></a>
 24 | 
 25 | 	<?php do_action( 'coblocks_before_header' ); ?>
 26 | 
 27 | 	<header id="masthead" class="site-header" role="banner">
 28 | 
 29 | 		<div class="container max-width flex justify-between">
 30 | 
 31 | 			<div class="flex justify-start items-center">
 32 | 
 33 | 				<?php coblocks_site_logo(); ?>
 34 | 
 35 | 				<?php if ( has_nav_menu( 'social' ) ) : ?>
 36 | 
 37 | 					<span class="sep"></span>
 38 | 
 39 | 					<nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Menu', 'coblocks' ); ?>">
 40 | 
 41 | 						<?php
 42 | 							wp_nav_menu(
 43 | 								array(
 44 | 									'theme_location' => 'social',
 45 | 									'menu_class'     => 'sans-serif-font medium smooth gray h6 flex items-center list-reset',
 46 | 									'depth'          => 1,
 47 | 									'link_before'    => '<span class="screen-reader-text">',
 48 | 									'link_after'     => '</span>' . coblocks_get_icon_svg( 'chain', 22 ),
 49 | 								)
 50 | 							);
 51 | 						?>
 52 | 
 53 | 					</nav>
 54 | 
 55 | 				<?php endif; ?>
 56 | 			</div>
 57 | 
 58 | 			<div class="flex items-center">
 59 | 
 60 | 				<?php do_action( 'coblocks_before_nav' ); ?>
 61 | 
 62 | 				<nav id="site-navigation" class="main-navigation nav primary flex items-center justify-end" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'coblocks' ); ?>">
 63 | 
 64 | 					<?php if ( has_nav_menu( 'primary' ) ) : ?>
 65 | 						<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
 66 | 							<span class="screen-reader-text"><?php echo esc_html__( 'Menu', 'coblocks' ); ?></span>
 67 | 						</button>
 68 | 
 69 | 						<?php
 70 | 						wp_nav_menu(
 71 | 							array(
 72 | 								'theme_location' => 'primary',
 73 | 								'menu_class'     => 'primary-menu sans-serif-font medium smooth gray h6 list-reset',
 74 | 								'depth'          => '2',
 75 | 							)
 76 | 						);
 77 | 						?>
 78 | 
 79 | 						<span class="sep"></span>
 80 | 
 81 | 					<?php endif; ?>
 82 | 
 83 | 					<?php coblocks_search_toggle(); ?>
 84 | 
 85 | 					<?php coblocks_night_toggle(); ?>
 86 | 
 87 | 				</nav>
 88 | 
 89 | 				<?php do_action( 'coblocks_after_nav' ); ?>
 90 | 
 91 | 			</div>
 92 | 
 93 | 		</div>
 94 | 
 95 | 	</header>
 96 | 
 97 | 	<?php do_action( 'coblocks_after_header' ); ?>
 98 | 
 99 | 	<div id="content" class="site-content">
100 | 
101 | 		<main id="main" class="site-main" role="main">
102 | 


--------------------------------------------------------------------------------
/assets/js/global.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Theme javascript functions file.
  3 |  */
  4 | 
  5 | ( function( $ ) {
  6 | 	"use strict";
  7 | 
  8 | 	var
  9 | 	html			= $( 'html' ),
 10 | 	body			= $( 'body' ),
 11 | 	searchToggle 		= $( '#search-toggle' ),
 12 | 	searchOverlay 		= $( '#site-search-overlay' ),
 13 | 	searchOpen		= ( 'site-search-open' ),
 14 | 	nightToggle 		= $( '#night-mode-toggle' ),
 15 | 	nightActive 		= ( 'night-mode' );
 16 | 
 17 | 	/**
 18 | 	 * Removes "no-js" and adds "js" classes to the body tag.
 19 | 	 */
 20 | 	(function(html){html.className = html.className.replace( /\bno-js\b/,'js' );})(document.documentElement);
 21 | 
 22 | 	/**
 23 | 	 * Test if inline SVGs are supported.
 24 | 	 * @link https://github.com/Modernizr/Modernizr/
 25 | 	 */
 26 | 	function supportsInlineSVG() {
 27 | 		var div = document.createElement( 'div' );
 28 | 		div.innerHTML = '<svg/>';
 29 | 		return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
 30 | 	}
 31 | 
 32 | 	/* Document Ready */
 33 | 	$( document ).ready( function () {
 34 | 
 35 | 		supportsInlineSVG();
 36 | 
 37 | 		if ( true === supportsInlineSVG() ) {
 38 | 			document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
 39 | 		}
 40 | 
 41 | 		/* Night Mode */
 42 | 		nightToggle.on( 'click', function( e ) {
 43 | 
 44 | 			if ( html.hasClass( nightActive ) ) {
 45 | 				html.removeClass( nightActive );
 46 | 				localStorage.setItem( 'night-mode', 'false' );
 47 | 			} else {
 48 | 				html.addClass( nightActive );
 49 | 				localStorage.setItem( 'night-mode', 'true' );
 50 | 			}
 51 | 		});
 52 | 
 53 | 		/* Search */
 54 | 		searchToggle.on( 'click', function( e ) {
 55 | 			e.preventDefault();
 56 | 
 57 | 			if ( body.hasClass( searchOpen ) ) {
 58 | 				body.removeClass( searchOpen );
 59 | 			} else {
 60 | 				body.addClass( searchOpen );
 61 | 				$( '#site-search .search-field' ).focus();
 62 | 			}
 63 | 		});
 64 | 
 65 | 		/* Search overlay */
 66 | 		searchOverlay.on( 'click', function( e ) {
 67 | 			e.preventDefault();
 68 | 			body.removeClass( searchOpen );
 69 | 		});
 70 | 
 71 | 		// Runs for auto-post-load.
 72 | 		$( '.nav-previous' ).find( 'a' ).attr( 'rel', 'prev' );
 73 | 	});
 74 | 
 75 | 	// Runs when auto-post-load is triggered.
 76 | 	$( document.body ).on( 'alnp-post-loaded', function( e, post_title, post_url, post_ID, post_count ) {
 77 | 		$( '.nav-previous' ).find( 'a' ).attr( 'rel', 'prev' );
 78 | 		$( '.entry-footer' ).addClass( 'alnp-post-loaded' );
 79 | 	} );
 80 | 
 81 | } )( jQuery );
 82 | 
 83 | ! ( function( e, t, n ) {
 84 | 
 85 | 	t.addEventListener( 'DOMContentLoaded', function() {
 86 | 
 87 | 		function i( e, i ) {
 88 | 			var r = 2 < arguments.length && arguments[2] !== n ? arguments[2] : 'click';
 89 | 			var c = t.querySelectorAll( e );
 90 | 
 91 | 			if ( e && i ) {
 92 | 
 93 | 				c && c.forEach( function( e ) {
 94 | 					e.addEventListener( r, function() {
 95 | 						var e = 'true' === this.getAttribute( i );
 96 | 						this.setAttribute( i, String( ! e ) );
 97 | 					});
 98 | 				});
 99 | 			}
100 | 		}
101 | 
102 | 		i( '[aria-checked]', 'aria-checked' );
103 | 
104 | 	});
105 | 
106 | }( window, document ) );
107 | 


--------------------------------------------------------------------------------
/scss/blocks/_pullquote.scss:
--------------------------------------------------------------------------------
  1 | .entry-content {
  2 | 	.wp-block-pullquote {
  3 | 		@include blockMobileDisplay();
  4 | 		border-color: $black;
  5 | 		padding-bottom: 2.5em;
  6 | 		padding-top: 2.5em;
  7 | 		border-width: 3px;
  8 | 
  9 | 		&.alignwide {
 10 | 			@include blockWideDisplay();
 11 | 		}
 12 | 
 13 | 		&.alignfull {
 14 | 			padding-left: 20px;
 15 | 			padding-right: 20px;
 16 | 
 17 | 			p,
 18 | 			cite {
 19 | 				display: block;
 20 | 				margin-left: auto;
 21 | 				margin-right: auto;
 22 | 				max-width: $content__width--wide;
 23 | 			}
 24 | 		}
 25 | 
 26 | 		blockquote {
 27 | 			border: none !important;
 28 | 			margin: 0;
 29 | 			max-width: none;
 30 | 			padding: 0 !important;
 31 | 			text-align: center;
 32 | 			word-break: break-word;
 33 | 
 34 | 			p {
 35 | 				margin-bottom: 0;
 36 | 
 37 | 				@media only screen and (min-width: 600px) {
 38 | 					padding-left: 20px;
 39 | 					padding-right: 20px;
 40 | 				}
 41 | 			}
 42 | 
 43 | 			&:not([class*="text-color"]) {
 44 | 				color: $color__text-main;
 45 | 
 46 | 				cite {
 47 | 					color: $gray;
 48 | 				}
 49 | 			}
 50 | 		}
 51 | 
 52 | 		p {
 53 | 			font-family: $font__heading;
 54 | 			font-size: $font__size-mdlrg;
 55 | 			font-weight: 500;
 56 | 			hyphens: auto;
 57 | 			line-height: 1.4;
 58 | 			margin-bottom: 0;
 59 | 			margin-top: 0;
 60 | 			word-break: break-word;
 61 | 
 62 | 			em {
 63 | 				font-style: normal;
 64 | 			}
 65 | 		}
 66 | 
 67 | 		cite {
 68 | 			display: inline-block;
 69 | 			font-size: $font__size-sm;
 70 | 			font-family: $font__figcaption;
 71 | 			margin-bottom: -10px;
 72 | 			margin-top: .75em;
 73 | 			text-transform: none;
 74 | 		}
 75 | 
 76 | 		&.alignleft,
 77 | 		&.alignright {
 78 | 			padding-left: 0;
 79 | 			padding-right: 0;
 80 | 			padding-top: 20px;
 81 | 			padding-bottom: 25px;
 82 | 
 83 | 			@media screen and (min-width: $content__align--mobile-media-query--min) {
 84 | 				margin-top: 0.65em;
 85 | 				margin-bottom: 1.75em;
 86 | 			}
 87 | 
 88 | 			blockquote {
 89 | 				margin-left: 0;
 90 | 				max-width: 100%;
 91 | 				padding: 0;
 92 | 				text-align: left;
 93 | 			}
 94 | 
 95 | 			p {
 96 | 				padding-left: 0;
 97 | 				padding-right: 0;
 98 | 			}
 99 | 
100 | 			cite {
101 | 				display: block;
102 | 				margin-bottom: -7px;
103 | 			}
104 | 		}
105 | 
106 | 		&.is-style-solid-color {
107 | 			padding: 20px 35px;
108 | 
109 | 			&.alignleft,
110 | 			&.alignright {
111 | 				@media screen and (min-width: $content__align--mobile-media-query--min) {
112 | 					margin-bottom: 0.65em;
113 | 					margin-top: 0.65em;
114 | 				}
115 | 			}
116 | 
117 | 			p {
118 | 				margin-bottom: 0.3em;
119 | 				margin-top: 0.3em;
120 | 				padding-left: 0;
121 | 				padding-right: 0;
122 | 			}
123 | 
124 | 			blockquote {
125 | 				margin: 0 auto;
126 | 				text-align: left;
127 | 			}
128 | 
129 | 			cite {
130 | 				display: block;
131 | 				margin-bottom: 0.5em;
132 | 				opacity: 0.8;
133 | 			}
134 | 
135 | 			&:not([class*="background-color"]) {
136 | 				background-color: $black;
137 | 			}
138 | 
139 | 			blockquote:not([class*="text-color"]),
140 | 			blockquote:not([class*="text-color"]) cite,
141 | 			blockquote:not([class*="text-color"]) a {
142 | 				color: $white;
143 | 			}
144 | 		}
145 | 	}
146 | }
147 | 


--------------------------------------------------------------------------------
/scss/modules/_customizer.scss:
--------------------------------------------------------------------------------
  1 | .customize-partial-edit-shortcuts-shown {
  2 | 
  3 | 	.custom-logo-link {
  4 | 		@media only screen and (min-width: 600px) {
  5 | 			margin-left: -30px;
  6 | 			align-items: center;
  7 | 			display: flex;
  8 | 			justify-content: center;
  9 | 
 10 | 			.customize-partial-edit-shortcut,
 11 | 			.customize-partial-edit-shortcut-button {
 12 | 				position: relative;
 13 | 				float: none;
 14 | 				left: initial;
 15 | 			}
 16 | 
 17 | 			.customize-partial-edit-shortcut-button {
 18 | 				left: -10px;
 19 | 			}
 20 | 
 21 | 			.customize-partial-edit-shortcut {
 22 | 				height: auto;
 23 | 				width: auto;
 24 | 			}
 25 | 		}
 26 | 	}
 27 | 
 28 | 	.customize-partial-edit-shortcut-blogname,
 29 | 	.customize-partial-edit-shortcut-custom_logo {
 30 | 		@media only screen and (max-width: 599px) {
 31 | 			display: none;
 32 | 		}
 33 | 	}
 34 | 
 35 | 	#site-navigation {
 36 | 
 37 | 		.customize-partial-edit-shortcut-button {
 38 | 			@media only screen and (min-width: 600px) and (max-width: 700px) {
 39 | 				margin-top: -2px;
 40 | 			}
 41 | 
 42 | 			@media only screen and (max-width: 599px) {
 43 | 				display: none;
 44 | 			}
 45 | 		}
 46 | 	}
 47 | 
 48 | 	.widget-area__wrapper {
 49 | 
 50 | 		.customize-partial-edit-shortcut--footer-colors {
 51 | 			top: 8px;
 52 | 			left: 10px;
 53 | 
 54 | 			.customize-partial-edit-shortcut-button {
 55 | 				left: 0;
 56 | 
 57 | 				&::before {
 58 | 					box-shadow: none;
 59 | 					color: $white;
 60 | 					content: "\f540";
 61 | 					font: 400 15px/72px dashicons;
 62 | 					height: 20px;
 63 | 					line-height: 20px;
 64 | 					display: block;
 65 | 					position: absolute;
 66 | 					right: 0.18em;
 67 | 					text-shadow: 0 -1px 1px rgba(0, 122, 182, 0.8), 1px 0 1px #007ab6, 0 1px 1px #007ab6, -1px 0 1px #007ab6;
 68 | 					top: 0.24em;
 69 | 					width: 20px;
 70 | 				}
 71 | 			}
 72 | 		}
 73 | 
 74 | 		.widget {
 75 | 
 76 | 			.customize-partial-edit-shortcut-button {
 77 | 				left: -35px;
 78 | 				top: 4px;
 79 | 			}
 80 | 		}
 81 | 
 82 | 		.footer-navigation {
 83 | 
 84 | 			.customize-partial-edit-shortcut-button {
 85 | 				display: none;
 86 | 			}
 87 | 		}
 88 | 	}
 89 | 
 90 | 	.coblocks-customizer-add-widget-line {
 91 | 		background: none;
 92 | 		border: none;
 93 | 		box-shadow: none;
 94 | 		padding: 8px 0;
 95 | 		width: 100%;
 96 | 		opacity: 0;
 97 | 		visibility: hidden;
 98 | 		margin-top: 20px;
 99 | 		transition: opacity 150ms cubic-bezier(0.38, 0.32, 0.36, 0.98), visibility 0 cubic-bezier(0.38, 0.32, 0.36, 0.98) 150ms;
100 | 
101 | 		&::after {
102 | 			background: #008ec2;
103 | 			content: "";
104 | 			display: block;
105 | 			height: 3px;
106 | 			margin-left: auto;
107 | 			margin-right: auto;
108 | 			max-width: 440px;
109 | 		}
110 | 	}
111 | 
112 | 	#secondary:hover .coblocks-customizer-add-widget-line {
113 | 		opacity: 1;
114 | 		visibility: visible;
115 | 		transition: opacity 150ms cubic-bezier(0.38, 0.32, 0.36, 0.98), visibility 0 cubic-bezier(0.38, 0.32, 0.36, 0.98) 0;
116 | 	}
117 | 
118 | 	#engagement-bar {
119 | 
120 | 		.customize-partial-edit-shortcut-button {
121 | 			margin-top: 12px;
122 | 			margin-left: -6px;
123 | 
124 | 			@media only screen and (max-width: 699px) {
125 | 				display: none;
126 | 			}
127 | 		}
128 | 	}
129 | }
130 | 


--------------------------------------------------------------------------------
/inc/customizer/class-coblocks-range-control.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Range Customizer Control.
 4 |  *
 5 |  * @package CoBlocks
 6 |  */
 7 | 
 8 | // Exit if accessed directly.
 9 | if ( ! defined( 'ABSPATH' ) ) {
10 | 	exit;
11 | }
12 | 
13 | // Exit if WP_Customize_Control does not exsist.
14 | if ( ! class_exists( 'WP_Customize_Control' ) ) {
15 | 	return null;
16 | }
17 | 
18 | /**
19 |  * This class is for the range control in the Customizer.
20 |  *
21 |  * @access public
22 |  */
23 | class CoBlocks_Range_Control extends WP_Customize_Control {
24 | 
25 | 	/**
26 | 	 * The type of customize control.
27 | 	 *
28 | 	 * @access public
29 | 	 * @var    string
30 | 	 */
31 | 	public $type = 'coblocks-range';
32 | 
33 | 	/**
34 | 	 * Enqueue scripts and styles.
35 | 	 */
36 | 	public function enqueue() {
37 | 		wp_enqueue_style( 'coblocks-range-control', get_parent_theme_file_uri( 'assets/css/customize-range-control.css' ), false, '@@pkg.version', 'all' );
38 | 		wp_enqueue_script( 'coblocks-range-control', get_parent_theme_file_uri( 'assets/js/customize-range-control.js' ), array( 'jquery' ), '@@pkg.version', true );
39 | 	}
40 | 
41 | 	/**
42 | 	 * Refresh the parameters passed to the JavaScript via JSON.
43 | 	 *
44 | 	 * @uses WP_Customize_Control::to_json()
45 | 	 */
46 | 	public function to_json() {
47 | 		parent::to_json();
48 | 
49 | 		// The setting value.
50 | 		$this->json['id']                  = $this->id;
51 | 		$this->json['value']               = $this->value();
52 | 		$this->json['link']                = $this->get_link();
53 | 		$this->json['defaultValue']        = $this->setting->default;
54 | 		$this->json['input_attrs']['min']  = ( isset( $this->input_attrs['min'] ) ) ? $this->input_attrs['min'] : '0';
55 | 		$this->json['input_attrs']['max']  = ( isset( $this->input_attrs['max'] ) ) ? $this->input_attrs['max'] : '100';
56 | 		$this->json['input_attrs']['step'] = ( isset( $this->input_attrs['step'] ) ) ? $this->input_attrs['step'] : '1';
57 | 	}
58 | 
59 | 	/**
60 | 	 * Don't render the control content from PHP, as it's rendered via JS on load.
61 | 	 */
62 | 	public function render_content() {}
63 | 
64 | 	/**
65 | 	 * Render a JS template for the content of the control.
66 | 	 */
67 | 	protected function content_template() {
68 | 		?>
69 | 
70 | 		<div class="coblocks-range">
71 | 
72 | 			<# if ( data.label ) { #>
73 | 				<label class="coblocks-range__label">
74 | 					<span class="customize-control-title">{{ data.label }}</span>
75 | 				</label>
76 | 			<# } #>
77 | 
78 | 			<div class="coblocks-range__value">
79 | 				<span>{{ data.value }}</span>
80 | 				<input id="range-{{ data.id }}" type="number" class="coblocks-range__number-input" value="{{ data.value }}" data-default-value="{{ data.defaultValue }}" {{{ data.link }}} <# if ( data.value ) { #> checked="checked" <# } #> />
81 | 				<# if ( data.description ) { #>
82 | 					<em>{{ data.description }}</em>
83 | 				<# } #>
84 | 			</div>
85 | 
86 | 			<input type="range" data-input-type="range" class="coblocks-range__track" value="{{ data.value }}" data-default-value="{{ data.defaultValue }}"  min="{{ data.input_attrs['min'] }}" max="{{ data.input_attrs['max'] }}" step="{{ data.input_attrs['step'] }}" {{{ data.link }}} />
87 | 
88 | 			<a type="button" value="reset" class="coblocks-range__reset"></a>
89 | 
90 | 		</div>
91 | 		<?php
92 | 	}
93 | }
94 | 


--------------------------------------------------------------------------------
/scss/_normalize.scss:
--------------------------------------------------------------------------------
  1 | html {
  2 | 	font-family: sans-serif;
  3 | 	-webkit-text-size-adjust: 100%;
  4 | 	-ms-text-size-adjust:     100%;
  5 | }
  6 | 
  7 | body {
  8 | 	margin: 0;
  9 | }
 10 | 
 11 | article,
 12 | aside,
 13 | details,
 14 | figcaption,
 15 | figure,
 16 | footer,
 17 | header,
 18 | main,
 19 | menu,
 20 | nav,
 21 | section,
 22 | summary {
 23 | 	display: block;
 24 | }
 25 | 
 26 | audio,
 27 | canvas,
 28 | progress,
 29 | video {
 30 | 	display: inline-block;
 31 | 	vertical-align: baseline;
 32 | }
 33 | 
 34 | audio:not([controls]) {
 35 | 	display: none;
 36 | 	height: 0;
 37 | }
 38 | 
 39 | a {
 40 | 	background-color: transparent;
 41 | }
 42 | 
 43 | a:active,
 44 | a:hover {
 45 | 	outline: 0;
 46 | }
 47 | 
 48 | abbr[title] {
 49 | 	border-bottom: 1px dotted;
 50 | }
 51 | 
 52 | b,
 53 | strong {
 54 | 	font-weight: bold;
 55 | }
 56 | 
 57 | dfn {
 58 | 	font-style: italic;
 59 | }
 60 | 
 61 | h1 {
 62 | 	font-size: 2em;
 63 | 	margin: 0.67em 0;
 64 | }
 65 | 
 66 | mark {
 67 | 	background: #ff0;
 68 | 	color: $black;
 69 | }
 70 | 
 71 | small {
 72 | 	font-size: 80%;
 73 | }
 74 | 
 75 | sub,
 76 | sup {
 77 | 	font-size: 75%;
 78 | 	line-height: 0;
 79 | 	position: relative;
 80 | 	vertical-align: baseline;
 81 | }
 82 | 
 83 | sup {
 84 | 	top: -0.5em;
 85 | }
 86 | 
 87 | sub {
 88 | 	bottom: -0.25em;
 89 | }
 90 | 
 91 | img {
 92 | 	border: 0;
 93 | }
 94 | 
 95 | svg:not(:root) {
 96 | 	overflow: hidden;
 97 | }
 98 | 
 99 | figure {
100 | 	margin: 0;
101 | }
102 | 
103 | hr {
104 | 	box-sizing: content-box;
105 | 	height: 0;
106 | }
107 | 
108 | pre {
109 | 	overflow: auto;
110 | }
111 | 
112 | code,
113 | kbd,
114 | pre,
115 | samp {
116 | 	font-family: monospace, monospace;
117 | 	font-size: 1em;
118 | }
119 | 
120 | button,
121 | input,
122 | optgroup,
123 | select,
124 | textarea {
125 | 	color: inherit;
126 | 	font: inherit;
127 | 	margin: 0;
128 | }
129 | 
130 | button {
131 | 	overflow: visible;
132 | }
133 | 
134 | button,
135 | select {
136 | 	text-transform: none;
137 | }
138 | 
139 | button,
140 | html input[type="button"],
141 | input[type="reset"],
142 | input[type="submit"] {
143 | 	-webkit-appearance: button;
144 | 	cursor: pointer;
145 | }
146 | 
147 | button[disabled],
148 | html input[disabled] {
149 | 	cursor: default;
150 | }
151 | 
152 | button::-moz-focus-inner,
153 | input::-moz-focus-inner {
154 | 	border: 0;
155 | 	padding: 0;
156 | }
157 | 
158 | input {
159 | 	line-height: normal;
160 | }
161 | 
162 | input[type="checkbox"],
163 | input[type="radio"] {
164 | 	box-sizing: border-box;
165 | 	padding: 0;
166 | }
167 | 
168 | input[type="number"]::-webkit-inner-spin-button,
169 | input[type="number"]::-webkit-outer-spin-button {
170 | 	height: auto;
171 | }
172 | 
173 | input[type="search"]::-webkit-search-cancel-button,
174 | input[type="search"]::-webkit-search-decoration {
175 | 	-webkit-appearance: none;
176 | }
177 | 
178 | fieldset {
179 | 	border: 1px solid #c0c0c0;
180 | 	margin: 0 2px;
181 | 	padding: 0.35em 0.625em 0.75em;
182 | }
183 | 
184 | legend {
185 | 	border: 0;
186 | 	padding: 0;
187 | }
188 | 
189 | textarea {
190 | 	overflow: auto;
191 | }
192 | 
193 | optgroup {
194 | 	font-weight: bold;
195 | }
196 | 
197 | table {
198 | 	border-collapse: collapse;
199 | 	border-spacing: 0;
200 | }
201 | 
202 | td,
203 | th {
204 | 	padding: 0;
205 | }
206 | 


--------------------------------------------------------------------------------
/scss/widgets/_widgets.scss:
--------------------------------------------------------------------------------
  1 | .widget {
  2 | 	ul,
  3 | 	li {
  4 | 		margin: 0 0 0 8px;
  5 | 		padding: 0;
  6 | 	}
  7 | }
  8 | 
  9 | /* Cats */
 10 | .widget_recent_comments ul li {
 11 | 	margin-bottom: 10px;
 12 | }
 13 | 
 14 | .widget_rss ul li {
 15 | 	margin-bottom: 25px;
 16 | }
 17 | 
 18 | .rss-date {
 19 | 	display: block;
 20 | 	text-transform: uppercase;
 21 | }
 22 | 
 23 | .post-date {
 24 | 	color: #666;
 25 | 	display: block;
 26 | }
 27 | 
 28 | /* Calendar */
 29 | #wp-calendar {
 30 | 	background: #fff;
 31 | 	width: 100%;
 32 | 
 33 | 	tfoot {
 34 | 		display: none;
 35 | 	}
 36 | }
 37 | 
 38 | #wp-calendar caption {
 39 | 	font-size: 15px;
 40 | 	font-weight: 500;
 41 | 	margin-bottom: 10px;
 42 | 	text-align: center;
 43 | }
 44 | 
 45 | #wp-calendar thead {
 46 | 	font-size: 10px;
 47 | }
 48 | 
 49 | #wp-calendar thead th {
 50 | 	font-size: 12px;
 51 | 	font-weight: 500;
 52 | }
 53 | 
 54 | #wp-calendar thead th,
 55 | #wp-calendar tbody td {
 56 | 	background: #fff;
 57 | 	border: none;
 58 | 	padding: 4px 0;
 59 | 	text-align: center;
 60 | }
 61 | 
 62 | #wp-calendar thead th {
 63 | 	background-color: #e9e9e9;
 64 | }
 65 | 
 66 | #wp-calendar tbody .pad {
 67 | 	background: none;
 68 | }
 69 | 
 70 | #wp-calendar tfoot #next {
 71 | 	font-size: 12px;
 72 | 	text-align: right;
 73 | 	text-transform: uppercase;
 74 | }
 75 | 
 76 | #wp-calendar tfoot #prev {
 77 | 	font-size: 12px;
 78 | 	padding-top: 10px;
 79 | 	text-transform: uppercase;
 80 | }
 81 | 
 82 | .widget_nav_menu .sub-menu {
 83 | 	margin-left: 20px;
 84 | }
 85 | 
 86 | /* Tags */
 87 | .tagcloud {
 88 | 	margin-top: 1.5em;
 89 | }
 90 | 
 91 | .tagcloud > a {
 92 | 	background: rgba(0, 0, 0, 0.05);
 93 | 	border-radius: 2px;
 94 | 	box-shadow: 0 0 0;
 95 | 	color: $black;
 96 | 	display: inline-block;
 97 | 	line-height: 22px;
 98 | 	margin: 0 -2px 5px 0;
 99 | 	padding: 4px 10px;
100 | }
101 | 
102 | .tagcloud > a:hover {
103 | 	background: rgba(0, 0, 0, 0.1);
104 | 	color: $black;
105 | }
106 | 
107 | .widget_text + .widget.optin-monster-api {
108 | 	margin-top: -2em;
109 | }
110 | 
111 | /* MC4WP */
112 | .widget_mc4wp_form_widget {
113 | 	text-align: center;
114 | 
115 | 	p {
116 | 		margin-bottom: 0;
117 | 
118 | 		&:first-of-type {
119 | 			margin-bottom: 1.5em;
120 | 		}
121 | 	}
122 | 
123 | 	input {
124 | 		appearance: none;
125 | 		background: none;
126 | 		background: transparent;
127 | 		border: none;
128 | 		border-bottom: 4px solid $black;
129 | 		border-radius: 0;
130 | 		color: $black;
131 | 		font-family: $font__heading;
132 | 		font-size: 18px;
133 | 		font-weight: 600;
134 | 		height: 50px;
135 | 		margin-bottom: 25px;
136 | 		padding-bottom: 0;
137 | 		padding-left: 0;
138 | 
139 | 		&:focus {
140 | 			box-shadow: none;
141 | 			border-color: $gray;
142 | 		}
143 | 
144 | 		@include input-placeholder {
145 | 			color: rgba(0, 0, 0, .8);
146 | 		}
147 | 	}
148 | 
149 | 	input[type=submit] {
150 | 		border: 0;
151 | 		background: $black;
152 | 		margin-bottom: 0;
153 | 		border-radius: 4px;
154 | 		color: #fff;
155 | 		height: auto;
156 | 		padding: .5em 5em;
157 | 		width: 100%;
158 | 		text-align: center;
159 | 		transition: 200ms background cubic-bezier(0.3, -0.55, 0.1, 1.1);
160 | 
161 | 		&:hover {
162 | 			background: $gray;
163 | 		}
164 | 	}
165 | 
166 | 	.mc4wp-alert {
167 | 		@include font-size(13px);
168 | 		font-family: $font__heading;
169 | 		font-style: inherit;
170 | 		color: $gray;
171 | 		position: absolute;
172 | 		margin: 2px auto;
173 | 		width: 100%;
174 | 		left: 0;
175 | 		text-align: center;
176 | 
177 | 		@media only screen and (min-width: 700px) {
178 | 			@include font-size(15px);
179 | 			margin: 10px auto;
180 | 		}
181 | 	}
182 | }
183 | 
184 | 


--------------------------------------------------------------------------------
/scss/_variables.scss:
--------------------------------------------------------------------------------
  1 | $font__body: "Lora", serif;
  2 | $font__heading: "Heebo", serif;
  3 | $font__sans: "Heebo", sans-serif;
  4 | $font__figcaption: $font__heading;
  5 | 
  6 | $white: #fff;
  7 | $black: #191521;
  8 | $gray: #565d67;
  9 | $dark-gray: #6d6c6c;
 10 | $twitter: #1a8bf0;
 11 | $facebook: #3b5998;
 12 | $linkedin: #0084bf;
 13 | 
 14 | $content_width: 760px;
 15 | $content_max-width: 720px;
 16 | $content_mobile-width: 90%;
 17 | 
 18 | $color__text-heading: $black;
 19 | $color__text-main: $black;
 20 | 
 21 | $font__size_base: 19px;
 22 | $font__size-ratio: 1.1;
 23 | 
 24 | $font__size-xxs: 1em / (1.5 * $font__size-ratio);
 25 | $font__size-xs: 1em / (1.2 * $font__size-ratio);
 26 | $font__size-sm: 1em / (1 * $font__size-ratio);
 27 | $font__size-md: 1em * (1.25 * $font__size-ratio);
 28 | $font__size-mdlrg: 1em * (1.5 * $font__size-ratio);
 29 | $font__size-lg: 1em * (1.75 * $font__size-ratio);
 30 | $font__size-xl: 1em * (2 * $font__size-ratio);
 31 | $font__size-xxl: 1em * (2.5 * $font__size-ratio);
 32 | $font__size-xxxl: 1em * (5 * $font__size-ratio);
 33 | 
 34 | $font__line-height-body: 1.8;
 35 | $font__line-height-heading: 1.25;
 36 | $font__line-height-pre: 1.6;
 37 | 
 38 | $font__weight-body: 400;
 39 | $font__weight-heading: 800;
 40 | 
 41 | // Content variables
 42 | $content__width: 740px;
 43 | $content__width--wide: 1100px;
 44 | $content__padding: 20px;
 45 | $content__width--less-padding: $content__width - ($content__padding * 2);
 46 | $content__width--wide--less-padding: $content__width--wide - ($content__padding * 2);
 47 | $content__media-query: $content__width - 1;
 48 | $content__media-query--wide: $content__width--wide - 1;
 49 | $content__align--leftright-margin: $content__width / 2 - $content__padding;
 50 | $content__align--mobile-media-query--min: 499px;
 51 | $content__align--mobile-media-query--max: $content__align--mobile-media-query--min - 1;
 52 | $content__align--width: 300px;
 53 | $content__spacer: 30px;
 54 | $content__spacer--mobile: 20px;
 55 | 
 56 | $block__quote--border-width: 4px;
 57 | $block__quote--cite-font: $font__figcaption;
 58 | 
 59 | // Editor variables
 60 | $font__size-editor--small: 17px;
 61 | $font__size-editor--medium: 21px;
 62 | $font__size-editor--large: 24px;
 63 | $font__size-editor--huge: 30px;
 64 | 
 65 | $accent: #218799;
 66 | $background: rgba(0, 0, 0, 0.04);
 67 | $green: #49e2be;
 68 | $red: #f00;
 69 | 
 70 | $color--error: #e85c41;
 71 | $color--success: #2cb994;
 72 | 
 73 | $color--background-body: #fff;
 74 | $color--background-screen: #f1f1f1;
 75 | $color--background-hr: #ccc;
 76 | $color--background-button: #e6e6e6;
 77 | $color--background-pre: #f1f1f1;
 78 | $color--background-ins: #fff9c0;
 79 | $color--background-input-focus: #fff;
 80 | 
 81 | $color--has-background-color-fallback: #f5f5f5;
 82 | 
 83 | $color--background-lightbox: #fff;
 84 | $color--background-lightbox-dark: #1c1c21;
 85 | $color--background-lightbox-button: $black;
 86 | $color--background-lightbox-button-dark: #dfdfe2;
 87 | 
 88 | $color--text-screen: #21759b;
 89 | $color--text-input: $black;
 90 | $color--text-input-focus: $black;
 91 | $color--text-input-placeholder: #bbb;
 92 | $color--text-footer-a: #bbb;
 93 | $color--link: #4169e1;
 94 | $color--link-visited: #800080;
 95 | $color--link-hover: #333;
 96 | 
 97 | $color--border-button: #ccc #ccc #888;
 98 | $color--border-button-hover: #ccc #888 #aaa;
 99 | $color--border-button-focus: #aaa #888 #888;
100 | $color--border-input: #e6e6e6;
101 | $color--border-input-hover: #d6d6d6;
102 | $color--border-input-focus: #c6c6c6;
103 | $color--border-abbr: #e8e8e8;
104 | $color--border-table: #ccc;
105 | $color--border-footer: rgba(0, 0, 0, 0.075);
106 | 
107 | $color--outline-button: #959595;
108 | 


--------------------------------------------------------------------------------
/scss/blocks/_blocks.scss:
--------------------------------------------------------------------------------
  1 | // Editor customizations.
  2 | @import "color-palette";
  3 | @import "font-sizes";
  4 | 
  5 | // Import blocks.
  6 | @import "archives-categories";
  7 | @import "audio-video";
  8 | @import "button";
  9 | @import "captions";
 10 | @import "code";
 11 | @import "columns";
 12 | @import "cover";
 13 | @import "embed";
 14 | @import "file";
 15 | @import "gallery";
 16 | @import "image";
 17 | @import "latest-comments";
 18 | @import "latest-posts";
 19 | @import "list";
 20 | @import "misc";
 21 | @import "more";
 22 | @import "paragraph";
 23 | @import "preformatted";
 24 | @import "pullquote";
 25 | @import "quote";
 26 | @import "separator";
 27 | @import "table";
 28 | @import "verse";
 29 | 
 30 | // Third party blocks.
 31 | @import "coblocks";
 32 | @import "blockgallery";
 33 | 
 34 | .entry-media,
 35 | .entry-header,
 36 | .entry-footer {
 37 | 	max-width: $content__width;
 38 | 	padding-left: $content__padding;
 39 | 	padding-right: $content__padding;
 40 | 	margin-left: auto;
 41 | 	margin-right: auto;
 42 | }
 43 | 
 44 | .entry-media {
 45 | 	max-width: $content__width--wide;
 46 | }
 47 | 
 48 | .entry-content > *,
 49 | .entry-summary > * {
 50 | 	margin: $content__spacer--mobile auto;
 51 | 	max-width: $content__width;
 52 | 	padding-left: $content__padding;
 53 | 	padding-right: $content__padding;
 54 | 
 55 | 	@media screen and (min-width: $content__media-query) {
 56 | 		margin-bottom: $content__spacer;
 57 | 		margin-top: $content__spacer;
 58 | 	}
 59 | 
 60 | 	&:not(p):not(ul):not(ol) {
 61 | 		margin: $content__spacer--mobile + 12px auto;
 62 | 
 63 | 		@media screen and (min-width: $content__media-query) {
 64 | 			margin-bottom: $content__spacer + 12px;
 65 | 			margin-top: $content__spacer + 12px;
 66 | 		}
 67 | 	}
 68 | 
 69 | 	&:first-child {
 70 | 		margin-top: 0 !important;
 71 | 	}
 72 | 
 73 | 	&:last-child {
 74 | 		margin-bottom: 0 !important;
 75 | 	}
 76 | 
 77 | 	> *:first-child {
 78 | 		margin-top: 0;
 79 | 	}
 80 | 
 81 | 	> *:last-child {
 82 | 		margin-bottom: 0;
 83 | 	}
 84 | 
 85 | 	&.alignwide {
 86 | 		max-width: $content__width--wide;
 87 | 
 88 | 		@media screen and (min-width: $content__media-query) {
 89 | 			margin-bottom: $content__spacer + 20px;
 90 | 			margin-top: $content__spacer + 20px;
 91 | 		}
 92 | 	}
 93 | 
 94 | 	&.alignfull {
 95 | 		margin: $content__spacer + 10px 0;
 96 | 		max-width: 100% !important;
 97 | 		padding-left: 0;
 98 | 		padding-right: 0;
 99 | 
100 | 		@media screen and (min-width: $content__media-query) {
101 | 			margin-bottom: $content__spacer + 30px;
102 | 			margin-top: $content__spacer + 30px;
103 | 		}
104 | 	}
105 | 
106 | 	&.alignleft {
107 | 		margin-right: $content__padding;
108 | 		max-width: 100%;
109 | 
110 | 		@media screen and (min-width: $content__align--mobile-media-query--min) {
111 | 			float: left;
112 | 			margin-right: 40px;
113 | 			margin-top: 0;
114 | 			max-width: $content__align--width !important;
115 | 		}
116 | 
117 | 		@media screen and (min-width: $content__media-query) {
118 | 			margin-left: calc(50% - #{$content__align--leftright-margin});
119 | 		}
120 | 	}
121 | 
122 | 	&.alignright {
123 | 		margin-left: $content__padding;
124 | 
125 | 		@media screen and (min-width: $content__align--mobile-media-query--min) {
126 | 			float: right;
127 | 			margin-left: 40px;
128 | 			margin-top: 0;
129 | 			max-width: $content__align--width !important;
130 | 		}
131 | 
132 | 		@media screen and (min-width: $content__media-query) {
133 | 			margin-right: calc(50% - #{$content__align--leftright-margin});
134 | 		}
135 | 	}
136 | 
137 | 	.alignleft,
138 | 	.alignright {
139 | 		> figcaption {
140 | 			@media screen and (max-width: $content__align--mobile-media-query--max) {
141 | 				display: block !important;
142 | 			}
143 | 		}
144 | 	}
145 | }
146 | 


--------------------------------------------------------------------------------
/scss/elements/_buttons.scss:
--------------------------------------------------------------------------------
  1 | .submit,
  2 | .button {
  3 | 	@include font-size(16px);
  4 | 	appearance: none;
  5 | 	background: #1c1c1c;
  6 | 	border: none;
  7 | 	box-shadow: none !important;
  8 | 	color: $white;
  9 | 	cursor: pointer;
 10 | 	display: inline-block;
 11 | 	border-radius: 4px;
 12 | 	font-family: $font__sans;
 13 | 	font-weight: 500;
 14 | 	padding: 0.53em 1.3em 0.53em;
 15 | 	position: relative;
 16 | 	text-decoration: none;
 17 | 	transform: translate3d(0, 0, 0);
 18 | 	transition: background 200ms cubic-bezier(0.645, 0.045, 0.355, 1), border 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
 19 | 
 20 | 	&:hover {
 21 | 		background: $gray;
 22 | 		color: $white;
 23 | 		outline: none;
 24 | 	}
 25 | 
 26 | 	&:focus {
 27 | 		outline: 1px dotted $color--outline-button;
 28 | 		outline-offset: -4px;
 29 | 	}
 30 | 
 31 | 	&--sml {
 32 | 		@include font-size(15px);
 33 | 		padding: .24em 1.3em .2em;
 34 | 	}
 35 | 
 36 | 	&--lrg {
 37 | 		@include font-size(18px);
 38 | 		padding-top: .44em;
 39 | 	}
 40 | 
 41 | 	&--ghost {
 42 | 		background: transparent !important;
 43 | 		border: 1px solid rgba(0, 0, 0, 0.2);
 44 | 		color: $black;
 45 | 
 46 | 		&:hover {
 47 | 			border-color: rgba(0, 0, 0, 0.3);
 48 | 			color: $black;
 49 | 		}
 50 | 	}
 51 | 
 52 | 	&--gray {
 53 | 		background: $background;
 54 | 		color: $gray;
 55 | 
 56 | 		&:hover {
 57 | 			color: $gray;
 58 | 		}
 59 | 	}
 60 | 
 61 | 	&--round {
 62 | 		border-radius: 50px;
 63 | 	}
 64 | 
 65 | 	&--trans {
 66 | 		@include font-size(17px);
 67 | 		background: transparent !important;
 68 | 		border: 0;
 69 | 		color: $black;
 70 | 
 71 | 		&:hover {
 72 | 			background: $background;
 73 | 			color: $black;
 74 | 			border: 0;
 75 | 			box-shadow: none
 76 | 		}
 77 | 	}
 78 | 
 79 | 	&--attention {
 80 | 		animation: buttonAttention 800ms infinite alternate;
 81 | 	}
 82 | 
 83 | 	&--attention--fb {
 84 | 		animation: buttonAttentionFB 800ms infinite alternate;
 85 | 	}
 86 | 
 87 | 	&--attention--linkedin {
 88 | 		animation: buttonAttentionLinkedIn 800ms infinite alternate;
 89 | 	}
 90 | 
 91 | 	&--chromeless {
 92 | 		border: 0;
 93 | 		box-shadow: 0;
 94 | 		display: inline-block;
 95 | 		background: none !important;
 96 | 		line-height: 1 !important;
 97 | 	}
 98 | 
 99 | 	&--fullwidth {
100 | 		width: 100%;
101 | 	}
102 | 
103 | 	&--mobile-fullwidth {
104 | 		@media only screen and (max-width: 599px) {
105 | 			width: 100%;
106 | 		}
107 | 	}
108 | }
109 | 
110 | input[type=submit],
111 | input[type=button] {
112 | 	@include font-size(16px);
113 | 	appearance: none;
114 | 	background: #1c1c1c;
115 | 	border: none;
116 | 	box-shadow: 0 0 0;
117 | 	color: $white;
118 | 	cursor: pointer;
119 | 	display: inline-block;
120 | 	border-radius: 4px;
121 | 	font-family: $font__sans;
122 | 	font-weight: 500;
123 | 	padding: .53em 1.3em .53em;
124 | 	position: relative;
125 | 	text-decoration: none;
126 | 	transform: translate3d(0, 0, 0);
127 | 	transition: background 200ms cubic-bezier(0.645, 0.045, 0.355, 1), border 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
128 | 
129 | 	&:hover {
130 | 		background: $gray;
131 | 		color: $white;
132 | 		outline: none;
133 | 	}
134 | 
135 | 	&:focus {
136 | 		outline: 1px dotted $color--outline-button;
137 | 		outline-offset: -4px;
138 | 	}
139 | }
140 | 
141 | .animation--pulse:active {
142 | 	animation: pulse 100ms;
143 | 	animation-fill-mode: none;
144 | }
145 | 
146 | @keyframes pulse {
147 | 	0% {
148 | 		transform: scale(1);
149 | 	}
150 | 	15% {
151 | 		transform: scale(.85);
152 | 	}
153 | 	100% {
154 | 		transform: scale(1);
155 | 	}
156 | }
157 | 
158 | @keyframes buttonAttention {
159 | 	0% {
160 | 		background: rgba($twitter, 0.02)
161 | 	}
162 | 	100% {
163 | 		background: rgba($twitter, 0.08);
164 | 	}
165 | }
166 | 
167 | @keyframes buttonAttentionFB {
168 | 	0% {
169 | 		background: rgba($facebook, 0.02);
170 | 	}
171 | 	100% {
172 | 		background: rgba($facebook, 0.08);
173 | 	}
174 | }
175 | 
176 | @keyframes buttonAttentionLinkedIn {
177 | 	0% {
178 | 		background: rgba($linkedin, 0.02);
179 | 	}
180 | 	100% {
181 | 		background: rgba($linkedin, 0.08);
182 | 	}
183 | }


--------------------------------------------------------------------------------
/scss/blocks/_coblocks.scss:
--------------------------------------------------------------------------------
  1 | .entry-content {
  2 | 	.wp-block-coblocks-alert {
  3 | 		@include blockMobileDisplay();
  4 | 		padding-bottom: 0.8em;
  5 | 		padding-top: 0.7em;
  6 | 
  7 | 		&:not(.has-custom-size) &__title {
  8 | 			font-size: 19px;
  9 | 		}
 10 | 
 11 | 		&:not(.has-custom-size) &__text {
 12 | 			font-size: 18px;
 13 | 		}
 14 | 
 15 | 		&__text,
 16 | 		&__title {
 17 | 			margin-bottom: 0;
 18 | 			margin-top: 0;
 19 | 		}
 20 | 	}
 21 | 
 22 | 	.wp-block-coblocks-click-to-tweet {
 23 | 		border: none !important;
 24 | 		padding-left: 0 !important;
 25 | 
 26 | 		&__text {
 27 | 			line-height: 1.4;
 28 | 			font-style: italic;
 29 | 			padding-left: 30px;
 30 | 
 31 | 			@media screen and (min-width: $content__media-query) {
 32 | 				padding-left: 60px;
 33 | 			}
 34 | 
 35 | 			&:not([class*="font-size"]) {
 36 | 				font-size: $font__size-md;
 37 | 
 38 | 				@media screen and (min-width: 600px) {
 39 | 					font-size: $font__size-mdlrg;
 40 | 				}
 41 | 			}
 42 | 		}
 43 | 
 44 | 		&__text::before {
 45 | 			width: 20px;
 46 | 			height: 20px;
 47 | 			top: 7px;
 48 | 
 49 | 			@media screen and (min-width: $content__media-query) {
 50 | 				width: 30px;
 51 | 				height: 30px;
 52 | 				top: 8px;
 53 | 			}
 54 | 		}
 55 | 
 56 | 		&__twitter-btn {
 57 | 			border-radius: 4px;
 58 | 			font-family: $font__heading;
 59 | 			font-size: 17px;
 60 | 			font-weight: 500;
 61 | 			height: 34px;
 62 | 			line-height: 35px;
 63 | 			margin-bottom: 5px !important;
 64 | 			margin-top: 1em;
 65 | 			padding: 0 0.75em;
 66 | 			margin-left: 30px;
 67 | 
 68 | 			@media screen and (min-width: $content__media-query) {
 69 | 				margin-bottom: 10px !important;
 70 | 				margin-left: 60px;
 71 | 			}
 72 | 
 73 | 			@media (max-width: 700px) {
 74 | 				font-size: $font__size-sm;
 75 | 			}
 76 | 
 77 | 			&::before {
 78 | 				top: 3px;
 79 | 				margin-right: 7px;
 80 | 			}
 81 | 		}
 82 | 	}
 83 | 
 84 | 	.wp-block-coblocks-author {
 85 | 		@include blockMobileDisplay();
 86 | 		border-radius: 0;
 87 | 		padding-left: 30px;
 88 | 		padding-right: 30px;
 89 | 
 90 | 		&__heading {
 91 | 			color: $gray;
 92 | 			font-size: 18px;
 93 | 			font-weight: 500;
 94 | 			margin-bottom: 0;
 95 | 			font-family: $font__heading;
 96 | 		}
 97 | 
 98 | 		&__biography {
 99 | 			font-size: $font__size-sm;
100 | 			margin-bottom: 0.8em;
101 | 			margin-top: 0.2em;
102 | 		}
103 | 
104 | 		&__name {
105 | 			font-size: $font__size-md;
106 | 			font-family: $font__heading;
107 | 			font-weight: $font__weight-heading;
108 | 			margin: 0.15em 0 0;
109 | 			padding: 0;
110 | 		}
111 | 
112 | 		.wp-block-button {
113 | 			margin-top: 0;
114 | 		}
115 | 	}
116 | 
117 | 	.wp-block-coblocks-dynamic-separator {
118 | 		@include blockMobileDisplay();
119 | 		max-width: $content__width - ( $content__padding * 4 );
120 | 
121 | 		@media screen and (max-width: $content__width) {
122 | 			padding-left: 0;
123 | 			padding-right: 0;
124 | 			width: calc( 100% - #{$content__padding * 2} );
125 | 		}
126 | 
127 | 		&.is-style-dots::before {
128 | 			font-size: 36px;
129 | 			font-weight: 800;
130 | 			letter-spacing: 0.55em;
131 | 			margin-left: 19px;
132 |     			top: calc(50% - 28px);
133 | 		}
134 | 	}
135 | 
136 | 	.wp-block-coblocks-pricing-table-item {
137 | 
138 | 		&__title {
139 | 			font-size: $font__size-sm;
140 | 			font-family: $font__heading;
141 | 			font-weight: $font__weight-heading;
142 | 			margin-bottom: 1.5em !important;
143 | 			padding-top: 0;
144 | 		}
145 | 
146 | 		&__currency {
147 | 			font-size: $font__size-sm;
148 | 		}
149 | 
150 | 		&__price-wrapper {
151 | 			margin-bottom: 0.7em;
152 | 		}
153 | 
154 | 		&__amount {
155 | 			font-family: $font__heading;
156 | 			font-weight: $font__weight-heading;
157 | 			letter-spacing: -2px;
158 | 		}
159 | 
160 | 		&__features {
161 | 			font-size: $font__size-sm;
162 | 			margin-bottom: 1.7em;
163 | 		}
164 | 	}
165 | 
166 | 	.wp-block-coblocks-social {
167 | 
168 | 		&:not(.has-button-size-sml):not(.has-button-size-lrg) .wp-block-coblocks-social__button {
169 | 			font-size: 15px;
170 | 			padding: 11px 18px 10px;
171 | 		}
172 | 
173 | 		&.has-button-size-sml .wp-block-coblocks-social__button {
174 | 			font-size: 14px;
175 | 			padding: 10px 12px 8px;
176 | 
177 | 			.wp-block-coblocks-social__icon {
178 | 				position: relative;
179 | 				top: -1px;
180 | 			}
181 | 		}
182 | 	}
183 | }
184 | 


--------------------------------------------------------------------------------
/scss/navigation/_dropdown.scss:
--------------------------------------------------------------------------------
  1 | .dropdown-toggle {
  2 | 	background-color: transparent;
  3 | 	border: 0;
  4 | 	box-shadow: none;
  5 | 	display: block;
  6 | 	font-size: 16px !important;
  7 | 	left: -.3em;
  8 | 	margin: 0 auto;
  9 | 	padding: 5px 10px;
 10 | 	position: absolute;
 11 | 	text-shadow: none;
 12 | 	top: 0;
 13 | 	left: initial;
 14 | 	padding: 0;
 15 | 	right: .1em;
 16 | 	line-height: 1.1 !important;
 17 | }
 18 | 
 19 | .dropdown-toggle:hover,
 20 | .dropdown-toggle:focus {
 21 | 	background: transparent;
 22 | }
 23 | 
 24 | .dropdown-toggle:focus {
 25 | 	outline: thin dotted;
 26 | }
 27 | 
 28 | .dropdown-toggle.toggled-on .svg-icon {
 29 | 	transform: rotate(-180deg);
 30 | }
 31 | 
 32 | .main-navigation .dropdown-toggle .svg-icon {
 33 | 	display: none;
 34 | 
 35 | 	@media only screen and (min-width: 600px) {
 36 | 		display: initial;
 37 | 		fill: $gray;
 38 | 		height: 7px;
 39 | 		position: relative;
 40 | 		width: 7px;
 41 | 		transition: transform 200ms 300ms cubic-bezier(.694, 0, .335, 1), opacity 100ms cubic-bezier(0.645, 0.045, 0.355, 1);
 42 | 		transform-origin: 50% 50%;
 43 | 		top: 6px;
 44 | 	}
 45 | 
 46 | 	@media only screen and (min-width: 600px) and (max-width: 700px) {
 47 | 		top: 4px;
 48 | 	}
 49 | }
 50 | 
 51 | /* The Dropdown container. */
 52 | 
 53 | @media only screen and (min-width: 600px) {
 54 | 
 55 | 	.main-navigation ul ul {
 56 | 		background: $white;
 57 | 		margin-top: -10px;
 58 | 		margin: 0;
 59 | 		opacity: 0;
 60 | 		padding: 8px 0;
 61 | 		position: absolute;
 62 | 		right: -8px;
 63 | 		top: 100%;
 64 | 		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .05);
 65 | 		transition: transform 200ms linear 300ms, opacity 200ms ease-in-out 300ms, visibility 200ms linear 300ms;
 66 | 		visibility: hidden;
 67 | 		z-index: 99999;
 68 | 		min-width: 175px;
 69 | 
 70 | 		@media only screen and (min-width: 600px) {
 71 | 			right: -100%;
 72 | 			left: auto;
 73 | 			padding: 12px 0;
 74 | 			margin-top: 10px;
 75 | 			border-radius: 4px;
 76 | 			border: 1px solid rgba(0, 0, 0, .15);
 77 | 			transform: translate3d(0, 10px, 0);
 78 | 		}
 79 | 
 80 | 		li {
 81 | 			display: block;
 82 | 
 83 | 			@media only screen and (min-width: 600px) {
 84 | 				min-width: 175px;
 85 | 			}
 86 | 
 87 | 			a {
 88 | 				display: block;
 89 | 				width: 100%;
 90 | 
 91 | 				@media only screen and (min-width: 600px) {
 92 | 					border-radius: 0 !important;
 93 | 					padding: 4px 18px !important;
 94 | 				}
 95 | 			}
 96 | 		}
 97 | 	}
 98 | 
 99 | 	.main-navigation ul li:hover > ul,
100 | 	.main-navigation ul li.focus > ul {
101 | 		transition: transform 200ms linear, opacity 200ms ease-in-out, visibility 0ms 0ms linear;
102 | 		visibility: visible;
103 | 		opacity: 1;
104 | 		transform: translate3d(0, 0, 0);
105 | 	}
106 | 
107 | 	.main-navigation ul {
108 | 
109 | 		/* The dropdown's arrow pointer nib, located at the top. */
110 | 		li.menu-item-has-children,
111 | 		li.page_item_has_children {
112 | 			margin-right: 7px;
113 | 
114 | 			a {
115 | 
116 | 				@media only screen and (min-width: 600px) {
117 | 					padding-right: 13px;
118 | 				}
119 | 			}
120 | 
121 | 			@media only screen and (min-width: 600px) {
122 | 				&::after,
123 | 				&::before {
124 | 					border-style: solid;
125 | 					border-width: 0 6px 6px;
126 | 					bottom: -11px;
127 | 					content: "";
128 | 					height: 0;
129 | 					opacity: 0;
130 | 					position: absolute;
131 | 					right: 1em;
132 | 					transform: translate3d(0, 10px, 0);
133 | 					transition: transform 200ms linear 300ms, opacity 200ms ease-in-out 300ms, visibility 200ms linear 300ms;
134 | 					visibility: hidden;
135 | 					width: 0;
136 | 					z-index: 100000;
137 | 					margin-top: 10px;
138 | 				}
139 | 
140 | 				&::before {
141 | 					border-color: transparent transparent rgba(0, 0, 0, .2);
142 | 					bottom: -10px;
143 | 				}
144 | 
145 | 				&::after {
146 | 					border-color: transparent transparent $white;
147 | 				}
148 | 
149 | 			}
150 | 
151 | 			&:hover,
152 | 			&.focus {
153 | 
154 | 				& > a {
155 | 					opacity: 0.7;
156 | 				}
157 | 
158 | 				.svg-icon {
159 | 					opacity: 0.7;
160 | 					transform: rotate(-180deg) translate3d(0, 1px, 0);
161 | 					transition: transform 200ms cubic-bezier(.694, 0, .335, 1);
162 | 				}
163 | 
164 | 				&::after,
165 | 				&::before {
166 | 					opacity: 1;
167 | 					transform: translate3d(0, 0, 0);
168 | 					transition: transform 200ms linear, opacity 200ms ease-in-out, visibility 0ms 0ms linear;
169 | 					visibility: visible;
170 | 				}
171 | 			}
172 | 		}
173 | 	}
174 | }
175 | 


--------------------------------------------------------------------------------
/scss/_base.scss:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--letter-spacing: 1;
  3 | 	--caps-letter-spacing: .2em;
  4 | 	--bold-font-weight: 800;
  5 | }
  6 | 
  7 | // Typography.
  8 | .body-font {
  9 | 	font-family: $font__body;
 10 | }
 11 | 
 12 | .sans-serif-font {
 13 | 	font-family: $font__sans;
 14 | }
 15 | 
 16 | .small {
 17 | 	@include font-size(16px);
 18 | 
 19 | 	@media (min-width: 600px) {
 20 | 		@include font-size(17px);
 21 | 	}
 22 | }
 23 | 
 24 | .extra-small {
 25 | 	@include font-size(13px);
 26 | 
 27 | 	@media (min-width: 600px) {
 28 | 		@include font-size(15px);
 29 | 	}
 30 | }
 31 | 
 32 | .smooth {
 33 | 	@include font-smoothing;
 34 | }
 35 | 
 36 | .regular {
 37 | 	font-weight: 400;
 38 | }
 39 | 
 40 | .medium {
 41 | 	font-weight: 500;
 42 | }
 43 | 
 44 | .thin {
 45 | 	font-weight: 300;
 46 | }
 47 | 
 48 | .medium-bold {
 49 | 	font-weight: 600;
 50 | }
 51 | 
 52 | .bold {
 53 | 	font-weight: 800 !important;
 54 | }
 55 | 
 56 | .normal {
 57 | 	font-style: initial !important;
 58 | }
 59 | 
 60 | .italic {
 61 | 	font-style: italic;
 62 | }
 63 | 
 64 | .caps {
 65 | 	text-transform: uppercase;
 66 | 	letter-spacing: var(--caps-letter-spacing);
 67 | }
 68 | 
 69 | .left-align {
 70 | 	text-align: left;
 71 | }
 72 | 
 73 | .center-align {
 74 | 	text-align: center;
 75 | }
 76 | 
 77 | .right-align  {
 78 | 	text-align: right;
 79 | }
 80 | 
 81 | .justify {
 82 | 	text-align: justify;
 83 | }
 84 | 
 85 | .nowrap {
 86 | 	white-space: nowrap;
 87 | }
 88 | 
 89 | .break-word {
 90 | 	word-wrap: break-word;
 91 | }
 92 | 
 93 | // Lists.
 94 | 
 95 | .list-reset {
 96 | 	list-style: none;
 97 | 	padding-left: 0;
 98 | 	margin: 0;
 99 | }
100 | 
101 | // Colors.
102 | .gray {
103 | 	color: $gray;
104 | }
105 | 
106 | .dark-gray {
107 | 	color: $dark-gray;
108 | }
109 | 
110 | .white {
111 | 	color: $white;
112 | }
113 | 
114 | .no-shadow {
115 | 	box-shadow: none !important;
116 | }
117 | 
118 | // Position.
119 | .hide,
120 | .hidden  {
121 | 	@include hide;
122 | }
123 | 
124 | .bottom-spacer {
125 | 	@include bottom-spacer;
126 | }
127 | 
128 | .top-spacer {
129 | 	@include top-spacer;
130 | }
131 | 
132 | .margin-left-auto {
133 | 	margin-left: auto;
134 | }
135 | 
136 | .margin-auto {
137 | 	margin-left: auto;
138 | 	margin-right: auto;
139 | }
140 | 
141 | .container {
142 | 	@include structure;
143 | 
144 | 	&.max-width {
145 | 		padding-left: 20px;
146 | 		padding-right: 20px;
147 | 		width: 1100px;
148 | 	}
149 | }
150 | 
151 | .max-width {
152 | 	max-width: 100%;
153 | }
154 | 
155 | 
156 | .display-block {
157 | 	display: block;
158 | }
159 | 
160 | .display-inline-block {
161 | 	display: inline-block;
162 | }
163 | 
164 | .display-inline {
165 | 	display: inline;
166 | }
167 | 
168 | .display-none {
169 | 	display: none;
170 | }
171 | 
172 | .overflow-hidden { overflow: hidden }
173 | 
174 | .flex { display: flex; }
175 | 
176 | .left  { float: left }
177 | .right { float: right }
178 | 
179 | .relative { position: relative }
180 | .absolute { position: absolute }
181 | .fixed    { position: fixed }
182 | 
183 | .top-0    { top: 0 }
184 | .right-0  { right: 0 }
185 | .bottom-0 { bottom: 0 }
186 | .left-0   { left: 0 }
187 | 
188 | 
189 | .container--sml {
190 | 	max-width: 380px;
191 | 	margin: 0 auto;
192 | }
193 | 
194 | 
195 | 
196 | 
197 | 
198 | 
199 | @custom-media --breakpoint-sm (min-width: 40em);
200 | @custom-media --breakpoint-md (min-width: 52em);
201 | @custom-media --breakpoint-lg (min-width: 64em);
202 | 
203 | .flex {
204 | 	@media only screen and (min-width: 600px) {
205 | 		display: flex;
206 | 	}
207 | }
208 | 
209 | @media (--breakpoint-sm) {
210 |   .sm-flex { display: flex }
211 | }
212 | 
213 | @media (--breakpoint-md) {
214 |   .md-flex { display: flex }
215 | }
216 | 
217 | @media (--breakpoint-lg) {
218 |   .lg-flex { display: flex }
219 | }
220 | 
221 | .flex-column  { flex-direction: column }
222 | .flex-wrap    { flex-wrap: wrap }
223 | 
224 | .items-start    { align-items: flex-start }
225 | .items-end      { align-items: flex-end }
226 | .items-center   { align-items: center }
227 | .items-baseline { align-items: baseline }
228 | .items-stretch  { align-items: stretch }
229 | 
230 | .self-start    { align-self: flex-start }
231 | .self-end      { align-self: flex-end }
232 | .self-center   { align-self: center }
233 | .self-baseline { align-self: baseline }
234 | .self-stretch  { align-self: stretch }
235 | 
236 | .justify-start   { justify-content: flex-start }
237 | .justify-end     { justify-content: flex-end }
238 | .justify-center  { justify-content: center }
239 | .justify-between { justify-content: space-between }
240 | .justify-around  { justify-content: space-around }
241 | 
242 | .content-start   { align-content: flex-start }
243 | .content-end     { align-content: flex-end }
244 | .content-center  { align-content: center }
245 | .content-between { align-content: space-between }
246 | .content-around  { align-content: space-around }
247 | .content-stretch { align-content: stretch }
248 | 
249 | 
250 | 


--------------------------------------------------------------------------------
/assets/js/navigation.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Theme navigation file.
  3 |  *
  4 |  * Contains handlers for the site's navigation.
  5 |  */
  6 | 
  7 | (function( $ ) {
  8 | 	var masthead, menuToggle, siteNavContain, siteNavigation;
  9 | 
 10 | 	function initMainNavigation( container ) {
 11 | 
 12 | 		// Add dropdown toggle that displays child menu items.
 13 | 		var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false } )
 14 | 			.append( coblocksScreenReaderText.icon )
 15 | 			.append( $( '<span />', { 'class': 'screen-reader-text', text: coblocksScreenReaderText.expand } ) );
 16 | 
 17 | 		container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
 18 | 
 19 | 		// Set the active submenu dropdown toggle button initial state.
 20 | 		container.find( '.current-menu-ancestor > button' )
 21 | 			.addClass( 'toggled-on' )
 22 | 			.attr( 'aria-expanded', 'true' )
 23 | 			.find( '.screen-reader-text' )
 24 | 			.text( coblocksScreenReaderText.collapse );
 25 | 
 26 | 		// Set the active submenu initial state.
 27 | 		container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
 28 | 
 29 | 		container.find( '.dropdown-toggle' ).click( function( e ) {
 30 | 			var _this = $( this ),
 31 | 				screenReaderSpan = _this.find( '.screen-reader-text' );
 32 | 
 33 | 			e.preventDefault();
 34 | 			_this.toggleClass( 'toggled-on' );
 35 | 			_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
 36 | 
 37 | 			_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
 38 | 
 39 | 			screenReaderSpan.text( screenReaderSpan.text() === coblocksScreenReaderText.expand ? coblocksScreenReaderText.collapse : coblocksScreenReaderText.expand );
 40 | 		});
 41 | 	}
 42 | 
 43 | 	initMainNavigation( $( '.main-navigation' ) );
 44 | 
 45 | 	body       	= $( 'body' );
 46 | 	masthead       = $( '#masthead' );
 47 | 	menuToggle     = masthead.find( '.menu-toggle' );
 48 | 	siteNavContain = masthead.find( '.main-navigation' );
 49 | 	siteNavigation = masthead.find( '.main-navigation > div > ul' );
 50 | 	listItems      = masthead.find( '.main-navigation li' );
 51 | 	blurElements    = $( '.site-content, .site-footer' ),
 52 | 	unblur 		= ('unblur'),
 53 | 
 54 | 	// Enable menuToggle.
 55 | 	(function() {
 56 | 
 57 | 		// Return early if menuToggle is missing.
 58 | 		if ( ! menuToggle.length ) {
 59 | 			return;
 60 | 		}
 61 | 
 62 | 		// Add an initial value for the attribute.
 63 | 		menuToggle.attr( 'aria-expanded', 'false' );
 64 | 
 65 | 		menuToggle.on( 'click.coblocks', function() {
 66 | 
 67 | 			siteNavContain.toggleClass( 'nav-enabled' );
 68 | 
 69 | 			siteNavContain.toggleClass( 'toggled-on' );
 70 | 
 71 | 			body.toggleClass( 'nav-open' );
 72 | 
 73 | 			setTimeout( function() {
 74 | 				listItems.each( function( i, el ) {
 75 | 					setTimeout( function() {
 76 | 						$( el ).addClass( 'animate-in' );
 77 | 					}, i * 100);
 78 | 				});
 79 | 			}, 100);
 80 | 
 81 | 			$( this ).attr( 'aria-expanded', siteNavContain.hasClass( 'toggled-on' ) );
 82 | 
 83 | 			if ( ! body.hasClass( 'nav-open' ) ) {
 84 | 
 85 | 				blurElements.addClass( unblur );
 86 | 
 87 | 				setTimeout(function() {
 88 | 					blurElements.removeClass( unblur );
 89 | 					listItems.removeClass( 'animate-in' );
 90 | 				}, 500);
 91 | 
 92 | 				listItems.removeClass( 'animate-in' );
 93 | 			}
 94 | 
 95 | 		});
 96 | 
 97 | 	})();
 98 | 
 99 | 	// Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
100 | 	(function() {
101 | 
102 | 		if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
103 | 			return;
104 | 		}
105 | 
106 | 		// Toggle `focus` class to allow submenu access on tablets.
107 | 		function toggleFocusClassTouchScreen() {
108 | 			if ( 'none' === $( '.menu-toggle' ).css( 'display' ) ) {
109 | 
110 | 				$( document.body ).on( 'touchstart.coblocks', function( e ) {
111 | 					if ( ! $( e.target ).closest( '.main-navigation li' ).length ) {
112 | 						$( '.main-navigation li' ).removeClass( 'focus' );
113 | 					}
114 | 				});
115 | 
116 | 				siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' )
117 | 					.on( 'touchstart.coblocks', function( e ) {
118 | 						var el = $( this ).parent( 'li' );
119 | 
120 | 						if ( ! el.hasClass( 'focus' ) ) {
121 | 							e.preventDefault();
122 | 							el.toggleClass( 'focus' );
123 | 							el.siblings( '.focus' ).removeClass( 'focus' );
124 | 						}
125 | 					});
126 | 
127 | 			} else {
128 | 				siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).unbind( 'touchstart.coblocks' );
129 | 			}
130 | 		}
131 | 
132 | 		if ( 'ontouchstart' in window ) {
133 | 			$( window ).on( 'resize.coblocks', toggleFocusClassTouchScreen );
134 | 			toggleFocusClassTouchScreen();
135 | 		}
136 | 
137 | 		siteNavigation.find( 'a' ).on( 'focus.coblocks blur.coblocks', function() {
138 | 			$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
139 | 		});
140 | 	})();
141 | })( jQuery );
142 | 


--------------------------------------------------------------------------------
/inc/customizer/customizer-css.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Enqueues front-end CSS for Customizer options.
  4 |  *
  5 |  * @package CoBlocks
  6 |  */
  7 | 
  8 | /**
  9 |  * Set the Custom CSS via Customizer options.
 10 |  */
 11 | function coblocks_customizer_css() {
 12 | 
 13 | 	$background_color      = get_theme_mod( 'background_color', '#ffffff' );
 14 | 	$background_color_rgba = coblocks_hex2rgb( $background_color );
 15 | 	$background_color_rgba = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $background_color_rgba );
 16 | 
 17 | 	$site_logo_width        = get_theme_mod( 'custom_logo_max_width', coblocks_defaults( 'custom_logo_max_width' ) );
 18 | 	$site_logo_mobile_width = get_theme_mod( 'custom_logo_mobile_max_width', coblocks_defaults( 'custom_logo_mobile_max_width' ) );
 19 | 
 20 | 	$heading_color     = get_theme_mod( 'heading_color', coblocks_defaults( 'heading_color' ) );
 21 | 	$alt_heading_color = get_theme_mod( 'alt_heading_color', coblocks_defaults( 'alt_heading_color' ) );
 22 | 	$nav_color         = get_theme_mod( 'nav_color', coblocks_defaults( 'nav_color' ) );
 23 | 	$mobile_nav_color  = get_theme_mod( 'mobile_nav_color', coblocks_defaults( 'mobile_nav_color' ) );
 24 | 	$text_color        = get_theme_mod( 'text_color', coblocks_defaults( 'text_color' ) );
 25 | 	$header_icon_color = get_theme_mod( 'header_icon_color', coblocks_defaults( 'header_icon_color' ) );
 26 | 	$footer_bg_color   = get_theme_mod( 'footer_bg_color', coblocks_defaults( 'footer_bg_color' ) );
 27 | 	$footer_text_color = get_theme_mod( 'footer_text_color', coblocks_defaults( 'footer_text_color' ) );
 28 | 
 29 | 	$css =
 30 | 	'
 31 | 	body {
 32 | 		color: ' . esc_attr( $text_color ) . ';
 33 | 	}
 34 | 
 35 | 	body .custom-logo-link img.custom-logo {
 36 | 		width: ' . esc_attr( $site_logo_mobile_width ) . 'px;
 37 | 	}
 38 | 
 39 | 	@media (min-width: 600px) {
 40 | 		body .custom-logo-link img.custom-logo {
 41 | 			width: ' . esc_attr( $site_logo_width ) . 'px;
 42 | 		}
 43 | 	}
 44 | 
 45 | 	body .widget-area__wrapper {
 46 | 		background: ' . esc_attr( $footer_bg_color ) . ';
 47 | 	}
 48 | 
 49 | 	body .widget-area__wrapper,
 50 | 	body .widget-area__wrapper .h1,
 51 | 	body .widget-area__wrapper .h2,
 52 | 	body .widget-area__wrapper .h3,
 53 | 	body .widget-area__wrapper .h4,
 54 | 	body .widget-area__wrapper .h5,
 55 | 	body .widget-area__wrapper .h6 {
 56 | 		color: ' . esc_attr( $footer_text_color ) . ';
 57 | 	}
 58 | 
 59 | 	@media (max-width: 599px) {
 60 | 		.site-header {
 61 | 			background: ' . esc_attr( $background_color ) . ' !important;
 62 | 		}
 63 | 
 64 | 		.main-navigation ul:not(.sub-menu) {
 65 | 			top: calc( 30px + ' . esc_attr( $site_logo_mobile_width ) . 'px ) !important;
 66 | 			padding-top: ' . esc_attr( $site_logo_mobile_width ) . 'px !important;
 67 | 		}
 68 | 
 69 | 		.admin-bar .main-navigation ul:not(.sub-menu) {
 70 | 			top: calc( 46px + 30px + ' . esc_attr( $site_logo_mobile_width ) . 'px ) !important;
 71 | 		}
 72 | 
 73 | 		body .main-navigation ul:not(.sub-menu) a {
 74 | 			color: ' . esc_attr( $mobile_nav_color ) . ' !important;
 75 | 		}
 76 | 	}
 77 | 
 78 | 	@media (max-width: 599px) {
 79 | 		.site-header::after {
 80 | 			top: calc( 30px + ' . esc_attr( $site_logo_mobile_width ) . 'px )!important;
 81 | 			background: transparent;
 82 |    			background: -webkit-linear-gradient( #' . esc_attr( $background_color ) . ' 0%, ' . esc_attr( $background_color_rgba ) . ')!important;
 83 |    			background: linear-gradient( #' . esc_attr( $background_color ) . ' 0%, ' . esc_attr( $background_color_rgba ) . ')!important;
 84 | 		}
 85 | 
 86 | 		.admin-bar .site-header::after {
 87 | 			top: calc( 46px + 30px + ' . esc_attr( $site_logo_mobile_width ) . 'px ) !important;
 88 | 		}
 89 | 	}
 90 | 
 91 | 	.gray,
 92 | 	label,
 93 | 	.logged-in-as,
 94 | 	.wp-caption-text,
 95 | 	.page-links a span,
 96 | 	.comment-metadata a,
 97 | 	.taxonomy-description,
 98 | 	.entry-content figcaption:not(.blockgallery--caption),
 99 | 	.entry-content .blockgallery:not(.has-caption-color) figcaption,
100 | 	.comment-reply-title small,
101 | 	.no-svg .dropdown-toggle .svg-fallback.icon-down {
102 | 		color: ' . esc_attr( $alt_heading_color ) . ';
103 | 	}
104 | 
105 | 	body .search-toggle .svg-icon, body .site-header .social-navigation svg, body .search-form .search-submit .svg-icon {
106 | 		fill: ' . esc_attr( $header_icon_color ) . ';
107 | 	}
108 | 
109 | 	body .menu-toggle::after, body .menu-toggle::before {
110 | 		background-color: ' . esc_attr( $header_icon_color ) . ';
111 | 	}
112 | 
113 | 	.site-header .nav li a {
114 | 		color: ' . esc_attr( $nav_color ) . ';
115 | 	}
116 | 
117 | 	.main-navigation .dropdown-toggle .svg-icon {
118 | 		fill: ' . esc_attr( $nav_color ) . ';
119 | 	}
120 | 
121 | 	h1, h2, h3, h4, h5, h6, .h1:not(.gray), .h2:not(.gray), .h3:not(.gray), .h4:not(.gray), .h5:not(.gray), .h6:not(.gray), .home:not(.blog) .entry-content h5 {
122 | 		color: ' . esc_attr( $heading_color ) . ';
123 | 	}
124 | 
125 | 	body #course-body #course-element-title-content {
126 | 		color: ' . esc_attr( $heading_color ) . ' !important;
127 | 	}
128 | 	';
129 | 
130 | 	wp_add_inline_style( 'coblocks-style', wp_strip_all_tags( $css ) );
131 | 
132 | }
133 | add_action( 'wp_enqueue_scripts', 'coblocks_customizer_css' );
134 | 


--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
  1 | /*!
  2 | Theme Name: CoBlocks
  3 | Theme URI: @@pkg.theme_uri
  4 | Author: @@pkg.author_shop
  5 | Author URI: @@pkg.author_uri
  6 | Description: @@pkg.description
  7 | Version: @@pkg.version
  8 | License: GNU General Public License v2 or later
  9 | License URI: http://www.gnu.org/licenses/gpl-2.0.html
 10 | Text Domain: 'coblocks'
 11 | Tags: one-column, custom-colors, editor-style, custom-logo, custom-menu, featured-images, theme-options, translation-ready, blog, photography
 12 | */
 13 | 
 14 | /*--------------------------------------------------------------
 15 | TABLE OF CONTENTS:
 16 | ----------------------------------------------------------------
 17 | # Normalize
 18 | # Typography
 19 | # Elements
 20 | # Alignments
 21 | # Media
 22 | 	## Captions
 23 | 	## Galleries
 24 | # Accessibility
 25 | # Forms
 26 | # Navigation
 27 | 	## Links
 28 | 	## Menus
 29 | 	## Pagination
 30 | 	## Cart
 31 | 	## Search
 32 | 	## Mobile
 33 | 	## Social
 34 | # Layouts
 35 | 	## Main
 36 | 	## Header
 37 | 	## Footer
 38 | 	## Blogroll
 39 | 	## Search
 40 | # Content
 41 | 	## Posts and Pages
 42 | 	## Comments
 43 | # 404
 44 | # Widgets
 45 | # Infinite scroll
 46 | # Animations
 47 | # Cross Browser
 48 | */
 49 | 
 50 | // Variables
 51 | @import "variables";
 52 | 
 53 | // Mixins
 54 | @import "mixins";
 55 | 
 56 | /*--------------------------------------------------------------
 57 | # Normalize
 58 | --------------------------------------------------------------*/
 59 | @import "normalize";
 60 | 
 61 | /*--------------------------------------------------------------
 62 | # Base
 63 | --------------------------------------------------------------*/
 64 | @import "base";
 65 | 
 66 | /*--------------------------------------------------------------
 67 | # Typography
 68 | --------------------------------------------------------------*/
 69 | @import "typography/typography";
 70 | 
 71 | /*--------------------------------------------------------------
 72 | # Icons
 73 | --------------------------------------------------------------*/
 74 | @import "modules/icons";
 75 | 
 76 | /*--------------------------------------------------------------
 77 | # Elements
 78 | --------------------------------------------------------------*/
 79 | @import "elements/elements";
 80 | 
 81 | /*--------------------------------------------------------------
 82 | # Clearings
 83 | --------------------------------------------------------------*/
 84 | @import "modules/clearings";
 85 | 
 86 | /*--------------------------------------------------------------
 87 | # Media
 88 | --------------------------------------------------------------*/
 89 | @import "media/media";
 90 | 
 91 | /*--------------------------------------------------------------
 92 | # Accessibility
 93 | --------------------------------------------------------------*/
 94 | @import "modules/accessibility";
 95 | 
 96 | /*--------------------------------------------------------------
 97 | # Navigation
 98 | --------------------------------------------------------------*/
 99 | @import "navigation/navigation";
100 | 
101 | /*--------------------------------------------------------------
102 | # Layout
103 | --------------------------------------------------------------*/
104 | @import "layout/layout";
105 | 
106 | /*--------------------------------------------------------------
107 | # Blocks
108 | --------------------------------------------------------------*/
109 | @import "blocks/blocks";
110 | 
111 | /*--------------------------------------------------------------
112 | # Comments
113 | --------------------------------------------------------------*/
114 | @import "modules/comments";
115 | 
116 | /*--------------------------------------------------------------
117 | # Pagination
118 | --------------------------------------------------------------*/
119 | @import "modules/pagination";
120 | 
121 | /*--------------------------------------------------------------
122 | # Contact Form 7
123 | --------------------------------------------------------------*/
124 | @import "modules/cf7";
125 | 
126 | /*--------------------------------------------------------------
127 | # Ninja Forms
128 | --------------------------------------------------------------*/
129 | @import "modules/ninja";
130 | 
131 | /*--------------------------------------------------------------
132 | # Gravity Forms
133 | --------------------------------------------------------------*/
134 | @import "modules/gravity";
135 | 
136 | /*--------------------------------------------------------------
137 | # 404
138 | --------------------------------------------------------------*/
139 | @import "modules/error404";
140 | 
141 | /*--------------------------------------------------------------
142 | # Widgets
143 | --------------------------------------------------------------*/
144 | @import "widgets/widgets";
145 | 
146 | /*--------------------------------------------------------------
147 | # Night Mode
148 | --------------------------------------------------------------*/
149 | @import "modules/night-mode";
150 | 
151 | /*--------------------------------------------------------------
152 | # Customizer
153 | --------------------------------------------------------------*/
154 | @import "modules/customizer";
155 | 
156 | /*--------------------------------------------------------------
157 | # Print
158 | --------------------------------------------------------------*/
159 | @import "modules/print";
160 | 


--------------------------------------------------------------------------------
/scss/layout/_posts.scss:
--------------------------------------------------------------------------------
  1 | body:not(.single) article.post,
  2 | body:not(.single) article.page {
  3 | 	margin-bottom: 4em;
  4 | 
  5 | 	&:last-of-type {
  6 | 		margin-bottom: 2em;
  7 | 	}
  8 | }
  9 | 
 10 | .post-navigation {
 11 | 	@include hide();
 12 | }
 13 | 
 14 | .more-link {
 15 | 	display: block;
 16 | 	box-shadow: none !important;
 17 | }
 18 | 
 19 | .jp-sharing-input-touch .sd-content ul {
 20 | 	margin-left: -10px !important;
 21 | }
 22 | 
 23 | .nc_socialPanel a {
 24 | 	box-shadow: none !important;
 25 | }
 26 | 
 27 | .post-divider {
 28 | 	margin-bottom: 4.5em;
 29 | 
 30 | 	@media (min-width: 700px) {
 31 | 		margin-bottom: 8em;
 32 | 	}
 33 | 
 34 | 	&:first-of-type {
 35 | 		@include hide();
 36 | 	}
 37 | }
 38 | 
 39 | .alnp--read-more {
 40 | 	margin-bottom: 6em;
 41 | 
 42 | 	@media (min-width: 700px) {
 43 | 		margin-bottom: 8em;
 44 | 	}
 45 | 
 46 | 	@media (min-width: 900px) {
 47 | 		margin-bottom: 7em;
 48 | 	}
 49 | 
 50 | 	span {
 51 | 		@include font-size(15px);
 52 | 		margin-bottom: 5px;
 53 | 		animation: bounce 2s infinite;
 54 | 	}
 55 | 
 56 | 	.svg-icon {
 57 | 		animation: bounce 2s infinite;
 58 | 		fill: $gray;
 59 | 		position: relative;
 60 | 		top: 1px;
 61 | 		left: 8px;
 62 | 	}
 63 | }
 64 | 
 65 | @keyframes bounce {
 66 | 
 67 | 	0%,
 68 | 	100% {
 69 | 		transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 70 | 		transform: translateY(-5px);
 71 | 		opacity: 0.05;
 72 | 	}
 73 | 
 74 | 	50% {
 75 | 		transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 76 | 		transform: translateY(7px);
 77 | 		opacity: 1;
 78 | 	}
 79 | }
 80 | 
 81 | .entry-meta {
 82 | 	margin-top: 1em;
 83 | 	padding-bottom: 0.25em;
 84 | 	position: relative;
 85 | 
 86 | 	.type-page & {
 87 | 		@include hide;
 88 | 	}
 89 | 
 90 | 	.svg-icon {
 91 | 		display: inline-block;
 92 | 		fill: currentColor;
 93 | 		position: relative;
 94 | 		top: 5px;
 95 | 		margin-right: 5px;
 96 | 	}
 97 | }
 98 | 
 99 | .post-password-form {
100 | 
101 | 	p:first-child {
102 | 		margin: 0 0 1em;
103 | 	}
104 | 
105 | 	label input {
106 | 		margin-bottom: 10px;
107 | 	}
108 | }
109 | 
110 | .post-categories {
111 | 	list-style: none;
112 | 	padding: 0;
113 | 	margin: 0;
114 | }
115 | 
116 | .entry-summary {
117 | 	margin-top: 0.8em;
118 | }
119 | 
120 | .more-link--wrapper {
121 | 
122 | 	//  Hide duplicates when in the Customizer live previewer.
123 | 	+ .more-link--wrapper {
124 | 		display: none !important;
125 | 	}
126 | 
127 | 	.customize-partial-edit-shortcut-button {
128 | 		left: -56px;
129 | 		top: 0;
130 | 	}
131 | }
132 | 
133 | .updated:not(.published) {
134 | 	display: none;
135 | }
136 | 
137 | .posted-on--none {
138 | 	display: none;
139 | }
140 | 
141 | .posted-on--updated {
142 | 
143 | 	.updated {
144 | 		display: inline-block;
145 | 	}
146 | 
147 | 	.updated + .published {
148 | 		display: none;
149 | 	}
150 | }
151 | 
152 | .tags-links {
153 | 	@media (max-width: 599px) {
154 | 		justify-content: flex-start;
155 | 	}
156 | }
157 | 
158 | .cat-links a,
159 | .tags-links a {
160 | 	background: $background;
161 | 	border-radius: 2px;
162 | 	display: inline-block;
163 | 	padding: 0.3em 0.75em;
164 | 	transition: 150ms color cubic-bezier(0.3, -0.55, 0.1, 1.1);
165 | 	text-transform: capitalize;
166 | 	margin-right: 4px;
167 | 	margin-bottom: 4px;
168 | 	float: left;
169 | 
170 | 	@media (min-width: 600px) {
171 | 		border-radius: 4px;
172 | 	}
173 | 
174 | 	&:hover {
175 | 		color: $black;
176 | 	}
177 | }
178 | 
179 | .entry-footer {
180 | 	margin-top: 2.1em;
181 | 
182 | 	body.has-no-comments & {
183 | 		@media (max-width: 599px) {
184 | 			margin-bottom: 3em;
185 | 		}
186 | 	}
187 | 
188 | 	@media (max-width: 599px) {
189 | 		flex-direction: column;
190 | 		justify-content: flex-start;
191 | 	}
192 | 
193 | 	&.alnp-post-loaded {
194 | 		display: none;
195 | 	}
196 | 
197 | 	.flex.justify-start.items-center {
198 | 		min-width: 210px;
199 | 
200 | 		@media (max-width: 599px) {
201 | 			order: 2;
202 | 		}
203 | 	}
204 | 
205 | 	.entry-footer__taxonomy {
206 | 		width: 100%;
207 | 		@media (max-width: 599px) {
208 | 			align-self: flex-start;
209 | 			order: 1;
210 | 			margin-bottom: 2.15em;
211 | 		}
212 | 	}
213 | 
214 | }
215 | 
216 | .page-links {
217 | 	display: block;
218 | 	clear: both;
219 | 	padding-top: 20px;
220 | 	padding-bottom: 50px;
221 | 
222 | 	span {
223 | 		@include font-size(15px);
224 | 		background-color: $background;
225 | 		border-radius: 3px;
226 | 		display: inline-block;
227 | 		height: 32px;
228 | 		line-height: 32px;
229 | 		text-align: center;
230 | 		font-family: $font__body;
231 | 		transition: 200ms background ease;
232 | 		width: 32px;
233 | 	}
234 | 
235 | 	a {
236 | 		box-shadow: none !important;
237 | 		color: $black;
238 | 		transition: 200ms color ease;
239 | 	}
240 | 
241 | 	a span {
242 | 		color: $gray;
243 | 
244 | 		&:hover {
245 | 			background: #eee;
246 | 		}
247 | 	}
248 | }
249 | 
250 | .taxonomy-description {
251 | 	font-style: italic;
252 | 	display: inline-block;
253 | 	color: $gray;
254 | 	max-width: 560px;
255 | 	margin: 30px auto 0;
256 | 
257 | 	@media only screen and (min-width: 700px) {
258 | 		margin-top: 35px;
259 | 	}
260 | }
261 | 
262 | .bypostauthor {
263 | 	text-transform: normal;
264 | }
265 | 
266 | .sticky {
267 | 	color: inherit;
268 | }
269 | 
270 | // Jetpack sharing
271 | body div.sharedaddy h3.sd-title {
272 | 	@extend .h4;
273 | 	margin: 1em 0 .25em 0;
274 | 	padding: 0;
275 | 
276 | 	&:before {
277 | 		content: '';
278 | 		border-width: 0;
279 | 	}
280 | }
281 | 


--------------------------------------------------------------------------------
/inc/customizer/scss/customize-range-control.scss:
--------------------------------------------------------------------------------
  1 | // Variables.
  2 | @import "variables";
  3 | 
  4 | .customize-control-coblocks-range {
  5 | 
  6 | 	&:hover {
  7 | 
  8 | 		label {
  9 | 			opacity: 0;
 10 | 		}
 11 | 
 12 | 		.coblocks-range__track,
 13 | 		.coblocks-range__reset {
 14 | 			opacity: 1;
 15 | 		}
 16 | 	}
 17 | 
 18 | 	.customize-control-title {
 19 | 		margin-bottom: 0;
 20 | 	}
 21 | 
 22 | 	.coblocks-range__number-input {
 23 | 
 24 | 		&::-webkit-inner-spin-button,
 25 | 		&::-webkit-outer-spin-button {
 26 | 			appearance: none;
 27 | 			margin: 0;
 28 | 		}
 29 | 	}
 30 | 
 31 | 	.coblocks-range {
 32 | 		position: relative;
 33 | 
 34 | 		&__label {
 35 | 			display: block;
 36 | 			margin-right: 55px;
 37 | 			transition: opacity $range--opacity-speed $range--opacity-cubic;
 38 | 			user-select: none;
 39 | 		}
 40 | 
 41 | 		&__track {
 42 | 			background: $border-color;
 43 | 			left: 30px;
 44 | 			opacity: 0;
 45 | 			padding: 5px 0;
 46 | 			position: absolute;
 47 | 			right: 0;
 48 | 			top: 52%;
 49 | 			transform: translateY(-50%);
 50 | 			transition: opacity $range--opacity-speed $range--opacity-cubic;
 51 | 			width: calc(100% - 80px);
 52 | 
 53 | 			@media screen and (min-width: 1667px) {
 54 | 				width: calc(100% - 90px);
 55 | 			}
 56 | 		}
 57 | 
 58 | 		&__value {
 59 | 			font-size: 14px;
 60 | 			position: absolute;
 61 | 			right: 0;
 62 | 			text-align: right;
 63 | 			top: -1px;
 64 | 
 65 | 			span {
 66 | 				display: none;
 67 | 				margin: 0;
 68 | 			}
 69 | 
 70 | 			em {
 71 | 				cursor: default;
 72 | 				display: inline-block;
 73 | 				font-style: normal;
 74 | 				margin-left: -2px;
 75 | 			}
 76 | 		}
 77 | 
 78 | 		&__number-input {
 79 | 			background: none;
 80 | 			border: none;
 81 | 			box-shadow: none !important;
 82 | 			color: $gray;
 83 | 			display: inline-block;
 84 | 			font-size: 14px;
 85 | 			height: 26px !important;
 86 | 			line-height: 14px !important;
 87 | 			padding: 2px 0;
 88 | 			position: relative;
 89 | 			text-align: right;
 90 | 			width: 30px !important;
 91 | 
 92 | 			&:hover,
 93 | 			&:focus {
 94 | 				color: $blue;
 95 | 			}
 96 | 		}
 97 | 
 98 | 		&__reset {
 99 | 			cursor: pointer;
100 | 			height: 24px;
101 | 			left: 0;
102 | 			opacity: 0;
103 | 			position: absolute;
104 | 			top: 0;
105 | 			transition: opacity $range--opacity-speed $range--opacity-cubic, transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
106 | 			width: 20px;
107 | 
108 | 			&:after {
109 | 				content: "\f531";
110 | 				cursor: pointer;
111 | 				font: 100 15px/1 dashicons;
112 | 				left: 0;
113 | 				position: relative;
114 | 				top: 0.33em;
115 | 				z-index: 999;
116 | 			}
117 | 
118 | 			&:active {
119 | 				transform: scale(0.95);
120 | 			}
121 | 		}
122 | 
123 | 		&__track {
124 | 			appearance: none;
125 | 			margin: 0;
126 | 			padding: 0;
127 | 
128 | 			&:focus {
129 | 				outline: none;
130 | 			}
131 | 
132 | 			&::-webkit-slider-runnable-track {
133 | 				background: $border-color;
134 | 				border-radius: 1px;
135 | 				border: 0 solid $border-color;
136 | 				box-shadow: 0 0 0 $border-color;
137 | 				cursor: pointer;
138 | 				height: 2px;
139 | 				width: 100%;
140 | 			}
141 | 
142 | 			&:focus::-webkit-slider-runnable-track {
143 | 				background: $border-color;
144 | 			}
145 | 
146 | 			&::-webkit-slider-thumb {
147 | 				appearance: none;
148 | 				background: $white;
149 | 				border-radius: 50px;
150 | 				border: 1px solid $border-color;
151 | 				box-shadow: 0 0 0 $border-color;
152 | 				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
153 | 				cursor: pointer;
154 | 				height: 19px;
155 | 				margin-top: -9px;
156 | 				width: 19px;
157 | 			}
158 | 
159 | 			&::-moz-range-thumb {
160 | 				background: $white;
161 | 				border-radius: 50px;
162 | 				border: 1px solid $border-color;
163 | 				box-shadow: 0 0 0 $border-color;
164 | 				cursor: pointer;
165 | 				height: 19px;
166 | 				width: 19px;
167 | 			}
168 | 
169 | 			&::-moz-range-track {
170 | 				background: $border-color;
171 | 				border-radius: 1px;
172 | 				border: 0 solid $border-color;
173 | 				box-shadow: 0 0 0 $border-color;
174 | 				cursor: pointer;
175 | 				height: 2px;
176 | 				width: 100%;
177 | 			}
178 | 
179 | 			&::-ms-track {
180 | 				background: transparent;
181 | 				border-color: transparent;
182 | 				color: transparent;
183 | 				cursor: pointer;
184 | 				height: 2px;
185 | 				width: 100%;
186 | 			}
187 | 
188 | 			&::-ms-fill-lower {
189 | 				background: $border-color;
190 | 				border-radius: 2px;
191 | 				border: 0 solid $border-color;
192 | 				box-shadow: 0 0 0 $border-color;
193 | 			}
194 | 
195 | 			&::-ms-fill-upper {
196 | 				background: $border-color;
197 | 				border-radius: 2px;
198 | 				border: 0 solid $border-color;
199 | 				box-shadow: 0 0 0 $border-color;
200 | 			}
201 | 
202 | 			&::-ms-thumb {
203 | 				background: $white;
204 | 				border-radius: 50px;
205 | 				border: 1px solid $border-color;
206 | 				box-shadow: 0 0 0 $border-color;
207 | 				cursor: pointer;
208 | 				height: 17px;
209 | 				width: 17px;
210 | 			}
211 | 
212 | 			&:focus::-ms-fill-lower {
213 | 				background: $border-color;
214 | 			}
215 | 
216 | 			&:focus::-ms-fill-upper {
217 | 				background: $border-color;
218 | 			}
219 | 		}
220 | 	}
221 | }
222 | 
223 | #customize-control-custom_logo_max_width,
224 | #customize-control-custom_logo_mobile_max_width {
225 | 	margin-bottom: 12px;
226 | 
227 | 	.customize-control-title {
228 | 		font-weight: 600;
229 | 	}
230 | }
231 | 
232 | #customize-control-custom_logo_max_width + #customize-control-custom_logo_mobile_max_width {
233 | 	margin-top: -5px;
234 | }
235 | 


--------------------------------------------------------------------------------
/README.txt:
--------------------------------------------------------------------------------
  1 | # CoBlocks #
  2 | 
  3 | Contributors: richtabor, themebeans, coblocks
  4 | Requires at least: 4.7
  5 | Tested up to: 5.0.0
  6 | Version: @@pkg.version
  7 | License: GPLv3 or later
  8 | License URI: http://www.gnu.org/licenses/gpl-3.0.html
  9 | Tags: white, light, one-column, custom-colors, editor-style, custom-logo, custom-menu, featured-images, theme-options, translation-ready, blog, photography
 10 | 
 11 | == Description ==
 12 | 
 13 | @@pkg.description
 14 | 
 15 | * Gutenberg-ready
 16 | * Mobile-first
 17 | * Responsive Layout
 18 | * Custom Colors
 19 | 
 20 | For more information about CoBlocks please go to https://coblocks.com
 21 | 
 22 | == Installation ==
 23 | 
 24 | 1. In your admin panel, go to Appearance -> Themes and click the 'Add New' button.
 25 | 2. Type 'CoBlocks' in the search form and press the 'Enter' key on your keyboard.
 26 | 3. Click on the 'Activate' button to use your new theme right away.
 27 | 5. Navigate to Appearance > Customize in your admin panel and customize to taste.
 28 | 
 29 | == Copyright ==
 30 | 
 31 | CoBlocks WordPress Theme, Copyright 2018 Inventionn, LLC DBA CoBlocks
 32 | CoBlocks is distributed under the terms of the GNU GPL
 33 | 
 34 | This program is free software: you can redistribute it and/or modify
 35 | it under the terms of the GNU General Public License as published by
 36 | the Free Software Foundation, either version 2 of the License, or
 37 | (at your option) any later version.
 38 | 
 39 | This program is distributed in the hope that it will be useful,
 40 | but WITHOUT ANY WARRANTY; without even the implied warranty of
 41 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 42 | GNU General Public License for more details.
 43 | 
 44 | CoBlocks bundles the following third-party resources:
 45 | 
 46 | TRT Customizer Pro, Copyright 2016 Justin Tadlock
 47 | License: GPLv2 or later
 48 | Source: https://github.com/justintadlock/trt-customizer-pro
 49 | 
 50 | TGM-Plugin-Activation, Copyright 2011, Thomas Griffin
 51 | License: GPLv2 or later
 52 | Source: http://tgmpluginactivation.com
 53 | 
 54 | normalize.css, Copyright 2012-2018 Nicolas Gallagher and Jonathan Neal
 55 | License: MIT
 56 | Source: https://necolas.github.io/normalize.css/
 57 | 
 58 | Heebo Font, Copyright Google, Inc. (https://github.com/meirsadan/heebo)
 59 | License: Open Font License (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)
 60 | Source: https://fonts.google.com/specimen/Heebo
 61 | 
 62 | Lora Font, Copyright Cyreal
 63 | License: Open Font License (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)
 64 | Source: https://fonts.google.com/specimen/Lora
 65 | 
 66 | Playfair Display Font, Copyright The Playfair Display Project Authors (https://github.com/clauseggers/Playfair-Display)
 67 | License: Open Font License (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL)
 68 | Source: https://fonts.google.com/specimen/Playfair+Display
 69 | 
 70 | Screenshot image #1, Copyright MichaelGaida
 71 | License: CC0 1.0 Universal (CC0 1.0) (https://pixabay.com/en/architecture-facade-building-modern-3337993/)
 72 | Source: https://coblocks.com
 73 | 
 74 | Images in assets/images/ directory, Copyright: Inventionn, LLC DBA CoBlocks
 75 | License: GPLv2 or later
 76 | 
 77 | == Changelog ==
 78 | 
 79 | = 1.2.5 =
 80 | * Fix: Adjust Alert block typography control functionality
 81 | * Tweak: Add proper styling for the new <code> format within the block editor
 82 | 
 83 | = 1.2.4 =
 84 | * Tweak: Add minor style tweak for the Blubrry podcast player
 85 | * Fix: Adjust blockquote fallback
 86 | 
 87 | = 1.2.3 =
 88 | * Tweak: Add default blockquote fallback styling
 89 | 
 90 | = 1.2.2 =
 91 | * Tweak: Touch up quote block styling
 92 | * Tweak: Improve Click to Tweet styles
 93 | * Tweak: Add fallback background color for custom colors
 94 | * Tweak: Tweak left/right aligned gallery block styles
 95 | * Tweak: Remove Gutenberg as a suggested plugin
 96 | * Tweak: Adjust search results view with better spacing between articles
 97 | 
 98 | = 1.2.1 =
 99 | * Fix: Revert header menu font size
100 | 
101 | = 1.2.0 =
102 | * New: Major update to editor styles for the Gutenberg block editor
103 | * New: Add compatibility for WordPress 5.0
104 | * New: Add support for MacOS Mojave Safari dark mode by using prefers-color-scheme: dark
105 | * New: Add support for responsive embeds
106 | * Remove: Fitvids.js, as Tabor now supports responsive embeds by default
107 | 
108 | = 1.1.8 =
109 | * Tweak: Add styling for the new CoBlocks Social block
110 | 
111 | = 1.1.7 =
112 | * Tweak: Adjust Block Gallery styling
113 | 
114 | = 1.1.6 =
115 | * New: Add support for Block Gallery, gallery Gutenberg Blocks - https://wpblockgallery.com
116 | * Tweak: Update editor font size name labels
117 | * Tweak: Update styles for the CoBlocks Author block
118 | 
119 | = 1.1.5 =
120 | * New: Add social icon support for Slack
121 | * New: Add custom font sizes using editor-font-sizes
122 | * New: Add a beautiful default color palette
123 | * Fix: Firefox display issue with the WordPress social icon
124 | * Tweak: Adjust positioning of social icons
125 | * Tweak: Tweak editor styles to accurately reflect Gutenberg 3.9+
126 | * Tweak: Add improved for Auto Load Next Post v1.5+ (Thanks Sébastien Dumont!)
127 | * Tweak: .has-light-gray-color to use a non-transparent color
128 | 
129 | = 1.1.4 =
130 | * New: Add social icon support for Mastodon
131 | 
132 | = 1.1.3 =
133 | * Tweak: Adjust verse and preformatted block styling
134 | 
135 | = 1.1.2 =
136 | * Fix: Update editor-color-palette for the latest Gutenberg release
137 | * Tweak: Add wide and full alignment styling for the CoBlocks Gif block
138 | 
139 | = 1.1.1 =
140 | * New: Add Customizer option to display a site title along with the custom logo
141 | 
142 | = 1.1.0 =
143 | * New: Gutenberg 3.0 support
144 | 
145 | = 1.0.9 =
146 | * New: Gutenberg 2.9 editor styling
147 | * New: Add support for FitVids responsive videos
148 | * Tweak: Gutenberg custom colors and editor-color-palette support
149 | 
150 | = 1.0.8 =
151 | * Fix: Gutenberg 2.9 improvements
152 | 
153 | = 1.0.7 =
154 | * Tweak: Revert header fonts
155 | 
156 | = 1.0.6 =
157 | * Tweak: Modify header fonts
158 | * Tweak: Improve gallery display for full aligned items
159 | * Tweak: Improve core quote block display
160 | * Tweak: Improve display of WordPress 4.9.6 cookie consent
161 | 
162 | = 1.0.5 =
163 | * New: Add support for the CoBlocks Author block
164 | * New: Add support for the CoBlocks Click to Tweet block
165 | * Tweak: Update theme screenshot
166 | * Tweak: Minor improvements to the theme starter content
167 | 
168 | = 1.0.4 =
169 | * Tweak: Update theme URI
170 | 
171 | = 1.0.3 =
172 | * Tweak: Update Facebook icon
173 | 
174 | = 1.0.3 =
175 | * Fix: Update Gutenberg block appender styling
176 | * Fix: Remove extraneous changelog
177 | 
178 | = 1.0.2 =
179 | * Fix: Update Gutenberg styling to reflect recent changes
180 | * Fix: entry-summary content alignment
181 | 
182 | = 1.0.1 =
183 | * Fix: Theme URI typo
184 | 
185 | = 1.0.0 =
186 | * Released: May 1, 2018
187 | 


--------------------------------------------------------------------------------
/scss/modules/_comments.scss:
--------------------------------------------------------------------------------
  1 | .comment-meta {
  2 | 	position: relative;
  3 | }
  4 | 
  5 | .comment-awaiting-moderation {
  6 | 	@include font-size(15px);
  7 | 	color: $red;
  8 | 	margin-left: 60px;
  9 | 	margin-top: 13px;
 10 | 	font-family: $font__heading;
 11 | }
 12 | 
 13 | .cnns-comment-subscription {
 14 | 	margin-top: 22px;
 15 | 
 16 | 	label {
 17 | 		@include font-size(17px);
 18 | 		display: inline;
 19 | 		margin-left: 3px;
 20 | 		position: relative;
 21 | 		top: 1px;
 22 | 	}
 23 | }
 24 | 
 25 | #disqus_thread {
 26 | 	@include structure;
 27 | 	display: block;
 28 | 	padding-top: 1em;
 29 | 
 30 | 	@media only screen and (min-width: 600px) {
 31 | 		padding-top: 4em;
 32 | 	}
 33 | }
 34 | 
 35 | .comments-title {
 36 | 	margin-bottom: 15px;
 37 | }
 38 | 
 39 | .comments {
 40 | 	padding-top: 5em;
 41 | 	padding-bottom: 2em;
 42 | 	@include fluid-type(600px, 1200px, 16px, 17px);
 43 | 	@include fluid-line-height(600px, 820px, 1.6, calc(1.3em + (1.6 - 1.3) * ((100vw - 18em)/(35 - 18))), 1.7);
 44 | 
 45 | 	body.has-no-comments & {
 46 | 		@media only screen and (max-width: 599px) {
 47 | 			padding-top: 0;
 48 | 		}
 49 | 	}
 50 | }
 51 | 
 52 | .comment {
 53 | 	margin: 0 0 60px;
 54 | 	list-style-type: none;
 55 | 
 56 | 	.avatar {
 57 | 		border-radius: 100px;
 58 | 		float: left;
 59 | 		width: 44px;
 60 | 		height: 44px;
 61 | 		margin: 2px 16px 0 0 !important;
 62 | 	}
 63 | 
 64 | 	&-author {
 65 | 		@include font-size(17px);
 66 | 		display: block;
 67 | 		font-family: $font__heading;
 68 | 		margin: 0 0 10px;
 69 | 
 70 | 		@media only screen and (min-width: 600px) {
 71 | 			@include font-size(18px);
 72 | 		}
 73 | 
 74 | 		.says {
 75 | 			display: none;
 76 | 		}
 77 | 
 78 | 		span, cite, a {
 79 | 			display: inline-block;
 80 | 			font-style: normal;
 81 | 			font-weight: normal;
 82 | 		}
 83 | 
 84 | 		.fn a {
 85 | 			font-weight: 500;
 86 | 		}
 87 | 
 88 | 		@include hover {
 89 | 			a::after {
 90 | 				content: "➝";
 91 | 				display: inline-block !important;
 92 | 				padding-left: 0.5em;
 93 | 				position: absolute;
 94 | 				opacity: 0;
 95 | 				transform: translateX(-7px);
 96 | 				margin-top: 0px;
 97 | 				transition: transform 0.3s cubic-bezier(0, 0.25, 0.08, 1), opacity 0.3s cubic-bezier(0, 0.25, 0.08, 1);
 98 | 			}
 99 | 
100 | 			a:hover::after {
101 | 				opacity: 1;
102 | 				transform: translateX(0);
103 | 			}
104 | 		}
105 | 	}
106 | 
107 | 	&-notes {
108 | 		display: none;
109 | 	}
110 | 
111 | 	.reply,
112 | 	&-content {
113 | 		margin-left: 60px;
114 | 	}
115 | 
116 | 	.reply {
117 | 		display: block;
118 | 		margin-top: 15px;
119 | 	}
120 | 
121 | 	.reply a {
122 | 		@include font-smoothing;
123 | 		@include font-size(14px);
124 | 		background: rgba(0, 0, 0, .04);
125 | 		border-radius: 2px;
126 | 		color: $dark-gray;
127 | 		display: inline-block;
128 | 		font-family: $font__heading;
129 | 		font-weight: 500;
130 | 		padding: .2em .65em;
131 | 		margin-left: -1px;
132 | 		transition: 150ms color cubic-bezier(.3, -.55, .1, 1.1);
133 | 
134 | 		@media (min-width: 600px) {
135 | 			border-radius: 4px;
136 | 		}
137 | 
138 | 		&:hover {
139 | 			color: $black;
140 | 		}
141 | 	}
142 | 
143 | 	&-content a {
144 | 		word-wrap: break-word;
145 | 		text-decoration: underline;
146 | 
147 | 		&:hover {
148 | 			text-decoration: none;
149 | 		}
150 | 	}
151 | 
152 | 	&-body {
153 | 		clear: both;
154 | 
155 | 		p {
156 | 			margin-bottom: 10px;
157 | 		}
158 | 	}
159 | 
160 | 	.comment-respond {
161 | 		margin-top: 40px;
162 | 		margin-bottom: 60px;
163 | 
164 | 		@media only screen and (min-width: 600px) {
165 | 			margin-left: 60px;
166 | 		}
167 | 	}
168 | }
169 | 
170 | .comment-metadata {
171 | 	@include font-size(14px);
172 | 	display: block;
173 | 	margin-top: -15px;
174 | 	margin-bottom: 8px;
175 | 	font-family: $font__heading;
176 | 
177 | 	a {
178 | 		color: $gray;
179 | 
180 | 		&:hover {
181 | 			color: $black;
182 | 		}
183 | 	}
184 | }
185 | 
186 | .children {
187 | 	padding: 0;
188 | 
189 | 	.comments & {
190 | 		margin-top: 30px;
191 | 	}
192 | 
193 | 	@media only screen and (max-width: 700px) {
194 | 		.comments & & {
195 | 			margin-left: 0;
196 | 		}
197 | 	}
198 | 
199 | 	@media only screen and (min-width: 400px) {
200 | 		.comments & {
201 | 			margin: 30px 0 0 60px;
202 | 		}
203 | 
204 | 		.comments & .comment {
205 | 			margin: 0 0 25px 0;
206 | 		}
207 | 	}
208 | }
209 | 
210 | .pingback {
211 | 	margin-bottom: 25px;
212 | 
213 | 	.comment-edit-link {
214 | 		color: gray;
215 | 
216 | 		&:hover {
217 | 			color: $black;
218 | 		}
219 | 	}
220 | }
221 | 
222 | .bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
223 | 	box-shadow: 0 0 0 2px $black;
224 | 	padding: 5px;
225 | 	top: 2px;
226 | 	position: relative;
227 | }
228 | 
229 | .comment.depth-3,
230 | .comment.depth-4,
231 | .comment.depth-5,
232 | .comment.depth-6,
233 | .comment.depth-7 {
234 | 
235 | 	p {
236 | 		width: 100%;
237 | 		margin-right: 0;
238 | 		margin-left: 0;
239 | 	}
240 | }
241 | 
242 | 
243 | .comment-reply-title {
244 | 	@include fluid-type(514px, 820px, 21px, 25px);
245 | 	font-family: $font__heading;
246 | 	margin-top: 20px;
247 | 	margin-bottom: 20px;
248 | 
249 | 	body.has-no-comments & {
250 | 		margin-top: 0;
251 | 	}
252 | 
253 | 	small {
254 | 		@include font-size(14px);
255 | 		font-weight: normal;
256 | 		color: $gray;
257 | 		float: right;
258 | 		position: relative;
259 | 		top: 8px;
260 | 		transition: 150ms color cubic-bezier(.3, -.55, .1, 1.1);
261 | 
262 | 		@media only screen and (min-width: 600px) {
263 | 			@include font-size(15px);
264 | 		}
265 | 
266 | 		&:hover {
267 | 			color: $black;
268 | 		}
269 | 	}
270 | }
271 | 
272 | .logged-in-as {
273 | 	@include font-size(17px);
274 | 	color: $gray;
275 | 	font-family: $font__heading;
276 | 	margin-top: -15px;
277 | 	line-height: 1.3;
278 | 	font-weight: 500;
279 | 
280 | 	&:hover {
281 | 		text-decoration: underline;
282 | 	}
283 | }
284 | 
285 | .no-comments {
286 | 	text-align: center;
287 | }
288 | 
289 | .comment-form-comment {
290 | 	label {
291 | 		@include hide;
292 | 	}
293 | }
294 | .required {
295 | 	color: $red;
296 | }
297 | 
298 | .comment-respond {
299 | 
300 | 	@media only screen and (min-width: 600px) {
301 | 		margin-left: 60px;
302 | 	}
303 | 
304 | 	body.has-no-comments & {
305 | 		margin-left: 0;
306 | 	}
307 | 
308 | 	input[type="text"],
309 | 	input[type="email"],
310 | 	input[type="url"],
311 | 	textarea {
312 | 		@include fluid-type(600px, 1200px, 16px, 17px);
313 | 		@include fluid-line-height(600px, 820px, 1.6, calc(1.3em + (1.6 - 1.3) * ((100vw - 18em)/(35 - 18))), 1.7);
314 | 		margin: 0;
315 | 	}
316 | 
317 | 	textarea {
318 | 		height: 140px;
319 | 		width: 100%;
320 | 		padding: .85em 1.25em;
321 | 	}
322 | 
323 | 	p {
324 | 		position: relative;
325 | 		margin-bottom: 20px;
326 | 	}
327 | 
328 | 	.form-submit {
329 | 		margin-bottom: 0;
330 | 		margin-top: 25px;
331 | 		display: block;
332 | 	}
333 | 
334 | 	@media (max-width: 599px) {
335 | 		.form-submit input {
336 | 			width: 100%;
337 | 		}
338 | 	}
339 | }
340 | 
341 | .comment-form-cookies-consent {
342 | 	display: block;
343 | 	margin-bottom: 30px !important;
344 | 
345 | 	label {
346 | 		@include font-size(15px);
347 | 		@extend .small;
348 | 		font-weight: 400;
349 | 		padding-left: 8px;
350 | 		display: inline-block;
351 | 		-webkit-font-smoothing: auto !important;
352 | 	}
353 | }
354 | 


--------------------------------------------------------------------------------
/scss/_mixins.scss:
--------------------------------------------------------------------------------
  1 | @mixin hover {
  2 | 	@media (hover) {
  3 | 		@content;
  4 | 	}
  5 | }
  6 | 
  7 | @mixin blockMobileDisplay {
  8 | 	margin-left: $content__padding;
  9 | 	margin-right: $content__padding;
 10 | 	max-width: $content__width--less-padding;
 11 | 
 12 | 	@media screen and (min-width: $content__media-query) {
 13 | 		margin-left: auto;
 14 | 		margin-right: auto;
 15 | 	}
 16 | }
 17 | 
 18 | @mixin blockWideDisplay {
 19 | 	margin-left: $content__padding;
 20 | 	margin-right: $content__padding;
 21 | 	max-width: $content__width--wide--less-padding;
 22 | 
 23 | 	@media screen and (min-width: $content__media-query--wide) {
 24 | 		margin-left: auto;
 25 | 		margin-right: auto;
 26 | 	}
 27 | }
 28 | 
 29 | // Output all headings.
 30 | @mixin headings {
 31 | 		h1,
 32 | 		h2,
 33 | 		h3,
 34 | 		h4,
 35 | 		h5,
 36 | 		h6 {
 37 | 				@content;
 38 | 		}
 39 | }
 40 | 
 41 | //  @include pseudo;
 42 | @mixin pseudo($display: block, $pos: absolute, $content: ''){
 43 |     content: $content;
 44 |     display: $display;
 45 |     position: $pos;
 46 | }
 47 | 
 48 | 
 49 | @mixin iphone_x( $orientation: null ) {
 50 | 	@media only screen
 51 | 	and (device-width : 375px)
 52 | 	and (device-height : 812px)
 53 | 	and (-webkit-device-pixel-ratio : 3)
 54 | 	and (orientation : $orientation) {
 55 | 		@content;
 56 | 	}
 57 | }
 58 | 
 59 | @mixin hover( $toggle: supports ) {
 60 | 	@if $toggle == "supports" {
 61 | 		@media (hover) {
 62 | 			@content;
 63 | 		}
 64 | 	} @else if $toggle == "none" {
 65 | 		@media (hover: none) {
 66 | 			@content;
 67 | 		}
 68 | 	}
 69 | }
 70 | 
 71 | @mixin bottom-spacer {
 72 | 	margin-bottom: 2.35em;
 73 | 
 74 | 	@media only screen and (min-width: 900px) {
 75 | 		margin-bottom: 2.5em;
 76 | 	}
 77 | }
 78 | 
 79 | @mixin top-spacer {
 80 | 	margin-bottom: 2.35em;
 81 | 
 82 | 	@media only screen and (min-width: 900px) {
 83 | 		margin-top: 2.5em;
 84 | 	}
 85 | }
 86 | 
 87 | @mixin structure() {
 88 | 	max-width: $content_max-width;
 89 | 	margin-left: auto;
 90 | 	margin-right: auto;
 91 | 	width: $content_mobile-width;
 92 | 
 93 | 	@media only screen and (min-width: 600px) {
 94 | 		width: $content_width;
 95 | 	}
 96 | }
 97 | 
 98 | // input,
 99 | // textarea {
100 | //     @include input-placeholder {
101 | //         color: $grey;
102 | //     }
103 | // }
104 | @mixin input-placeholder {
105 |     &.placeholder { @content; }
106 |     &:-moz-placeholder { @content; }
107 |     &::-moz-placeholder { @content; }
108 |     &:-ms-input-placeholder { @content; }
109 |     &::-webkit-input-placeholder { @content; }
110 | }
111 | 
112 | 
113 | 
114 | 
115 | @function strip-unit($value) {
116 | 	@return $value / ($value * 0 + 1);
117 | }
118 | 
119 | @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
120 | 	$u1: unit($min-vw);
121 | 	$u2: unit($max-vw);
122 | 	$u3: unit($min-font-size);
123 | 	$u4: unit($max-font-size);
124 | 
125 | 	@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
126 | 		& {
127 | 			font-size: $min-font-size;
128 | 			@media screen and (min-width: $min-vw) {
129 | 				font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
130 | 			}
131 | 			@media screen and (min-width: $max-vw) {
132 | 				font-size: $max-font-size;
133 | 			}
134 | 		}
135 | 	}
136 | }
137 | 
138 | @mixin fluid-line-height($min_width, $max_width, $sml_line-height, $mid_line-height, $lrg_line-height) {
139 | 	line-height: $sml_line-height;
140 | 
141 | 	@media screen and (min-width: $min_width) {
142 | 		line-height: $mid_line-height;
143 | 	}
144 | 
145 | 	@media screen and (min-width: $max_width) {
146 | 		line-height: $lrg_line-height;
147 | 	}
148 | }
149 | 
150 | $phone-width: 514px;
151 | $tablet-width: 768px;
152 | $desktop-width: 1024px;
153 | 
154 | @mixin phone {
155 |   @media (min-width: #{$phone-width}) {
156 |     @content;
157 |   }
158 | }
159 | 
160 | @mixin tablet {
161 |   @media (max-width: #{$tablet-width}) {
162 |     @content;
163 |   }
164 | }
165 | 
166 | @mixin desktop {
167 |   @media (min-width: #{$tablet-width + 1px}) {
168 |     @content;
169 |   }
170 | }
171 | 
172 | @mixin placeholder {
173 |   ::-webkit-input-placeholder {@content}
174 |   :-moz-placeholder           {@content}
175 |   ::-moz-placeholder          {@content}
176 |   :-ms-input-placeholder      {@content}
177 | }
178 | 
179 | // Rem output with px fallback
180 | @function calculateRem($size) {
181 |   $remSize: $size / 16px;
182 |   @return $remSize * 1rem;
183 | }
184 | 
185 | @mixin font-size($size) {
186 |   font-size: $size;
187 |   font-size: calculateRem($size);
188 | }
189 | 
190 | @mixin letter-spacing($size) {
191 |   letter-spacing: $size;
192 |   letter-spacing: calculateRem($size);
193 | }
194 | 
195 | 
196 | @mixin font-smoothing {
197 |     -moz-osx-font-smoothing: grayscale;
198 |     -webkit-font-smoothing: antialiased
199 | }
200 | 
201 | // Center block
202 | @mixin center-block {
203 | 	display: block;
204 | 	margin-left: auto;
205 | 	margin-right: auto;
206 | }
207 | 
208 | // Clearfix
209 | @mixin clearfix() {
210 |     & {
211 | 		*zoom: 1;
212 |     }
213 |     &:before,
214 |     &:after {
215 |         content: "";
216 |         display: table;
217 |     }
218 |     &:after {
219 |         clear: both;
220 |     }
221 | }
222 | 
223 | // Opacity - Usage: @include opacity(0.8);
224 | @mixin opacity($opacity) {
225 |     opacity: $opacity;
226 |     $opacity-ie: $opacity * 100;
227 |     filter: alpha(opacity=$opacity-ie);
228 | }
229 | 
230 | // Input Placeholder
231 | // Usage:
232 | // @include input-placeholder {
233 | //     font-size: 18px;
234 | // }
235 | @mixin input-placeholder {
236 |     &.placeholder { @content; }
237 |     &:-moz-placeholder { @content; }
238 |     &::-moz-placeholder { @content; }
239 |     &:-ms-input-placeholder { @content; }
240 |     &::-webkit-input-placeholder { @content; }
241 | }
242 | 
243 | /// Hides an element visually while still allowing the content to be accessible
244 | /// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
245 | /// the affects of the hiding, which is handy for showing the element on focus,
246 | /// for example.
247 | ///
248 | /// @link http://goo.gl/Vf1TGn
249 | ///
250 | /// @argument {string} $toggle [hide]
251 | ///   Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
252 | ///
253 | /// @example scss
254 | ///   .element {
255 | ///     @include hide-visually;
256 | ///
257 | ///     &:active,
258 | ///     &:focus {
259 | ///       @include hide-visually(unhide);
260 | ///     }
261 | ///   }
262 | ///
263 | /// @example css
264 | ///   .element {
265 | ///     border: 0;
266 | ///     clip: rect(1px, 1px, 1px, 1px);
267 | ///     clip-path: circle(1% at 1% 1%);
268 | ///     height: 1px;
269 | ///     overflow: hidden;
270 | ///     padding: 0;
271 | ///     position: absolute;
272 | ///     width: 1px;
273 | ///   }
274 | ///
275 | ///   .hide-visually:active,
276 | ///   .hide-visually:focus {
277 | ///     clip: auto;
278 | ///     clip-path: none;
279 | ///     height: auto;
280 | ///     overflow: visible;
281 | ///     position: static;
282 | ///     width: auto;
283 | ///   }
284 | @mixin hide($toggle: hide) {
285 |   @if $toggle == "hide" {
286 |     border: 0;
287 |     clip: rect(1px, 1px, 1px, 1px);
288 |     clip-path: circle(1% at 1% 1%);
289 |     height: 1px;
290 |     overflow: hidden;
291 |     padding: 0;
292 |     position: absolute;
293 |     width: 1px;
294 |   } @else if $toggle == "unhide" {
295 |     clip: auto;
296 |     clip-path: none;
297 |     height: auto;
298 |     overflow: visible;
299 |     position: static;
300 |     width: auto;
301 |   }
302 | }


--------------------------------------------------------------------------------
/scss/navigation/_navigation.scss:
--------------------------------------------------------------------------------
  1 | /*--------------------------------------------------------------
  2 | ## Links
  3 | --------------------------------------------------------------*/
  4 | @import "links";
  5 | 
  6 | /*--------------------------------------------------------------
  7 | ## Social Navigation
  8 | --------------------------------------------------------------*/
  9 | @import "social";
 10 | 
 11 | /*--------------------------------------------------------------
 12 | ## Dropdown
 13 | --------------------------------------------------------------*/
 14 | @import "dropdown";
 15 | 
 16 | /* Menu toggle */
 17 | 
 18 | .menu-toggle {
 19 | 	backface-visibility: hidden;
 20 | 	background-color: transparent;
 21 | 	border-radius: 5px;
 22 | 	border: 0;
 23 | 	box-shadow: none;
 24 | 	cursor: pointer;
 25 | 	display: none;
 26 | 	height: 36px;
 27 | 	padding: 1em;
 28 | 	margin-left: 15px;
 29 | 	top: 0;
 30 | 	position: relative;
 31 | 	text-indent: 100%;
 32 | 	text-shadow: none;
 33 | 	white-space: nowrap;
 34 | 	width: 36px;
 35 | 	z-index: 99997;
 36 | 	order: 1;
 37 | 	transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 38 | 
 39 | 	&:hover,
 40 | 	&:focus {
 41 | 		background-color: transparent;
 42 | 		box-shadow: none;
 43 | 	}
 44 | 
 45 | 	&:focus {
 46 | 		outline: thin solid;
 47 | 	}
 48 | 
 49 | 	&:after,
 50 | 	&:before, {
 51 | 		position: absolute;
 52 | 		content: "";
 53 | 		width: 1.5625rem;
 54 | 		height: .125rem;
 55 | 		left: 5px;
 56 | 		background-color: $black;
 57 | 		display: block;
 58 | 		transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 59 | 	}
 60 | 
 61 | 	&::before {
 62 | 		top: calc( 50% - 6px );
 63 | 		transform: rotate(0) translate(0, -50%);
 64 | 	}
 65 | 
 66 | 	&::after {
 67 | 		top: calc( 50% + 6px );
 68 | 		transform: rotate(0) translate(0, -50%);
 69 | 	}
 70 | 
 71 | 	.toggled-on & {
 72 | 		transform: rotate(180deg);
 73 | 	}
 74 | 
 75 | 	.toggled-on &::after,
 76 | 	.toggled-on &::before {
 77 | 		top: 50%;
 78 | 		transform: rotate(45deg) translate(0, -50%);
 79 | 		left: 4px;
 80 | 	}
 81 | 
 82 | 	.toggled-on &::after {
 83 | 		transform: rotate(-45deg) translate(0, -50%);
 84 | 		left: 5px;
 85 | 	}
 86 | }
 87 | 
 88 | /* Display the menu toggle when JavaScript is available. */
 89 | 
 90 | .js .menu-toggle {
 91 | 	display: inline-block;
 92 | 
 93 | 	@media only screen and (min-width: 600px) {
 94 | 		display: none;
 95 | 	}
 96 | }
 97 | 
 98 | /* Mobile Menu */
 99 | 
100 | @media only screen and (max-width: 599px) {
101 | 
102 | 	.main-navigation {
103 | 		margin-right: -5px;
104 | 	}
105 | 
106 | 	.main-navigation ul {
107 | 		padding: 0;
108 | 		list-style: none;
109 | 		margin: 0;
110 | 		transform: translate3d(0, 0, 0);
111 | 	}
112 | 
113 | 	.main-navigation.nav-enabled ul:not(.sub-menu) {
114 | 		transition: opacity 200ms cubic-bezier(.694, 0, .335, 1) 100ms, visibility 200ms 200ms, transform 0 500ms;
115 | 	}
116 | 
117 | 	.main-navigation ul:not(.sub-menu) {
118 | 		-webkit-overflow-scrolling: true;
119 | 		height: 100%;
120 | 		left: 0;
121 | 		margin: auto;
122 | 		padding: 40px 0 140px 5%;
123 | 		position: fixed;
124 | 		right: 0;
125 | 		visibility: hidden;
126 | 		opacity: 0;
127 | 		overflow-x: hidden;
128 | 		overflow-y: scroll;
129 | 		top: 50px;
130 | 		transform: translateY(100%);
131 | 		width: 100%;
132 | 		z-index: 999;
133 | 
134 | 		.admin-bar & {
135 | 			top: 82px;
136 | 		}
137 | 
138 | 		li {
139 | 			text-align: left !important;
140 | 			transform: translate3d(0, 0, 0);
141 | 		}
142 | 
143 | 		ul {
144 | 			background: transparent;
145 | 			-webkit-overflow-scrolling: false;
146 | 		}
147 | 
148 | 		a {
149 | 			@include font-size(24px);
150 | 			font-weight: 800;
151 | 			color: $black;
152 | 			display: block;
153 | 			padding: .3em 0;
154 | 			transform: translate3d(0, 0, 0);
155 | 
156 | 			@media only screen and (max-width: 599px) {
157 | 				color: $black !important;
158 | 			}
159 | 		}
160 | 
161 | 		.sub-menu {
162 | 			display: block;
163 | 			visibility: visible;
164 | 			opacity: 1;
165 | 			margin: 0;
166 | 			padding: 0;
167 | 			position: relative;
168 | 		}
169 | 
170 | 		.nav-open & {
171 | 			opacity: 1;
172 | 			visibility: visible;
173 | 			background-color: rgba(255, 255, 255, .9);
174 | 			transition: opacity 100ms cubic-bezier(.694, 0, .335, 1) 100ms, visibility 100ms 100ms;
175 | 
176 | 			@supports (-webkit-backdrop-filter: none) {
177 | 				background-color: rgba(255, 255, 255, 0);
178 | 			}
179 | 
180 | 			ul {
181 | 				background: transparent;
182 | 			}
183 | 
184 | 			@media only screen and (max-width: 599px) {
185 | 				transform: translateY(0);
186 | 			}
187 | 		}
188 | 	}
189 | }
190 | 
191 | .nav-open {
192 | 
193 | 	@media only screen and (max-width: 599px) {
194 | 		overflow: hidden;
195 | 	}
196 | 
197 | 	@media only screen and (max-width: 599px) {
198 | 
199 | 		.site-footer,
200 | 		.site-content {
201 | 			animation: blur 200ms forwards cubic-bezier(0.694, 0, 0.335, 1);
202 | 		}
203 | 
204 | 		.site-header::after {
205 | 			display: block;
206 | 		}
207 | 	}
208 | 
209 | 	@media only screen and (max-width: 599px) {
210 | 
211 | 		.header__button--night-mode,
212 | 		.search-toggle {
213 | 			transition: opacity 200ms cubic-bezier(0.694, 0, 0.335, 1);
214 | 			opacity: 0;
215 | 		}
216 | 	}
217 | }
218 | 
219 | .unblur {
220 | 	@media only screen and (max-width: 599px) {
221 | 		animation: unblur 200ms forwards cubic-bezier(0.694, 0, 0.335, 1);
222 | 		filter: blur(20px);
223 | 	}
224 | }
225 | 
226 | @keyframes blur {
227 | 
228 | 	0% {
229 | 		filter: blur(0);
230 | 	}
231 | 
232 | 	5% {
233 | 		filter: blur(1px);
234 | 	}
235 | 
236 | 	10% {
237 | 		filter: blur(2px)
238 | 	}
239 | 
240 | 	15% {
241 | 		filter: blur(3px)
242 | 	}
243 | 
244 | 	20% {
245 | 		filter: blur(4px)
246 | 	}
247 | 
248 | 	25% {
249 | 		filter: blur(5px)
250 | 	}
251 | 
252 | 	30% {
253 | 		filter: blur(6px)
254 | 	}
255 | 
256 | 	35% {
257 | 		filter: blur(7px)
258 | 	}
259 | 
260 | 	40% {
261 | 		filter: blur(8px)
262 | 	}
263 | 
264 | 	45% {
265 | 		filter: blur(9px)
266 | 	}
267 | 
268 | 	50% {
269 | 		filter: blur(10px)
270 | 	}
271 | 
272 | 	55% {
273 | 		filter: blur(11px)
274 | 	}
275 | 
276 | 	60% {
277 | 		filter: blur(12px)
278 | 	}
279 | 
280 | 	65% {
281 | 		filter: blur(13px)
282 | 	}
283 | 
284 | 	70% {
285 | 		filter: blur(14px)
286 | 	}
287 | 
288 | 	75% {
289 | 		filter: blur(15px)
290 | 	}
291 | 
292 | 	80% {
293 | 		filter: blur(16px)
294 | 	}
295 | 
296 | 	85% {
297 | 		filter: blur(18px)
298 | 	}
299 | 
300 | 	90% {
301 | 		filter: blur(18px)
302 | 	}
303 | 
304 | 	95% {
305 | 		filter: blur(19px)
306 | 	}
307 | 
308 | 	to {
309 | 		filter: blur(20px)
310 | 	}
311 | }
312 | 
313 | @keyframes unblur {
314 | 	0% {
315 | 		filter: blur(20px)
316 | 	}
317 | 
318 | 	5% {
319 | 		filter: blur(19px)
320 | 	}
321 | 
322 | 	10% {
323 | 		filter: blur(18px)
324 | 	}
325 | 
326 | 	15% {
327 | 		filter: blur(17px)
328 | 	}
329 | 
330 | 	20% {
331 | 		filter: blur(16px)
332 | 	}
333 | 
334 | 	25% {
335 | 		filter: blur(15px)
336 | 	}
337 | 
338 | 	30% {
339 | 		filter: blur(14px)
340 | 	}
341 | 
342 | 	35% {
343 | 		filter: blur(13px)
344 | 	}
345 | 
346 | 	40% {
347 | 		filter: blur(12px)
348 | 	}
349 | 
350 | 	45% {
351 | 		filter: blur(11px)
352 | 	}
353 | 
354 | 	50% {
355 | 		filter: blur(10px)
356 | 	}
357 | 
358 | 	55% {
359 | 		filter: blur(9px)
360 | 	}
361 | 
362 | 	60% {
363 | 		filter: blur(8px)
364 | 	}
365 | 
366 | 	65% {
367 | 		filter: blur(7px)
368 | 	}
369 | 
370 | 	70% {
371 | 		filter: blur(6px)
372 | 	}
373 | 
374 | 	75% {
375 | 		filter: blur(5px)
376 | 	}
377 | 
378 | 	80% {
379 | 		filter: blur(4px)
380 | 	}
381 | 
382 | 	85% {
383 | 		filter: blur(3px)
384 | 	}
385 | 
386 | 	90% {
387 | 		filter: blur(2px)
388 | 	}
389 | 
390 | 	95% {
391 | 		filter: blur(1px)
392 | 	}
393 | 
394 | 	to {
395 | 		filter: blur(0)
396 | 	}
397 | }


--------------------------------------------------------------------------------
/scss/modules/night-mode-content.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | body {
  3 | 	background-color: $night_mode_background;
  4 | 
  5 | 	@include iphone_x() {
  6 | 		background-color: #000;
  7 | 	}
  8 | }
  9 | 
 10 | body,
 11 | button,
 12 | input,
 13 | select,
 14 | textarea,
 15 | .gray,
 16 | .site-header .nav li a,
 17 | .wp-caption-text,
 18 | .blockquote,
 19 | label,
 20 | blockquote,
 21 | .logged-in-as,
 22 | .page-links a span,
 23 | .comment-metadata a,
 24 | .bctt-click-to-tweet,
 25 | .taxonomy-description,
 26 | .comment-reply-title small,
 27 | .no-svg .dropdown-toggle .svg-fallback.icon-down,
 28 | .home:not(.blog) .entry-content h5 {
 29 | 	color: $night_mode_text;
 30 | }
 31 | 
 32 | .has-background {
 33 | 	background: lighten( #1c1b1b, 7% ) !important;
 34 | }
 35 | 
 36 | .wp-block-coblocks-shape-divider__svg-wrapper {
 37 | 	color: lighten( #1c1b1b, 7% ) !important;
 38 | }
 39 | 
 40 | .wp-block-coblocks-shape-divider__alt-wrapper {
 41 | 	background: lighten( #1c1b1b, 7% ) !important;
 42 | }
 43 | 
 44 | .wp-block-coblocks-media-card .wp-block-coblocks-row__inner.has-background {
 45 | 	background-color: $night_mode_background;
 46 | }
 47 | 
 48 | .has-black-background-color {
 49 | 	background-color: $night_mode_text;
 50 | }
 51 | 
 52 | .has-gray-background-color {
 53 | 	background-color: $gray;
 54 | }
 55 | 
 56 | .has-light-gray-background-color {
 57 | 	background-color: $background;
 58 | }
 59 | 
 60 | .has-black-color {
 61 | 	color: $night_mode_heading;
 62 | }
 63 | 
 64 | .has-gray-color {
 65 | 	color: $night_mode_heading;
 66 | }
 67 | 
 68 | .wp-block-quote p {
 69 | 	color: $night_mode_heading;
 70 | }
 71 | 
 72 | .wp-block-quote cite {
 73 | 	color: $night_mode_text;
 74 | }
 75 | 
 76 | .wp-block-code {
 77 | 	border-color: lighten( #1c1b1b, 7% ) !important;
 78 | 	color: $night_mode_text;
 79 | 
 80 | 	code {
 81 | 		background: transparent !important;
 82 | 	}
 83 | }
 84 | 
 85 | .wp-block-quote:not(.is-large)::before {
 86 | 	background-color: #8f98a1;
 87 | }
 88 | 
 89 | .wp-block-coblocks-dynamic-separator {
 90 | 	color: rgba(255, 255, 255, 0.15) !important;
 91 | }
 92 | 
 93 | .wp-block-coblocks-gist .gist .gist-data,
 94 | .wp-block-coblocks-gist .gist .highlight {
 95 | 	background: rgba(lighten(#1c1b1b, 95%), 0.4) !important;
 96 | }
 97 | 
 98 | .wp-block-coblocks-gist .gist .gist-file {
 99 | 	border-color: transparent;
100 | }
101 | 
102 | .header__button--night-mode .svg-icon {
103 | 	color: #fff !important;
104 | }
105 | 
106 | body .widget-area__wrapper {
107 | 	color: $night_mode_text;
108 | }
109 | 
110 | .pagination .svg-icon {
111 | 	fill: $night_mode_heading;
112 | }
113 | 
114 | .home:not(.blog) .entry-content h5, h1, h2, h3, h4, h5, h6, .h1:not(.gray), .h2:not(.gray), .h3:not(.gray), .h4:not(.gray), .h5:not(.gray), .h6:not(.gray) {
115 | 	color: $night_mode_heading;
116 | }
117 | 
118 | .sep {
119 | 	border-color: rgba(255, 255, 255, .15) !important;
120 | }
121 | 
122 | @media only screen and (min-width: 600px) {
123 | 	.main-navigation ul li.menu-item-has-children:hover > a, .main-navigation ul li.menu-item-has-children.focus > a,
124 |  	.main-navigation ul li.page_item_has_children:hover > a,
125 |   	.main-navigation ul li.page_item_has_children.focus > a {
126 |     		color: $white !important;
127 | 	}
128 | }
129 | 
130 | .main-navigation ul:not(.sub-menu) a:hover,
131 | .site-info a:hover,
132 | .footer-menu li a:hover {
133 | 	color: $night_mode_heading;
134 | }
135 | 
136 | .nav-open .main-navigation ul:not(.sub-menu) {
137 | 	background-color: $night_mode_background;
138 | }
139 | 
140 | .main-navigation  {
141 | 	a:hover {
142 | 		color: $white !important;
143 | 	}
144 | }
145 | 
146 | @media only screen and (min-width: 600px) {
147 | 
148 | 	.site-header .nav li.current_page_item .svg-icon {
149 | 		fill: $night_mode_heading;
150 | 	}
151 | 
152 | 	.main-navigation ul li.menu-item-has-children:hover .svg-icon, .main-navigation ul li.menu-item-has-children.focus .svg-icon, .main-navigation ul li.page_item_has_children:hover .svg-icon, .main-navigation ul li.page_item_has_children.focus .svg-icon {
153 | 		fill: $white !important;
154 | 	}
155 | 
156 | 	.main-navigation ul ul {
157 | 		border: 1px solid rgba(0, 0, 0, 0) !important;
158 | 		background: lighten( #1c1b1b, 7% ) !important;
159 | 		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, .1);
160 | 
161 | 		a:hover {
162 | 			color: $white !important;
163 | 		}
164 | 	}
165 | 
166 | 	.main-navigation ul li.menu-item-has-children::before, .main-navigation ul li.page_item_has_children::before {
167 | 		border-color: transparent transparent lighten( #1c1b1b, 7% ) !important;
168 | 		}
169 | 
170 | 		.main-navigation ul li.menu-item-has-children::after, .main-navigation ul li.page_item_has_children::after {
171 | 			border-color: transparent transparent lighten( #1c1b1b, 7% ) !important;
172 | 		}
173 | }
174 | 
175 | @media (max-width: 599px) {
176 | 	.site-header {
177 | 		background: $night_mode_background;
178 | 	}
179 | 
180 | 	.site-header::after {
181 | 		background: transparent;
182 | 			background: -webkit-linear-gradient( $night_mode_background_base 0%, $night_mode_background_base)!important;
183 | 			background: linear-gradient( $night_mode_background_base 0%, $night_mode_background_base)!important;
184 | 	}
185 | }
186 | 
187 | code {
188 | 	background: lighten( #1c1b1b, 7% ) !important;
189 | }
190 | 
191 | .extra-large.h1,
192 | h1, h2, h3, h4, h5, h6,
193 | .site-header .nav li a:hover,
194 | .site-header .nav li.current_page_item > a {
195 | 	color: $night_mode_heading;
196 | }
197 | 
198 | .search-toggle .svg-icon,
199 | .site-header .social-navigation svg,
200 | .search-form .search-submit .svg-icon,
201 | .main-navigation .dropdown-toggle .svg-icon {
202 | 	fill: $night_mode_heading;
203 | }
204 | 
205 | .search-toggle .svg-icon:hover {
206 | 	fill: $white !important;
207 | }
208 | 
209 | .site-search input {
210 | 	background-color: lighten( #1c1b1b, 7% )!important;
211 | 	color: $night_mode_heading;
212 | }
213 | 
214 | .cat-links a,
215 | .tags-links a,
216 | .comment .reply a {
217 | 	background-color: lighten( #1c1b1b, 7%) !important;
218 | 	color: $night_mode_heading;
219 | }
220 | 
221 | .site-search-open .site-search input {
222 | 	box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.3)!important;
223 | }
224 | 
225 | .menu-toggle:after,
226 | .menu-toggle:before {
227 | 	background-color: $night_mode_heading;
228 | }
229 | 
230 | .submit,
231 | .button,
232 | input[type=submit], input[type=button] {
233 | 	background-color: $night_mode_heading;
234 | 	color: $night_mode_background;
235 | 
236 | 	&:hover {
237 | 		background-color: $white !important;
238 | 		color: $night_mode_background;
239 | 	}
240 | }
241 | 
242 | .widget-area__wrapper {
243 | 	background-color: rgba( lighten(#1c1b1b, 7%), .4 ) !important;
244 | }
245 | 
246 | body.single #course-body #course-element-title-content {
247 | 	color: $night_mode_heading;
248 | }
249 | 
250 | body.single #course-body #course-element-tagline {
251 | 	color: $night_mode_text;
252 | }
253 | 
254 | .drop-in--from-bottom, .drop-in--js:not(.drop-in--top) {
255 | 	background-color: rgba( lighten(#1c1b1b, 7%), .85 ) !important;
256 | 	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15) !important;
257 | }
258 | 
259 | .drop-in--from-bottom.drop-in--pinned {
260 | 	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15) !important;
261 | }
262 | 
263 | select,
264 | textarea,
265 | input[type="text"],
266 | input[type="email"],
267 | input[type="url"],
268 | input[type="password"],
269 | input[type="search"] {
270 | 	background-color: lighten( #1c1b1b, 7% ) !important;
271 | 	border-color: lighten( #1c1b1b, 10% ) !important;
272 | 	color: darken(#d3d3d3, 40%) !important;
273 | 
274 | 	&:focus {
275 | 		color:  #d3d3d3;
276 | 		border-color: lighten( #1c1b1b, 15% ) !important;
277 | 	}
278 | }
279 | 
280 | ::-webkit-input-placeholder {
281 | 	color: darken(#d3d3d3, 40%) !important;
282 | 
283 | 	.js--focus & {
284 | 		color: darken(#d3d3d3, 40%) !important;
285 | 	}
286 | }
287 | 
288 | :-moz-placeholder {
289 | 	color: darken(#d3d3d3, 40%) !important;
290 | 
291 | 	.js--focus & {
292 | 		color: darken(#d3d3d3, 40%) !important;
293 | 	}
294 | }
295 | 
296 | ::-moz-placeholder {
297 | 	color: darken(#d3d3d3, 40%) !important;
298 | 	opacity: 1;
299 | 
300 | 	.js--focus & {
301 | 		color: darken(#d3d3d3, 40%) !important;
302 | 	}
303 | }
304 | 
305 | :-ms-input-placeholder {
306 | 	color: darken(#d3d3d3, 40%) !important;
307 | 
308 | 	.js--focus & {
309 | 		color: darken(#d3d3d3, 40%) !important;
310 | 	}
311 | }


--------------------------------------------------------------------------------
/assets/js/customize-preview.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * This file adds some LIVE to the Theme Customizer live preview. To leverage
  3 |  * this, set your custom settings to 'postMessage' and then add your handling
  4 |  * here. This javascript will grab settings from customizer controls, and
  5 |  * then make any necessary changes to the page using jQuery.
  6 |  */
  7 | 
  8 | ( function( $ ) {
  9 | 
 10 | 	wp.customize( 'background_color', function( value ) {
 11 | 		value.bind( function( to ) {
 12 | 			var style, el;
 13 | 
 14 | 			style = '<style class="background_color">@media (max-width: 599px) { .site-header::after { background: ' + to + '; } }</style>';
 15 | 
 16 | 			el = $( '.background_color' );
 17 | 
 18 | 			if ( el.length ) {
 19 | 				el.replaceWith( style );
 20 | 			} else {
 21 | 				$( 'head' ).append( style );
 22 | 			}
 23 | 		} );
 24 | 	} );
 25 | 
 26 | 	wp.customize( 'custom_logo', function( value ) {
 27 | 		value.bind( function( to ) {
 28 | 
 29 | 			if ( to ) {
 30 | 				$( '.site-title' ).addClass( 'with-custom-logo' );
 31 | 			} else {
 32 | 				$( '.site-title' ).removeClass( 'with-custom-logo' );
 33 | 			}
 34 | 		} );
 35 | 	} );
 36 | 
 37 | 	wp.customize( 'site_title', function( value ) {
 38 | 		value.bind( function( to ) {
 39 | 
 40 | 			if ( true === to ) {
 41 | 
 42 | 				$( '.site-title' ).css({
 43 | 					clip: 'auto',
 44 | 					position: 'relative'
 45 | 				});
 46 | 
 47 | 				$( '.site-title' ).removeClass( 'screen-reader-text' );
 48 | 
 49 | 			} else {
 50 | 
 51 | 				$( '.site-title' ).css({
 52 | 					clip: 'rect(1px, 1px, 1px, 1px)',
 53 | 					position: 'absolute'
 54 | 				});
 55 | 			}
 56 | 		});
 57 | 	});
 58 | 
 59 | 	wp.customize( 'custom_logo_max_width', function( value ) {
 60 | 		value.bind( function( to ) {
 61 | 			var style, el;
 62 | 
 63 | 			style = '<style class="custom_logo_max_width">@media (min-width: 600px) { body .custom-logo-link img.custom-logo { width: ' + to + 'px; } }</style>';
 64 | 
 65 | 			el = $( '.custom_logo_max_width' );
 66 | 
 67 | 			if ( el.length ) {
 68 | 				el.replaceWith( style );
 69 | 			} else {
 70 | 				$( 'head' ).append( style );
 71 | 			}
 72 | 		} );
 73 | 	} );
 74 | 
 75 | 	wp.customize( 'custom_logo_mobile_max_width', function( value ) {
 76 | 		value.bind( function( to ) {
 77 | 			var style, el;
 78 | 
 79 | 			style = '<style class="custom_logo_mobile_max_width">@media (max-width: 599px) { body .custom-logo-link img.custom-logo { width: ' + to + 'px; } .main-navigation ul:not(.sub-menu) { top: calc( 30px + ' + to + 'px ); padding-top: ' + to + 'px; } .site-header::after { top: calc( 50px + ' + to + 'px ); } }</style>';
 80 | 
 81 | 			el = $( '.custom_logo_mobile_max_width' );
 82 | 
 83 | 			if ( el.length ) {
 84 | 				el.replaceWith( style );
 85 | 			} else {
 86 | 				$( 'head' ).append( style );
 87 | 			}
 88 | 		} );
 89 | 	} );
 90 | 
 91 | 	wp.customize( 'custom_logo_border_radius', function( value ) {
 92 | 		value.bind( function( to ) {
 93 | 
 94 | 			if ( true === to ) {
 95 | 				$( '#masthead .site-logo' ).removeClass( 'no-border-radius' );
 96 | 
 97 | 			} else {
 98 | 
 99 | 				$( '#masthead .site-logo' ).addClass( 'no-border-radius' );
100 | 			}
101 | 		});
102 | 	});
103 | 
104 | 	wp.customize( 'text_color', function( value ) {
105 | 		value.bind( function( to ) {
106 | 			$( 'body' ).css( 'color', to );
107 | 		} );
108 | 	} );
109 | 
110 | 	wp.customize( 'footer_bg_color', function( value ) {
111 | 		value.bind( function( to ) {
112 | 			$( 'body .widget-area__wrapper' ).css( 'background', to );
113 | 		} );
114 | 	} );
115 | 
116 | 	wp.customize( 'footer_text_color', function( value ) {
117 | 		value.bind( function( to ) {
118 | 			$( 'body .widget-area__wrapper, body .widget-area__wrapper h1, body .widget-area__wrapper h2, body .widget-area__wrapper h3, body .widget-area__wrapper h4, body .widget-area__wrapper h5, body .widget-area__wrapper h6' ).css( 'color', to );
119 | 		} );
120 | 	} );
121 | 
122 | 	wp.customize( 'header_icon_color', function( value ) {
123 | 		value.bind( function( to ) {
124 | 
125 | 			$( '.search-toggle .svg-icon, .site-header .social-navigation svg, .search-form .search-submit .svg-icon' ).css( 'fill', to );
126 | 
127 | 			var style, el;
128 | 
129 | 			style = '<style class="header_icon_color">body .menu-toggle::after, body .menu-toggle::before { background-color: ' + to + ' !important; } }</style>';
130 | 
131 | 			el = $( '.header_icon_color' );
132 | 
133 | 			if ( el.length ) {
134 | 				el.replaceWith( style );
135 | 			} else {
136 | 				$( 'head' ).append( style );
137 | 			}
138 | 		} );
139 | 	} );
140 | 
141 | 	wp.customize( 'heading_color', function( value ) {
142 | 		value.bind( function( to ) {
143 | 			$( 'body #course-body #course-element-title-content, body h1, body h2, body h3, body 4, body h5, body h6, body .h1:not(.gray), body .h2:not(.gray), body .h3:not(.gray), body .h4:not(.gray), body .h5:not(.gray), body .h6:not(.gray), .home:not(.blog) .entry-content h5' ).css( 'color', to );
144 | 		} );
145 | 	} );
146 | 
147 | 	wp.customize( 'nav_color', function( value ) {
148 | 		value.bind( function( to ) {
149 | 			$( '.site-header .nav li a' ).css( 'color', to );
150 | 			$( '.main-navigation .dropdown-toggle .svg-icon' ).css( 'fill', to );
151 | 		} );
152 | 	} );
153 | 
154 | 	wp.customize( 'mobile_nav_color', function( value ) {
155 | 		value.bind( function( to ) {
156 | 			var style, el;
157 | 
158 | 			style = '<style class="mobile_nav_color">@media (max-width: 599px) { body .main-navigation ul:not(.sub-menu) a { color: ' + to + ' !important; } }</style>';
159 | 
160 | 			el = $( '.mobile_nav_color' );
161 | 
162 | 			if ( el.length ) {
163 | 				el.replaceWith( style );
164 | 			} else {
165 | 				$( 'head' ).append( style );
166 | 			}
167 | 		} );
168 | 	} );
169 | 
170 | 	wp.customize( 'alt_heading_color', function( value ) {
171 | 		value.bind( function( to ) {
172 | 			$( '.gray, label, blockquote, .logged-in-as, .wp-caption-text, .page-links a span, .comment-metadata a, .taxonomy-description, .comment-reply-title small, .no-svg .dropdown-toggle .svg-fallback.icon-down' ).css( 'color', to );
173 | 		} );
174 | 	} );
175 | 
176 | 	wp.customize( 'header_search', function( value ) {
177 | 		value.bind( function( to ) {
178 | 
179 | 			if ( true === to ) {
180 | 
181 | 				$( '#search-toggle, #site-search' ).css({
182 | 					clip: 'auto',
183 | 					position: 'relative'
184 | 				});
185 | 
186 | 				$( '#site-search' ).css({
187 | 					position: 'fixed'
188 | 				});
189 | 
190 | 				$( '#search-toggle, #site-search' ).removeClass( 'hidden' );
191 | 
192 | 			} else {
193 | 
194 | 				$( '#search-toggle, #site-search' ).css({
195 | 					clip: 'rect(1px, 1px, 1px, 1px)',
196 | 					position: 'absolute'
197 | 				});
198 | 
199 | 				// Remove the open class, just in case it's applied.
200 | 				$( 'body' ).removeClass( 'site-search-open' );
201 | 			}
202 | 		});
203 | 	});
204 | 
205 | 	wp.customize( 'night_mode', function( value ) {
206 | 		value.bind( function( to ) {
207 | 
208 | 			if ( true === to ) {
209 | 
210 | 				$( '#night-mode-toggle' ).css({
211 | 					clip: 'auto',
212 | 					position: 'relative'
213 | 				});
214 | 
215 | 				$( '#night-mode-toggle' ).removeClass( 'hidden' );
216 | 
217 | 			} else {
218 | 
219 | 				$( '#night-mode-toggle' ).css({
220 | 					clip: 'rect(1px, 1px, 1px, 1px)',
221 | 					position: 'absolute'
222 | 				});
223 | 			}
224 | 		});
225 | 	});
226 | 
227 | 	wp.customize( 'author_meta', function( value ) {
228 | 		value.bind( function( to ) {
229 | 
230 | 			if ( true === to ) {
231 | 
232 | 				$( '.byline' ).css({
233 | 					clip: 'auto',
234 | 					position: 'relative'
235 | 				});
236 | 
237 | 				$( '.byline' ).removeClass( 'hidden' );
238 | 
239 | 			} else {
240 | 
241 | 				$( '.byline' ).css({
242 | 					clip: 'rect(1px, 1px, 1px, 1px)',
243 | 					position: 'absolute'
244 | 				});
245 | 			}
246 | 		});
247 | 	});
248 | 
249 | 	wp.customize( 'categories', function( value ) {
250 | 		value.bind( function( to ) {
251 | 
252 | 			if ( true === to ) {
253 | 
254 | 				$( '.cat-links' ).css({
255 | 					clip: 'auto',
256 | 					position: 'relative'
257 | 				});
258 | 
259 | 				$( '.cat-links' ).removeClass( 'hidden' );
260 | 
261 | 			} else {
262 | 
263 | 				$( '.cat-links' ).css({
264 | 					clip: 'rect(1px, 1px, 1px, 1px)',
265 | 					position: 'absolute'
266 | 				});
267 | 			}
268 | 		});
269 | 	});
270 | 
271 | 	wp.customize( 'tags', function( value ) {
272 | 		value.bind( function( to ) {
273 | 
274 | 			if ( true === to ) {
275 | 
276 | 				$( '.tags-links' ).css({
277 | 					clip: 'auto',
278 | 					position: 'relative'
279 | 				});
280 | 
281 | 				$( '.tags-links' ).removeClass( 'hidden' );
282 | 
283 | 			} else {
284 | 
285 | 				$( '.tags-links' ).css({
286 | 					clip: 'rect(1px, 1px, 1px, 1px)',
287 | 					position: 'absolute'
288 | 				});
289 | 			}
290 | 		});
291 | 	});
292 | 
293 | 	function jsUcfirst( string ) {
294 | 		return string.charAt( 0 ).toUpperCase() + string.slice( 1 );
295 | 	}
296 | 
297 | } )( jQuery );
298 | 


--------------------------------------------------------------------------------