Merge pull request #158 from basiljs/feature/example-gallery-item

Feature/example gallery item

Author: ff6347

README.md

@@ -114,7 +114,18 @@ To work on the Javascript and SCSS of the site you need to run
 npm run webpack:dev
 ```
 
+## Gallery Content
 
+To add a new gallery item you can duplicate the folder `_source/gallery/example-gallery-item`
+
+There Need to be two images present.
+
+1. thumbnail.png with a size of 320 × 180 px (this will be used in the gallery overview)
+2. splash.png with a size of 1280 × 720 px (this will be used on the start page if featured is true)
+
+You also should replace all the values in the frontmatter of the `index.md` file.  
+
+Please set your project first to `publish: false` and also the `featured: false` to get a review by the maintainers.
 
 ## Recipes
 

_source/_includes/aside-left.html

@@ -18,7 +18,7 @@
         exclude the root path
         -->
       {% assign pages = site.pages | sort: 'order'  %}
-      {% for item in pages %}{% if item.layout != 'entry' %}{%if item.layout == 'default' or item.layout == 'reference' %}{% if item.url != '/' %}
+      {% for item in pages %}{% if item.layout != 'entry' %}{%if item.layout == 'default' or item.layout == 'reference' or item.layout == 'gallery' %}{% if item.url != '/' %}
       <li class="menu-item {% if item.title == page.title %}active{% endif %}"><a href="{{item.url}}"
           class="textgrow menu-link">{{item.title}}</a></li>
       {% endif %}{% endif %}{% endif %}{% endfor %}

_source/_layouts/default.html

@@ -36,11 +36,18 @@
 
     <script src="/assets/js/main.bundle.js" type="text/javascript"></script>
     {% if page.layout == 'reference' or page.layout == 'entry' %}
-
     <script src="/assets/js/vendors~reference.bundle.js" type="text/javascript" defer></script>
-
     <script src="/assets/js/reference.bundle.js" type="text/javascript"></script>
     {% endif %}
+
+    {%- if page.layout == 'gallery' -%}
+    <script src="/assets/js/vendors~gallery-randomize.bundle.js" defer></script>
+    <script src="/assets/js/gallery-randomize.bundle.js"></script>
+    {%- endif -%}
+    {%- if page.hasFeaturedProjects == true -%}
+    <script src="/assets/js/vendors~featured-carousel.bundle.js" defer></script>
+    <script src="/assets/js/featured-carousel.bundle.js"></script>
+    {%- endif -%}
 </body>
 
 </html>

_source/_layouts/gallery.html

@@ -2,23 +2,5 @@
 layout: default
 ---
 
-{% for img in page.images %}
-{%if img == "index.png" %}
-<img src="./images/{{img}}" alt="" style="max-width:100%">
-{% endif %}
-{% endfor %}
-
 {{content}}
 
-{% capture mdcode %}
-```js
-{% include_relative index.js %}
-```
-{% endcapture %}
-{{ mdcode | markdownify }}
-
-{% for img in page.images %}
-{%if img != "index.png" %}
-<img src="./images/{{img}}" alt="" style="max-width:100%">
-{% endif%}
-{% endfor %}

_source/assets/css/scss/_featured-projects.scss

@@ -0,0 +1,36 @@
+.featured-projects {
+  height: 25em;
+}
+
+ul.featured-projects-list {
+}
+
+.featured-project-thumb {
+  max-width: 100%;
+  height: auto;
+  /* width: 1280px; */
+  /* height: 720px; */
+}
+
+li.featured-project {
+  position: relative;
+  list-style: none;
+  display: none;
+}
+
+.featured-project-title {
+  margin: 0;
+  position: absolute;
+  float: left;
+  left: 0px;
+  top: -25px;
+  z-index: 0;
+  background-color: white;
+  padding-right: 1em;
+  padding-left: 0.5em;
+  width: 100%;
+}
+
+img.featured-project-thumb {
+  display: inline;
+}

_source/assets/css/styles.css

@@ -317,7 +317,8 @@ h6 {
   color: $headLineColor;
 }
 
-h4.entries-title {
+h4.entries-title,
+h4.entry-heading {
   text-decoration: none !important;
 }
 
@@ -395,7 +396,7 @@ ul {
 
 // ------------ code
 //
-@import "./scss/syntax.scss";
+@import "./scss/_syntax.scss";
 
 pre {
   background: #eee !important;
@@ -486,8 +487,8 @@ a.textgrow {
   }
 }
 
-@import "./scss/_guidelines.scss", "./scss/reference.scss",
-  "./scss/changelog.scss";
+@import "./scss/_guidelines.scss", "./scss/_reference.scss",
+  "./scss/_changelog.scss", "./scss/_featured-projects.scss";
 
 // ------------------------
 // old basil css. Overwrite new settings