Merge pull request #86 from BeAPI/feature/better-gut-ux

Feature/better gut ux

Author: Cocola

inc/services/theme.php

@@ -52,6 +52,10 @@ public function after_setup_theme() {
 	 */
 	private function add_theme_supports() {
 		// Add the theme support basic elements
+		add_theme_support( 'align-wide' );
+		add_theme_support( 'responsive-embeds' );
+		add_theme_support( 'editor-styles' );
+		add_theme_support( 'wp-block-styles' );
 		add_theme_support( 'post-thumbnails' );
 		add_theme_support( 'html5', [ 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'script', 'style' ] );
 		add_theme_support( 'title-tag' );

index.php

@@ -1,8 +1,10 @@
 <?php get_header(); ?>
 <div class="container">
-<?php while ( have_posts() ) {
-	the_post();
-	the_content();
-} ?>
+	<div class="wysiwyg">
+		<?php while ( have_posts() ) {
+			the_post();
+			the_content();
+		} ?>
+	</div>
 </div>
 <?php get_footer(); ?>

src/img/sample/placeholder.jpg

@@ -11,7 +11,6 @@ import 'lazysizes/plugins/native-loading/ls.native-loading'
 
 import './src/menu'
 import './src/button-href'
-import './src/wrapper'
 
 /**
  * LazySizes configuration

src/js/app.js

@@ -28,7 +28,7 @@ $darkcolor: #000;
 /**
  * Grey colors
  */
-$maingrey: #ddd;
+$maingrey: #888;
 $dark-gray: #333;
 $medium-gray: #999;
 $light-gray: #ddd;

src/js/src/wrapper.js

@@ -248,4 +248,81 @@
         backface-visibility: hidden;
     }
     perspective: $perspective;
+}
+
+//List mixins
+@mixin wysiwyg__list($type: ul) {
+	padding-left: 0;
+	margin: $base-spacing 0 $base-spacing $half-base-spacing;
+
+	#{$type} {
+		margin-top: $half-base-spacing;
+		margin-bottom: $half-base-spacing;
+	}
+
+	li {
+		margin: 0 0 $half-base-spacing;
+	}
+
+	@if $type == ul {
+		list-style: disc inside none;
+	}
+
+	@if $type == ol {
+		list-style: decimal inside none;
+	}
+}
+
+//Title mixins
+@mixin title($size: md) {
+	font-weight: 700;
+	line-height: $heading-line-height;
+	font-family: $customfont-2;
+
+	.fonts-loading & {
+		font-family: $font-sansserif;
+	}
+
+	@if $size == XXL {
+		font-size: 40px;
+
+		@include breakpoints(sm) {
+			font-size: 40px*1.5;
+		}
+	}
+	@if $size == XL {
+		font-size: 36px;
+
+		@include breakpoints(sm) {
+			font-size: 36px*1.5;
+		}
+	}
+	@if $size == L {
+		font-size: 32px;
+
+		@include breakpoints(sm) {
+			font-size: 32px*1.5;
+		}
+	}
+	@if $size == M {
+		font-size: 28px;
+
+		@include breakpoints(sm) {
+			font-size: 28px*1.5;
+		}
+	}
+	@if $size == S {
+		font-size: 24px;
+
+		@include breakpoints(sm) {
+			font-size: 24px*1.5;
+		}
+	}
+	@if $size == XS {
+		font-size: 20px;
+
+		@include breakpoints(sm) {
+			font-size: 20*1.5;
+		}
+	}
 }

src/scss/abstract/_colors.scss

@@ -6,7 +6,7 @@ $zindex: 1;
 /**
  * Spacing
  */
-$base-spacing: 20px;
+$base-spacing: 32px;
 $half-base-spacing: $base-spacing / 2;
 
 /**

src/scss/abstract/_mixins.scss

@@ -18,12 +18,4 @@
 	.container {
 		padding: 0;
 	}
-
-	.content {
-		@include span(9);
-	}
-
-	.sidebar {
-		@include span(3 last);
-	}
 }

src/scss/abstract/_positioning.scss

@@ -48,16 +48,28 @@ a {
 
 /* Headings
 ----------------------------------------------------------------------------------------------------*/
-@for $i from 1 through 6 {
-	h#{$i} {
-		line-height: $heading-line-height;
-		font-size: $heading-font-size - ($i - 1) * 2px;
-		font-family: $customfont-2;
-
-		.fonts-loading & {
-			font-family: $font-sansserif;
-		}
-	}
+h1 {
+	@include title(XXL);
+}
+
+h2 {
+	@include title(XL);
+}
+
+h3 {
+	@include title(L);
+}
+
+h4 {
+	@include title(M);
+}
+
+h5 {
+	@include title(S);
+}
+
+h6 {
+	@include title(XS);
 }
 
 /* Lists
@@ -97,20 +109,13 @@ figure {
 ----------------------------------------------------------------------------------------------------*/
 hr {
 	clear: both;
-	border: 0;
-	height: 1px;
-	background: $maingrey;
 	margin: $base-spacing 0;
 }
 blockquote {
-	border-left: 5px solid $maingrey;
 	padding: $base-spacing;
 	margin: 0 0 $base-spacing 0;
 	-ms-word-wrap: break-word;
 	word-wrap: break-word;
-	p:last-child {
-		margin: 0;
-	}
 }
 cite {
 	font-style: italic;
@@ -121,23 +126,13 @@ small {
 table {
 	margin: $base-spacing 0;
 	width: 100%;
-	border: $base-border;
+	border: 0;
 	border-collapse: collapse;
-	border-left: 0;
-	border-radius: $base-border-radius;
-
-	th {
-		padding: $half-base-spacing;
-		border-left: 1px solid $base-border-color;
-		border-top: 0;
-		vertical-align: top;
-		text-align: left;
-	}
 
+	th,
 	td {
 		padding: $half-base-spacing;
-		border-top: 1px solid $base-border-color;
-		border-left: 1px solid $base-border-color;
+		border: 1px solid $base-border-color;
 		vertical-align: top;
 		text-align: left;
 	}
@@ -166,7 +161,7 @@ big {
 code {
 	display: inline-block;
 	padding: 2px 5px;
-	background-color: $maingrey;
+	background-color: $light-gray;
 	border: 1px solid $darkcolor;
 	font-family: monospace;
 	font-size: $base-fz;
@@ -202,7 +197,7 @@ pre {
 	@include word-wrap(break-all);
 
 	white-space: pre-wrap;
-	background-color: $maingrey;
+	background-color: $light-gray;
 	border: 1px solid $darkcolor;
 	border-radius: $base-border-radius;
 }