diff --git a/readme.txt b/readme.txt
index a41aa810..badc7104 100644
--- a/readme.txt
+++ b/readme.txt
@@ -11,26 +11,23 @@ License URI: LICENSE
A starter theme called pixelsbretzels.
-== Description ==
+== Workflow Git ==
+
+- je me positionne sur develop (git checkout develop)
+- Je créer une branch basée sur develop (git branch feature/project-init)
+- Je me positionne sur cette nouvelle branch (git checkout feature/project-init)
+- Je fais les modifications, concernant l’initialisation technique (ajout des fichiers de base, ajout de la structure de fichier scss, ajout des dossiers d’aoutput des styles et de js)
+- Je commit et pousse sur le repo (git commit -m"J'ai cassé internet" && push)
+- Une fois que j’ai poussé toutes mes modifs, je récupère le lien de PR que retourne la console et je complète le descriptif de cette PR (je fais attention à la branch de destination qui doit rester develop pour l’instant), puis j’ajoute toute l’équipe en reviewer pour obtenir au moins une à deux validations des co-équipiers.
+Une fois les malidations obtenues, je merge la branch dans develop :
+- Je me positionne sur develop: git checkout develop
+- Je merge la branche : git merge feature/project-init
+- Je supprime la branche git branch -d feature/project (on oublie pas de vérifier avant si les changements sont visibles sur le site :clin_d'œil: )
+- On pousse sur le repo la version à jour de develop (git push)
+- J’ouvre une :bière: et je fête ce nouvel ajout de qualité
+----
+Une bonne resource : https://www.atlassian.com/git/tutorials/syncing (modifié)
-Description
-
-== Installation ==
-
-1. In your admin panel, go to Appearance > Themes and click the Add New button.
-2. Click Upload Theme and Choose File, then select the theme's .zip file. Click Install Now.
-3. Click Activate to use your new theme right away.
-
-== Frequently Asked Questions ==
-
-= Does this theme support any plugins? =
-
-pixelsbretzels includes support for Infinite Scroll in Jetpack.
-
-== Changelog ==
-
-= 1.0 - May 12 2015 =
-* Initial release
== Credits ==
diff --git a/sass/_normalize.scss b/sass/_normalize.scss
new file mode 100755
index 00000000..c5ad67a1
--- /dev/null
+++ b/sass/_normalize.scss
@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
diff --git a/sass/elements/_elements.scss b/sass/elements/_elements.scss
new file mode 100755
index 00000000..2f688149
--- /dev/null
+++ b/sass/elements/_elements.scss
@@ -0,0 +1,33 @@
+html {
+ box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+ box-sizing: inherit;
+}
+
+body {
+ background: $color__background-body; /* Fallback for when there is no custom background color defined. */
+}
+
+hr {
+ background-color: $color__background-hr;
+ border: 0;
+ height: 1px;
+ margin-bottom: 1.5em;
+}
+
+@import "lists";
+
+img {
+ height: auto; /* Make sure images are scaled correctly. */
+ max-width: 100%; /* Adhere to container width. */
+}
+
+figure {
+ margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */
+}
+
+@import "tables";
diff --git a/sass/elements/_lists.scss b/sass/elements/_lists.scss
new file mode 100755
index 00000000..fcda0c11
--- /dev/null
+++ b/sass/elements/_lists.scss
@@ -0,0 +1,25 @@
+ul, ol {
+ margin: 0 0 1.5em 3em;
+}
+
+ul {
+ list-style: disc;
+}
+
+ol {
+ list-style: decimal;
+}
+
+li > ul,
+li > ol {
+ margin-bottom: 0;
+ margin-left: 1.5em;
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd {
+ margin: 0 1.5em 1.5em;
+}
diff --git a/sass/elements/_tables.scss b/sass/elements/_tables.scss
new file mode 100755
index 00000000..acd5b337
--- /dev/null
+++ b/sass/elements/_tables.scss
@@ -0,0 +1,4 @@
+table {
+ margin: 0 0 1.5em;
+ width: 100%;
+}
diff --git a/sass/forms/_buttons.scss b/sass/forms/_buttons.scss
new file mode 100755
index 00000000..cc54f951
--- /dev/null
+++ b/sass/forms/_buttons.scss
@@ -0,0 +1,22 @@
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ border: 1px solid;
+ border-color: $color__border-button;
+ border-radius: 3px;
+ background: $color__background-button;
+ color: rgba(0, 0, 0, .8);
+ @include font-size(0.75);
+ line-height: 1;
+ padding: .6em 1em .4em;
+
+ &:hover {
+ border-color: $color__border-button-hover;
+ }
+
+ &:active,
+ &:focus {
+ border-color: $color__border-button-focus;
+ }
+}
diff --git a/sass/forms/_fields.scss b/sass/forms/_fields.scss
new file mode 100755
index 00000000..122c0732
--- /dev/null
+++ b/sass/forms/_fields.scss
@@ -0,0 +1,33 @@
+input[type="text"],
+input[type="email"],
+input[type="url"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="tel"],
+input[type="range"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="color"],
+textarea {
+ color: $color__text-input;
+ border: 1px solid $color__border-input;
+ border-radius: 3px;
+ padding: 3px;
+
+ &:focus {
+ color: $color__text-input-focus;
+ }
+}
+
+select {
+ border: 1px solid $color__border-input;
+}
+
+textarea {
+ width: 100%;
+}
diff --git a/sass/forms/_forms.scss b/sass/forms/_forms.scss
new file mode 100755
index 00000000..2036ef92
--- /dev/null
+++ b/sass/forms/_forms.scss
@@ -0,0 +1,3 @@
+@import "buttons";
+
+@import "fields";
diff --git a/sass/layout/_content-sidebar.scss b/sass/layout/_content-sidebar.scss
new file mode 100755
index 00000000..507cc595
--- /dev/null
+++ b/sass/layout/_content-sidebar.scss
@@ -0,0 +1,22 @@
+.content-area {
+ float: left;
+ margin: 0 (-$size__site-sidebar) 0 0;
+ width: $size__site-main;
+}
+
+.site-main {
+ margin: 0 $size__site-sidebar 0 0;
+}
+
+.site-content .widget-area {
+ float: right;
+ overflow: hidden;
+ width: $size__site-sidebar;
+}
+
+.site-footer {
+ clear: both;
+ width: $size__site-main;
+}
+
+@import "no-sidebar";
diff --git a/sass/layout/_no-sidebar.scss b/sass/layout/_no-sidebar.scss
new file mode 100755
index 00000000..ae44e48c
--- /dev/null
+++ b/sass/layout/_no-sidebar.scss
@@ -0,0 +1,11 @@
+.no-sidebar {
+ .content-area {
+ float: none;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .site-main {
+ margin-right: 0;
+ }
+}
diff --git a/sass/layout/_sidebar-content.scss b/sass/layout/_sidebar-content.scss
new file mode 100755
index 00000000..e765590e
--- /dev/null
+++ b/sass/layout/_sidebar-content.scss
@@ -0,0 +1,22 @@
+.content-area {
+ float: right;
+ margin: 0 0 0 (-$size__site-sidebar);
+ width: $size__site-main;
+}
+
+.site-main {
+ margin: 0 0 0 $size__site-sidebar;
+}
+
+.site-content .widget-area {
+ float: left;
+ overflow: hidden;
+ width: $size__site-sidebar;
+}
+
+.site-footer {
+ clear: both;
+ width: $size__site-main;
+}
+
+@import "no-sidebar";
diff --git a/sass/media/_captions.scss b/sass/media/_captions.scss
new file mode 100755
index 00000000..c299bfe8
--- /dev/null
+++ b/sass/media/_captions.scss
@@ -0,0 +1,16 @@
+.wp-caption {
+ margin-bottom: 1.5em;
+ max-width: 100%;
+
+ img[class*="wp-image-"] {
+ @include center-block;
+ }
+
+ .wp-caption-text {
+ margin: 0.8075em 0;
+ }
+}
+
+.wp-caption-text {
+ text-align: center;
+}
diff --git a/sass/media/_galleries.scss b/sass/media/_galleries.scss
new file mode 100755
index 00000000..c1773b8c
--- /dev/null
+++ b/sass/media/_galleries.scss
@@ -0,0 +1,21 @@
+.gallery {
+ margin-bottom: 1.5em;
+}
+
+.gallery-item {
+ display: inline-block;
+ text-align: center;
+ vertical-align: top;
+ width: 100%;
+
+ // Loops to enumerate the classes for gallery columns.
+ @for $i from 2 through 9 {
+ .gallery-columns-#{$i} & {
+ max-width: map-get( $columns, $i );
+ }
+ }
+}
+
+.gallery-caption {
+ display: block;
+}
diff --git a/sass/media/_media.scss b/sass/media/_media.scss
new file mode 100755
index 00000000..b46086d6
--- /dev/null
+++ b/sass/media/_media.scss
@@ -0,0 +1,30 @@
+.page-content .wp-smiley,
+.entry-content .wp-smiley,
+.comment-content .wp-smiley {
+ border: none;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0;
+}
+
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+ max-width: 100%;
+}
+
+/* Make sure logo link wraps around logo image. */
+.custom-logo-link {
+ display: inline-block;
+}
+
+/*--------------------------------------------------------------
+## Captions
+--------------------------------------------------------------*/
+@import "captions";
+
+/*--------------------------------------------------------------
+## Galleries
+--------------------------------------------------------------*/
+@import "galleries";
diff --git a/sass/mixins/_mixins-master.scss b/sass/mixins/_mixins-master.scss
new file mode 100755
index 00000000..2578a21c
--- /dev/null
+++ b/sass/mixins/_mixins-master.scss
@@ -0,0 +1,29 @@
+// Rem output with px fallback
+@mixin font-size($sizeValue: 1) {
+ font-size: ($sizeValue * 16) * 1px;
+ font-size: $sizeValue * 1rem;
+}
+
+// Center block
+@mixin center-block {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+// Clearfix
+@mixin clearfix() {
+ content: "";
+ display: table;
+ table-layout: fixed;
+}
+
+// Clear after (not all clearfix need this also)
+@mixin clearfix-after() {
+ clear: both;
+}
+
+// Column width with margin
+@mixin column-width($numberColumns: 3) {
+ width: map-get( $columns, $numberColumns ) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns );
+}
diff --git a/sass/modules/_accessibility.scss b/sass/modules/_accessibility.scss
new file mode 100755
index 00000000..469887cc
--- /dev/null
+++ b/sass/modules/_accessibility.scss
@@ -0,0 +1,38 @@
+/* Text meant only for screen readers. */
+.screen-reader-text {
+ border: 0;
+ clip: rect(1px, 1px, 1px, 1px);
+ clip-path: inset(50%);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute !important;
+ width: 1px;
+ word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+
+ &:focus {
+ background-color: $color__background-screen;
+ border-radius: 3px;
+ box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+ clip: auto !important;
+ clip-path: none;
+ color: $color__text-screen;
+ display: block;
+ @include font-size(0.875);
+ font-weight: bold;
+ height: auto;
+ left: 5px;
+ line-height: normal;
+ padding: 15px 23px 14px;
+ text-decoration: none;
+ top: 5px;
+ width: auto;
+ z-index: 100000; /* Above WP toolbar. */
+ }
+}
+
+/* Do not show the outline on the skip link target. */
+#content[tabindex="-1"]:focus {
+ outline: 0;
+}
diff --git a/sass/modules/_alignments.scss b/sass/modules/_alignments.scss
new file mode 100755
index 00000000..5db6ab4e
--- /dev/null
+++ b/sass/modules/_alignments.scss
@@ -0,0 +1,16 @@
+.alignleft {
+ display: inline;
+ float: left;
+ margin-right: 1.5em;
+}
+
+.alignright {
+ display: inline;
+ float: right;
+ margin-left: 1.5em;
+}
+
+.aligncenter {
+ clear: both;
+ @include center-block;
+}
diff --git a/sass/modules/_clearings.scss b/sass/modules/_clearings.scss
new file mode 100755
index 00000000..444b6b60
--- /dev/null
+++ b/sass/modules/_clearings.scss
@@ -0,0 +1,23 @@
+.clear:before,
+.clear:after,
+.entry-content:before,
+.entry-content:after,
+.comment-content:before,
+.comment-content:after,
+.site-header:before,
+.site-header:after,
+.site-content:before,
+.site-content:after,
+.site-footer:before,
+.site-footer:after {
+ @include clearfix;
+}
+
+.clear:after,
+.entry-content:after,
+.comment-content:after,
+.site-header:after,
+.site-content:after,
+.site-footer:after {
+ @include clearfix-after;
+}
diff --git a/sass/modules/_infinite-scroll.scss b/sass/modules/_infinite-scroll.scss
new file mode 100755
index 00000000..11721379
--- /dev/null
+++ b/sass/modules/_infinite-scroll.scss
@@ -0,0 +1,10 @@
+/* Globally hidden elements when Infinite Scroll is supported and in use. */
+.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
+.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
+ display: none;
+}
+
+/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
+.infinity-end.neverending .site-footer {
+ display: block;
+}
diff --git a/sass/navigation/_links.scss b/sass/navigation/_links.scss
new file mode 100755
index 00000000..95a5b4d2
--- /dev/null
+++ b/sass/navigation/_links.scss
@@ -0,0 +1,19 @@
+a {
+ color: $color__link;
+
+ &:visited {
+ color: $color__link-visited;
+ }
+ &:hover,
+ &:focus,
+ &:active {
+ color: $color__link-hover;
+ }
+ &:focus {
+ outline: thin dotted;
+ }
+ &:hover,
+ &:active {
+ outline: 0;
+ }
+}
diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss
new file mode 100755
index 00000000..1a2b0402
--- /dev/null
+++ b/sass/navigation/_menus.scss
@@ -0,0 +1,107 @@
+.main-navigation {
+ clear: both;
+ display: block;
+ float: left;
+ width: 100%;
+
+ ul {
+ display: none;
+ list-style: none;
+ margin: 0;
+ padding-left: 0;
+
+ ul {
+ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
+ float: left;
+ position: absolute;
+ top: 100%;
+ left: -999em;
+ z-index: 99999;
+
+ ul {
+ left: -999em;
+ top: 0;
+ }
+
+ li {
+ &:hover > ul,
+ &.focus > ul {
+ left: 100%;
+ }
+ }
+
+ a {
+ width: 200px;
+ }
+
+ :hover > a,
+ .focus > a {
+ }
+
+ a:hover,
+ a.focus {
+ }
+ }
+
+ li:hover > ul,
+ li.focus > ul {
+ left: auto;
+ }
+ }
+
+ li {
+ float: left;
+ position: relative;
+
+ &:hover > a,
+ &.focus > a {
+ }
+ }
+
+ a {
+ display: block;
+ text-decoration: none;
+ }
+
+ .current_page_item > a,
+ .current-menu-item > a,
+ .current_page_ancestor > a,
+ .current-menu-ancestor > a {
+ }
+}
+
+/* Small menu. */
+.menu-toggle,
+.main-navigation.toggled ul {
+ display: block;
+}
+
+@media screen and (min-width: 37.5em) {
+ .menu-toggle {
+ display: none;
+ }
+ .main-navigation ul {
+ display: block;
+ }
+}
+
+.comment-navigation,
+.posts-navigation,
+.post-navigation {
+
+ .site-main & {
+ margin: 0 0 1.5em;
+ overflow: hidden;
+ }
+
+ .nav-previous {
+ float: left;
+ width: 50%;
+ }
+
+ .nav-next {
+ float: right;
+ text-align: right;
+ width: 50%;
+ }
+}
diff --git a/sass/navigation/_navigation.scss b/sass/navigation/_navigation.scss
new file mode 100755
index 00000000..2e774b25
--- /dev/null
+++ b/sass/navigation/_navigation.scss
@@ -0,0 +1,9 @@
+/*--------------------------------------------------------------
+## Links
+--------------------------------------------------------------*/
+@import "links";
+
+/*--------------------------------------------------------------
+## Menus
+--------------------------------------------------------------*/
+@import "menus";
diff --git a/sass/shop/_checkout.scss b/sass/shop/_checkout.scss
new file mode 100755
index 00000000..3aebbcc9
--- /dev/null
+++ b/sass/shop/_checkout.scss
@@ -0,0 +1,21 @@
+/**
+ * Checkout
+ */
+@media screen and (min-width: 768px) {
+ .col2-set {
+ .form-row-first {
+ float: left;
+ margin-right: $columns__margin;
+ }
+
+ .form-row-last {
+ float: right;
+ margin-right: 0;
+ }
+
+ .form-row-first,
+ .form-row-last {
+ @include column-width(2);
+ }
+ }
+}
diff --git a/sass/shop/_components.scss b/sass/shop/_components.scss
new file mode 100755
index 00000000..996116a8
--- /dev/null
+++ b/sass/shop/_components.scss
@@ -0,0 +1,264 @@
+/**
+ * Header cart
+ */
+.site-header-cart {
+ position: relative;
+ margin: 0;
+ padding: 0;
+ @include clearfix;
+
+ .cart-contents {
+ text-decoration: none;
+ }
+
+ .widget_shopping_cart {
+ display: none;
+ }
+
+ .product_list_widget {
+ margin: 0;
+ padding: 0;
+ }
+}
+
+/**
+ * Star rating
+ */
+.star-rating {
+ overflow: hidden;
+ position: relative;
+ height: 1.618em;
+ line-height: 1.618;
+ font-size: 1em;
+ width: 5.3em;
+ font-family: 'star';
+ font-weight: 400;
+
+ &:before {
+ content: "\53\53\53\53\53";
+ opacity: .25;
+ float: left;
+ top: 0;
+ left: 0;
+ position: absolute;
+ }
+
+ span {
+ overflow: hidden;
+ float: left;
+ top: 0;
+ left: 0;
+ position: absolute;
+ padding-top: 1.5em;
+ }
+
+ span:before {
+ content: "\53\53\53\53\53";
+ top: 0;
+ position: absolute;
+ left: 0;
+ color: $color__link;
+ }
+}
+
+p.stars {
+ a {
+ position: relative;
+ height: 1em;
+ width: 1em;
+ text-indent: -999em;
+ display: inline-block;
+ text-decoration: none;
+ margin-right: 1px;
+ font-weight: 400;
+
+ &:before {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1em;
+ height: 1em;
+ line-height: 1;
+ font-family: "star";
+ content: "\53";
+ color: $color__text-main;
+ text-indent: 0;
+ opacity: .25;
+ }
+
+ &:hover {
+ ~ a:before {
+ content: "\53";
+ color: $color__text-main;
+ opacity: .25;
+ }
+ }
+ }
+
+ &:hover {
+ a {
+ &:before {
+ content: "\53";
+ color: $color__link;
+ opacity: 1;
+ }
+ }
+ }
+
+ &.selected {
+ a.active {
+ &:before {
+ content: "\53";
+ color: $color__link;
+ opacity: 1;
+ }
+
+ ~ a:before {
+ content: "\53";
+ color: $color__text-main;
+ opacity: .25;
+ }
+ }
+
+ a:not(.active) {
+ &:before {
+ content: "\53";
+ color: $color__link;
+ opacity: 1;
+ }
+ }
+ }
+}
+
+/**
+ * Tabs
+ */
+.woocommerce-tabs {
+ ul.tabs {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ text-align: left;
+
+ li {
+ display: block;
+ margin: 0;
+ position: relative;
+
+ a {
+ padding: 1em 0;
+ display: block;
+ }
+ }
+ }
+
+ .panel {
+ h2:first-of-type {
+ margin-bottom: 1em;
+ }
+ }
+}
+
+/**
+ * Password strength meter
+ */
+.woocommerce-password-strength {
+ text-align: right;
+
+ &.strong {
+ color: $woocommerce__color-success;
+ }
+
+ &.short {
+ color: $woocommerce__color-error;
+ }
+
+ &.bad {
+ color: $woocommerce__color-error;
+ }
+
+ &.good {
+ color: $woocommerce__color-info;
+ }
+}
+
+/**
+ * Forms
+ */
+.form-row {
+ &.woocommerce-validated {
+ input.input-text {
+ box-shadow: inset 2px 0 0 $woocommerce__color-success;
+ }
+ }
+
+ &.woocommerce-invalid {
+ input.input-text {
+ box-shadow: inset 2px 0 0 $woocommerce__color-error;
+ }
+ }
+}
+
+.required {
+ color: red;
+}
+
+/**
+ * Notices
+ */
+.woocommerce-message,
+.woocommerce-info,
+.woocommerce-error,
+.woocommerce-noreviews,
+p.no-comments {
+ @include clearfix;
+ background-color: $woocommerce__color-success;
+ clear: both;
+}
+
+.woocommerce-info,
+.woocommerce-noreviews,
+p.no-comments {
+ background-color: $woocommerce__color-info;
+}
+
+.woocommerce-error {
+ background-color: $woocommerce__color-error;
+}
+
+.demo_store {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: 0;
+ padding: 1em;
+ background-color: $woocommerce__color-info;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 48em) {
+ /**
+ * Header cart
+ */
+ .site-header-cart {
+ .widget_shopping_cart {
+ position: absolute;
+ top: 100%;
+ width: 100%;
+ z-index: 999999;
+ left: -999em;
+ display: block;
+ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
+ }
+
+ &:hover,
+ &.focus {
+ .widget_shopping_cart {
+ left: 0;
+ display: block;
+ }
+ }
+ }
+}
diff --git a/sass/shop/_products.scss b/sass/shop/_products.scss
new file mode 100755
index 00000000..3d4dd985
--- /dev/null
+++ b/sass/shop/_products.scss
@@ -0,0 +1,63 @@
+/**
+ * Products
+ */
+ul.products {
+ @include clearfix;
+ margin: 0;
+ padding: 0;
+
+ li.product {
+ list-style: none;
+ position: relative;
+ margin-bottom: 2em;
+
+ .woocommerce-loop-product__title {
+ font-size: 1rem;
+ }
+
+ img {
+ display: block;
+ }
+
+ .button {
+ display: block;
+ }
+ }
+}
+
+@media screen and (min-width: 48em) {
+ ul.products {
+ li.product {
+ @include column-width(3);
+ float: left;
+ margin-right: $columns__margin;
+
+ &.first {
+ clear: both;
+ }
+
+ &.last {
+ margin-right: 0;
+ }
+ }
+ }
+
+ .columns-1 {
+ ul.products {
+ li.product {
+ float: none;
+ width: 100%;
+ }
+ }
+ }
+
+ @for $i from 2 through 6 {
+ .columns-#{$i} {
+ ul.products {
+ li.product {
+ @include column-width( $i );
+ }
+ }
+ }
+ }
+}
diff --git a/sass/shop/_single-product.scss b/sass/shop/_single-product.scss
new file mode 100755
index 00000000..7c0fe1c3
--- /dev/null
+++ b/sass/shop/_single-product.scss
@@ -0,0 +1,83 @@
+/**
+ * Single Product
+ */
+.single-product {
+ div.product {
+ @include clearfix;
+ position: relative;
+
+ .woocommerce-product-gallery {
+ position: relative;
+
+ .woocommerce-product-gallery__trigger {
+ position: absolute;
+ top: 1em;
+ right: 1em;
+ display: block;
+ z-index: 99;
+ }
+
+ .flex-viewport {
+ margin-bottom: 1em;
+ }
+
+ .flex-control-thumbs {
+ @include clearfix;
+ margin: 0;
+ padding: 0;
+
+ li {
+ list-style: none;
+ cursor: pointer;
+ float: left;
+
+ img {
+ opacity: .5;
+
+ &.flex-active {
+ opacity: 1;
+ }
+ }
+
+ &:hover {
+ img {
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ @for $i from 2 through 5 {
+ &.woocommerce-product-gallery--columns-#{$i} {
+ .flex-control-thumbs {
+ li {
+ @include column-width($i);
+
+ &:nth-child(#{$i}n) {
+ margin-right: 0;
+ }
+
+ &:nth-child(#{$i}n+1) {
+ clear: both;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+.stock {
+ &:empty:before {
+ display: none;
+ }
+
+ &.in-stock {
+ color: $woocommerce__color-success;
+ }
+
+ &.out-of-stock {
+ color: $woocommerce__color-error;
+ }
+}
diff --git a/sass/shop/_tables.scss b/sass/shop/_tables.scss
new file mode 100755
index 00000000..0b282811
--- /dev/null
+++ b/sass/shop/_tables.scss
@@ -0,0 +1,79 @@
+/**
+ * Shop tables
+ */
+table.shop_table_responsive {
+ thead {
+ display: none;
+ }
+
+ tbody {
+ th {
+ display: none;
+ }
+ }
+
+ tr {
+ td {
+ display: block;
+ text-align: right;
+ clear: both;
+
+ &:before {
+ content: attr(data-title) ': ';
+ float: left;
+ }
+
+ &.product-remove {
+ a {
+ text-align: left;
+ }
+
+ &:before {
+ display: none;
+ }
+ }
+
+ &.actions,
+ &.download-actions {
+ &:before {
+ display: none;
+ }
+ }
+
+ &.download-actions {
+ .button {
+ display: block;
+ text-align: center;
+ }
+ }
+ }
+ }
+}
+
+@media screen and (min-width: 48em) {
+ table.shop_table_responsive {
+ thead {
+ display: table-header-group;
+ }
+
+ tbody {
+ th {
+ display: table-cell;
+ }
+ }
+
+ tr {
+ th, td {
+ text-align: left;
+ }
+
+ td {
+ display: table-cell;
+
+ &:before {
+ display: none;
+ }
+ }
+ }
+ }
+}
diff --git a/sass/shop/_widgets.scss b/sass/shop/_widgets.scss
new file mode 100755
index 00000000..63324b2d
--- /dev/null
+++ b/sass/shop/_widgets.scss
@@ -0,0 +1,64 @@
+/**
+ * WooCommerce Price Filter
+ */
+.widget_price_filter {
+ .price_slider {
+ margin-bottom: 1.5em;
+ }
+
+ .price_slider_amount {
+ text-align: right;
+ line-height: 2.4em;
+
+ .button {
+ float: left;
+ }
+ }
+
+ .ui-slider {
+ position: relative;
+ text-align: left;
+ }
+
+ .ui-slider .ui-slider-handle {
+ position: absolute;
+ z-index: 2;
+ width: 1em;
+ height: 1em;
+ cursor: ew-resize;
+ outline: none;
+ background: $color__link;
+ box-sizing: border-box;
+ margin-top: -.25em;
+ opacity: 1;
+
+ &:last-child {
+ margin-left: -1em;
+ }
+
+ &:hover,
+ &.ui-state-active {
+ box-shadow: 0 0 0 .25em rgba(#000, 0.1);
+ }
+ }
+
+ .ui-slider .ui-slider-range {
+ position: absolute;
+ z-index: 1;
+ display: block;
+ border: 0;
+ background: $color__link;
+ }
+
+ .price_slider_wrapper .ui-widget-content {
+ background: rgba(0,0,0,0.1);
+ }
+
+ .ui-slider-horizontal {
+ height: .5em;
+ }
+
+ .ui-slider-horizontal .ui-slider-range {
+ height: 100%;
+ }
+}
diff --git a/sass/site/_site.scss b/sass/site/_site.scss
new file mode 100755
index 00000000..23408f0c
--- /dev/null
+++ b/sass/site/_site.scss
@@ -0,0 +1,12 @@
+// @import "../layout/content-sidebar";
+// @import "../layout/sidebar-content";
+
+/*--------------------------------------------------------------
+## Posts and pages
+--------------------------------------------------------------*/
+@import "primary/posts-and-pages";
+
+/*--------------------------------------------------------------
+## Comments
+--------------------------------------------------------------*/
+@import "primary/comments";
diff --git a/sass/site/primary/_comments.scss b/sass/site/primary/_comments.scss
new file mode 100755
index 00000000..13760c5c
--- /dev/null
+++ b/sass/site/primary/_comments.scss
@@ -0,0 +1,6 @@
+.comment-content a {
+ word-wrap: break-word;
+}
+.bypostauthor {
+ display: block;
+}
diff --git a/sass/site/primary/_posts-and-pages.scss b/sass/site/primary/_posts-and-pages.scss
new file mode 100755
index 00000000..9d6100d0
--- /dev/null
+++ b/sass/site/primary/_posts-and-pages.scss
@@ -0,0 +1,23 @@
+.sticky {
+ display: block;
+}
+
+.post,
+.page {
+ margin: 0 0 1.5em;
+}
+
+.updated:not(.published) {
+ display: none;
+}
+
+.page-content,
+.entry-content,
+.entry-summary {
+ margin: 1.5em 0 0;
+}
+
+.page-links {
+ clear: both;
+ margin: 0 0 1.5em;
+}
diff --git a/sass/site/secondary/_widgets.scss b/sass/site/secondary/_widgets.scss
new file mode 100755
index 00000000..09b3d742
--- /dev/null
+++ b/sass/site/secondary/_widgets.scss
@@ -0,0 +1,8 @@
+.widget {
+ margin: 0 0 1.5em;
+
+ /* Make sure select elements fit in widgets. */
+ select {
+ max-width: 100%;
+ }
+}
diff --git a/sass/style.scss b/sass/style.scss
new file mode 100755
index 00000000..1d5190d3
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,106 @@
+/*!
+Theme Name: _s
+Theme URI: https://underscores.me/
+Author: Automattic
+Author URI: https://automattic.com/
+Description: Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
+Version: 1.0.0
+License: GNU General Public License v2 or later
+License URI: LICENSE
+Text Domain: _s
+Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
+
+This theme, like WordPress, is licensed under the GPL.
+Use it to make something cool, have fun, and share what you've learned with others.
+
+_s is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
+Underscores is distributed under the terms of the GNU GPL v2 or later.
+
+Normalizing styles have been helped along thanks to the fine work of
+Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
+*/
+
+/*--------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------
+# Normalize
+# Typography
+# Elements
+# Forms
+# Navigation
+ ## Links
+ ## Menus
+# Accessibility
+# Alignments
+# Clearings
+# Widgets
+# Content
+ ## Posts and pages
+ ## Comments
+# Infinite scroll
+# Media
+ ## Captions
+ ## Galleries
+--------------------------------------------------------------*/
+@import "variables-site/variables-site";
+@import "mixins/mixins-master";
+
+/*--------------------------------------------------------------
+# Normalize
+--------------------------------------------------------------*/
+@import "normalize";
+
+/*--------------------------------------------------------------
+# Typography
+--------------------------------------------------------------*/
+@import "typography/typography";
+
+/*--------------------------------------------------------------
+# Elements
+--------------------------------------------------------------*/
+@import "elements/elements";
+
+/*--------------------------------------------------------------
+# Forms
+--------------------------------------------------------------*/
+@import "forms/forms";
+
+/*--------------------------------------------------------------
+# Navigation
+--------------------------------------------------------------*/
+@import "navigation/navigation";
+
+/*--------------------------------------------------------------
+# Accessibility
+--------------------------------------------------------------*/
+@import "modules/accessibility";
+
+/*--------------------------------------------------------------
+# Alignments
+--------------------------------------------------------------*/
+@import "modules/alignments";
+
+/*--------------------------------------------------------------
+# Clearings
+--------------------------------------------------------------*/
+@import "modules/clearings";
+
+/*--------------------------------------------------------------
+# Widgets
+--------------------------------------------------------------*/
+@import "site/secondary/widgets";
+
+/*--------------------------------------------------------------
+# Content
+--------------------------------------------------------------*/
+@import "site/site";
+
+/*--------------------------------------------------------------
+# Infinite scroll
+--------------------------------------------------------------*/
+@import "modules/infinite-scroll";
+
+/*--------------------------------------------------------------
+# Media
+--------------------------------------------------------------*/
+@import "media/media";
diff --git a/sass/typography/_copy.scss b/sass/typography/_copy.scss
new file mode 100755
index 00000000..db7411f3
--- /dev/null
+++ b/sass/typography/_copy.scss
@@ -0,0 +1,45 @@
+p {
+ margin-bottom: 1.5em;
+}
+
+dfn, cite, em, i {
+ font-style: italic;
+}
+
+blockquote {
+ margin: 0 1.5em;
+}
+
+address {
+ margin: 0 0 1.5em;
+}
+
+pre {
+ background: $color__background-pre;
+ font-family: $font__pre;
+ @include font-size(0.9375);
+ line-height: $font__line-height-pre;
+ margin-bottom: 1.6em;
+ max-width: 100%;
+ overflow: auto;
+ padding: 1.6em;
+}
+
+code, kbd, tt, var {
+ font-family: $font__code;
+ @include font-size(0.9375);
+}
+
+abbr, acronym {
+ border-bottom: 1px dotted $color__border-abbr;
+ cursor: help;
+}
+
+mark, ins {
+ background: $color__background-ins;
+ text-decoration: none;
+}
+
+big {
+ font-size: 125%;
+}
diff --git a/sass/typography/_headings.scss b/sass/typography/_headings.scss
new file mode 100755
index 00000000..8333692d
--- /dev/null
+++ b/sass/typography/_headings.scss
@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+ clear: both;
+}
diff --git a/sass/typography/_typography.scss b/sass/typography/_typography.scss
new file mode 100755
index 00000000..b25e6cc2
--- /dev/null
+++ b/sass/typography/_typography.scss
@@ -0,0 +1,15 @@
+body,
+button,
+input,
+select,
+optgroup,
+textarea {
+ color: $color__text-main;
+ font-family: $font__main;
+ @include font-size(1);
+ line-height: $font__line-height-body;
+}
+
+@import "headings";
+
+@import "copy";
diff --git a/sass/variables-site/_colors.scss b/sass/variables-site/_colors.scss
new file mode 100755
index 00000000..f2dba39a
--- /dev/null
+++ b/sass/variables-site/_colors.scss
@@ -0,0 +1,20 @@
+$color__background-body: #fff;
+$color__background-screen: #f1f1f1;
+$color__background-hr: #ccc;
+$color__background-button: #e6e6e6;
+$color__background-pre: #eee;
+$color__background-ins: #fff9c0;
+
+$color__text-screen: #21759b;
+$color__text-input: #666;
+$color__text-input-focus: #111;
+$color__link: royalblue;
+$color__link-visited: purple;
+$color__link-hover: midnightblue;
+$color__text-main: #404040;
+
+$color__border-button: #ccc #ccc #bbb;
+$color__border-button-hover: #ccc #bbb #aaa;
+$color__border-button-focus: #aaa #bbb #bbb;
+$color__border-input: #ccc;
+$color__border-abbr: #666;
diff --git a/sass/variables-site/_columns.scss b/sass/variables-site/_columns.scss
new file mode 100755
index 00000000..27918b3e
--- /dev/null
+++ b/sass/variables-site/_columns.scss
@@ -0,0 +1,13 @@
+$columns: (
+ 1: 100%,
+ 2: 50%,
+ 3: 33.33%,
+ 4: 25%,
+ 5: 20%,
+ 6: 16.66%,
+ 7: 14.28%,
+ 8: 12.5%,
+ 9: 11.11%
+);
+
+$columns__margin: 3.8%;
diff --git a/sass/variables-site/_structure.scss b/sass/variables-site/_structure.scss
new file mode 100755
index 00000000..d24a84ed
--- /dev/null
+++ b/sass/variables-site/_structure.scss
@@ -0,0 +1,2 @@
+$size__site-main: 100%;
+$size__site-sidebar: 25%;
diff --git a/sass/variables-site/_typography.scss b/sass/variables-site/_typography.scss
new file mode 100755
index 00000000..302891ea
--- /dev/null
+++ b/sass/variables-site/_typography.scss
@@ -0,0 +1,5 @@
+$font__main: sans-serif;
+$font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+$font__pre: "Courier 10 Pitch", Courier, monospace;
+$font__line-height-body: 1.5;
+$font__line-height-pre: 1.6;
diff --git a/sass/variables-site/_variables-site.scss b/sass/variables-site/_variables-site.scss
new file mode 100755
index 00000000..1b23d510
--- /dev/null
+++ b/sass/variables-site/_variables-site.scss
@@ -0,0 +1,4 @@
+@import "colors";
+@import "typography";
+@import "structure";
+@import "columns";
diff --git a/sass/woocommerce.scss b/sass/woocommerce.scss
new file mode 100755
index 00000000..e8b987eb
--- /dev/null
+++ b/sass/woocommerce.scss
@@ -0,0 +1,48 @@
+/*
+Theme Name: _s
+
+WooCommerce styles override
+*/
+
+/**
+ * WooCommerce color variables
+ */
+$woocommerce__color-error: #e2401c;
+$woocommerce__color-success: #0f834d;
+$woocommerce__color-info: #3D9CD2;
+
+/**
+ * Imports
+ */
+@import "variables-site/variables-site";
+@import "mixins/mixins-master";
+
+/**
+ * Shop tables
+ */
+@import "shop/tables";
+
+/**
+ * Products
+ */
+@import "shop/products";
+
+/**
+ * Single product
+ */
+@import "shop/single-product";
+
+/**
+ * Checkout
+ */
+@import "shop/checkout";
+
+/**
+ * General WooCommerce components
+ */
+@import "shop/components";
+
+/**
+ * WooCommerce widgets
+ */
+@import "shop/widgets";
diff --git a/screenshot.png b/screenshot.png
index 5bddc87c..6cdd4445 100644
Binary files a/screenshot.png and b/screenshot.png differ