Add default sharing buttons in theme style

3 files changed, 48 insertions, 15 deletions

diff --git a/assets/scss/_sharing-buttons.scss b/assets/scss/_sharing-buttons.scss
new file mode 100644
index 0000000..c6bee53
--- /dev/null
+++ b/assets/scss/_sharing-buttons.scss
@@ -0,0 +1,34 @@
+.sharing-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .resp-sharing-button__icon,
+  .resp-sharing-button__link {
+    display: inline-block;
+  }
+
+  .resp-sharing-button__link {
+    text-decoration: none;
+    margin: 0.5em;
+  }
+
+  .resp-sharing-button {
+    border-radius: 5px;
+    transition: 25ms ease-out;
+    padding: 0.5em 0.75em;
+    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
+  }
+
+  .resp-sharing-button__icon svg {
+    width: 1em;
+    height: 1em;
+    margin-right: 0.4em;
+    vertical-align: top;
+  }
+
+  .resp-sharing-button--small svg {
+    margin: 0;
+    vertical-align: middle;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss
index 87d86df..f593086 100644
--- a/assets/scss/_single.scss
+++ b/assets/scss/_single.scss
@@ -4,7 +4,6 @@
   text-align: left;
   padding: 20px;
   margin: 20px auto;
-
   @media #{$media-size-tablet} {
     max-width: 600px;
   }
@@ -18,7 +17,6 @@
   &-title {
     font-size: 2.625rem;
     margin: 0 0 20px;
-
     @media #{$media-size-phone} {
       font-size: 2rem;
     }
@@ -32,7 +30,7 @@
     display: block;
     margin-bottom: 20px;
     font-size: 1rem;
-    opacity: .5;
+    opacity: 0.5;
 
     a {
       text-decoration: none;
@@ -48,7 +46,6 @@
     margin: 40px -50px;
     width: 860px;
     max-width: 860px;
-
     @media #{$media-size-tablet} {
       margin: 20px 0;
       width: 100%;
@@ -57,12 +54,12 @@
 
   &-info {
     margin-top: 30px;
-    font-size: .8rem;
+    font-size: 0.8rem;
     line-height: normal;
     @include dimmed;
 
     p {
-      margin: .8em 0;
+      margin: 0.8em 0;
     }
 
     a:hover {
@@ -70,14 +67,14 @@
     }
 
     svg {
-      margin-right: .8em;
+      margin-right: 0.8em;
     }
 
     .tag {
-      margin-right: .5em;
+      margin-right: 0.5em;
 
       &::before {
-        content: "#"
+        content: "#";
       }
     }
 
@@ -102,7 +99,7 @@
     display: flex;
     text-align: center;
     position: relative;
-    margin: 30px 0 20px;
+    margin: 20px 0;
 
     &-h {
       text-align: center;
@@ -110,10 +107,10 @@
       padding: 5px 10px;
       background: $light-background;
       color: $light-color-secondary;
-      font-size: .8rem;
+      font-size: 0.8rem;
       text-transform: uppercase;
       text-decoration: none;
-      letter-spacing: .1em;
+      letter-spacing: 0.1em;
       z-index: 1;
 
       .dark-theme & {
@@ -188,4 +185,4 @@
   &.previous .button__icon {
     margin-right: 8px;
   }
-}
+}
\ No newline at end of file
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 207d5ee..dc90f24 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,11 +1,12 @@
+/* Must be loaded before everything else */
 @import "normalize";
 @import "prism";
-
+/* Main stuff */
 @import "variables";
 @import "mixins";
 @import "fonts";
 @import "buttons";
-
+/* Modules */
 @import "header";
 @import "logo";
 @import "menu";
@@ -13,3 +14,4 @@
 @import "list";
 @import "single";
 @import "footer";
+@import "sharing-buttons";
\ No newline at end of file