console-theme 0.1.0

data/_sass/_blocks/site.scss

@@ -0,0 +1,141 @@
+.site{
+
+  &-404{
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &-icon{
+
+    }
+
+    &-title{
+      line-height: 1.5em !important;
+      font: 30px "Press Start 2P", 'Nanum Gothic', Helvetica, Arial, sans-serif;
+      padding: 10px;
+    }
+  }
+
+  &-header{
+    height: 10%;
+    margin-top: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    padding-left: 20px;
+    padding-right: 20px;
+    background-color: map-get($colors,_blue-header);
+  }
+
+  &-title{
+    font-size: 20px;
+    font-weight: 300;
+    line-height: 20px;
+    letter-spacing: -1px;
+    margin-bottom: 0;
+    float: left;
+
+    &-container{
+      height: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+
+      &-header{
+        @include breakpoint(computers){
+          font: 400 55px "Pacifico", 'Nanum Gothic', Helvetica, Arial, sans-serif;
+        }
+
+        @include breakpoint(mobile){
+          font: 400 25px "Pacifico", 'Nanum Gothic', Helvetica, Arial, sans-serif;
+          color: map-get($colors, _green-lime) !important;
+        }
+      }
+    }
+
+    &-header{
+      line-height: 1.5em !important;
+      font: 25px "Press Start 2P", 'Nanum Gothic', Helvetica, Arial, sans-serif;
+      color: map-get($colors, _white);
+
+      @include breakpoint(smallest){
+        font: 10px "Press Start 2P", 'Nanum Gothic', Helvetica, Arial, sans-serif;
+      }
+    }
+  }
+
+  &-footer{
+    background-color: map-get($colors, _blue-header);
+    border-top: 1px solid #e8e8e8;
+  }
+
+  &-global{
+    min-height: 50px;
+    background-color: map-get($colors,_blue-global);
+    display: flex;
+    align-items: center;
+    position: fixed;
+    min-width: 100%;
+    z-index: 2;
+    top: 0;
+  }
+
+  &-navigation{
+
+    &-close{
+      @include breakpoint(computers){
+        width: 40px;
+        height: 8%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      @include breakpoint(mobile){
+        display: none;
+      }
+    }
+
+    position: fixed;
+    background-color: map-get($colors,_blue-global);
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+
+    @include breakpoint(computers){
+      height: 100%;
+      min-width: 20%;
+      transform: translateX(-101%);
+      transition: opacity 0.75s ease, transform 0.75s ease;
+      top: 0;
+      padding: 5px;
+    }
+
+    @include breakpoint(mobile){
+      width: 100%;
+      min-height: 130px;
+      padding: 5px;
+      visibility: hidden; /* never use display: block and none when giving animation!*/
+      opacity: 0;
+      transition: visibility 0.2s, opacity 0.2s linear;
+    }
+
+    &.active{
+      @include breakpoint(computers){
+        transform: none;
+      }
+
+      @include breakpoint(mobile){
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+  }
+}
+

data/_sass/_configurations/base.scss

@@ -0,0 +1,390 @@
+/*
+* Many of the syles included in this file is a direct copy from main.css
+* which used to be a default file when create a base Jekyll application.
+*/
+
+/*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+/**
+ * Basic styling
+ */
+
+html {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+}
+
+html, body{
+  margin: 0 !important;
+  height: 100%;
+}
+
+body {
+  font: 400 16px/1.5 "PT Sans", 'Nanum Gothic', Helvetica, Arial, sans-serif;
+  color: #111;
+  background-color: map-get($colors, _grey-background);
+  -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,
+.highlight {
+  margin-bottom: 15px; }
+
+
+/**
+ * Images
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle; }
+
+/**
+ * Figures
+ */
+figure > img {
+  display: block; }
+
+figcaption {
+  font-size: 14px; }
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: 30px; }
+
+li > ul,
+li > ol {
+  margin-bottom: 0; }
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400; }
+
+/**
+ * Links
+ */
+a {
+  color: map-get($colors, _white);
+  text-decoration: none;
+}
+a:visited {
+    color: map-get($colors, _white);
+}
+a:hover {
+    color: map-get($colors, _white);
+    text-decoration: none;
+}
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: #828282;
+  border-left: 4px solid #e8e8e8;
+  padding-left: 15px;
+  font-size: 18px;
+  letter-spacing: -1px;
+  font-style: italic;
+}
+
+blockquote > :last-child {
+    margin-bottom: 0;
+}
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+  font-size: 15px;
+  border: 1px solid #e8e8e8;
+  border-radius: 3px;
+  background-color: #eef; }
+
+code {
+  padding: 1px 5px; }
+
+pre {
+  padding: 8px 12px;
+  overflow-x: auto; }
+  pre > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0; }
+
+/**
+ * Wrapper
+ */
+.wrapper {
+  height: 70%;
+  max-width: -webkit-calc(800px - (30px * 2));
+  max-width: calc(800px - (30px * 2));
+  margin-right: auto;
+  margin-left: auto;
+  padding: 25px;
+
+  a {
+  color: map-get($colors, _blue-cobalt);
+  text-decoration: none; }
+  a:visited {
+    color: map-get($colors,_blue-cello); }
+  a:hover {
+    color: map-get($colors, _blue-cello);
+    text-decoration: none; }
+
+  &-title{
+    flex-basis: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &:after{
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  @include breakpoint(computers){
+    max-width: -webkit-calc(800px - (30px));
+    max-width: calc(800px - (30px));
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+
+
+}
+
+/**
+ * Icons
+ */
+.icon > svg {
+  display: inline-block;
+  vertical-align: middle; }
+  .icon > svg path {
+    fill: #828282; }
+
+.footer{
+
+  &-col{
+
+    padding-left: 5px;
+
+    &-wrapper{
+      font-size: 15px;
+      color: map-get($colors, _white);
+      display: flex;
+
+      &:after{
+        content: "";
+        display: table;
+        clear: both;
+      }
+    }
+
+  }
+
+}
+
+/**
+ * Page content
+ */
+.page-content {
+  padding: 30px 0; }
+
+.page-heading {
+  font-size: 20px; }
+
+.post-list > li {
+    margin-top: 30px; }
+
+/**
+ * Blicking effect
+ */
+
+blink { animation: blinker 0.7s infinite alternate; }
+@keyframes blinker {
+  from { visibility: hidden; }
+  50% { visibility: hidden; }
+  to { visibility: visible; }
+}
+@-webkit-keyframes blinker {
+  from { visibility: hidden; }
+  50% { visibility: hidden; }
+  to { visibility: visible; }
+}
+
+/**
+ * Syntax highlighting styles
+ */
+  .highlighter-rouge .highlight {
+    background: #eef; }
+  .highlight .c {
+    color: #998;
+    font-style: italic; }
+  .highlight .err {
+    color: #a61717;
+    background-color: #e3d2d2; }
+  .highlight .k {
+    font-weight: bold; }
+  .highlight .o {
+    font-weight: bold; }
+  .highlight .cm {
+    color: #998;
+    font-style: italic; }
+  .highlight .cp {
+    color: #999;
+    font-weight: bold; }
+  .highlight .c1 {
+    color: #998;
+    font-style: italic; }
+  .highlight .cs {
+    color: #999;
+    font-weight: bold;
+    font-style: italic; }
+  .highlight .gd {
+    color: #000;
+    background-color: #fdd; }
+  .highlight .gd .x {
+    color: #000;
+    background-color: #faa; }
+  .highlight .ge {
+    font-style: italic; }
+  .highlight .gr {
+    color: #a00; }
+  .highlight .gh {
+    color: #999; }
+  .highlight .gi {
+    color: #000;
+    background-color: #dfd; }
+  .highlight .gi .x {
+    color: #000;
+    background-color: #afa; }
+  .highlight .go {
+    color: #888; }
+  .highlight .gp {
+    color: #555; }
+  .highlight .gs {
+    font-weight: bold; }
+  .highlight .gu {
+    color: #aaa; }
+  .highlight .gt {
+    color: #a00; }
+  .highlight .kc {
+    font-weight: bold; }
+  .highlight .kd {
+    font-weight: bold; }
+  .highlight .kp {
+    font-weight: bold; }
+  .highlight .kr {
+    font-weight: bold; }
+  .highlight .kt {
+    color: #458;
+    font-weight: bold; }
+  .highlight .m {
+    color: #099; }
+  .highlight .s {
+    color: #d14; }
+  .highlight .na {
+    color: #008080; }
+  .highlight .nb {
+    color: #0086B3; }
+  .highlight .nc {
+    color: #458;
+    font-weight: bold; }
+  .highlight .no {
+    color: #008080; }
+  .highlight .ni {
+    color: #800080; }
+  .highlight .ne {
+    color: #900;
+    font-weight: bold; }
+  .highlight .nf {
+    color: #900;
+    font-weight: bold; }
+  .highlight .nn {
+    color: #555; }
+  .highlight .nt {
+    color: #000080; }
+  .highlight .nv {
+    color: #008080; }
+  .highlight .ow {
+    font-weight: bold; }
+  .highlight .w {
+    color: #bbb; }
+  .highlight .mf {
+    color: #099; }
+  .highlight .mh {
+    color: #099; }
+  .highlight .mi {
+    color: #099; }
+  .highlight .mo {
+    color: #099; }
+  .highlight .sb {
+    color: #d14; }
+  .highlight .sc {
+    color: #d14; }
+  .highlight .sd {
+    color: #d14; }
+  .highlight .s2 {
+    color: #d14; }
+  .highlight .se {
+    color: #d14; }
+  .highlight .sh {
+    color: #d14; }
+  .highlight .si {
+    color: #d14; }
+  .highlight .sx {
+    color: #d14; }
+  .highlight .sr {
+    color: #009926; }
+  .highlight .s1 {
+    color: #d14; }
+  .highlight .ss {
+    color: #990073; }
+  .highlight .bp {
+    color: #999; }
+  .highlight .vc {
+    color: #008080; }
+  .highlight .vg {
+    color: #008080; }
+  .highlight .vi {
+    color: #008080; }
+  .highlight .il {
+    color: #099; }

data/_sass/_configurations/color.scss

@@ -0,0 +1,30 @@
+$colors:(
+	_black:#000,
+	_blue-blizzard:#bfdff2,
+	_blue-cobalt:#0038C8,
+	_blue-cornflower:#5a72b6,
+	_blue-cello:#203f69,
+	_blue-jelly-bean:#2877a8,
+	_blue-seagull:#80bfe6,
+	_blue-global:#2B3239,
+	_blue-header:#363F48,
+	_blue-zodiac:#0f2543,
+	_blue-linkedin:#0075B4,
+	_blue-github:#9CDAF0,
+	_grey-abbey:#53565a,
+	_grey-quill:#d9d9d6,
+	_grey-background:#EDF1F4,
+	_grey-tuna:#393b3e,
+	_grey-desert-storm:#f4f4f3,
+	_green-lime: #93ffa0,
+	_green-light: #09D794,
+	_red-old-brick:#931a1a,
+	_red-youtube:#C1181D,
+	_purple-danube:#6a86d6,
+	_purple-jacksons:#1a3793,
+	_white:#fff,
+	_yellow-tulip-tree:#e8b136
+);
+
+$dark:map-get($colors,_grey-abbey);
+$light:map-get($colors,_white);

data/_sass/_mixins/_breakpoint.scss

@@ -0,0 +1,57 @@
+// Simpler way to reference your breakpoints with a set of presets
+// as well as simple syntax to create new specific breakpoints!
+// The limit accepts min or max so you can set a min-width or max-width breakpoint,
+// the width is self explanatory and if you want to use the built in defaults
+// reference them (large, medium, or small constraints) in the last variable and
+// set the other two to 0.
+@mixin breakpoint($breakpoint-preset:0,$breakpoint-max-width:0,$breakpoint-min-width:0,
+  $breakpoint-name:'breakpoint-#{$breakpoint-max-width}-#{$breakpoint-min-width}'){
+
+  @if($breakpoint-preset=='none'){
+    @media(max-width:$breakpoint-max-width) and (min-width:$breakpoint-min-width){
+      @content;
+    }
+  }
+  @elseif($breakpoint-preset=='largest'){
+    $breakpoint-min-width:1000px;
+    $breakpoint-name:'largest';
+
+    @media(min-width:$breakpoint-min-width){
+      @content;
+    }
+  }
+  @elseif($breakpoint-preset=='computers'){
+    $breakpoint-min-width:701px;
+    $breakpoint-name:'computers';
+
+    @media(min-width:$breakpoint-min-width){
+      @content;
+    }
+  }
+  @elseif($breakpoint-preset=='mobile'){
+    $breakpoint-max-width:700px;
+    $breakpoint-min-width:0px;
+    $breakpoint-name:'mobile';
+
+    @media(max-width:$breakpoint-max-width) and (min-width:$breakpoint-min-width){
+      @content;
+    }
+  }
+   @elseif($breakpoint-preset=='tablet'){
+    $breakpoint-min-width:580px;
+    $breakpoint-name:'mobile';
+
+    @media(min-width:$breakpoint-min-width){
+      @content;
+    }
+  }
+  @elseif($breakpoint-preset=='smallest'){
+    $breakpoint-max-width:580px;
+    $breakpoint-min-width:0px;
+    $breakpoint-name:'mobile';
+
+    @media(max-width:$breakpoint-max-width) and (min-width:$breakpoint-min-width){
+      @content;
+    }
+  }
+}

data/_sass/style.scss

@@ -0,0 +1,12 @@
+@import '_mixins/_breakpoint.scss';
+
+@import '_configurations/color.scss';
+@import '_configurations/base.scss';
+
+@import '_blocks/site.scss';
+@import '_blocks/menu.scss';
+@import '_blocks/container.scss';
+@import '_blocks/post.scss';
+@import '_blocks/card.scss';
+@import '_blocks/icon.scss';
+@import '_blocks/category.scss';