analytics-link 0.1.0

data/_sass/2-base/_base.scss

@@ -0,0 +1,213 @@
+// Body
+$base-font-size: 16px;
+$base-font-style: normal;
+$base-font-variant: normal;
+$base-font-weight: normal;
+$base-font-family: 'Nunito', sans-serif;
+$base-line-height: 28px;
+
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+  color: $body-color;
+  background: $background;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  input, textarea {
+		border: $border-color 1px solid;
+		outline: none;
+		&:focus:required:invalid {
+			border-color: $danger;
+		}
+		&:required:valid {
+			border-color: $success;
+		}
+	}
+}
+
+::placeholder {
+	color: #666;
+}
+
+*::selection {
+  color: $white;
+  background-color: $primary-color;
+}
+
+
+// Headings
+$heading-font-weight: 700;
+$heading-font-family: 'Nunito', -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif;
+
+$font-size-h1:  36px;
+$font-size-h2:  28px;
+$font-size-h3:  24px;
+$font-size-h4:  20px;
+$font-size-h5:  18px;
+$font-size-h6:  16px;
+
+$heading-line-height: 1.2;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: initial;
+}
+
+h1 {
+  font-size: $font-size-h1;
+}
+
+h2 {
+  font-size: $font-size-h2;
+}
+
+h3 {
+  font-size: $font-size-h3;
+}
+
+h4 {
+  font-size: $font-size-h4;
+}
+
+h5 {
+  font-size: $font-size-h5;
+}
+
+h6 {
+  font-size: $font-size-h6;
+}
+
+
+// Blockquote
+blockquote {
+  padding-left: $base-spacing-unit;
+  border-left: 3px solid $primary-color;
+  font-style: normal;
+}
+
+
+// Pre
+pre {
+  overflow: auto;
+  padding: 15px;
+  margin-bottom: 0;
+  font-size: 14px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+
+// Images
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  &+em {
+    text-align: center;
+    display: block;
+    margin-top: 10px;
+    font-weight: normal;
+    font-size: 16px;
+    color: $gray-blue;
+  }
+}
+
+
+// Links
+a {
+    text-decoration: none;
+    color: $link-color;
+    transition: $global-transition;
+
+    &:hover {
+        color: $link-color-hover;
+    }
+}
+
+// Hr
+hr {
+  display: block;
+  height: 2px;
+  padding: 0;
+  margin: 30px 0;
+  line-height: 0;
+  border: 0;
+  background-color: $border-color;
+}
+
+
+// Blockquote
+blockquote {
+  padding: 15px 15px 15px 30px;
+  font-size: 18px;
+  font-style: normal;
+  border-left: 4px solid $primary-color;
+  p {
+    margin-bottom: 0;
+  }
+}
+
+
+// Pre
+pre {
+  overflow: auto;
+  padding: 15px;
+  margin-bottom: 0;
+  font-size: 14px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+// Table
+.table-container {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+table {
+  font-size: 12px;
+  color:$black;
+  width: 100%;
+  border-width: 1px;
+  border-color: $gray-blue;
+  border-collapse: collapse;
+}
+
+table th {
+  padding: 8px;
+  font-size: 16px;
+  text-align: left;
+  border: 1px solid $gray-blue;
+  color: $white;
+  background-color: $primary-color;
+}
+
+table tr {
+  background-color: lighten($primary-color, 45%);
+  transition: all .3s ease;
+  &:nth-child(even) {
+    background-color: $white;
+  }
+}
+
+table td {
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid $gray-blue;
+}
+
+table tr:hover {
+  background-color: $white;
+}

data/_sass/3-modules/_buttons.scss

@@ -0,0 +1,27 @@
+.button {
+  display: inline-block;
+  white-space: nowrap;
+  vertical-align: middle;
+  font: inherit;
+  text-align: center;
+  padding: round($base-spacing-unit / 2) ($base-spacing-unit * 2);
+  border-radius: $global-radius;
+  cursor: pointer;
+  transition: $global-transition;
+
+  &--primary {
+    color: $button-color;
+    background-color: $button-background-color;
+
+    &:hover {
+      background-color: darken($primary-color, 15%);
+      color: $white;
+      transition: $global-transition;
+    }
+  }
+
+  &--big {
+    display: block;
+    width: 100%;
+  }
+}

data/_sass/3-modules/_footer.scss

@@ -0,0 +1,82 @@
+// FOOTER
+.footer {
+  padding: 50px 0;
+  margin-top: 30px;
+  background: $black;
+}
+
+.footer-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 15px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid $border-color;
+  .logo-text {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 16px;
+    text-transform: uppercase;
+    letter-spacing: 5px;
+    color: $text;
+    &:hover {
+      color: $gray-blue;
+    }
+  }
+  .top {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 30px;
+    border: 1px solid $blue-black;
+    background-color: $blue-black;
+    color: $text;
+    cursor: pointer;
+    transition: $global-transition;
+    opacity: .5;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.footer-bottom {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  .copyright {
+    margin-right: 60px;
+    p {
+      margin-bottom: 0;
+      font-size: 13px;
+      color: $light-white;
+      a {
+        color: $light-white;
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+  .footer-social {
+    ul {
+      li {
+        display: inline-block;
+        margin-left: 15px;
+        &:first-child {
+          margin-left: 0;
+        }
+        a {
+          font-size: 13px;
+          font-weight: bold;
+          color: $light-white;
+          transition: $global-transition;
+          &:hover {
+            color: $primary-color;
+          }
+        }
+      }
+    }
+  }
+}

data/_sass/3-modules/_pagination.scss

@@ -0,0 +1,41 @@
+// Pagination
+.pagination {
+  margin: 20px 0 40px;
+  .pagination-list {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    .older-posts, .previous-posts, .newer-posts {
+      display: inline-block;
+      flex-grow: 1;
+      .older-link, .previous-link, .newer-link {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 20px 35px;
+        font-size: 14px;
+        line-height: 18px;
+        font-weight: bold;
+        color: $text;
+        background: rgba($blue-darken, .95);
+        transition: $global-transition;
+        &:hover {
+          background: rgba(28, 29, 31, 0.95);
+        }
+      }
+    }
+    .older-link {
+      i {
+        margin-left: 10px;
+      }
+    }
+    .previous-link, .newer-link {
+      i {
+        margin-right: 10px;
+      }
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    margin: 20px 0;
+  }
+}

data/_sass/4-layouts/_home.scss

@@ -0,0 +1,347 @@
+// Header
+.header {
+  margin-bottom: 50px;
+  background: $black;
+  padding: 40px 0 0;
+}
+
+.header-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: $light-white;
+}
+
+.header-avatar {
+  display: block;
+  margin: auto;
+  border-radius: 100%;
+  width: 100px;
+  overflow: hidden;
+  margin-bottom: 20px;
+  border: 4px solid $white;
+
+  @media only screen and (min-width: 768px) {
+    width: 200px;
+    margin-bottom: 40px;
+  }
+
+  &:hover {
+    @include scale(1.05);
+  }
+}
+
+.header-title {
+  font-family: "Futura Md BT",sans-serif;
+  font-size: 27px;
+  font-weight: 500;
+  letter-spacing: 0em;
+  line-height: 1;
+  text-align: right;
+
+  @media only screen and (min-width: 768px)  {
+    font-size: 32px;
+  }
+
+  @media only screen and (min-width: 1220px)  {
+    font-size: 40px;
+  }
+}
+
+.header-subtitle{
+  font-family: "Futura Md BT",sans-serif;
+  font-size: 18px;
+  font-weight: 500;
+  letter-spacing: 0em;
+  text-align: right;
+  border-bottom: 4px solid $light-white;
+  margin-bottom: 20px;
+
+  @media only screen and (min-width: 768px)  {
+    font-size: 32px;
+  }
+
+  @media only screen and (min-width: 1220px)  {
+    font-size: 40px;
+  }
+}
+
+.menu-links {
+  .list-reset {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 60px;
+    .item{
+      list-style: none;
+      .item-link{
+        color: $light-white;
+        font-size: 18px;
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+}
+
+.header-tagline {
+  margin-top: 10px;
+  font-family: $base-font-family;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0em;
+  line-height: 1.5;
+
+  @media only screen and (min-width: 768px)  {
+    margin-top: 15px;
+    font-size: 18px;
+  }
+
+   @media only screen and (min-width: 1220px) {
+    font-size: 18px;
+  }
+}
+
+// Articles
+.article-first {
+  margin-bottom: 30px;
+  background: $black;
+  .article-image-first {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 450px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: $black;
+    box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .25);
+    &:before {
+      content: "";
+      display: table;
+      padding-top: 50%;
+    }
+  }
+  .article-content-first {
+    padding: 20px;
+    color: $text;
+    .article-tag {
+      .tag {
+        font-size: 12px;
+      }
+    }
+    .article-date {
+      .date {
+        font-size: 12px;
+        color: rgba($text, .8);
+      }
+    }
+    .article-title {
+      margin-bottom: 20px;
+      font-size: 30px;
+      line-height: 30px;
+      font-weight: normal;
+      a {
+        color: $text;
+        transition: $global-transition;
+      }
+    }
+    .article-excerpt {
+      max-width: 450px;
+      margin-bottom: 30px;
+      font-size: 14px;
+      line-height: 23px;
+    }
+    .button {
+      font-size: 14px;
+      font-weight: 700;
+      border: 1px solid rgba(201, 211, 231, 50);
+      color: $text;
+      transition: $global-transition;
+      &:hover {
+        border: 1px solid $primary-color;
+        background: $primary-color;
+        color: $white;
+      }
+    }
+  }
+}
+
+.article {
+  display: flex;
+  margin-bottom: 25px;
+  .article-box {
+    padding-bottom: 20px;
+    border-bottom: 2px solid $border-color;
+  }
+  .article-head {
+    background: $black;
+  }
+  .article-image {
+    position: relative;
+    display: block;
+    margin-bottom: 20px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: $black;
+    box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .25);
+    &:before {
+      content: "";
+      display: table;
+      padding-top: 75%;
+    }
+  }
+  .article-content {
+    .article-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: 5px;
+      .article-date {
+        font-size: 12px;
+        color: rgba($text, .8);
+      }
+      .article-tag {
+        .tag {
+          display: inline-block;
+          padding: 2px 5px;
+          margin-right: 5px;
+          font-size: 12px;
+          line-height: 18px;
+          font-weight: bold;
+          border: 1px solid $primary-color;
+          border-radius: $global-radius;
+          text-transform: capitalize;
+          color: $primary-color;
+          transition: $global-transition;
+          &:last-child {
+            margin-right: 0;
+          }
+          &:hover {
+            background: $primary-color;
+            color: $white;
+          }
+        }
+      }
+    }
+    .article-title {
+      margin-bottom: 5px;
+      a {
+        font-size: 24px;
+        color: $text;
+      }
+    }
+    .article-excerpt {
+      margin-bottom: 0;
+      font-size: 15px;
+      line-height: 25px;
+      color: $light-white;
+    }
+  }
+}
+
+.article-box {
+  position: relative;
+  overflow: hidden;
+}
+
+.article-first .article-image-first, .article-box .article-image {
+  position: relative;
+  opacity: 0;
+  transition: all 1s cubic-bezier(0.6, 0.3, 0, 1);
+}
+
+.article-first.reveal-in .article-image-first, .article-box.reveal-in .article-image {
+  opacity: 1;
+}
+
+
+
+// Media
+@media only screen and (min-width: 576px) {
+  .article-first {
+    .article-content-first {
+      .article-title {
+        font-size: 45px;
+        line-height: 45px;
+      }
+      .article-excerpt {
+        margin-bottom: 50px;
+      }
+    }
+  }
+
+  .menu-list {
+    .menu-link {
+      font-size: 50px;
+      line-height: 80px;
+      &:before {
+        height: 8px;
+      }
+    }
+  }
+
+}
+
+@media only screen and (min-width: 768px) {
+  .article-first {
+    .article-content-first {
+      padding: 60px 40px 0;
+    }
+  }
+}
+
+@media only screen and (max-width: 480px) {
+// Header
+.header {
+  padding: 20px 0 0;
+  margin-bottom: 30px;
+}
+
+.header-box {
+  flex-flow: wrap;
+}
+
+.header-box hr{
+  width: 100%;
+  background-color: transparent;
+  margin: 0;
+}
+
+.wd-mob{
+  width: 100%;
+}
+
+.header-avatar {
+  margin: auto;
+  margin-bottom: 25px;
+}
+
+.header-title {
+  font-size: 20px;
+  text-align: center;
+}
+
+.header-subtitle{
+  font-size: 16px;
+  text-align: center;
+  border-bottom: 2px solid #e7e7e7;
+}
+.menu-links {
+  .list-reset {
+  margin-top: 20px;
+    .item{
+      list-style: none;
+      width: calc(100% / 2);
+    }
+  }
+}
+
+
+}
+