Permalink
Browse files

Adding include

  • Loading branch information...
1 parent 5453661 commit fb971a4f33dfb290f16c547da8b648c5deea93de @karllhughes committed Aug 5, 2017
Showing with 585 additions and 0 deletions.
  1. +46 −0 _sass/whiteglass.scss
  2. +201 −0 _sass/whiteglass/_base.scss
  3. +218 −0 _sass/whiteglass/_layout.scss
  4. +71 −0 _sass/whiteglass/_syntax-highlighting.scss
  5. +49 −0 assets/main.scss
View
@@ -0,0 +1,46 @@
+// Define defaults for each variable.
+$base-font-family: Bitter, "Apple SD Gothic Neo", "Noto Sans", "Source Han Sans", "Noto Sans CJK JP", "Source Han Sans JP", "Noto Sans CJK KR", "Source Han Sans KR", NanumBarunGothic, AppleGothic, "Malgun Gothic", Dotum, sans-serif !default;
+$monospace-font-family: Monaco, Menlo, Consolas, "Courier New", DotumChe, monospace !default;
+$base-font-size: 16px !default;
+$base-font-weight: 400 !default;
+$small-font-size: $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit: 30px !default;
+
+$text-color: #111 !default;
+$background-color: #fdfdfd !default;
+$brand-color: #2568ba !default;
+
+$grey-color: #828282 !default;
+$grey-color-light: lighten($grey-color, 40%) !default;
+$grey-color-dark: darken($grey-color, 25%) !default;
+
+// Width of the content area
+$content-width: 800px !default;
+
+$on-palm: 600px !default;
+$on-laptop: 800px !default;
+
+
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+// .wrapper {
+// padding-right: $spacing-unit / 2;
+// padding-left: $spacing-unit / 2;
+// }
+// }
+@mixin media-query($device) {
+ @media screen and (max-width: $device) {
+ @content;
+ }
+}
+
+
+
+// Import partials.
+@import "whiteglass/base",
+"whiteglass/layout",
+"whiteglass/syntax-highlighting"
+;
View
@@ -0,0 +1,201 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+ margin: 0;
+ padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+ color: $text-color;
+ background-color: $background-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;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+ margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * Images
+ */
+img {
+ max-width: 100%;
+ vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+ display: block;
+}
+
+figcaption {
+ font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+ margin-left: $spacing-unit;
+}
+
+li {
+ > ul,
+ > ol {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: $base-font-weight;
+
+ code {
+ font-size: inherit;
+ }
+}
+
+
+
+/**
+ * Links
+ */
+a {
+ color: $brand-color;
+ text-decoration: none;
+
+ &:visited {
+ color: darken($brand-color, 10%);
+ }
+
+ &:hover {
+ color: $text-color;
+ text-decoration: underline;
+ }
+}
+
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+ color: $grey-color;
+ border-left: 4px solid $grey-color-light;
+ padding-left: $spacing-unit / 2;
+ font-size: 18px;
+ letter-spacing: -1px;
+ font-style: italic;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Rules
+ */
+hr {
+ height: 4px;
+ margin: $spacing-unit / 2 0;
+ border: 0;
+ background-color: $grey-color-light;
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+ font-family: $monospace-font-family;
+ font-size: 13px;
+ border: 1px solid $grey-color-light;
+ border-radius: 0;
+ background-color: lighten($grey-color-light, 5%);
+}
+
+code {
+ padding: 1px 5px;
+}
+
+pre {
+ padding: 8px 12px;
+ overflow-x: auto;
+
+ > code {
+ border: 0;
+ padding-right: 0;
+ padding-left: 0;
+ }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+ 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;
+ }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+ content: "";
+ display: table;
+ clear: both;
+}
Oops, something went wrong.

0 comments on commit fb971a4

Please sign in to comment.