Refactor SCSS architecture

sass/css/editor/gutenberg.scss

@@ -1,9 +1,9 @@
 /*--------------------------------------------------------------
 # Variables
 --------------------------------------------------------------*/
-@import "../../abstracts/variables/colors";
-@import "../../abstracts/variables/typography";
-@import "../../abstracts/mixins/mixins";
+@import "../../variables/colors";
+@import "../../variables/typography";
+@import "../../variables/mixins";
 
 /* Fonts for gutenberg */ 
 @font-face {
@@ -82,10 +82,11 @@ body .editor-styles-wrapper{
 	/*--------------------------------------------------------------
 	# Elements
 	--------------------------------------------------------------*/
-	@import "../../base/elements/buttons";
-	@import "../../base/elements/links";
-	@import "../../base/elements/lists";
-	@import "../../base/elements/media";
+	@import "../../elements/buttons";
+	@import "../../elements/links";
+	@import "../../elements/lists";
+	@import "../../elements/media";
+	@import "../../elements/copy";
 
 	/*--------------------------------------------------------------
 	# Typography
@@ -96,18 +97,15 @@ body .editor-styles-wrapper{
 	font-size: 1rem;
 	line-height: $font__line-height-body;
 
-	@import "../../base/typography/copy";
-	@import "../../base/typography/headings";
-
 
 	/*--------------------------------------------------------------
 	# Media
 	--------------------------------------------------------------*/
 
-	@import "../../components/media/captions";
-	@import "../../components/media/galleries";
-	@import "../../components/media/media";
-	@import "../../components/media/screen-array";
+	@import "../../patterns/captions";
+	@import "../../patterns/galleries";
+	@import "../../patterns/media";
+	@import "../../patterns/screen-array";
 
 	.screen-array li {
 		background: linear-gradient(to left, #000, #858686, #000);
@@ -137,11 +135,7 @@ body .editor-styles-wrapper{
 
 	/* Normalize
 	--------------------------------------------- */
-	@import "../../generic/normalize";
-
-	/* Box sizing
-	--------------------------------------------- */
-	@import "../../generic/box-sizing";
+	@import "../../misc/normalize";
 
 
 	/*--------------------------------------------------------------
@@ -166,6 +160,6 @@ body .editor-styles-wrapper{
 
 	/* WP-Core Utilities
 	--------------------------------------------- */
-	@import "../../components/content/posts-and-pages";
+	@import "../../structure/content";
 
 }

sass/base/typography/_copy.scss → sass/elements/_copy.scss

@@ -69,6 +69,22 @@ blockquote {
 	}
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	clear: both;
+	font-family: $font__bold;
+	color: $color__accent;
+
+	a {
+		text-decoration: none;
+	}
+}
+
+
 address {
 	margin: 0 0 1.5em;
 }

sass/generic/_normalize.scss → sass/misc/_normalize.scss

@@ -73,6 +73,18 @@ pre {
  * Remove the gray background on active links in IE 10.
  */
 
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+}
+
 a {
 	background-color: transparent;
 }

sass/base/elements/_body.scss → sass/structure/_body.scss

@@ -2,6 +2,18 @@ body {
 	background: $color__background-body; // Fallback for when there is no custom background color defined.
 }
 
+body,
+button,
+input,
+select,
+optgroup,
+textarea {
+	color: $color__text-main;
+	font-family: $font__main;
+	font-size: 1rem;
+	line-height: $font__line-height-body;
+}
+
 *:focus {
 	outline: 2px dotted $color__accent;
 	outline-offset: 1px;

sass/components/content/_posts-and-pages.scss → sass/structure/_content.scss

@@ -86,3 +86,12 @@ main.homepage::after {
 	background: -o-linear-gradient(270deg, rgba(255,255,255,0) 0%, $color__background-body 100%);	
     pointer-events: none;
 }
+
+//comments
+.comment-content a {
+	word-wrap: break-word;
+}
+
+.bypostauthor {
+	display: block;
+}