Commit theme

themes/m10c/assets/css/_base.scss

@@ -0,0 +1,59 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.6;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: $dark-color;
+  color: $light-color;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $lightest-color;
+}
+
+a {
+  color: $primary-color;
+  transition: color 0.35s;
+  text-decoration: none;
+
+  &:hover {
+    color: $lightest-color;
+  }
+}
+
+// Browsers seem to use a smaller default font-size with monospaced code
+// blocks (like 80% of the size of normal text) and that looks pretty bad with
+// small inline code-blocks in the middle of normal text (mainly because of
+// the very noticeable difference in x-height). This CSS corrects that problem.
+code {
+  font-family: monospace,monospace;
+  font-size: 1em;
+  color: rgba($light-color, .8);
+}
+
+pre {
+  font-size: 1rem;
+  line-height: 1.2em;
+  margin: 0;
+  overflow: auto;
+
+  // A larger monospaced block of text (that isn't mixed with normal text)
+  // generally looks heavier than normal text with the same font size. For this
+  // reason using a smaller monospaced font size makes sense in this situation.
+  code {
+    font-size: .8em;
+  }
+}
+
+::selection {
+  background: rgba($light-color, .25);
+}
+::-moz-selection {
+  background: rgba($light-color, .25);
+}

themes/m10c/assets/css/_extra.scss

@@ -0,0 +1,2 @@
+// Do not add any CSS to this file in the theme sources.
+// This file can be overridden to add project-specific CSS.

themes/m10c/assets/css/components/_app.scss

@@ -0,0 +1,40 @@
+.app-header {
+  padding: 2.5em;
+  background: $darkest-color;
+  text-align: center;
+}
+
+.app-header-avatar {
+  width: 15rem;
+  height: 15rem;
+  border-radius: 100%;
+  border: 0.5rem solid $primary-color;
+}
+
+.app-container {
+  padding: 2.5rem;
+}
+
+.app-header-social {
+  font-size: 2em;
+  color: $lightest-color;
+
+  a {
+    margin: 0 0.1em;
+  }
+}
+
+@media (min-width: 940px) {
+  .app-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 20rem;
+    min-height: 100vh;
+  }
+
+  .app-container {
+    max-width: 65rem;
+    margin-left: 20rem;
+  }
+}

themes/m10c/assets/css/components/_error_404.scss

@@ -0,0 +1,7 @@
+.error-404 {
+  text-align: center;
+}
+
+.error-404-title {
+  text-transform: uppercase;
+}

themes/m10c/assets/css/components/_icon.scss

@@ -0,0 +1,6 @@
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}

themes/m10c/assets/css/components/_pagination.scss

@@ -0,0 +1,24 @@
+.pagination {
+  display: block;
+  list-style: none;
+  padding: 0;
+  font-size: 0.8em;
+  text-align: center;
+  margin: 3em 0;
+}
+
+.page-item {
+  display: inline-block;
+  .page-link {
+    display: block;
+    padding: 0.285em 0.8em;
+  }
+
+  &.active {
+    .page-link {
+      color: $lightest-color;
+      border-radius: 2em;
+      background: $primary-color;
+    }
+  }
+}

themes/m10c/assets/css/components/_post.scss

@@ -0,0 +1,25 @@
+.post-title {
+  color: $lightest-color;
+}
+
+.post-content {
+  & > pre,
+  .highlight {
+    margin: 1em 0;
+  }
+
+  & > pre,
+  .highlight > pre,
+  .highlight > div {
+    border-left: 0.4em solid rgba($primary-color, .8);
+    padding: .5em 1em;
+  }
+
+  img {
+    max-width: 100%;
+  }
+}
+
+.post-meta {
+  font-size: 0.8em;
+}

themes/m10c/assets/css/components/_posts_list.scss

@@ -0,0 +1,17 @@
+.posts-list {
+  padding: 0;
+}
+
+.posts-list-item {
+  list-style: none;
+  padding: 0.4em 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
+  }
+}
+
+.posts-list-item-description {
+  display: block;
+  font-size: 0.8em;
+}

themes/m10c/assets/css/components/_tag.scss

@@ -0,0 +1,15 @@
+.tag {
+  display: inline-block;
+  margin-right: 0.2em;
+  padding: 0 0.6em;
+  font-size: 0.9em;
+  border-radius: 0.2em;
+  white-space: nowrap;
+  background: rgba(255, 255, 255, 0.1);
+  transition: color 0.35s, background 0.35s;
+
+  &:hover {
+    transition: color 0.25s, background 0.05s;
+    background: rgba(255, 255, 255, 0.3);
+  }
+}

themes/m10c/assets/css/components/_tags_list.scss

@@ -0,0 +1,28 @@
+.tags-list {
+  padding: 0;
+}
+
+.tags-list-item {
+  list-style: none;
+  padding: 0.4em 0;
+  &:not(:last-child) {
+    border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
+  }
+}
+
+@media (min-width: 450px) {
+  .tags-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .tags-list-item {
+    width: calc(50% - 1em);
+    &:nth-child(even) {
+      margin-left: 1em;
+    }
+    &:nth-last-child(2) {
+      border: none;
+    }
+  }
+}

themes/m10c/assets/css/main.scss

@@ -0,0 +1,20 @@
+$darkest-color: {{ .Site.Params.style.darkestColor | default "#242930" }};
+$dark-color: {{ .Site.Params.style.darkColor | default "#353b43" }};
+$light-color: {{ .Site.Params.style.lightColor | default "#afbac4" }};
+$lightest-color: {{ .Site.Params.style.lightestColor | default "#ffffff" }};
+$primary-color: {{ .Site.Params.style.primaryColor | default "#57cc8a" }};
+
+@import 'base';
+
+@import 'components/app';
+@import 'components/error_404';
+@import 'components/icon';
+@import 'components/pagination';
+@import 'components/post';
+@import 'components/posts_list';
+@import 'components/tag';
+@import 'components/tags_list';
+
+// The last 'extra' import can optionally be overridden on a per project
+// basis by creating a <HUGO_PROJECT>/assets/css/_extra.scss file.
+@import 'extra';