writers-zone 0.1.4 → 0.1.5

data/_sass/base/_helpers.scss

@@ -0,0 +1,79 @@
+// -----------------------------------------------------------------------------
+// This file contains CSS helper classes.
+// -----------------------------------------------------------------------------
+
+/**
+ * Wrapper
+ */
+.wrapper {
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+    max-width:         calc(#{$content-width} - (#{$spacing-unit}));
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: $spacing-unit / 2;
+    padding-left: $spacing-unit / 2;
+
+    @include media-query($on-laptop) {
+        max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+        max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+        padding-right: $spacing-unit;
+        padding-left: $spacing-unit;
+    }
+}
+
+
+
+/**
+ * Clearfix
+ */
+// %clearfix:after {
+//     content: "";
+//     display: table;
+//     clear: both;
+// }
+
+
+
+/**
+ * Main content containers
+ * 1. Make the container full-width with a maximum width
+ * 2. Center it in the viewport
+ * 3. Leave some space on the edges, especially valuable on small screens
+ */
+.container {
+  //max-width: $max-width; /* 1 */
+  max-width: $content-width; /* 1 */
+  margin-left: auto; /* 2 */
+  margin-right: auto; /* 2 */
+  padding-left: 20px; /* 3 */
+  padding-right: 20px; /* 3 */
+  width: 100%; /* 1 */
+ }
+
+/**
+ * Hide text while making it readable for screen readers
+ * 1. Needed in WebKit-based browsers because of an implementation bug;
+ *    See: https://code.google.com/p/chromium/issues/detail?id=457146
+ */
+.hide-text {
+  overflow: hidden;
+  padding: 0; /* 1 */
+  text-indent: 101%;
+  white-space: nowrap;
+}
+
+/**
+ * Hide element while making it readable for screen readers
+ * Shamelessly borrowed from HTML5Boilerplate:
+ * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
+ */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

data/_sass/base/_typography.scss

@@ -0,0 +1,53 @@
+/**
+ * Basic typography style for copy text
+ */
+
+body {
+    font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+    color: $text-color;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-feature-settings: "kern" 1;
+    -moz-font-feature-settings: "kern" 1;
+    -o-font-feature-settings: "kern" 1;
+    font-feature-settings: "kern" 1;
+    font-kerning: normal;
+}
+
+
+
+/**
+ * Figcaption
+ */
+figcaption {
+    font-size: $small-font-size;
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: $base-font-weight;
+}
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+    color: $grey-color;
+    font-size: 18px;
+    letter-spacing: -1px;
+    font-style: italic;
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+    font-size: 15px;
+}

data/_sass/components/_button.scss

@@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the button component.
+// -----------------------------------------------------------------------------

data/_sass/components/_icons.scss

@@ -0,0 +1,19 @@
+/**
+ * Icons
+ */
+.icon > svg {
+    display: inline-block;
+    vertical-align: text-bottom;
+
+    path {
+        fill: $grey-color;
+    }
+}
+
+.text-top > svg { vertical-align: text-top; }
+
+.c-color > svg {
+
+  path { fill: currentColor; }
+
+}

data/_sass/layout/_footer.scss

@@ -0,0 +1,95 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the footer of the site/application.
+// -----------------------------------------------------------------------------
+
+/**
+ * Site footer
+ */
+.site-footer {
+
+  border-top: 1px solid $grey-color-light;
+  padding: $spacing-unit 0;
+
+}
+
+.footer-heading {
+
+  font-size: 18px;
+
+}
+
+.footer-section {
+
+  font-size: 15px;
+  color: $grey-color;
+
+}
+
+.contact-list,
+.social-media-list,
+.footer-description {
+
+  list-style: none;
+  margin-left: 0;
+
+}
+
+@include media-query($on-palm) {
+
+  .footer-nav {
+
+    // compatibility with all browsers (desktop/mobile) less
+    // - IE < 10
+    // - Opera (desktop/mobile) < 12.1
+    // more datails: http://caniuse.com/#feat=flexbox
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+  }
+
+  .contact-list,
+  .social-media-list {
+
+
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -webkit-flex: 1 1 50%;
+    -ms-flex: 1 1 50%;
+    flex: 1 1 50%;
+
+  }
+}
+
+@include media-query($on-laptop) {
+
+  .footer-section {
+
+    // compatibility with all browsers (desktop/mobile) less
+    // - IE < 10
+    // - Opera (desktop/mobile) < 12.1
+    // more datails: http://caniuse.com/#feat=flexbox
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+  }
+
+  .footer-description,
+  .footer-nav {
+
+
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    -webkit-flex: 1 1 50%;
+    -ms-flex: 1 1 50%;
+    flex: 1 1 50%;
+
+  }
+}

data/_sass/layout/_header.scss

@@ -0,0 +1,159 @@
+// -----------------------------------------------------------------------------
+// This file contains all styles related to the header of the site/application.
+// -----------------------------------------------------------------------------
+
+/**
+ * Site header
+ */
+.site-header {
+
+  border-top: 5px solid $grey-color-dark;
+  border-bottom: 1px solid $grey-color-light;
+  box-sizing: content-box;
+  padding: 0.50rem 0;
+
+}
+
+.header-layout {
+
+  // compatibility with all browsers (desktop/mobile) less
+  // - IE < 10
+  // - Opera (desktop/mobile) < 12.1
+  // more datails: http://caniuse.com/#feat=flexbox
+
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+  @include media-query($on-laptop) {
+
+    margin-right: $spacing-unit;
+    margin-left: $spacing-unit;
+
+  }
+
+}
+
+.site-title {
+
+  font-size: 26px;
+  font-weight: 300;
+
+  &,
+  &:visited {
+
+    color: $grey-color-dark;
+
+  }
+}
+
+.burguer {
+
+  border: 1px solid $grey-color-dark;
+  border-radius: 0.25rem;
+  padding: $spacing-unit / 4;
+
+  @include media-query($on-palm) {
+
+    display: none;
+
+  }
+
+  > svg {
+
+    vertical-align: text-top;
+
+    path {
+
+      fill: $grey-color-dark;
+
+    }
+  }
+}
+
+.site-menu {
+
+  background: $background-color;
+  list-style: none;
+  margin-left: 0;
+  position: absolute;
+  left: -50%;
+  top: 3.8rem;
+  transition: 0.5s;
+
+  @include media-query($on-palm) {
+
+    position: inherit;
+    margin-bottom: 0;
+    transition: none;
+
+    // compatibility with all browsers (desktop/mobile) less
+    // - IE < 10
+    // - Opera (desktop/mobile) < 12.1
+    // more datails: http://caniuse.com/#feat=flexbox
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+  }
+
+  li:last-child {
+
+    border-bottom: 3px solid $grey-color-dark;
+
+    @include media-query($on-palm) {
+
+      border: none;
+
+    }
+
+  }
+
+  .page-link {
+
+    display: block;
+    padding: 0.25rem 0.50rem 0.25rem 2rem;
+    color: $text-color;
+    border-right: 1px solid $grey-color-light;
+    border-bottom: 1px solid $grey-color-light;
+
+    @include media-query($on-palm) {
+
+      border: none;
+      padding: 0.25rem 0.50rem;
+
+    }
+  }
+}
+
+/* checkbox */
+#menu-icon {
+
+  display: none;
+
+  /* show menu */
+  &:checked ~ .site-menu {
+
+    transition: 0.5s;
+    right: 50%;
+    left: 0;
+
+  }
+}

data/_sass/{writers-zone/_plugins.scss → layout/_pagination.scss}

@@ -27,6 +27,16 @@
 
 }
 
+.pagination-posts {
+
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+
+}
+
 .pagination-pages { margin-top: $spacing-unit / 2 ; }
 
 .previous-posts,
@@ -41,46 +51,3 @@
 }
 
 .next-posts { text-align: right; }
-
-/**
- * Search
- */
-
-.search-input {
-
-  padding-bottom: $spacing-unit;
-  color: $grey-color;
-  display: flex;
-
-  .icon {
-    margin-right: $spacing-unit / 4;
-  }
-
-  input {
-
-    border: 1px solid $grey-color-light;
-    padding: 0.1rem 0.3rem;
-    font-size: $base-font-size;
-    color: $grey-color;
-    flex: 1;
-
-  }
-
-}
-
-.search-box ul {
-
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    li:first-child {
-
-      border-top: 1px solid $grey-color-light;
-      padding-top: $spacing-unit;
-
-    }
-
-    a { margin-left: $spacing-unit / 4; }
-
-}