harms-columns-front-page 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 167b146ab5f4728c91082ad7fecc95c2d5c0ac24
+  data.tar.gz: 9810819f885db8d91a88c0ace354db08f62eaa08
+SHA512:
+  metadata.gz: 1718d6c7c8dfc713833cc187af557e9b1ac439971afd05fbf6c68c365f878be1eb28de4939d728c428fb2d879e3ce7e949e30d4900d3e27fe208fee6ea3a447d
+  data.tar.gz: 27b15024c210cb5331fffb08e9b118dc25282a977701f9eafdfff6d515ee9f3e63a37b06d816d4da39c7af60d486cb31ee1bff28465ecaa761583e0b3e2cd14c

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Michael Harms
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,170 @@
+# harms-columns-front-page
+
+This jekyll theme was developed as part of a bachelor thesis.
+
+## Installation
+
+Step 1: Add this line to the bottom of your Jekyll site's `Gemfile`:
+
+```ruby
+gem "harms-columns-front-page"
+```
+Step 2: Install the theme by running this in the terminal:
+
+    bundle
+
+Step 3: Add this lines to the bottom of your Jekyll site's `_config.yml`:
+
+```yaml
+theme: harms-columns-front-page
+gems:
+  - jekyll-lunr-js-search
+```
+
+Step 4: And then run the following command in the terminal:
+
+    bundle exec jekyll serve
+
+Now you can head over to <http://localhost:4000> in your browser and view the new theme on your jekyll site.
+
+## Updating
+
+If you've already installed this theme for your Jekyll site, you can update it by running the following command in the terminal:
+
+    bundle update
+
+## Usage
+
+### Global options
+The following options are available to use in your Jekyll site's `_config.yml`.
+
+**Site Title**
+
+Appears in the header and as the title of your browser window.
+
+```yaml
+title: Your title here
+```
+
+**Site Description**
+
+This is the meta description of your site.
+
+```yaml
+description: Your site description here.
+```
+
+**Profile Image**
+
+This image will appear as a little profile image in your header.
+
+```yaml
+profile-image: path/to/your/image/here.jpg
+```
+
+**Favicon**
+
+The favicon will appear as the icon alongside the title of your site in the browser window. Please use a png-file.
+
+```yaml
+favicon: path/to/your/favicon/here.png
+```
+
+**Subtitle**
+
+The subtitle will appear in your header under the site title.
+
+```yaml
+subtitle: Your subtitle here
+```
+
+**Social Links**
+
+The links to your social profiles will appear in the footer of your site. You have to specify a title and the link url like so:
+
+```yaml
+social:
+  - title: Link 1
+    url: http://www.your-first-link-here.com
+  - title: Link 2
+    url: http://www.your-second-link-here.com
+```
+Optionally you can specify the path to an icon that should be used for the link instead of the title.
+
+```yaml
+social:
+  - title: Link 1
+    url: http://www.your-first-link-here.com
+    icon: path/to/social/icon/1.jpg
+  - title: Link 2
+    url: http://www.your-second-link-here.com
+    icon: path/to/social/icon/1.jpg
+```
+
+**Footer Copyright Text**
+
+You can add your name to the copyright section in the footer.
+
+```yaml
+footer-copyright: Year and name here
+```
+**Home columns**
+
+Here you can add content for the column section on the home page. You have to specify a heading and the content. The button url is optional: if it is not set, there will be no button for that column on your site.
+```yaml
+home-columns:
+  - heading: Your heading 1 here
+    content: Your content 1 here
+    button-url: http://www.your-link-1-here.com
+
+  - heading: Your heading 2 here
+    content: Your content 2 here
+    button-url: http://www.your-link-2-here.com
+
+  - heading: Your heading 3 here
+    content: Your content 3 here
+    button-url: http://www.your-link-3-here.com
+```
+
+### Page and posts options
+
+The following options are available to use in each of your Jekyll pages or posts front matter.
+
+**Layout**
+
+You can specify a layout for a page/post like this:
+
+```yaml
+layout: layout-name-here
+```
+
+The available layouts are:
+* `home`: Default layout for the home page
+* `page`: Default layout for subpages
+* `post`: Default layout for posts
+
+**Title**
+
+This specifies the title of your page/post, which will appear on top of the page/post (except for the home page) and in the title of your browser window behind your site title.
+
+```yaml
+title: Your page/post title here
+```
+
+TODO: Write further options for the posts and pages.
+
+<!-- ## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released. -->
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_includes/footer.html

@@ -0,0 +1,38 @@
+
+<footer>
+
+  <p>&copy; {{ site.footer-copyright }} - <a href="/impressum">Impressum</a> - Webdesign by <a href="https://www.harms.design" target="_blank">Michael Harms</a></p>
+
+</footer>
+
+<script
+  src="https://code.jquery.com/jquery-3.2.1.min.js"
+  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+  crossorigin="anonymous">
+</script>
+<script src="{{ "/assets/main.js " | relative_url }}"></script>
+<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
+{% raw %}
+<script id="search-results-template" type="text/mustache">
+  {{#entries}}
+    <article>
+        <a href="{{url}}">{{title}}</a>
+        {{#date}} - <small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
+    </article>
+  {{/entries}}
+</script>
+{% endraw %}
+<script type="text/javascript">
+  $(function() {
+    $('#search-query').lunrSearch({
+      indexUrl  : '/js/index.json',           // url for the .json file containing search index data
+      results   : '#search-results',          // selector for containing search results element
+      template  : '#search-results-template', // selector for Mustache.js template
+      titleMsg  : '<h3>Suchergebnisse</h3><p>Der Suchbegriff findet sich in:</p>',   // message attached in front of results (can be empty)
+      emptyMsg  : '<p>Keine Suchergebnisse gefunden.</p>'     // shown message if search returns no results
+    });
+  });
+</script>
+</body>
+
+</html>

data/_includes/header.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <title>{{ site.title | escape }}{% if page.title %} | {{ page.title | escape }}{% endif %}</title>
+    <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+    <link rel="stylesheet" href="{{ "/assets/main.css " | relative_url }}">
+    <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
+    <link rel="alternate" type="application/rss+xml" title="{{ site.title | escape }}" href="{{ " /feed.xml " | relative_url }}">
+    <link rel="icon" type="image/png" href="{{ site.favicon }}" sizes="32x32">
+</head>
+
+<body>
+<nav>
+    <ul class="desktop-nav">
+
+      <div class="search-container">
+        <form action="" method="get">
+          <input type="text" id="search-query" name="q" placeholder="Suchen..." autocomplete="off">
+        </form>
+        <div class="close-search">
+          <div class="close-search-button">
+            <div class="close-search-line" id="line-a">
+
+            </div>
+            <div class="close-search-line" id="line-b">
+
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      {% assign sorted_pages = site.pages | sort:"nav-order" %}
+      {% for item in sorted_pages %}
+        {% if item.nav == true %}
+          <li {% if item.url == page.url %} class="active" {% endif %}>
+            <a href="{{ item.permalink }}">{{ item.title }}</a>
+          </li>
+        {% endif %}
+      {% endfor %}
+
+        <li class="search-button">
+          <a href="#">
+            <svg id="search-icon" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="19.70711" height="20.49911" viewBox="0 0 19.70711 20.49911">
+              <defs>
+                <style>
+                  .cls-1, .cls-2 {
+                    fill: none;
+                  }
+
+                  .cls-2 {
+                    stroke-width: 2px;
+                  }
+                </style>
+              </defs>
+              <title>Gruppe 19</title>
+              <g id="Gruppe_19" data-name="Gruppe 19">
+                <g id="Ellipse_1" data-name="Ellipse 1">
+                  <circle class="cls-1" cx="7.521" cy="7.521" r="7.521"/>
+                  <circle class="cls-2" cx="7.521" cy="7.521" r="6.521"/>
+                </g>
+                <line id="Linie_1" data-name="Linie 1" class="cls-2" x1="11.875" y1="12.667" x2="19" y2="19.792"/>
+              </g>
+            </svg>
+          </a>
+        </li>
+
+        <li class=" mobile menu-button">
+
+          <div class="menu-button-container">
+            <div class="menu-button-line" id="line-1">
+
+            </div>
+            <div class="menu-button-line" id="line-2">
+
+            </div>
+            <div class="menu-button-line" id="line-3">
+
+            </div>
+
+          </div>
+
+        </li>
+        <li class="mobile search-button">
+
+          <a href="#">
+            <svg id="search-icon" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="19.70711" height="20.49911" viewBox="0 0 19.70711 20.49911">
+              <defs>
+                <style>
+                  .cls-1, .cls-2 {
+                    fill: none;
+                  }
+
+                  .cls-2 {
+                    stroke-width: 2px;
+                  }
+                </style>
+              </defs>
+              <title>Gruppe 19</title>
+              <g id="Gruppe_19" data-name="Gruppe 19">
+                <g id="Ellipse_1" data-name="Ellipse 1">
+                  <circle class="cls-1" cx="7.521" cy="7.521" r="7.521"/>
+                  <circle class="cls-2" cx="7.521" cy="7.521" r="6.521"/>
+                </g>
+                <line id="Linie_1" data-name="Linie 1" class="cls-2" x1="11.875" y1="12.667" x2="19" y2="19.792"/>
+              </g>
+            </svg>
+          </a>
+
+        </li>
+    </ul>
+    <!-- <ul class="mobile-nav">
+
+    </ul> -->
+</nav>
+
+<div id="search-results" style="display: none;"></div>
+
+<div class="mobile-nav-content">
+<ul>
+  {% assign sorted_pages = site.pages | sort:"nav-order" %}
+  {% for item in sorted_pages %}
+    {% if item.nav == true %}
+      <li {% if item.url == page.url %} class="active" {% endif %}>
+        <a href="{{ item.permalink }}">{{ item.title }}</a>
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>
+</div>
+
+{% if page.featured-image %}
+  <div class="header" style="height: 120px; background-image: url({{ page.featured-image }}); background-size: cover; background-position: center">
+{% else %}
+<div class="header">
+  <div class="header-content">
+    <div class="header-left">
+      <div class="profile-image" style="background-image: url('{{ site.profile-image }}')"></div>
+      <div class="header-text">
+        <h1>{{ site.title | escape }}</h1>
+        <p class="sub-title">{{ site.subtitle | escape }}</p>
+      </div>
+    </div>
+
+    <div class="header-right">
+      {% for item in site.social %}
+
+          {% if item.icon %}
+            <a href="{{ item.url }}" target="_blank"><img class="social-icon" src="{{ item.icon }}"></a>
+          {% else %}
+            <a class="button light" href="{{ item.url }}" target="_blank">{{ item.title }}</a>
+          {% endif %}
+
+      {% endfor %}
+    </div>
+
+  </div>
+  {% endif %}
+
+</div>

data/_includes/icon-github.html

@@ -0,0 +1 @@
+<a href="https://github.com/{{ include.username }}"><span class="icon icon--github">{% include icon-github.svg %}</span><span class="username">{{ include.username }}</span></a>

data/_includes/icon-github.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" width="16px" height="16px"><path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>

data/_layouts/home.html

@@ -0,0 +1,83 @@
+---
+#layout for the homepage
+---
+
+{% include header.html %}
+
+<main class="page-content" aria-label="Content">
+  <div class="margin">
+    <div class="wrapper home-content">
+        {{ content }}
+    </div>
+  </div>
+
+    <div class="dark-section">
+      <div class="wrapper">
+
+        {% for item in site.home-columns %}
+        <div class="col">
+          <h3 class="light">{{ item.heading }}</h3>
+          <p>
+            {{ item.content }}
+          </p>
+          {% if item.button-url %}
+            <a href="{{ item.button-url }}" class="button light" target="_blank">Mehr erfahren</a>
+          {% endif %}
+        </div>
+        {% endfor %}
+
+      </div>
+    </div>
+
+<div class="margin">
+
+{% assign post_count = site.posts | size %}
+  {% if post_count > 0 %}
+    <div class="wrapper">
+      <h2>Neuigkeiten</h2>
+      <!-- loop for displaying posts -->
+      {% for post in site.posts %}
+        <div class="post">
+
+          {% if post.featured-image %}
+
+            <h3 class="dark with-img">{{ post.title }}</h3>
+            <div class="post-contents">
+              <div class="left">
+                <img src="{{ post.featured-image }}" />
+              </div>
+              <div class="right">
+                {% if post.publishing-date %}
+                  <span class="date">{{ post.publishing-date }}</span>
+                {% endif %}
+                <p class="post-excerpt">{{ post.excerpt }}</p>
+                <a class="button" href="{{ post.url | prepend: site.baseurl }}">Weiterlesen</a>
+              </div>
+            </div>
+
+          {% else %}
+
+            <h3 class="dark">{{ post.title }}</h3>
+            <div class="post-contents">
+              <div class="left">
+
+              </div>
+              <div class="right">
+                {% if post.publishing-date %}
+                  <span class="date">{{ post.publishing-date }}</span>
+                {% endif %}
+                <p class="post-excerpt">{{ post.excerpt }}</p>
+                <a class="button" href="{{ post.url | prepend: site.baseurl }}">Weiterlesen</a>
+              </div>
+            </div>
+
+          {% endif %}
+
+        </div>
+      {% endfor %}
+    </div>
+    {% endif %}
+</div>
+</main>
+
+{% include footer.html %}

data/_layouts/page.html

@@ -0,0 +1,18 @@
+---
+#layout for subpages
+---
+
+{% include header.html %}
+
+<main class="page-content" aria-label="Content">
+  <div class="margin">
+
+
+    <div class="wrapper page">
+      <h2>{{ page.title }}</h2>
+        {{ content }}
+    </div>
+    </div>
+</main>
+
+{% include footer.html %}

data/_layouts/post.html

@@ -0,0 +1,21 @@
+---
+#layout for blog-posts
+---
+
+{% include header.html %}
+
+<main class="page-content" aria-label="Content">
+  <div class="margin">
+
+
+    <div class="wrapper single-post">
+        <h2>{{ page.title }}</h2>
+        {% if page.publishing-date %}
+          <span class="date">{{ page.publishing-date }}</span>
+        {% endif %}
+        {{ content }}
+    </div>
+    </div>
+</main>
+
+{% include footer.html %}

data/_sass/_base.sass

@@ -0,0 +1,87 @@
+$max-width: 1200px
+$site-margin: 40px
+$section-margin: 80px
+
+$mobile: 'max-width: 600px'
+$tablet: 'max-width: 1000px'
+$desktop: 'min-width: 1001px'
+
+html
+  overflow-x: hidden
+  &.mobile-menu-open
+    overflow-y: hidden
+  body
+    font-family: 'Open Sans', sans-serif
+    font-weight: 400
+    font-size: 16px
+    overflow-x: hidden
+    a
+      text-decoration: none
+      color: $blue
+    .page-content
+      display: flex
+      align-items: center
+      flex-direction: column
+      background-color: $white
+      .margin
+        max-width: 1280px
+        width: 100%
+      .wrapper
+        &.page
+          p
+            font-size: 15px
+            color: $dark-grey
+            line-height: 2
+            margin-bottom: 60px
+        // width: 100%
+        max-width: $max-width
+        margin-left: $site-margin
+        margin-right: $site-margin
+        margin-top: $section-margin
+        margin-bottom: $section-margin
+        @media screen and ($mobile)
+          margin-left: $site-margin/2
+          margin-right: $site-margin/2
+          margin-top: $section-margin/1.5
+          margin-bottom: $section-margin/1.5
+        &.home-content
+          font-size: 35px
+          @media screen and ($tablet)
+            font-size: 30px
+          @media screen and ($mobile)
+            font-size: 25px
+          color: $dark-grey
+          line-height: 1.7
+          font-weight: 300
+          hyphens: auto
+    .dark-section
+      width: 100%
+      height: auto
+      display: flex
+      justify-content: center
+      align-items: center
+      background-color: $black
+      color: $white
+      .wrapper
+        display: flex
+        flex-direction: row
+        @media screen and ($tablet)
+          flex-direction: column
+        justify-content: space-between
+        .col
+          margin-right: $site-margin*2
+          @media screen and ($tablet)
+            margin-right: 0
+            margin-bottom: 75px
+            &:last-of-type
+              margin-bottom: 0
+          flex-basis: 0
+          flex-grow: 1
+          &:last-of-type
+            margin-right: 0
+          p
+            font-weight: 300
+            font-size: 14px
+            line-height: 2
+            margin-bottom: 30px
+            text-align: justify

data/_sass/_buttons.sass

@@ -0,0 +1,22 @@
+a
+  &.button
+    text-decoration: none
+    font-size: 14px
+    font-weight: 400
+    padding: 10px 20px
+    border: 1px solid $blue
+    border-radius: 50px
+    color: $blue
+    background-color: none
+    transition: color .3s ease, background-color .3s ease
+    &:hover
+      background-color: $blue
+      color: $white
+      transition: color .3s ease, background-color .3s ease
+    &.light
+      color: $white
+      border-color: $white
+      &:hover
+        background-color: $white
+        color: $black
+        transition: color .3s ease, background-color .3s ease

data/_sass/_colors.sass

@@ -0,0 +1,6 @@
+$white: #FFFFFF
+$green: #2FEB8D
+$blue: #12ADFF
+$black: #282828
+$light-grey: #EEEEEE
+$dark-grey: #95989A

data/_sass/_footer.sass

@@ -0,0 +1,16 @@
+footer
+  background-color: $light-grey
+  padding: 100px $site-margin
+  @media screen and ($mobile)
+    padding: 50px $site-margin/2
+  display: flex
+  justify-content: center
+  align-items: center
+  p
+    display: inline-block
+    text-align: center
+    width: 100%
+    color: $dark-grey
+    font-size: 14px
+    font-weight: 300
+    line-height: 2