├── .gitignore
├── 404.php
├── README.md
├── archive.php
├── assets
    ├── css
    │   ├── app.css
    │   ├── conditional
    │   │   ├── article.css
    │   │   ├── conditional.css
    │   │   └── header.css
    │   └── whitelist
    │   │   ├── buttons.css
    │   │   ├── forms.css
    │   │   ├── icons.css
    │   │   ├── navigation.css
    │   │   ├── transitions.css
    │   │   ├── type.css
    │   │   ├── whitelist.css
    │   │   └── wordpress.css
    ├── images
    │   └── svg
    │   │   ├── icon-chart.svg
    │   │   ├── icon-gear.svg
    │   │   ├── icon-growth.svg
    │   │   ├── icon-instagram.svg
    │   │   ├── icon-knowledge.svg
    │   │   ├── icon-mark-white.svg
    │   │   ├── icon-person.svg
    │   │   ├── icon-ribbon.svg
    │   │   ├── icon-search.svg
    │   │   ├── icon-toolbox.svg
    │   │   ├── icon-twitter.svg
    │   │   └── monitor-window.svg
    └── js
    │   ├── main.js
    │   └── modules
    │       └── menu.js
├── comments.php
├── composer.json
├── composer.lock
├── content-templates
    └── content-article.php
├── footer.php
├── functions.php
├── header.php
├── index.php
├── package-lock.json
├── package.json
├── page-templates
    └── page-sample.php
├── screenshot.png
├── search.php
├── sidebar.php
├── src
    ├── classes.php
    ├── enqueue.php
    ├── setup.php
    └── sidebars.php
├── style.css
├── tailwind.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | vendor
3 | dist
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/404.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying 404 pages (not found).
 4 |  *
 5 |  * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 6 |  *
 7 |  * @package Freeshifter
 8 |  */
 9 | 
10 | get_header(); ?>
11 | 
12 | <main class="content-wrap">
13 | 	<section class="container mx-auto relative z-10">
14 | 		<h1>Oops! That page can't be found.</h1>
15 | 		<p>It looks like nothing was found at this location. Maybe try one of the links below or a search?</p>
16 | 		<?php
17 | 		get_search_form(); ?>
18 | 	</section>
19 | </main>
20 | 
21 | <?php
22 | get_footer();
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WordPress Tailwind Starter Theme
 2 | A minimalistic WordPress starter theme, based on Tailwind and PurgeCSS.
 3 | 
 4 | ## Requirements
 5 | - [NodeJS](https://nodejs.org)
 6 | - [Composer](https://getcomposer.org)
 7 | 
 8 | ## How to get started
 9 | 1. Clone or [download](https://github.com/freeshifter/wp-tailwind/archive/master.zip "Download the WP Tailwind Zip") the project onto your `themes` directory `(./wp-content/themes)`
10 | 2. Run a find/replace for the following strings:
11 | - `wp-tailwind`
12 | - `WP_Tailwind`
13 | - `wp_tailwind_`
14 | 3. Run `composer install`
15 | 4. Run `npm install` 
16 | 5. Update the BrowserSyncPlugin configuration in `webpack.config.js` to the domain of your local installation.
17 | 6. Run `npm start` to begin development server.
18 | 
19 | ## Webpack
20 | The theme uses Webpack as its bundler with ES6 modules for JavaScript files. It also compresses images found in src automatically, and maps images to the appropriate destination through the `@images` alias. For example, `@images/example.jpg` would be compiled to `../images/example.jpg`.
21 | 
22 | ## Deployment 
23 | ```bash
24 | npm run build
25 | ```
26 | This will run both a production and development set of webpack tasks. The enqueue hook will load the correct version of the JS file, based on whether your development/staging server's `SCRIPT_DEBUG` constant is set to `true`.
27 | 
28 | ## Tailwind
29 | Using the `tailwind.js` file, you can customize Tailwind's default styles before things get compiled. For more information on configuration, [see detailed documentation on Tailwind](https://tailwindcss.com/).
30 | 
31 | ## PurgeCSS
32 | *WP Tailwind* uses PurgeCSS to remove unused styles from the production build. It scans your project directory for strings that match SCSS declarations. You can modify the directories to search for in the `webpack.config.js` file. **Always check your production build to make sure styles you were developing with compiled correctly.**
33 | 


--------------------------------------------------------------------------------
/archive.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The default archive page template.
 4 |  *
 5 |  * @author Freeshifter LLC
 6 |  * @since 1.0.0
 7 |  */
 8 | 
 9 | namespace WP_Tailwind;
10 | 
11 | get_header(); ?>
12 | 	<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex items-start">
13 | 		<h1><?= get_the_archive_title(); ?></h1>
14 | 		<div class="lg:w-3/5 pr-10">
15 | 			<?php
16 | 			if ( have_posts() ) {
17 | 				while ( have_posts() ) {
18 | 					the_post();
19 | 					echo get_template_part( 'content-templates/content', 'article' );
20 | 				}
21 | 			} ?>
22 | 		</div>
23 | 	</div>
24 | 	<?php
25 | get_footer();


--------------------------------------------------------------------------------
/assets/css/app.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 | @import "tailwindcss/components";
3 | @import "tailwindcss/utilities";
4 | @import "whitelist/whitelist.css";
5 | @import "conditional/conditional.css";
6 | 


--------------------------------------------------------------------------------
/assets/css/conditional/article.css:
--------------------------------------------------------------------------------
 1 | .post-title {
 2 | 	@apply text-4xl mb-0;
 3 | 
 4 | 	@screen lg {
 5 | 		@apply text-5xl;
 6 | 	}
 7 | }
 8 | 
 9 | .article {
10 | 	@apply mt-8;
11 | 
12 | 	> p:first-of-type {
13 | 		@apply text-lg;
14 | 	}
15 | 
16 | 	h2,
17 | 	h3,
18 | 	h4,
19 | 	h5,
20 | 	h6 {
21 | 		@apply font-bold;
22 | 	}
23 | 
24 | 	h4,
25 | 	h5,
26 | 	h6 {
27 | 		text-transform: uppercase;
28 | 	}
29 | 
30 | 	@screen lg {
31 | 		p,
32 | 		ul,
33 | 		ol {
34 | 			@apply mt-4 mb-8 leading-normal;
35 | 		}
36 | 
37 | 		p.text-sm {
38 | 			@apply text-sm;
39 | 		}
40 | 	}
41 | }
42 | 


--------------------------------------------------------------------------------
/assets/css/conditional/conditional.css:
--------------------------------------------------------------------------------
1 | @import "header";
2 | @import "article";


--------------------------------------------------------------------------------
/assets/css/conditional/header.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 | 	@apply py-2 z-10 bg-gray-100;
 3 | 
 4 | 	@screen lg {
 5 | 		@apply py-6;
 6 | 	}
 7 | 
 8 | 	.container {
 9 | 		@apply flex justify-between items-center;
10 | 	}
11 | }
12 | 
13 | 


--------------------------------------------------------------------------------
/assets/css/whitelist/buttons.css:
--------------------------------------------------------------------------------
 1 | .button {
 2 | 	@apply font-sans not-italic font-light rounded bg-gray-800 border-2 border-gray-800 leading-normal inline-block no-underline text-gray-200 px-6 py-4 shadow-lg text-center;
 3 | 	transform: translateY(0);
 4 | 
 5 | 	@screen lg {
 6 | 		@apply px-12 py-4;
 7 | 	}
 8 | 
 9 | 	&:focus,
10 | 	&:hover {
11 | 		@apply text-white border-gray-800 bg-gray-800 no-underline shadow;
12 | 		transform: translate3d(1px, 2px, 0);
13 | 		cursor: pointer;
14 | 	}
15 | }
16 | 
17 | .button-white {
18 | 	@extend .button;
19 | 	@apply bg-gray-100 text-gray-800;
20 | 
21 | 	&:focus,
22 | 	&:hover {
23 | 		@apply bg-white text-gray-600;
24 | 	}
25 | }
26 | 
27 | .button-primary {
28 | 	@extend .button;
29 | 	@apply bg-primary-100 text-white border-none;
30 | 
31 | 	&:focus,
32 | 	&:hover {
33 | 		@apply border-primary-100 bg-primary-100 text-white bg-primary-200;
34 | 	}
35 | }
36 | 
37 | .button-link {
38 | 	@apply font-bold font-serif not-italic;
39 | }
40 | 
41 | .highlight {
42 | 	@apply font-bold font-sans not-italic text-primary-100;
43 | }
44 | 
45 | .button-sm {
46 | 	@apply px-4 py-2 text-sm;
47 | }
48 | 
49 | .button-lg {
50 | 	@apply px-12 py-4;
51 | 
52 | 	@screen lg {
53 | 		@apply py-6;
54 | 	}
55 | }


--------------------------------------------------------------------------------
/assets/css/whitelist/forms.css:
--------------------------------------------------------------------------------
 1 | label {
 2 | 	@apply text-sm font-sans uppercase font-bold;
 3 | }
 4 | 
 5 | input,
 6 | textarea,
 7 | select {
 8 | 	@apply border-2 bg-gray-100 leading-normal rounded w-full py-3 px-4 mb-2 italic text-base w-full border-gray-300;
 9 | 	@extend .transition;
10 | 
11 | 	&[aria-invalid="true"] {
12 | 		@apply border-primary-100;
13 | 	}
14 | 
15 | 	&:focus {
16 | 		@apply shadow-lg bg-gray-100 border-gray-200;
17 | 		transform: translate3d(-1px, -1px, 0);
18 | 		outline: 0;
19 | 	}
20 | }
21 | 
22 | input,
23 | textarea {
24 | 	&:focus {
25 | 		@apply border-gray-800;
26 | 	}
27 | }
28 | 
29 | textarea {
30 | 	@apply h-24;
31 | }
32 | 
33 | select {
34 | 	@apply h-12 bg-gray-100;
35 | 
36 | 	option {
37 | 		@apply bg-white;
38 | 	}
39 | 
40 | 	&:focus {
41 | 		@apply shadow-none border-gray-300;
42 | 		transform: none;
43 | 	}
44 | }


--------------------------------------------------------------------------------
/assets/css/whitelist/icons.css:
--------------------------------------------------------------------------------
 1 | .svg-icon {
 2 | 	width: 1em;
 3 | 	height: 1em;
 4 | 
 5 | 	path,
 6 | 	polygon,
 7 | 	rect {
 8 | 		@apply fill-current;
 9 | 	}
10 | 
11 | 	circle {
12 | 		@apply stroke-current;
13 | 		stroke-width: 1;
14 | 	}
15 | }
16 | 
17 | 
18 | 


--------------------------------------------------------------------------------
/assets/css/whitelist/navigation.css:
--------------------------------------------------------------------------------
  1 | .nav-primary {
  2 | 	@apply hidden;
  3 | 
  4 | 	a {
  5 | 		@apply text-gray-800 italic no-underline font-normal;
  6 | 
  7 | 		&:focus,
  8 | 		&:hover {
  9 | 			@apply underline;
 10 | 		}
 11 | 	}
 12 | 
 13 | 	li {
 14 | 		@apply leading-tight;
 15 | 	}
 16 | 
 17 | 	.highlight {
 18 | 		@apply text-primary-100 not-italic font-bold;
 19 | 	}
 20 | 
 21 | 	.button {
 22 | 		@apply text-white;
 23 | 	}
 24 | 
 25 | 	.current-menu-item a {
 26 | 		@apply font-bold not-italic;
 27 | 	}
 28 | 
 29 | 	@screen md {
 30 | 		@apply block;
 31 | 
 32 | 		.dark-header & {
 33 | 			transform: none;
 34 | 		}
 35 | 
 36 | 		li {
 37 | 			@apply mb-0;
 38 | 
 39 | 			&:last-child a {
 40 | 				@apply mr-0;
 41 | 			}
 42 | 		}
 43 | 
 44 | 		a {
 45 | 			@apply mx-4;
 46 | 		}
 47 | 
 48 | 		.button {
 49 | 			@extend .button-sm;
 50 | 		}
 51 | 
 52 | 		.sub-menu {
 53 | 			@apply hidden absolute bg-white shadow-lg;
 54 | 			@extend .list-reset;
 55 | 
 56 | 			a {
 57 | 				@apply text-gray-200;
 58 | 			}
 59 | 		}
 60 | 
 61 | 		.menu-item-has-children {
 62 | 			@apply relative;
 63 | 
 64 | 			&:hover {
 65 | 				.sub-menu {
 66 | 					@apply block;
 67 | 				}
 68 | 			}
 69 | 		}
 70 | 	}
 71 | }
 72 | 
 73 | .nav-mobile {
 74 | 	@extend .nav-primary, .transition;
 75 | 	@apply fixed left-0 top-0 h-full bg-white p-4 z-50 w-full overflow-scroll block z-50 text-center;
 76 | 	transform: translate3d(-100%, 0, 0);
 77 | 
 78 | 	&.active {
 79 | 		transform: translate3d(0, 0, 0);
 80 | 	}
 81 | 
 82 | 	a {
 83 | 		@apply block w-full text-2xl;
 84 | 	}
 85 | 
 86 | 	@screen md {
 87 | 		@apply hidden;
 88 | 	}
 89 | 
 90 | 	.admin-bar & {
 91 | 		top: 46px;
 92 | 
 93 | 		@screen md {
 94 | 			top: 32px;
 95 | 		}
 96 | 	}
 97 | }
 98 | 
 99 | 
100 | @screen md {
101 | 	.toggle {
102 | 		@apply hidden;
103 | 	}
104 | }
105 | 
106 | .footer-menu {
107 | 	@apply pl-0 ml-0;
108 | 	@extend .list-reset;
109 | 
110 | 	a {
111 | 		@apply text-white not-italic;
112 | 	}
113 | }


--------------------------------------------------------------------------------
/assets/css/whitelist/transitions.css:
--------------------------------------------------------------------------------
 1 | .transition {
 2 | 	transition: all .25s cubic-bezier(0.165, 0.84, 0.44, 1);
 3 | }
 4 | 
 5 | a,
 6 | .button,
 7 | .button-large,
 8 | .button-lg,
 9 | .button-primary,
10 | .button-bg-primary-200,
11 | .button-bg-primary-200 .icon {
12 | 	@extend .transition;
13 | }


--------------------------------------------------------------------------------
/assets/css/whitelist/type.css:
--------------------------------------------------------------------------------
  1 | html {
  2 | 	font-size: 18px;
  3 | }
  4 | 
  5 | body {
  6 | 	@apply bg-gray-100 font-serif text-base font-light leading-normal antialiased;
  7 | }
  8 | 
  9 | strong,
 10 | b {
 11 | 	@apply font-bold;
 12 | }
 13 | 
 14 | p {
 15 | 	@apply mt-2 mb-4;
 16 | }
 17 | 
 18 | a {
 19 | 	@apply text-primary-100 underline font-bold;
 20 | 
 21 | 	&:focus,
 22 | 	&:hover {
 23 | 		@apply text-gray-600;
 24 | 	}
 25 | }
 26 | 
 27 | h1,
 28 | h2,
 29 | h3,
 30 | h4,
 31 | h5,
 32 | h6 {
 33 | 	@apply mt-8 mb-4 font-sans font-light;
 34 | 
 35 | 	@screen lg {
 36 | 		@apply mt-12;
 37 | 	}
 38 | }
 39 | 
 40 | h1,
 41 | h2,
 42 | h3 {
 43 | 	@apply leading-tight;
 44 | }
 45 | 
 46 | h4,
 47 | h5,
 48 | h6 {
 49 | 	@apply leading-normal;
 50 | }
 51 | 
 52 | h1 {
 53 | 	@apply text-5xl;
 54 | }
 55 | 
 56 | h2 {
 57 | 	@apply text-4xl;
 58 | }
 59 | 
 60 | h3 {
 61 | 	@apply text-3xl;
 62 | }
 63 | 
 64 | h4 {
 65 | 	@apply text-2xl;
 66 | }
 67 | 
 68 | h5 {
 69 | 	@apply text-xl;
 70 | }
 71 | 
 72 | h6 {
 73 | 	@apply text-xl tracking-wide;
 74 | }
 75 | 
 76 | ul,
 77 | ol {
 78 | 	@apply mt-4 mb-10 ml-2;
 79 | 
 80 | 	@screen lg {
 81 | 		@apply ml-8;
 82 | 	}
 83 | }
 84 | 
 85 | li {
 86 | 	@apply mb-2;
 87 | 
 88 | 	.sidebar &,
 89 | 	.article & {
 90 | 		list-style-type: disc;
 91 | 	}
 92 | }
 93 | 
 94 | blockquote {
 95 | 	@apply text-center italic m-10;
 96 | 
 97 | 	@screen lg {
 98 | 		@apply m-16 text-lg;
 99 | 	}
100 | }
101 | 
102 | .list-reset {
103 | 	display: inline-block;
104 | 	list-style: none;
105 | 	margin: 0;
106 | 	padding: 0;
107 | }
108 | 
109 | ::selection {
110 | 	@apply bg-primary-100 text-gray-200;
111 | }


--------------------------------------------------------------------------------
/assets/css/whitelist/whitelist.css:
--------------------------------------------------------------------------------
1 | @import "type.css";
2 | @import "navigation.css";
3 | @import "buttons.css";
4 | @import "transitions.css";
5 | @import "icons.css";
6 | @import "forms.css";
7 | @import "wordpress.css";


--------------------------------------------------------------------------------
/assets/css/whitelist/wordpress.css:
--------------------------------------------------------------------------------
 1 | .alignright {
 2 | 	@apply float-right ml-4 mb-4;
 3 | }
 4 | 
 5 | .alignleft {
 6 | 	@apply float-left mr-4 mb-4;
 7 | }
 8 | 
 9 | .aligncenter {
10 | 	@apply mx-auto;
11 | }
12 | 
13 | img {
14 | 	@apply rounded;
15 | }
16 | 
17 | .screen-reader-text {
18 | 	border: 0;
19 | 	clip: rect(1px, 1px, 1px, 1px);
20 | 	clip-path: inset(50%);
21 | 	height: 1px;
22 | 	margin: -1px;
23 | 	overflow: hidden;
24 | 	padding: 0;
25 | 	position: absolute;
26 | 	width: 1px;
27 | 	word-wrap: normal !important;
28 | }


--------------------------------------------------------------------------------
/assets/images/svg/icon-chart.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path d="M10.281,1.781C5.75,1.781,2.062,5.469,2.062,10s3.688,8.219,8.219,8.219S18.5,14.531,18.5,10S14.812,1.781,10.281,1.781M10.714,2.659c3.712,0.216,6.691,3.197,6.907,6.908h-6.907V2.659z M10.281,17.354c-4.055,0-7.354-3.298-7.354-7.354c0-3.911,3.067-7.116,6.921-7.341V10c0,0.115,0.045,0.225,0.127,0.305l5.186,5.189C13.863,16.648,12.154,17.354,10.281,17.354M15.775,14.882l-4.449-4.449h6.295C17.522,12.135,16.842,13.684,15.775,14.882"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-gear.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-growth.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path d="M17.431,2.156h-3.715c-0.228,0-0.413,0.186-0.413,0.413v6.973h-2.89V6.687c0-0.229-0.186-0.413-0.413-0.413H6.285c-0.228,0-0.413,0.184-0.413,0.413v6.388H2.569c-0.227,0-0.413,0.187-0.413,0.413v3.942c0,0.228,0.186,0.413,0.413,0.413h14.862c0.228,0,0.413-0.186,0.413-0.413V2.569C17.844,2.342,17.658,2.156,17.431,2.156 M5.872,17.019h-2.89v-3.117h2.89V17.019zM9.587,17.019h-2.89V7.1h2.89V17.019z M13.303,17.019h-2.89v-6.651h2.89V17.019z M17.019,17.019h-2.891V2.982h2.891V17.019z"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-instagram.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path fill="none" d="M14.52,2.469H5.482c-1.664,0-3.013,1.349-3.013,3.013v9.038c0,1.662,1.349,3.012,3.013,3.012h9.038c1.662,0,3.012-1.35,3.012-3.012V5.482C17.531,3.818,16.182,2.469,14.52,2.469 M13.012,4.729h2.26v2.259h-2.26V4.729z M10,6.988c1.664,0,3.012,1.349,3.012,3.012c0,1.664-1.348,3.013-3.012,3.013c-1.664,0-3.012-1.349-3.012-3.013C6.988,8.336,8.336,6.988,10,6.988 M16.025,14.52c0,0.831-0.676,1.506-1.506,1.506H5.482c-0.831,0-1.507-0.675-1.507-1.506V9.247h1.583C5.516,9.494,5.482,9.743,5.482,10c0,2.497,2.023,4.52,4.518,4.52c2.494,0,4.52-2.022,4.52-4.52c0-0.257-0.035-0.506-0.076-0.753h1.582V14.52z"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-knowledge.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path d="M14.68,12.621c-0.9,0-1.702,0.43-2.216,1.09l-4.549-2.637c0.284-0.691,0.284-1.457,0-2.146l4.549-2.638c0.514,0.661,1.315,1.09,2.216,1.09c1.549,0,2.809-1.26,2.809-2.808c0-1.548-1.26-2.809-2.809-2.809c-1.548,0-2.808,1.26-2.808,2.809c0,0.38,0.076,0.741,0.214,1.073l-4.55,2.638c-0.515-0.661-1.316-1.09-2.217-1.09c-1.548,0-2.808,1.26-2.808,2.809s1.26,2.808,2.808,2.808c0.9,0,1.702-0.43,2.217-1.09l4.55,2.637c-0.138,0.332-0.214,0.693-0.214,1.074c0,1.549,1.26,2.809,2.808,2.809c1.549,0,2.809-1.26,2.809-2.809S16.229,12.621,14.68,12.621M14.68,2.512c1.136,0,2.06,0.923,2.06,2.06S15.815,6.63,14.68,6.63s-2.059-0.923-2.059-2.059S13.544,2.512,14.68,2.512M5.319,12.061c-1.136,0-2.06-0.924-2.06-2.06s0.923-2.059,2.06-2.059c1.135,0,2.06,0.923,2.06,2.059S6.454,12.061,5.319,12.061M14.68,17.488c-1.136,0-2.059-0.922-2.059-2.059s0.923-2.061,2.059-2.061s2.06,0.924,2.06,2.061S15.815,17.488,14.68,17.488"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-mark-white.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <circle cx="25.5" cy="25.5" r="23.5" stroke="white" stroke-width="4"/>
3 | <path d="M36.5755 14L24.9174 22.7789C24.7517 22.7652 24.5859 22.7515 24.4201 22.7515C21.9753 22.7515 20 24.7069 20 27.1273C20 29.5476 21.9753 31.503 24.4201 31.503C26.865 31.503 28.8403 29.5476 28.8403 27.1273C28.8403 26.9632 28.8265 26.7991 28.8127 26.635L37.6806 15.0939L36.5755 14Z" fill="white"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/assets/images/svg/icon-person.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path fill="none" d="M12.443,9.672c0.203-0.496,0.329-1.052,0.329-1.652c0-1.969-1.241-3.565-2.772-3.565S7.228,6.051,7.228,8.02c0,0.599,0.126,1.156,0.33,1.652c-1.379,0.555-2.31,1.553-2.31,2.704c0,1.75,2.128,3.169,4.753,3.169c2.624,0,4.753-1.419,4.753-3.169C14.753,11.225,13.821,10.227,12.443,9.672z M10,5.247c1.094,0,1.98,1.242,1.98,2.773c0,1.531-0.887,2.772-1.98,2.772S8.02,9.551,8.02,8.02C8.02,6.489,8.906,5.247,10,5.247z M10,14.753c-2.187,0-3.96-1.063-3.96-2.377c0-0.854,0.757-1.596,1.885-2.015c0.508,0.745,1.245,1.224,2.076,1.224s1.567-0.479,2.076-1.224c1.127,0.418,1.885,1.162,1.885,2.015C13.961,13.689,12.188,14.753,10,14.753z M10,0.891c-5.031,0-9.109,4.079-9.109,9.109c0,5.031,4.079,9.109,9.109,9.109c5.031,0,9.109-4.078,9.109-9.109C19.109,4.969,15.031,0.891,10,0.891z M10,18.317c-4.593,0-8.317-3.725-8.317-8.317c0-4.593,3.724-8.317,8.317-8.317c4.593,0,8.317,3.724,8.317,8.317C18.317,14.593,14.593,18.317,10,18.317z"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-ribbon.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path d="M15.94,10.179l-2.437-0.325l1.62-7.379c0.047-0.235-0.132-0.458-0.372-0.458H5.25c-0.241,0-0.42,0.223-0.373,0.458l1.634,7.376L4.06,10.179c-0.312,0.041-0.446,0.425-0.214,0.649l2.864,2.759l-0.724,3.947c-0.058,0.315,0.277,0.554,0.559,0.401l3.457-1.916l3.456,1.916c-0.419-0.238,0.56,0.439,0.56-0.401l-0.725-3.947l2.863-2.759C16.388,10.604,16.254,10.22,15.94,10.179M10.381,2.778h3.902l-1.536,6.977L12.036,9.66l-1.655-3.546V2.778z M5.717,2.778h3.903v3.335L7.965,9.66L7.268,9.753L5.717,2.778zM12.618,13.182c-0.092,0.088-0.134,0.217-0.11,0.343l0.615,3.356l-2.938-1.629c-0.057-0.03-0.122-0.048-0.184-0.048c-0.063,0-0.128,0.018-0.185,0.048l-2.938,1.629l0.616-3.356c0.022-0.126-0.019-0.255-0.11-0.343l-2.441-2.354l3.329-0.441c0.128-0.017,0.24-0.099,0.295-0.215l1.435-3.073l1.435,3.073c0.055,0.116,0.167,0.198,0.294,0.215l3.329,0.441L12.618,13.182z"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-search.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-toolbox.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path d="M17.283,5.549h-5.26V4.335c0-0.222-0.183-0.404-0.404-0.404H8.381c-0.222,0-0.404,0.182-0.404,0.404v1.214h-5.26c-0.223,0-0.405,0.182-0.405,0.405v9.71c0,0.223,0.182,0.405,0.405,0.405h14.566c0.223,0,0.404-0.183,0.404-0.405v-9.71C17.688,5.731,17.506,5.549,17.283,5.549 M8.786,4.74h2.428v0.809H8.786V4.74z M16.879,15.26H3.122v-4.046h5.665v1.201c0,0.223,0.182,0.404,0.405,0.404h1.618c0.222,0,0.405-0.182,0.405-0.404v-1.201h5.665V15.26z M9.595,9.583h0.81v2.428h-0.81V9.583zM16.879,10.405h-5.665V9.19c0-0.222-0.183-0.405-0.405-0.405H9.191c-0.223,0-0.405,0.183-0.405,0.405v1.215H3.122V6.358h13.757V10.405z"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/icon-twitter.svg:
--------------------------------------------------------------------------------
1 | <svg class="svg-icon" viewBox="0 0 20 20">
2 | 	<path fill="none" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path>
3 | </svg>


--------------------------------------------------------------------------------
/assets/images/svg/monitor-window.svg:
--------------------------------------------------------------------------------
 1 | <svg class="z-0 lg:absolute pin-r pin-b w-1/2 lg:opacity-25 xl:opacity-100 lg:w-auto" width="600px" height="385" viewBox="0 0 398 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 |     <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
 3 |     <title>monitor-window</title>
 4 |     <desc>Created with Sketch.</desc>
 5 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 6 |         <g id="monitor-window" transform="translate(1.000000, 1.000000)">
 7 |             <path d="M20.7272727,201.954545 L375.272727,201.954545" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
 8 |             <path d="M0.272727273,201.954545 L11.6363636,201.954545" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
 9 |             <path d="M384.363636,201.954545 L395.727273,201.954545" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
10 |             <path d="M81.8272727,60.4090909 L294.172727,60.4090909 C296.160952,60.4090909 297.772727,62.0208658 297.772727,64.0090909 L297.772727,189.809091 C297.772727,191.797316 296.160952,193.409091 294.172727,193.409091 L81.8272727,193.409091 C79.8390476,193.409091 78.2272727,191.797316 78.2272727,189.809091 L78.2272727,128.686189 L78.2272727,64.0090909 C78.2272727,62.0208658 79.8390476,60.4090909 81.8272727,60.4090909 Z" id="Rectangle" fill="#F5DDDC" fill-rule="nonzero"></path>
11 |             <path d="M211,60.4090909 L97.0454545,60.4090909 C93.717068,60.4090909 87.4443407,60.4090909 78.2272727,60.4090909 C78.2272727,69.3542688 78.2272727,75.6269961 78.2272727,79.2272727 L78.2272727,193.181818 L211,60.4090909 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
12 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x="78.2272727" y="60.4090909" width="219.545455" height="133" rx="3.6"></rect>
13 |             <path d="M278.954545,217.227273 C283.984699,217.288028 288.829771,215.332257 292.408173,211.796557 C295.986575,208.260857 298.000367,203.439611 298,198.409091 L298,192.136364 L78.2272727,192.136364 L78.2272727,198.409091 C78.2272727,208.802086 86.6524597,217.227273 97.0454545,217.227273 L278.954545,217.227273 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
14 |             <polygon id="Path" fill="#FFFFFF" fill-rule="nonzero" points="206.818182 242.318182 169.181818 242.318182 172.318182 217.227273 203.681818 217.227273"></polygon>
15 |             <polygon id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="206.818182 242.318182 169.181818 242.318182 172.318182 217.227273 203.681818 217.227273"></polygon>
16 |             <path d="M228.772727,254.863636 L147.227273,254.863636 C147.227273,247.934973 152.844064,242.318182 159.772727,242.318182 L216.181818,242.318182 C223.117873,242.318137 228.747687,247.927627 228.772727,254.863636 L228.772727,254.863636 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
17 |             <path d="M128.409091,38.4545455 L310.227273,38.4545455 L310.227273,146.727273 C310.227273,152.752197 305.343106,157.636364 299.318182,157.636364 L139.318182,157.636364 C133.293257,157.636364 128.409091,152.752197 128.409091,146.727273 L128.409091,38.4545455 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
18 |             <path d="M139.318182,0.818181818 L299.409091,0.818181818 C305.434015,0.818181818 310.318182,5.70234818 310.318182,11.7272727 L310.318182,38.4545455 L128.5,38.4545455 L128.5,11.7272727 C128.499792,5.73767257 133.32879,0.868095149 139.318182,0.818181818 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"></path>
19 |             <circle id="Oval" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="147.227273" cy="19.6363636" r="6.27272727"></circle>
20 |             <circle id="Oval" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="172.318182" cy="19.6363636" r="6.27272727"></circle>
21 |             <circle id="Oval" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="197.409091" cy="19.6363636" r="6.27272727"></circle>
22 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="184.863636" y="76.0909091" width="25.0909091" height="25.0909091" rx="1"></rect>
23 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="225.636364" y="76.0909091" width="25.0909091" height="25.0909091" rx="1"></rect>
24 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="266.409091" y="76.0909091" width="25.0909091" height="25.0909091" rx="1"></rect>
25 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="184.863636" y="113.727273" width="25.0909091" height="25.0909091" rx="1"></rect>
26 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="225.636364" y="113.727273" width="25.0909091" height="25.0909091" rx="1"></rect>
27 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="266.409091" y="113.727273" width="25.0909091" height="25.0909091" rx="1"></rect>
28 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="147.227273" y="51" width="25.0909091" height="12.5454545" rx="1"></rect>
29 |             <rect id="Rectangle" stroke="#282828" stroke-width="2" fill="#F5DDDC" fill-rule="nonzero" stroke-linejoin="round" x="184.863636" y="51" width="106.636364" height="12.5454545" rx="1"></rect>
30 |             <path d="M147.227273,76.0909091 L172.318182,76.0909091" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
31 |             <path d="M147.227273,88.6363636 L172.318182,88.6363636" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
32 |             <path d="M147.227273,101.181818 L172.318182,101.181818" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
33 |             <path d="M147.227273,113.727273 L172.318182,113.727273" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
34 |             <path d="M147.227273,126.272727 L172.318182,126.272727" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
35 |             <path d="M147.227273,138.818182 L162.909091,138.818182" id="Path" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
36 |             <path d="M351.090909,207.5 C350.181818,210.818182 348.363636,210.909091 347.045455,207.5 L326.454545,158.363636 C325.136364,155.181818 326.454545,153.818182 329.863636,155 L379.227273,175.545455 C382.409091,176.909091 382.272727,178.727273 378.954545,179.636364 L363.136364,184.181818 C359.502812,185.396001 356.64469,188.237311 355.409091,191.863636 L351.090909,207.5 Z" id="Path" stroke="#282828" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" stroke-linejoin="round"></path>
37 |             <circle id="Oval" stroke="#282828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="188" cy="204.681818" r="2.63636364"></circle>
38 |         </g>
39 |     </g>
40 | </svg>


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
1 | // Build CSS
2 | import '../css/app.css'
3 | 
4 | // Import JS Modules
5 | import menu_init from './modules/menu'
6 | 
7 | // Load Menu Script
8 | document.addEventListener( 'DOMContentLoaded', menu_init );


--------------------------------------------------------------------------------
/assets/js/modules/menu.js:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 | 	const toggles = document.querySelectorAll('.toggle')
 3 | 	const menu   = document.querySelector('.nav-mobile')
 4 | 
 5 | 	if ( ! toggles || ! menu ) {
 6 | 		return;
 7 | 	}
 8 | 
 9 | 	let active = false
10 | 
11 | 	toggles.forEach(toggle => {
12 | 		toggle.addEventListener( 'click', () => {
13 | 			if ( active ) {
14 | 				open();
15 | 			} else {
16 | 				close();
17 | 			}
18 | 		})
19 | 	})
20 | 
21 | 	function open() {
22 | 		menu.classList.remove('active')
23 | 		active = false
24 | 	}
25 | 
26 | 	function close() {
27 | 		menu.classList.add('active')
28 | 		active = true
29 | 	}
30 | }


--------------------------------------------------------------------------------
/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 Freeshifter
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 | 
23 | <div id="comments" class="comments-area">
24 | 
25 | 	<?php
26 | 	if ( have_comments() ) : ?>
27 | 		<h2 class="comments-title">
28 | 			<?php
29 | 			printf(
30 | 				esc_html( _nx( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', 'wp-tailwind' ) ),
31 | 				number_format_i18n( get_comments_number() ),
32 | 				'<span>' . get_the_title() . '</span>'
33 | 			);
34 | 			?>
35 | 		</h2>
36 | 
37 | 		<?php
38 | 		if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
39 | 			<nav id="comment-nav-above" class="navigation comment-navigation">
40 | 				<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-tailwind' ); ?></h2>
41 | 				<div class="nav-links">
42 | 					<div class="nav-previous"><?php previous_comments_link( esc_html( 'Older Comments' ) ); ?></div>
43 | 					<div class="nav-next"><?php next_comments_link( esc_html( 'Newer Comments' ) ); ?></div>
44 | 				</div>
45 | 			</nav>
46 | 		<?php
47 | 		endif; ?>
48 | 
49 | 		<ol class="comment-list">
50 | 			<?php
51 | 			wp_list_comments( array(
52 | 				'style'      => 'ol',
53 | 				'short_ping' => true,
54 | 			) ); ?>
55 | 		</ol>
56 | 
57 | 		<?php
58 | 		if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
59 | 			<nav id="comment-nav-below" class="navigation comment-navigation">
60 | 				<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'wp-tailwind' ); ?></h2>
61 | 				<div class="nav-links">
62 | 					<div class="nav-previous"><?php previous_comments_link( esc_html( 'Older Comments' ) ); ?></div>
63 | 					<div class="nav-next"><?php next_comments_link( esc_html( 'Newer Comments' ) ); ?></div>
64 | 				</div>
65 | 			</nav>
66 | 		<?php
67 | 		endif; ?>
68 | 
69 | 	<?php
70 | 	endif; ?>
71 | 
72 | 	<?php
73 | 	// If comments are closed and there are comments, let's leave a little note, shall we?
74 | 	if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
75 | 		?>
76 | 		<p class="no-comments"><?php esc_html( 'Comments are closed.' ); ?></p>
77 | 		<?php
78 | 	endif; ?>
79 | 
80 | 	<?php
81 | 	comment_form(); ?>
82 | </div>
83 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 |     "require": {
3 |         "a7/autoload": "^2.1"
4 |     }
5 | }
6 | 


--------------------------------------------------------------------------------
/composer.lock:
--------------------------------------------------------------------------------
 1 | {
 2 |     "_readme": [
 3 |         "This file locks the dependencies of your project to a known state",
 4 |         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
 5 |         "This file is @generated automatically"
 6 |     ],
 7 |     "content-hash": "c0d1ffb65b9e528acc693829affbf907",
 8 |     "packages": [
 9 |         {
10 |             "name": "a7/autoload",
11 |             "version": "2.1",
12 |             "source": {
13 |                 "type": "git",
14 |                 "url": "https://github.com/a7/autoload.git",
15 |                 "reference": "2d4a63c88150869883e43ad04e04b81125b55fd9"
16 |             },
17 |             "dist": {
18 |                 "type": "zip",
19 |                 "url": "https://api.github.com/repos/a7/autoload/zipball/2d4a63c88150869883e43ad04e04b81125b55fd9",
20 |                 "reference": "2d4a63c88150869883e43ad04e04b81125b55fd9",
21 |                 "shasum": ""
22 |             },
23 |             "require": {
24 |                 "php": ">=7.0"
25 |             },
26 |             "type": "library",
27 |             "autoload": {
28 |                 "files": [
29 |                     "package.php"
30 |                 ]
31 |             },
32 |             "notification-url": "https://packagist.org/downloads/",
33 |             "license": [
34 |                 "Unlicense"
35 |             ],
36 |             "authors": [
37 |                 {
38 |                     "name": "A7",
39 |                     "email": "a7@fastmail.com",
40 |                     "homepage": "https://github.com/a7"
41 |                 }
42 |             ],
43 |             "description": "Automatically and recursively require_once all php files in a given directory.",
44 |             "time": "2019-03-28T11:26:32+00:00"
45 |         }
46 |     ],
47 |     "packages-dev": [],
48 |     "aliases": [],
49 |     "minimum-stability": "stable",
50 |     "stability-flags": [],
51 |     "prefer-stable": false,
52 |     "prefer-lowest": false,
53 |     "platform": [],
54 |     "platform-dev": []
55 | }
56 | 


--------------------------------------------------------------------------------
/content-templates/content-article.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The article template.
 4 |  *
 5 |  * @author Freeshifter LLC
 6 |  * @since 1.0.0
 7 |  */
 8 | 
 9 | namespace WP_Tailwind;
10 | 
11 | ?>
12 | <article <?php post_class( 'bg-white border-2 border-gray-400 p-8' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
13 | 	<header>
14 | 		<h2 class="m-0">
15 | 			<?php
16 | 
17 | 			if ( is_archive() || is_home() ) {
18 | 				printf( '<a href="%s" rel="bookmark">%s</a>',
19 | 					esc_url( get_the_permalink() ),
20 | 					esc_html( get_the_title() )
21 | 				);
22 | 			} else {
23 | 				echo get_the_title();
24 | 			} ?>
25 | 		</h2>
26 | 		<p class="text-sm">Published on <?= get_the_date(); ?></p>
27 | 	</header>
28 | 
29 | 	<div class="article">
30 | 		<?php
31 | 		if ( has_post_thumbnail() ) {
32 | 			echo get_the_post_thumbnail( get_the_ID(), 'large', ['class' => 'rounded shadow-lg'] );
33 | 		}
34 | 
35 | 		the_content(); ?>
36 | 	</div>
37 | 
38 | 	<footer>
39 | 		Categorized under: <?= get_the_category_list( ',' ); ?>
40 | 	</footer>
41 | </article>
42 | 


--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The template for displaying the footer.
 4 |  *
 5 |  * Contains the closing of the #content div and all content after.
 6 |  *
 7 |  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 8 |  *
 9 |  * @package Freeshifter
10 |  */
11 | 
12 | namespace WP_Tailwind;
13 | 
14 | ?>
15 | 		</main>
16 | 		<footer class="footer relative bg-dark-1 text-light-2 pt-8 pb-16">
17 | 			<div class="relative z-10">
18 | 				<div class="container mx-auto">
19 | 					<div class="lg:flex lg:justify-between">
20 | 						<div class="lg:w-1/4 text-center lg:text-left">
21 | 							<div class="text-xl">
22 | 								<p class="text-sm">WP Tailwind is a utility-first starter theme for WordPress by <a href="https://www.freeshifter.com">Freeshifter LLC</a> and is totally free! <a href="https://www.github.com/freeshifter/wp-tailwind">Contribute on GitHub</a></a></p>
23 | 							</div>
24 | 						</div>
25 | 					</div>
26 | 				</div>
27 | 			</div>
28 | 		</footer>
29 | 		<?php wp_footer(); ?>
30 | 	</body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Kickoff theme setup and build
 4 |  */
 5 | 
 6 | namespace WP_Tailwind;
 7 | 
 8 | define( 'WP_Tailwind_VERSION', wp_get_theme()->version );
 9 | define( 'WP_Tailwind_DIR', __DIR__ );
10 | define( 'WP_Tailwind_URL', get_template_directory_uri() );
11 | 
12 | require_once( WP_Tailwind_DIR . '/vendor/autoload.php' );
13 | 
14 | \A7\autoload( __DIR__ . '/src' );
15 | 


--------------------------------------------------------------------------------
/header.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The header for our theme.
 4 |  *
 5 |  * This is the template that displays all of the <head> section and everything up until <div id="content">
 6 |  *
 7 |  * @link    https://developer.wordpress.org/themes/basics/template-files/#template-partials
 8 |  *
 9 |  * @package Freeshifter
10 |  */
11 | 
12 | namespace WP_Tailwind;
13 | 
14 | ?><!DOCTYPE html>
15 | <html <?php language_attributes(); ?>>
16 | <head>
17 | 	<meta charset="<?php bloginfo( 'charset' ); ?>">
18 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
19 | 	<link rel="profile" href="http://gmpg.org/xfn/11">
20 | 	<link rel="icon" type="image/png" href="<?= get_stylesheet_directory_uri() . '/assets/images/favicon.png'; ?>">
21 | 	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
22 | 	<?php wp_head(); ?>
23 | </head>
24 | 
25 | <body <?php body_class(); ?> itemscope itemtype="https://schema.org/WebPage">
26 | 
27 | 	<?php
28 | 	if ( has_nav_menu( 'primary' ) ) {
29 | 		wp_nav_menu( [
30 | 			'items_wrap'      => '<button class="toggle absolute pin-t pin-r mt-4 mr-4 button button-sm">Close</button><ul id="%1$s" class="%2$s">%3$s</ul>',
31 | 			'theme_location'  => 'primary',
32 | 			'container'       => 'nav',
33 | 			'container_class' => 'nav-mobile',
34 | 			'container_id'    => 'mobile-menu',
35 | 			'menu_class'      => 'list-reset m-12'
36 | 		] );
37 | 	}?>
38 | 
39 | 	<header class="header">
40 | 		<div class="container mx-auto">
41 | 			<?php
42 | 			$tag = 'p';
43 | 			if ( is_front_page() || is_home() ) {
44 | 				$tag = 'h1';
45 | 			}
46 | 
47 | 			printf( '<%1$s class="text-h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
48 | 				$tag,
49 | 				esc_url( home_url( '/' ) ),
50 | 				esc_html( get_bloginfo( 'name' ) )
51 | 			);
52 | 
53 | 			if ( has_nav_menu( 'primary' ) ) {
54 | 				wp_nav_menu([
55 | 					'theme_location'  => 'primary',
56 | 					'container'       => 'nav',
57 | 					'container_class' => 'nav-primary ml-auto',
58 | 					'menu_class'      => 'list-reset m-0 md:flex md:justify-end md:items-center'
59 | 				]);
60 | 			} ?>
61 | 			<div class="menu-item">
62 | 				<button class="toggle highlight">Menu</button>
63 | 			</div>
64 | 		</div>
65 | 	</header>
66 | 
67 | 	<main>


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * The default single page template.
 4 |  *
 5 |  * @author Freeshifter LLC
 6 |  * @since 1.0.0
 7 |  */
 8 | 
 9 | namespace WP_Tailwind;
10 | 
11 | get_header(); ?>
12 | 	<div class="container mx-auto relative z-10 mb-16 lg:mb-32 flex flex-wrap items-start">
13 | 		<div class="w-full lg:w-4/6 lg:pr-10 mb-8">
14 | 			<?php
15 | 			if ( have_posts() ) {
16 | 				while ( have_posts() ) {
17 | 					the_post();
18 | 					echo get_template_part( 'content-templates/content', 'article' );
19 | 				}
20 | 			} ?>
21 | 		</div>
22 | 		<?php
23 | 		if ( is_active_sidebar( 'sidebar' ) ) : ?>
24 | 			<aside class="w-full lg:w-2/6 bg-white border-gray-400 border-2 p-8">
25 | 				<?php dynamic_sidebar( 'sidebar' ); ?>
26 | 			</aside>
27 | 		<?php
28 | 		endif; ?>
29 | 	</div>
30 | 	<?php
31 | get_footer();
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "wp-tailwind-theme",
 3 | 	"version": "1.0.1",
 4 | 	"description": "WP Tailwind",
 5 | 	"main": "./assets/js/main.js",
 6 | 	"scripts": {
 7 | 		"start": "cross-env NODE_ENV=development SERVER=true webpack --watch",
 8 | 		"watch": "cross-env NODE_ENV=development webpack --watch",
 9 | 		"dev": "cross-env NODE_ENV=development webpack",
10 | 		"prod": "cross-env NODE_ENV=production webpack",
11 | 		"build": "concurrently \"npm run prod\" \"npm run dev\""
12 | 	},
13 | 	"devDependencies": {
14 | 		"@babel/core": "^7.10.5",
15 | 		"@babel/polyfill": "^7.10.4",
16 | 		"@babel/preset-env": "^7.10.4",
17 | 		"@fullhuman/postcss-purgecss": "^2.3.0",
18 | 		"autoprefixer": "^9.8.5",
19 | 		"babel-loader": "^8.1.0",
20 | 		"browser-sync": "^2.26.10",
21 | 		"browser-sync-webpack-plugin": "^2.2.2",
22 | 		"concurrently": "^5.2.0",
23 | 		"copy-webpack-plugin": "^6.0.3",
24 | 		"cross-env": "^7.0.2",
25 | 		"css-loader": "^3.6.0",
26 | 		"cssnano": "^4.1.10",
27 | 		"imagemin-webpack-plugin": "^2.4.2",
28 | 		"mini-css-extract-plugin": "^0.9.0",
29 | 		"postcss-loader": "^3.0.0",
30 | 		"resolve-url-loader": "^3.1.1",
31 | 		"style-loader": "^1.2.1",
32 | 		"tailwindcss": "^1.5.2",
33 | 		"uglifyjs-webpack-plugin": "^2.2.0",
34 | 		"webpack": "^4.43.0",
35 | 		"webpack-cli": "^3.3.12"
36 | 	},
37 | 	"dependencies": {
38 | 		"postcss-custom-properties": "^9.1.1",
39 | 		"postcss-import": "^12.0.1",
40 | 		"postcss-nested": "^4.2.3",
41 | 		"regenerator": "^0.14.7"
42 | 	},
43 | 	"browserslist": [
44 | 		"> 1%",
45 | 		"last 2 versions",
46 | 		"not ie <= 11"
47 | 	],
48 | 	"engines": {
49 | 		"node": ">=10.5.0",
50 | 		"npm": ">=6.4.1"
51 | 	},
52 | 	"author": "",
53 | 	"license": "ISC"
54 | }
55 | 


--------------------------------------------------------------------------------
/page-templates/page-sample.php:
--------------------------------------------------------------------------------
1 | <?php
2 | /**
3 |  * Nothing here, but where templates should go.
4 |  */


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cjkoepke/wp-tailwind/a230d6031dccb7502ffce4547b49fc3ecf70bcad/screenshot.png


--------------------------------------------------------------------------------
/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 Freeshifter
 8 |  */
 9 | 
10 | get_header(); ?>
11 | 
12 | <main class="py-8 lg:py-24" style="min-height: 100vh;">
13 | 	<section class="container mx-auto relative z-10">
14 | 		<?php
15 | 		if ( have_posts() ) :
16 | 
17 | 			printf( '<h1 class="text-center mb-8">Search Results for: %s</h1>',
18 | 				esc_html( get_search_query() )
19 | 			);
20 | 
21 | 			echo '<div class="lg:flex justify-start flex-wrap lg:-mx-4">';
22 | 				while ( have_posts() ) {
23 | 					the_post(); ?>
24 | 					<div class="lg:w-1/3 lg:px-4 mb-8">
25 | 						<article <?php post_class( 'h-full' ); ?> itemscope itemtype="https://schema.org/CreativeWork">
26 | 							<a class="card-link h-full bg-light-2" rel="bookmark" href="<?= esc_url( get_the_permalink() ); ?>">
27 | 								<header>
28 | 									<?php
29 | 									if( has_post_thumbnail() ) {
30 | 										the_post_thumbnail( 'thumbnail', [
31 | 											'class' => 'shadow-lg rounded-full float-right ml-2 mb-2 w-1/4'
32 | 										]);
33 | 									}
34 | 									?>
35 | 									<div class="text-left relative z-10">
36 | 										<h2 class="card-title text-h4 font-bold m-0" itemprop="headline"><?= get_the_title(); ?></h2>
37 | 										<p class="text-sm italic mt-2">
38 | 											<time class="<?= is_singular('page') ? 'hidden' : ''; ?>" itemprop="datePublished" datetime="<?= get_the_date( 'c' ); ?>">Published on <?= get_the_date( 'F j, Y'); ?></time>
39 | 										</p>
40 | 									</div>
41 | 								</header>
42 | 								<?php
43 | 								printf( '<div class="article text-sm text-left">%s</div>',
44 | 									get_the_excerpt()
45 | 								); ?>
46 | 							</a>
47 | 						</article>
48 | 					</div>
49 | 					<?php
50 | 				}
51 | 			echo '</div>';
52 | 
53 | 			the_posts_navigation();
54 | 
55 | 		else :
56 | 
57 | 			printf( 'Sorry, no results for %s',
58 | 				esc_html( get_search_query() )
59 | 			);
60 | 
61 | 		endif; ?>
62 | 	</section>
63 | </main>
64 | 
65 | <?php
66 | get_footer();
67 | 


--------------------------------------------------------------------------------
/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 Freeshifter
 8 |  */
 9 | 
10 | if ( ! is_active_sidebar( 'sidebar-1' ) ) {
11 | 	return;
12 | } ?>
13 | 
14 | <div class="widget-area" role="complementary">
15 | 	<?php dynamic_sidebar( 'sidebar-1' ); ?>
16 | </div><!-- #secondary -->
17 | 


--------------------------------------------------------------------------------
/src/classes.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * This file adds functions and actions for classes.
 4 |  *
 5 |  * @author Freeshifter LLC
 6 |  * @since 1.0.0
 7 |  */
 8 | 
 9 | namespace WP_Tailwind;
10 | 
11 | add_filter( 'body_class', function( $classes ) {
12 | 
13 | 	if ( is_singular( ['post', 'page'] ) ) {
14 | 		$classes[] = 'singular';
15 | 	}
16 | 
17 | 	if ( is_front_page() ) {
18 | 		$classes[] = 'front-page';
19 | 	}
20 | 
21 | 	return $classes;
22 | 
23 | });


--------------------------------------------------------------------------------
/src/enqueue.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace WP_Tailwind;
 4 | 
 5 | /**
 6 |  * Enqueue scripts and styles
 7 |  */
 8 | add_action( 'wp_enqueue_scripts', function() {
 9 | 
10 | 	$min_ext = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
11 | 
12 | 	// JS
13 | 	wp_enqueue_script(
14 | 		'wp_tailwind_js',
15 | 		WP_Tailwind_URL . "/dist/main{$min_ext}.js",
16 | 		[],
17 | 		WP_Tailwind_VERSION,
18 | 		true
19 | 	);
20 | 
21 | 	// CSS
22 | 	wp_enqueue_style(
23 | 		'wp_tailwind_css',
24 | 		WP_Tailwind_URL . "/dist/main{$min_ext}.css",
25 | 		[],
26 | 		WP_Tailwind_VERSION,
27 | 		''
28 | 	);
29 | 
30 | } );


--------------------------------------------------------------------------------
/src/setup.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace WP_Tailwind;
 4 | 
 5 | /**
 6 |  * Set up theme defaults and registers support for various WordPress features.
 7 |  *
 8 |  * @author Freeshifter LLC
 9 |  * @since 1.0.0
10 |  */
11 | add_action( 'after_setup_theme', function () {
12 | 
13 | 	// Add default posts and comments RSS feed links to head.
14 | 	add_theme_support( 'automatic-feed-links' );
15 | 
16 | 	// Let WordPress manage the document title.
17 | 	add_theme_support( 'title-tag' );
18 | 
19 | 	// Enable support for Post Thumbnails on posts and pages.
20 | 	add_theme_support( 'post-thumbnails' );
21 | 
22 | 	// This theme uses wp_nav_menu() in one location.
23 | 	register_nav_menus( [
24 | 		'primary' => __( 'Primary Menu', 'wp-tailwind' ),
25 | 		'footer'  => __( 'Footer Menu', 'wp-tailwind' ),
26 | 	] );
27 | 
28 | 	// Switch default core markup for search form, comment form, and comments to output valid HTML5.
29 | 	add_theme_support( 'html5', [
30 | 		'search-form',
31 | 		'comment-form',
32 | 		'comment-list',
33 | 		'gallery',
34 | 		'caption',
35 | 	] );
36 | 	
37 | } );


--------------------------------------------------------------------------------
/src/sidebars.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace WP_Tailwind;
 4 | 
 5 | /**
 6 |  * Register widget area.
 7 |  */
 8 | add_action( 'widgets_init', function () {
 9 | 
10 | 	register_sidebar( [
11 | 		'name'          => esc_html( 'Sidebar' ),
12 | 		'id'            => 'sidebar',
13 | 		'description'   => '',
14 | 		'before_widget' => '<section id="%1$s" class="widget %2$s">',
15 | 		'after_widget'  => '</section>',
16 | 		'before_title'  => '<h4 class="widget-title">',
17 | 		'after_title'   => '</h4>',
18 | 	] );
19 | 
20 | } );


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Theme Name: WP Tailwind
 3 |  * Theme URI: https://github.com/freeshifter/wp-tailwind
 4 |  * Author: Freeshifter LLC
 5 |  * Author URI: https://www.freeshifter.com
 6 |  * Version: 1.0.0
 7 |  * License: GNU General Public License v2 or later
 8 |  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 9 |  * Text Domain: wp-tailwind
10 |  */
11 | 


--------------------------------------------------------------------------------
/tailwind.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 | 	prefix: '',
  3 | 	important: false,
  4 | 	separator: ':',
  5 | 	theme: {
  6 | 		screens: {
  7 | 			sm: '640px',
  8 | 			md: '768px',
  9 | 			lg: '1024px',
 10 | 			xl: '1280px',
 11 | 			retina: {
 12 | 				'min-resolution': '192dpi'
 13 | 			}
 14 | 		},
 15 | 		colors: {
 16 | 			transparent: 'transparent',
 17 | 
 18 | 			black: '#000',
 19 | 			white: '#fff',
 20 | 
 21 | 			gray: {
 22 | 				100: '#f7fafc',
 23 | 				200: '#edf2f7',
 24 | 				300: '#e2e8f0',
 25 | 				400: '#cbd5e0',
 26 | 				500: '#a0aec0',
 27 | 				600: '#718096',
 28 | 				700: '#4a5568',
 29 | 				800: '#2d3748',
 30 | 				900: '#1a202c',
 31 | 			},
 32 | 			primary: {
 33 | 				100: '#DB3A34',
 34 | 				200: '#CC3630'
 35 | 			}
 36 | 		},
 37 | 		spacing: {
 38 | 			px: '1px',
 39 | 			'0': '0',
 40 | 			'1': '0.25rem',
 41 | 			'2': '0.5rem',
 42 | 			'3': '0.75rem',
 43 | 			'4': '1rem',
 44 | 			'5': '1.25rem',
 45 | 			'6': '1.5rem',
 46 | 			'8': '2rem',
 47 | 			'10': '2.5rem',
 48 | 			'12': '3rem',
 49 | 			'16': '4rem',
 50 | 			'20': '5rem',
 51 | 			'24': '6rem',
 52 | 			'32': '8rem',
 53 | 			'40': '10rem',
 54 | 			'48': '12rem',
 55 | 			'56': '14rem',
 56 | 			'64': '16rem',
 57 | 		},
 58 | 		backgroundColor: theme => theme('colors'),
 59 | 		backgroundPosition: {
 60 | 			bottom: 'bottom',
 61 | 			center: 'center',
 62 | 			left: 'left',
 63 | 			'left-bottom': 'left bottom',
 64 | 			'left-top': 'left top',
 65 | 			right: 'right',
 66 | 			'right-bottom': 'right bottom',
 67 | 			'right-top': 'right top',
 68 | 			top: 'top',
 69 | 		},
 70 | 		backgroundSize: {
 71 | 			auto: 'auto',
 72 | 			cover: 'cover',
 73 | 			contain: 'contain',
 74 | 		},
 75 | 		borderColor: theme => ({
 76 | 			...theme('colors'),
 77 | 			default: theme('colors.gray.300', 'currentColor'),
 78 | 		}),
 79 | 		borderRadius: {
 80 | 			none: '0',
 81 | 			sm: '0.125rem',
 82 | 			default: '0.25rem',
 83 | 			lg: '0.5rem',
 84 | 			full: '9999px',
 85 | 		},
 86 | 		borderWidth: {
 87 | 			default: '1px',
 88 | 			'0': '0',
 89 | 			'2': '2px',
 90 | 			'4': '4px',
 91 | 			'8': '8px',
 92 | 		},
 93 | 		boxShadow: {
 94 | 			default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
 95 | 			md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
 96 | 			lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
 97 | 			xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
 98 | 			'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
 99 | 			inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
100 | 			outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
101 | 			none: 'none',
102 | 		},
103 | 		container: {},
104 | 		cursor: {
105 | 			auto: 'auto',
106 | 			default: 'default',
107 | 			pointer: 'pointer',
108 | 			wait: 'wait',
109 | 			text: 'text',
110 | 			move: 'move',
111 | 			'not-allowed': 'not-allowed',
112 | 		},
113 | 		fill: {
114 | 			current: 'currentColor',
115 | 		},
116 | 		flex: {
117 | 			'1': '1 1 0%',
118 | 			auto: '1 1 auto',
119 | 			initial: '0 1 auto',
120 | 			none: 'none',
121 | 		},
122 | 		flexGrow: {
123 | 			'0': '0',
124 | 			default: '1',
125 | 		},
126 | 		flexShrink: {
127 | 			'0': '0',
128 | 			default: '1',
129 | 		},
130 | 		fontFamily: {
131 | 			sans: [
132 | 				'-apple-system',
133 | 				'BlinkMacSystemFont',
134 | 				'"Segoe UI"',
135 | 				'Roboto',
136 | 				'"Helvetica Neue"',
137 | 				'Arial',
138 | 				'"Noto Sans"',
139 | 				'sans-serif',
140 | 				'"Apple Color Emoji"',
141 | 				'"Segoe UI Emoji"',
142 | 				'"Segoe UI Symbol"',
143 | 				'"Noto Color Emoji"',
144 | 			],
145 | 			serif: [
146 | 				'Georgia',
147 | 				'Cambria',
148 | 				'"Times New Roman"',
149 | 				'Times',
150 | 				'serif',
151 | 			],
152 | 			mono: [
153 | 				'Menlo',
154 | 				'Monaco',
155 | 				'Consolas',
156 | 				'"Liberation Mono"',
157 | 				'"Courier New"',
158 | 				'monospace',
159 | 			],
160 | 		},
161 | 		fontSize: {
162 | 			xs: '0.75rem',
163 | 			sm: '0.875rem',
164 | 			base: '1rem',
165 | 			lg: '1.125rem',
166 | 			xl: '1.25rem',
167 | 			'2xl': '1.5rem',
168 | 			'3xl': '1.875rem',
169 | 			'4xl': '2.25rem',
170 | 			'5xl': '3rem',
171 | 			'6xl': '4rem',
172 | 		},
173 | 		fontWeight: {
174 | 			hairline: '100',
175 | 			thin: '200',
176 | 			light: '300',
177 | 			normal: '400',
178 | 			medium: '500',
179 | 			semibold: '600',
180 | 			bold: '700',
181 | 			extrabold: '800',
182 | 			black: '900',
183 | 		},
184 | 		height: theme => ({
185 | 			auto: 'auto',
186 | 			...theme('spacing'),
187 | 			full: '100%',
188 | 			screen: '100vh',
189 | 		}),
190 | 		inset: {
191 | 			'0': '0',
192 | 			auto: 'auto',
193 | 		},
194 | 		letterSpacing: {
195 | 			tighter: '-0.05em',
196 | 			tight: '-0.025em',
197 | 			normal: '0',
198 | 			wide: '0.025em',
199 | 			wider: '0.05em',
200 | 			widest: '0.1em',
201 | 		},
202 | 		lineHeight: {
203 | 			none: '1',
204 | 			tight: '1.25',
205 | 			snug: '1.375',
206 | 			normal: '1.5',
207 | 			relaxed: '1.625',
208 | 			loose: '2',
209 | 		},
210 | 		listStyleType: {
211 | 			none: 'none',
212 | 			disc: 'disc',
213 | 			decimal: 'decimal',
214 | 		},
215 | 		margin: (theme, { negative }) => ({
216 | 			auto: 'auto',
217 | 			...theme('spacing'),
218 | 			...negative(theme('spacing')),
219 | 		}),
220 | 		maxHeight: {
221 | 			full: '100%',
222 | 			screen: '100vh',
223 | 		},
224 | 		maxWidth: {
225 | 			xs: '20rem',
226 | 			sm: '24rem',
227 | 			md: '28rem',
228 | 			lg: '32rem',
229 | 			xl: '36rem',
230 | 			'2xl': '42rem',
231 | 			'3xl': '48rem',
232 | 			'4xl': '56rem',
233 | 			'5xl': '64rem',
234 | 			'6xl': '72rem',
235 | 			full: '100%',
236 | 		},
237 | 		minHeight: {
238 | 			'0': '0',
239 | 			full: '100%',
240 | 			screen: '100vh',
241 | 		},
242 | 		minWidth: {
243 | 			'0': '0',
244 | 			full: '100%',
245 | 		},
246 | 		objectPosition: {
247 | 			bottom: 'bottom',
248 | 			center: 'center',
249 | 			left: 'left',
250 | 			'left-bottom': 'left bottom',
251 | 			'left-top': 'left top',
252 | 			right: 'right',
253 | 			'right-bottom': 'right bottom',
254 | 			'right-top': 'right top',
255 | 			top: 'top',
256 | 		},
257 | 		opacity: {
258 | 			'0': '0',
259 | 			'25': '0.25',
260 | 			'50': '0.5',
261 | 			'75': '0.75',
262 | 			'100': '1',
263 | 		},
264 | 		order: {
265 | 			first: '-9999',
266 | 			last: '9999',
267 | 			none: '0',
268 | 			'1': '1',
269 | 			'2': '2',
270 | 			'3': '3',
271 | 			'4': '4',
272 | 			'5': '5',
273 | 			'6': '6',
274 | 			'7': '7',
275 | 			'8': '8',
276 | 			'9': '9',
277 | 			'10': '10',
278 | 			'11': '11',
279 | 			'12': '12',
280 | 		},
281 | 		padding: theme => theme('spacing'),
282 | 		stroke: {
283 | 			current: 'currentColor',
284 | 		},
285 | 		textColor: theme => theme('colors'),
286 | 		width: theme => ({
287 | 			auto: 'auto',
288 | 			...theme('spacing'),
289 | 			'1/2': '50%',
290 | 			'1/3': '33.33333%',
291 | 			'2/3': '66.66667%',
292 | 			'1/4': '25%',
293 | 			'2/4': '50%',
294 | 			'3/4': '75%',
295 | 			'1/5': '20%',
296 | 			'2/5': '40%',
297 | 			'3/5': '60%',
298 | 			'4/5': '80%',
299 | 			'1/6': '16.66667%',
300 | 			'2/6': '33.33333%',
301 | 			'3/6': '50%',
302 | 			'4/6': '66.66667%',
303 | 			'5/6': '83.33333%',
304 | 			'1/12': '8.33333%',
305 | 			'2/12': '16.66667%',
306 | 			'3/12': '25%',
307 | 			'4/12': '33.33333%',
308 | 			'5/12': '41.66667%',
309 | 			'6/12': '50%',
310 | 			'7/12': '58.33333%',
311 | 			'8/12': '66.66667%',
312 | 			'9/12': '75%',
313 | 			'10/12': '83.33333%',
314 | 			'11/12': '91.66667%',
315 | 			full: '100%',
316 | 			screen: '100vw',
317 | 		}),
318 | 		zIndex: {
319 | 			auto: 'auto',
320 | 			'0': '0',
321 | 			'10': '10',
322 | 			'20': '20',
323 | 			'30': '30',
324 | 			'40': '40',
325 | 			'50': '50',
326 | 		},
327 | 	},
328 | 	variants: {
329 | 		alignContent: ['responsive'],
330 | 		alignItems: ['responsive'],
331 | 		alignSelf: ['responsive'],
332 | 		appearance: ['responsive'],
333 | 		backgroundAttachment: ['responsive'],
334 | 		backgroundColor: ['responsive', 'hover', 'focus'],
335 | 		backgroundPosition: ['responsive'],
336 | 		backgroundRepeat: ['responsive'],
337 | 		backgroundSize: ['responsive'],
338 | 		borderCollapse: ['responsive'],
339 | 		borderColor: ['responsive', 'hover', 'focus'],
340 | 		borderRadius: ['responsive'],
341 | 		borderStyle: ['responsive'],
342 | 		borderWidth: ['responsive'],
343 | 		boxShadow: ['responsive', 'hover', 'focus'],
344 | 		cursor: ['responsive'],
345 | 		display: ['responsive'],
346 | 		fill: ['responsive'],
347 | 		flex: ['responsive'],
348 | 		flexDirection: ['responsive'],
349 | 		flexGrow: ['responsive'],
350 | 		flexShrink: ['responsive'],
351 | 		flexWrap: ['responsive'],
352 | 		float: ['responsive'],
353 | 		fontFamily: ['responsive'],
354 | 		fontSize: ['responsive'],
355 | 		fontSmoothing: ['responsive'],
356 | 		fontStyle: ['responsive'],
357 | 		fontWeight: ['responsive', 'hover', 'focus'],
358 | 		height: ['responsive'],
359 | 		inset: ['responsive'],
360 | 		justifyContent: ['responsive'],
361 | 		letterSpacing: ['responsive'],
362 | 		lineHeight: ['responsive'],
363 | 		listStylePosition: ['responsive'],
364 | 		listStyleType: ['responsive'],
365 | 		margin: ['responsive'],
366 | 		maxHeight: ['responsive'],
367 | 		maxWidth: ['responsive'],
368 | 		minHeight: ['responsive'],
369 | 		minWidth: ['responsive'],
370 | 		objectFit: ['responsive'],
371 | 		objectPosition: ['responsive'],
372 | 		opacity: ['responsive'],
373 | 		order: ['responsive'],
374 | 		outline: ['responsive', 'focus'],
375 | 		overflow: ['responsive'],
376 | 		padding: ['responsive'],
377 | 		pointerEvents: ['responsive'],
378 | 		position: ['responsive'],
379 | 		resize: ['responsive'],
380 | 		stroke: ['responsive'],
381 | 		tableLayout: ['responsive'],
382 | 		textAlign: ['responsive'],
383 | 		textColor: ['responsive', 'hover', 'focus'],
384 | 		textDecoration: ['responsive', 'hover', 'focus'],
385 | 		textTransform: ['responsive'],
386 | 		userSelect: ['responsive'],
387 | 		verticalAlign: ['responsive'],
388 | 		visibility: ['responsive'],
389 | 		whitespace: ['responsive'],
390 | 		width: ['responsive'],
391 | 		wordBreak: ['responsive'],
392 | 		zIndex: ['responsive'],
393 | 	},
394 | 	corePlugins: {},
395 | 	plugins: [],
396 | }


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const path                 = require('path');
  2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  3 | const CopyWebpackPlugin    = require('copy-webpack-plugin');
  4 | const ImageminPlugin       = require('imagemin-webpack-plugin').default;
  5 | const BrowserSyncPlugin    = require('browser-sync-webpack-plugin');
  6 | const PurgeCSS             = require('@fullhuman/postcss-purgecss');
  7 | const UglifyJsPlugin       = require("uglifyjs-webpack-plugin");
  8 | const isProduction         = 'production' === process.env.NODE_ENV;
  9 | 
 10 | // Set the build prefix.
 11 | let prefix = isProduction ? '.min' : '';
 12 | 
 13 | // Set the PostCSS Plugins.
 14 | const post_css_plugins = [
 15 | 	require('postcss-import'),
 16 | 	require('tailwindcss')('./tailwind.js'),
 17 | 	require('postcss-nested'),
 18 | 	require('postcss-custom-properties'),
 19 | 	require('autoprefixer')
 20 | ]
 21 | 
 22 | // Add PurgeCSS for production builds.
 23 | if ( isProduction ) {
 24 | 	post_css_plugins.push(require('cssnano'));
 25 | 	post_css_plugins.push(
 26 | 		PurgeCSS({
 27 | 			content: [
 28 | 				'./*.php',
 29 | 				'./src/**/*.php',
 30 | 				'./page-templates/*.php',
 31 | 				'./assets/images/**/*.svg',
 32 | 				'./assets/scss/whitelist/*.css',
 33 | 				'./../../mu-plugins/app/src/components/**/*.php',
 34 | 			],
 35 | 			css: [
 36 | 				'./node_modules/tailwindcss/dist/base.css'
 37 | 			],
 38 | 			// Use Extractor configuration from Tailwind Docs
 39 | 			// https://tailwindcss.com/docs/controlling-file-size#setting-up-purge-css-manually
 40 | 			defaultExtractor: content => {
 41 |     				// Capture as liberally as possible, including things like `h-(screen-1.5)`
 42 |     				const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
 43 | 
 44 |     				// Capture classes within other delimiters like .block(class="w-1/2") in Pug
 45 |     				const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
 46 | 
 47 |     				return broadMatches.concat(innerMatches)
 48 |   			},
 49 | 			whitelistPatterns: getCSSWhitelistPatterns()
 50 | 		})
 51 | 	)
 52 | }
 53 | 
 54 | const config = {
 55 | 	entry: './assets/js/main.js',
 56 | 	optimization: {
 57 | 		minimizer: [
 58 | 			new UglifyJsPlugin({
 59 | 				cache: true,
 60 | 				parallel: true,
 61 | 				sourceMap: true
 62 | 			})
 63 | 		]
 64 | 	},
 65 | 	output: {
 66 | 		filename: `[name]${prefix}.js`,
 67 | 		path: path.resolve(__dirname, 'dist')
 68 | 	},
 69 | 	mode: process.env.NODE_ENV,
 70 | 	module: {
 71 | 		rules: [
 72 | 			{
 73 | 				test: /\.js$/,
 74 | 				loader: 'babel-loader',
 75 | 				options: {
 76 | 					presets: [
 77 | 						[
 78 | 							"@babel/preset-env"
 79 | 						]
 80 | 					]
 81 | 				}
 82 | 			},
 83 | 			{
 84 | 				test: /\.css$/,
 85 | 				use: [
 86 | 					MiniCssExtractPlugin.loader,
 87 | 					{
 88 | 						loader: 'css-loader',
 89 | 						options: {
 90 | 							importLoaders: 1,
 91 | 							sourceMap: ! isProduction
 92 | 						}
 93 | 					},
 94 | 					{
 95 | 						loader: 'postcss-loader',
 96 | 						options: {
 97 | 							ident: 'postcss',
 98 | 							sourceMap: isProduction || 'inline',
 99 | 							plugins: post_css_plugins,
100 | 						},
101 | 					}
102 | 				],
103 | 			}
104 | 		]
105 | 	},
106 | 	resolve: {
107 | 		alias: {
108 | 			'@'      : path.resolve('assets'),
109 | 			'@images': path.resolve('../images')
110 | 		}
111 | 	},
112 | 	plugins: [
113 | 		new MiniCssExtractPlugin({
114 | 			filename: `[name]${prefix}.css`,
115 | 		}),
116 | 		new CopyWebpackPlugin({
117 | 			patterns: [{
118 |                         	from: './assets/images/',
119 |                         	to: 'images',
120 | 				globOptions: {
121 | 					ignore: [
122 | 						'**/.DS_Store'
123 | 					]
124 | 				}
125 | 			}]
126 | 		}),
127 | 		new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
128 | 	]
129 | }
130 | 
131 | // Fire up a local server if requested
132 | if (process.env.SERVER) {
133 | 	config.plugins.push(
134 | 		new BrowserSyncPlugin(
135 | 			{
136 | 				proxy: 'https://example.dev',
137 | 				files: [
138 | 					'**/*.php',
139 | 					'**/*.scss'
140 | 				],
141 | 				port: 3000,
142 | 				notify: false,
143 | 			}
144 | 		)
145 | 	)
146 | }
147 | 
148 | /**
149 |  * List of RegExp patterns for PurgeCSS
150 |  * @returns {RegExp[]}
151 |  */
152 | function getCSSWhitelistPatterns() {
153 | 	return [
154 | 		/^home(-.*)?$/,
155 | 		/^blog(-.*)?$/,
156 | 		/^archive(-.*)?$/,
157 | 		/^date(-.*)?$/,
158 | 		/^error404(-.*)?$/,
159 | 		/^admin-bar(-.*)?$/,
160 | 		/^search(-.*)?$/,
161 | 		/^nav(-.*)?$/,
162 | 		/^wp(-.*)?$/,
163 | 		/^screen(-.*)?$/,
164 | 		/^navigation(-.*)?$/,
165 | 		/^(.*)-template(-.*)?$/,
166 | 		/^(.*)?-?single(-.*)?$/,
167 | 		/^postid-(.*)?$/,
168 | 		/^post-(.*)?$/,
169 | 		/^attachmentid-(.*)?$/,
170 | 		/^attachment(-.*)?$/,
171 | 		/^page(-.*)?$/,
172 | 		/^(post-type-)?archive(-.*)?$/,
173 | 		/^author(-.*)?$/,
174 | 		/^category(-.*)?$/,
175 | 		/^tag(-.*)?$/,
176 | 		/^menu(-.*)?$/,
177 | 		/^tags(-.*)?$/,
178 | 		/^tax-(.*)?$/,
179 | 		/^term-(.*)?$/,
180 | 		/^date-(.*)?$/,
181 | 		/^(.*)?-?paged(-.*)?$/,
182 | 		/^depth(-.*)?$/,
183 | 		/^children(-.*)?$/,
184 | 	];
185 | }
186 | 
187 | module.exports = config
188 | 


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