Initial commit

src/css/_underlines.scss

@@ -0,0 +1,64 @@
+@mixin textShadowToCropUnderline($color) {
+  text-shadow:
+    .01em 0 $color,
+    -.01em 0 $color,
+    0 .01em $color,
+    0 -.01em $color,
+
+    .06em 0 $color,
+    -.06em 0 $color,
+    .09em 0 $color,
+    -.09em 0 $color,
+
+    .12em 0 $color,
+    -.12em 0 $color,
+    .15em 0 $color,
+    -.15em 0 $color;
+}
+
+@mixin linkUnderlines($background, $color, $hoverColor) {
+  color: $color;
+  text-decoration: none;
+  @include textShadowToCropUnderline($background);
+
+  background-image:
+    linear-gradient($background, $background),
+    linear-gradient($background, $background),
+    linear-gradient($color, $color);
+  background-size:
+    .05em 2px,
+    .05em 2px,
+    2px 2px;
+  background-repeat:
+    no-repeat,
+    no-repeat,
+    repeat-x;
+  background-position: 0% 1.08em, 100% 1.08em, 0% 1.08em;
+
+  &::selection {
+    @include textShadowToCropUnderline($selectionColor);
+    background-color: $selectionColor;
+  }
+  &::-moz-selection {
+    @include textShadowToCropUnderline($selectionColor);
+    background-color: $selectionColor;
+  }
+  &:before,
+  &:after,
+  *,
+  *:before,
+  *:after {
+    text-shadow: none;
+  }
+  &:visited {
+    color: $color;
+  }
+
+  &:hover {
+    color: $hoverColor;
+    background-image:
+      linear-gradient($background, $background),
+      linear-gradient($background, $background),
+      linear-gradient($hoverColor, $hoverColor);
+  }
+}

src/css/main.scss

@@ -0,0 +1,299 @@
+$border-color: rgba(9, 39, 64, 0.72);
+$link-color: #AD4E4E;
+$nav-height: 40px;
+$selectionColor: #D2D2D2;
+$background-color: #F4F5F6;
+
+@import "_underlines.scss";
+
+body {
+  padding-top: $nav-height;
+  background: $background-color;
+}
+
+* {
+  &::selection {
+    background-color: $selectionColor;
+  }
+  &::-moz-selection {
+    background-color: $selectionColor;
+  }
+}
+
+a {
+  color: #4a4a4a;
+  transition: color ease .3s;
+  margin: 0 3px;
+
+  &:hover {
+    color: $link-color;
+    text-decoration: none;
+  }
+
+  &+img {
+    border-bottom: none;
+  }
+}
+
+pre code {
+  overflow: scroll;
+}
+
+figure p {
+  margin: 0;
+}
+
+iframe {
+  max-width: 100%;
+  border: 0;
+  overflow: scroll;
+}
+
+.emoji {
+  display: inline !important;
+  margin: 0 !important;
+}
+
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $nav-height;
+  display: block;
+  font-size: 1.2em;
+  background: $border-color;
+  border-bottom: 2px solid saturate($border-color, 60%);
+  z-index: 10;
+  text-align: center;
+
+  .github-icon {
+    position: fixed;
+    top: 0;
+    right: 10px;
+  }
+
+  .twitter-icon {
+    position: fixed;
+    top: 0;
+    right: 40px;
+  }
+
+  a {
+    line-height: $nav-height;
+    height: $nav-height;
+    padding: 0 5px;
+    color: #fff;
+    display: inline-block;
+    border: none;
+
+    svg {
+      height: $nav-height / 2;
+      vertical-align: text-bottom;
+      margin: 10px auto;
+    }
+  }
+
+  a:hover {
+    background: #fff;
+    color: $border-color;
+    border-bottom: 2px solid saturate($border-color, 60%);
+
+    svg path {
+      fill: $border-color;
+    }
+  }
+}
+
+#logo {
+  text-align: center;
+  img {
+    width: 200px;
+    border: 2px solid $border-color;
+    border-radius: 100px;
+    padding: 0;
+    margin: 0 auto;
+    box-shadow: 3px 3px 5px 3px #ccc;
+  }
+}
+
+.header, .post-list li article {
+  border-bottom: 1px solid rgba($border-color, .2);
+  position: relative;
+}
+
+.header::after, .post-list li article::after {
+  display: block;
+  content: "";
+  width: 7px;
+  height: 7px;
+  border: 1px solid $border-color;
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  margin-left: -5px;
+  background: #fff;
+  border-radius: 100%;
+  box-shadow: rgba(232,232,232,.5) 0 0 0 5px;
+}
+
+.right {
+  float: right !important;
+}
+
+.center {
+  text-align: center;
+}
+
+.post-list {
+  list-style: none;
+}
+
+.post, .page {
+  padding: 0 7px;
+
+  a {
+    @include linkUnderlines($background-color, #4a4a4a, $link-color);
+  }
+}
+
+
+
+.post-meta {
+    display: inline-block;
+    margin: 15px -7px 5px -7px;
+    font-size: 1.5rem;
+    color: #fff;
+    padding:4px 20px 4px 20px;
+    position: relative;
+    box-shadow: inset 0px 1px 0px rgba(255,255,255,.3),
+        inset 0px 0px 20px rgba(0,0,0,0.1),
+        0px 1px 1px rgba(0,0,0,0.4);
+    background: $border-color;
+    width: 100%;
+    text-align: left;
+
+    a {
+        color: #9EABB3;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    &::before {
+        content: "";
+        width: .2em;
+        bottom: -.45em;
+        position: absolute;
+        display: block;
+        border: .9em solid $border-color;
+        box-shadow: 0px 1px 0px rgba(0,0,0,0.4);
+        z-index: -2;
+        left: -1.2em;
+        border-right-width: .75em;
+        border-left-color: transparent;
+    }
+    &::after {
+        content: "";
+        width: .2em;
+        bottom: -.45em;
+        position: absolute;
+        display: block;
+        border: 0.9em solid rgba(9, 39, 64, 0.72);
+        box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
+        z-index: -2;
+        right: -1.2em;
+        border-left-width: .75em;
+        border-right-color: transparent;
+    }
+
+    span::before{
+        content:"";
+        bottom:-.5em;
+        position:absolute;
+        display:block;
+        border-style:solid;
+        border-color: #000 transparent transparent transparent;
+        z-index:-1;
+        left: 0;
+        border-width: .5em 0 0 .5em;
+    }
+    span::after{
+        content: "";
+        bottom: -.5em;
+        position: absolute;
+        display: block;
+        border-style: solid;
+        border-color: #000 transparent transparent transparent;
+        z-index: -1;
+        right: 0;
+        border-width: .5em .5em 0 0;
+    }
+}
+
+.post-body {
+  margin-bottom: 100px;
+
+  a {
+    font-size: 1.3em;
+  }
+
+  img{
+    display: block;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+}
+
+.pagination {
+  text-align: center;
+  margin: 30px;
+}
+
+
+
+
+
+@media (max-width: 768px) {
+  nav {
+    display: block;
+    height: auto;
+
+    .nav-right {
+      position: fixed;
+      top: 0;
+      right: 0;
+
+      span {
+        display: none;
+      }
+    }
+  }
+}
+
+
+.card {
+  display:block;
+  border: 1px solid $border-color;
+  border-radius: 0.3em;
+  padding: 10px;
+  box-shadow: 1px 1px 2px $border-color;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+}
+
+.experience-list {
+  h3 {
+    font-size: 2em;
+  }
+}
+
+.project-image {
+  width: 100%;
+  height: 100px;
+  background-size: cover;
+  background-position: center;
+}