🎉 Initial commit

_sass/bangsring/_base.scss

@@ -0,0 +1,244 @@
+/**
+ * Reset some basic elements
+ */
+html {
+  overflow-x: hidden;
+  width: 100%;
+}
+
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  letter-spacing: .1px;
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  font-family: $base-font-family;
+}
+
+/**
+ * Basic styling
+ */
+body {
+  min-height: 100vh;
+  overflow-x: hidden; 
+  position: relative;
+  background: $neutral;
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  -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;
+}
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+  margin-top: $spacing-unit - 20;
+  margin-bottom: $spacing-unit - 20;
+}
+
+kbd {
+  -moz-border-radius:3px;
+  -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
+  -webkit-border-radius:3px;
+  -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
+  background-color:#f7f7f7;
+  border:1px solid #ccc;
+  border-radius:3px;
+  box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
+  color:#333;
+  display:inline-block;
+  font-family: Roboto;
+  font-size:14px;
+  line-height:1.4;
+  margin:0 .1em;
+  padding:.1em .6em;
+  text-shadow:0 1px 0 $white;
+}
+
+/**
+ * Images
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle;
+  -webkit-user-drag: none;
+}
+
+/**
+ * Figures
+ */
+figure {
+  position: relative;
+}
+
+
+/**
+ * Images
+ */
+figure > img {
+  display: block;
+  position: relative;
+}
+
+/**
+ * Caption Image
+ */
+figcaption {
+  font-size: 13px;
+  text-align: center;
+}
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  padding-bottom: 1px;
+  padding-top: 1px;
+  > ul,
+  > ol {
+    margin-bottom: 2px;
+    margin-top: 0;
+  }
+}
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $base-font-weight;
+}
+
+h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
+  text-decoration: none;
+  border: none;
+  &:hover {
+    text-decoration: none;
+    border: none;
+  }
+}
+
+
+/**
+ * Links
+ */
+a {
+  color: $black;
+  border-bottom: 1px solid #1635de;
+  text-decoration: none;
+
+  &:hover {
+    color: $black;
+    border-bottom: 2px solid #1635de;
+  }
+}
+
+/**
+ * Del
+ */
+del {
+  color: inherit;
+}
+
+/**
+ * Em
+ */
+em {
+  color:inherit;
+}
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: $grey;
+  border-left: 4px solid $black;
+  padding: 5px 5px 5px 15px;
+  border-radius: 2px;
+  @include relative-font-size(1);
+
+  > :last-child {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+}
+
+/**
+ * Wrapper
+ */
+.wrapper {
+  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+  position: relative;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $spacing-unit;
+  padding-left: $spacing-unit;
+  @extend %clearfix;
+
+  @include media-query($on-laptop) {
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+    max-width:         calc(#{$content-width} - (#{$spacing-unit}));
+    padding-right: $spacing-unit / 2;
+    padding-left: $spacing-unit / 2;
+  }
+}
+
+
+/**
+ * Table
+ */
+table {
+  margin: 0 auto;
+  border-collapse: collapse;
+  background: $white;
+  font-family: 'Roboto Mono';
+  font-size: $small-font-size;
+  th { 
+    font-weight: 400;
+    background: #f5f5f5;
+  }
+  th, td, tr {
+    border: 1px solid $light;
+    padding: 4px 8px;
+  }
+}
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/**
+ * When mouse block a text set this color
+ */
+::selection {
+    background: #D6EDFF;
+}
+
+/**
+ * Github Gist clear border 
+ */
+.gist {
+  table {
+    border: 0;
+    tr, td {
+      border: 0;
+    }
+  }
+}