voppe-jekyll-theme 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4181af02d3632976bdd3d8c7468b10c949a9d65a
-  data.tar.gz: 7fbfd90400b8f9312fc0ec3362ba866a0504605c
+  metadata.gz: 33b392163f31005583cc12c3c6f3be0776e45c58
+  data.tar.gz: 7a2dbbce8bbda7080d4fbd95c38a3742f41cac9a
 SHA512:
-  metadata.gz: feef835e316a902c92cb057dfe6f6704935b85c52ef2c75384e44273fa9a43d94710278c8f2789515a2978d59b3b5c99cad5e3def8cc00cf1494ad114f1682fa
-  data.tar.gz: d82b0c572d12d4d554665157ca99ef5249e18dbd645b5bd87002a32b082d36d79b70223e73dcc79f817983cdb2b3e7914025daf3d73517ffe3cea892b4023ce2
+  metadata.gz: 2c07b7c2b9b66bd89318895f2d4dbf5ee24f70a8e6f7cd80ed3e6029ac6615e925603d0958cb2398430794d9fdecb2e3fad24e64396a1460d2d62b56dde1dc7d
+  data.tar.gz: b9b7d9411b3b67b331b6e31c5cb0ff8e71441c61660ea35a2dfab0a7105caf0eb24a1930a35ab893d243dbab82648f22650658679f598870a786e3d9dc57cb07

data/_includes/labels.html

@@ -0,0 +1,9 @@
+<section>
+    <label>{{include.label|capitalize}}:</label>
+    {% for element in include.collection %}
+        {% assign element_lc = {{element|downcase}} %}
+        {% assign icon = {{element_lc}} %}
+        {% if site.data.devicons[element_lc] %}{% assign icon = site.data.devicons[element_lc] %}{% endif %}
+        <span class="bubble"><span class="devicons devicons-{{icon}}"></span>{{element}}</span>
+    {% endfor %}
+</section>  

data/_layouts/list.html

@@ -5,7 +5,7 @@ layout: default
     <nav class="list">
         {% for post in site[page.collection] %}
         <a href="{{ post.url }}">
-            <section class="card">
+            <section>
                 <h1>{{ post.title }}</h1>
                 {{ post.excerpt }}
             </section>

data/_layouts/projects.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+<main>
+    <nav class="list">
+        {% for post in site[page.collection] %}
+        <a href="{{ post.url }}">
+            <section>
+                <h1>{{ post.title }}</h1>
+                <div class="content">
+                    {{post.content}}
+                </div>
+                <div class="labels">
+                    {% for label in post.labels %}
+                    {% assign collection=post[label] %}
+                        {% include labels.html collection=collection label=label %}
+                    {% endfor %}
+                </div>
+            </section>
+        </a>
+        {% endfor %}
+    </nav>
+</main>

data/_sass/_base.scss

@@ -3,6 +3,7 @@
 @import 'utils/hover';
 @import 'utils/utils';
 @import 'utils/media';
-@import 'component/menu';
-@import 'component/card';
+@import 'components/article';
+@import 'components/menu';
+@import 'layouts/jumbotron';
 @import 'app';

data/_sass/app.scss

@@ -22,14 +22,16 @@ nav.list {
     justify-content: center;
     align-content: flex-start;
     align-items: flex-start;
+    width: 100%;
 
     a {
-        flex-grow: 0;
-        flex-shrink: 0;
-        @include media-desktop {
-            flex-basis: $size-post;
-        }
-
+        width: 100%;
+        max-width: 60em;
+        background-color: $color-bg-secondary;
+        min-width: 12em;
+        margin: 1em;
+        padding: 1em;
+            
         color: inherit;
         text-decoration: none;
 
@@ -37,42 +39,34 @@ nav.list {
             font-size: 1.5em;
         }
 
-        &:hover .card {
+        &:hover {
             background-color: $color-primary;
         }
     }
 }
 
-article {
-    background-color: $color-bg-secondary;
-    padding: 1em;
-
-    .post & {
-        flex-basis: $size-post;
-    }
-
-    a {
-        color: $color-secondary;
-
-        &:visited {
-            color: $color-primary;
-        }
+.bubble {
+    border: 1px solid black;
+    background: black;
+    border-radius: 0.5em;
+    padding: 0.5em;
+}
 
-        &:hover {
-            color: $color-text;
-        }
+main section {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    
+    label {
+        text-align: right;
+        display: inline-block;
+        min-width: 6em;
     }
 
-    @include media-mobile {
-        margin-top: 2em;
-    }
-    @include media-tablet {
-        margin-top: 2em;
-    }
-
-    @include media-desktop {
-        margin-left: 1em;
-        margin-right: 1em;
+    .devicons {
+        margin-right: 0.25em;
+        position: relative;
+        top: 0.25em;
+        font-size: 2em;
     }
 }
 
@@ -84,11 +78,4 @@ main {
     justify-content: center;
     align-content: flex-start;
     align-items: flex-start;
-
-    &.jumbotron {
-        text-align: center;
-        align-content: center;
-        align-items: center;
-        font-size: 6em;
-    }
 }

data/_sass/components/article.scss

@@ -0,0 +1,34 @@
+
+
+article {
+    background-color: $color-bg-secondary;
+    padding: 1em;
+
+    .post & {
+        flex-basis: $size-post;
+    }
+
+    a {
+        color: $color-secondary;
+
+        &:visited {
+            color: $color-primary;
+        }
+
+        &:hover {
+            color: $color-text;
+        }
+    }
+
+    @include media-mobile {
+        margin-top: 2em;
+    }
+    @include media-tablet {
+        margin-top: 2em;
+    }
+
+    @include media-desktop {
+        margin-left: 1em;
+        margin-right: 1em;
+    }
+}

data/_sass/{component → components}/menu.scss

@@ -2,10 +2,21 @@ nav.menu {
     background: $color-bg-secondary;
     height: 100%;
     width: $size-menu;
+    position: fixed;
     
     @include media-tablet {
         width: 100%;
         height: $size-menu;
+
+        + * {
+            margin-top: $size-menu;
+        }
+    }
+
+    @include media-desktop {
+        + * {
+            margin-left: $size-menu;
+        }
     }
 
     &, > * {

data/_sass/layouts/jumbotron.scss

@@ -0,0 +1,13 @@
+main.jumbotron {
+    text-align: center;
+    align-content: center;
+    align-items: center;
+
+    > article {
+        font-size: 6em;
+
+        > section {
+            margin: 0px;
+        }
+    }
+}

data/assets/styles/index.scss

@@ -1,5 +1,6 @@
 ---
 ---
-@import 'normalize.css';
-@import 'font-awesome.min.css';
+@import '../vendor/normalize-css/normalize.css';
+@import '../vendor/font-awesome/css/font-awesome.css';
+@import '../vendor/devicons/css/devicons.css';
 @import '_base';