minimal-music-project 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 94130b90c49b3c5423eeb20740ef30d0ef726224d45ca6eda8c0d1bd29746e1b
+  data.tar.gz: b142daa5b762e53446bc6b92a7a40c3801a30173c9e5f9c5d90f345cf1b1477c
+SHA512:
+  metadata.gz: 123a67632b7566211e8a852afc54ceaf1bc235ae44af2f4838b5796f193e550a4992aac85b6b8ce6dae856d3b5289ee42edaec994d68cfb78d90c60326898abe
+  data.tar.gz: 16f67b30d7c9654e6c9d659ef41ce789b1cd30ca547efff8e1c82bbd4c9c62d2916bf0cf6200c30d0b2778a7ac3a6c010d46334c0100920c68aed4abecf545df

data/404.html

@@ -0,0 +1,11 @@
+---
+layout: default
+permalink: 404.html
+---
+
+<div class="content-container">
+  <h1>404</h1>
+
+  <p><strong>Page not found :(</strong></p>
+  <p>The requested page could not be found.</p>
+</div>

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Patryk Bieszke
+
+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,66 @@
+# [minimal-music-project Jekyll theme](https://github.com/ItsMeaga1n/minimal-music-project/)
+
+[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/mmistakes/minimal-mistakes/master/LICENSE)
+[![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%203.9-blue.svg)](https://jekyllrb.com/)
+[![Gem Version](https://badge.fury.io/rb/minimal-music-project.svg)](https://badge.fury.io/rb/minimal-music-project)
+
+minimal-music-project is a flexible Jekyll theme, designed for sites with content easily aggregated into categories. Demo is available [here](https://itsmeaga1n.github.io/minimal-music-project/).
+
+![layout examples](screenshot.png)
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "minimal-music-project"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: minimal-music-project
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install minimal-music-project
+
+## Usage
+
+This theme is based on separating content into categories, which is later shown on separated sites designated to the specific content type.
+
+As for now, theme allows to use two main categories that will be displayed on home screen and more categories displayed only in menu to further separate content. Those are defined in `_data/menu.yml`.
+
+Structure of `_data/menu.yml`:
+* menu_pages: a list of items in menu. Each item contains information:
+    * title: Menu position title
+    * url: URL for href
+    * category: unique identifier of category. Used to determine which menu item is selected
+    * tooltip: Tooltip for menu item
+
+Structure of `_data/metaData.yml`:
+author: Site Author name
+avatar_url: URL for avatar (for about page)
+
+## Contributing
+
+Bug reports and pull requests are welcome on [GitHub](https://github.com/ItsMeaga1n/minimal-music-project). 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`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `minimal-music-project.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/_config.yml

@@ -0,0 +1,45 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+title: minimal-music-project
+tagline: A site showing the usage of Jekyll custom theme
+email: email@example.com
+description: >- # this means to ignore newlines until "baseurl:"
+  This website was created as a demonstration for Jekyll custom theme
+  named minimal-music-project. Its main feature is to make it easy to create
+  websites for music projects
+baseurl: "/minimal-music-project" # the subpath of your site, e.g. /blog
+url: "https://itsmeaga1n.github.io" # the base hostname & protocol for your site, e.g. http://example.com
+author: itsmeaga1n
+twitter:
+  username: itsmeaga1n
+  card: summary
+plugins:
+  - jekyll-seo-tag
+
+# Build settings
+markdown: kramdown
+remote_theme: ItsMeaga1n/minimal-music-project
+# Exclude these files from production site
+exclude:
+  - CHANGELOG.md
+  - CNAME
+  - Gemfile
+  - Gemfile.lock
+  - LICENSE
+  - README.md
+  - screenshot.png
+  - docs/
+  - node_modules

data/_data/customs.yml

@@ -0,0 +1,3 @@
+custom-css:
+
+custom-js:

data/_data/menu.yml

@@ -0,0 +1,19 @@
+menu_pages:
+- title: Home
+  url: /
+  category: home
+
+- title: Discography
+  url: /discography.html
+  category: discography
+  tooltip: Discography tooltip
+
+- title: Collaborations
+  url: /collaborations.html
+  category: collaborations
+  tooltip: Collaborations tooltip
+
+- title: About
+  url: about.html
+  category: about
+  tooltip: This is about

data/_data/metaData.yml

@@ -0,0 +1,6 @@
+author: Site Author
+logo: assets/img/band_logo.png
+cookies:
+  enabled: True
+  message: This site might be using cookies! Customize your message or disable cookies in metaData.yml!
+  agreeButtonText: Agree

data/_includes/avatar.html

@@ -0,0 +1,5 @@
+<div class="avatar_container">
+    <div class="avatar" >
+        <img src="{{ site.data.metaData.avatar_url }}" alt="avatar" onerror="this.style.display='none'"> 
+    </div>
+</div>

data/_includes/common-head.html

@@ -0,0 +1,16 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="{{ '/assets/styles/styles.css' | relative_url }}">
+<link rel="stylesheet" href="https://indestructibletype.com/fonts/Jost.css" type="text/css" charset="utf-8" />
+<script src="https://kit.fontawesome.com/79c31398dc.js" crossorigin="anonymous"></script>
+<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/img/apple-touch-icon.png' | relative_url }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/img/favicon-32x32.png' | relative_url }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/img/favicon-16x16.png' | relative_url }}">
+<link rel="manifest" href="{{ '/assets/img/site.webmanifest' | relative_url }}">
+<link rel="mask-icon" href="{{ '/assets/img/safari-pinned-tab.svg'| relative_url }}" color="#5bbad5">
+<link rel="shortcut icon" href="{{' /assets/img/favicon.ico' | relative_url }}">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="msapplication-config" content="{{ '/assets/img/browserconfig.xml' | relative_url }}">
+<meta name="theme-color" content="#ffffff">
+{% include customizations.html %}
+{% seo %}

data/_includes/cookies.js

@@ -0,0 +1,29 @@
+(function() {
+    const consentPropName = "cookies_consent";
+    const storageType = localStorage;
+
+    shouldShowCookieConsent = () => !storageType.getItem(consentPropName);
+    acceptCookieConsent = () => storageType.setItem(consentPropName, true);
+    window.addEventListener("load", () => {
+        if(!shouldShowCookieConsent()) {
+            return;
+        }
+        const cookieContainer = document.createElement("div");
+        cookieContainer.classList.add("hidden");
+        const cookieParagraph = document.createElement("p");
+        const cookieContent = document.createTextNode("{{ site.data.metaData.cookies.message }}");
+        const cookieAgreeButton = document.createElement("button");
+        const cookieButtonContent = document.createTextNode("{{ site.data.metaData.cookies.agreeButtonText }}");
+        cookieAgreeButton.appendChild(cookieButtonContent);
+        cookieAgreeButton.onclick = () => {
+            acceptCookieConsent();
+            cookieContainer.classList.add("hidden");
+            window.setTimeout(cookieContainer.remove.bind(cookieContainer), 1000);
+        }
+        cookieParagraph.append(cookieContent);
+        cookieContainer.append(cookieParagraph, cookieAgreeButton);
+        cookieContainer.classList.add("cookie-container")
+        document.body.appendChild(cookieContainer);
+        window.setTimeout(() => cookieContainer.classList.remove("hidden"));
+    });
+})();

data/_includes/customizations.html

@@ -0,0 +1,15 @@
+{% for javascript in page.custom-js %}
+    <script src="{{ javascript }}"></script>
+{% endfor %}
+
+{% for javascript in site.data.customs.custom-js %}
+    <script src="{{ javascript }}"></script>
+{% endfor %}
+
+{% for css in page.custom-css %}
+    <link href="{{ css }}" rel="stylesheet">
+{% endfor %}
+
+{% for css in site.data.customs.custom-css %}
+    <link href="{{ css }}" rel="stylesheet">
+{% endfor %}

data/_includes/footer.html

@@ -0,0 +1,10 @@
+<script>
+    window.addEventListener("load", () => {
+        document.getElementsByClassName("copyrights")[0].innerHTML = 
+            `Copyrights &copy; ${new Date().getFullYear()} {{ site.data.metaData.author }}`;
+    });
+</script>
+<footer>
+    <p class="copyrights">
+    </p>
+</footer>

data/_includes/menu.html

@@ -0,0 +1,35 @@
+<aside class="menu">
+    <div class="menu-top">
+        <div class="menu-top_logo">
+            <a href="{{ '/' | relative_url }}" >
+                <img src="{{ site.data.metaData.logo | relative_url }}" alt="Logo" onerror="this.style.display='none'">
+            </a>
+        </div>
+        <ul class="navigation">
+            {% for menu_item in site.data.menu.menu_pages %}
+            <li>
+                <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
+                    <span>{{ menu_item.title }}</span>
+                </a>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</aside>
+
+<script>
+    (function() {
+        window.addEventListener("load", () => {
+            const navigation = document.getElementsByClassName("navigation")[0];
+            const selectedCategory = navigation.getElementsByTagName("a");
+            const currCategory = "{{ page.category }}";
+            
+            for(menuItem of selectedCategory) {
+                if(menuItem.getAttribute("category") === currCategory) {
+                    menuItem.classList.add("selected");
+                    return;
+                }
+            }
+        });
+    })();
+</script>

data/_layouts/default.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    {% if site.data.metaData.cookies.enabled %}
+      <script>
+        {% include cookies.js %}
+      </script>
+    {% endif %}
+    {% include common-head.html %}
+  </head>
+  <body>
+    {% include menu.html %}
+      <main class="content-layout">
+          {{ content }}
+          {% include footer.html %}
+      </main>
+  </body>
+</html>

data/_layouts/discography.html

@@ -0,0 +1,6 @@
+---
+layout: default
+---
+<div class="discography">
+    <h1>{{ page.title }}</h1>
+</div>

data/_layouts/post.html

@@ -0,0 +1,25 @@
+---
+layout: default
+---
+<div class="post">
+
+    <div class="content-container {{ page.category }}">
+        
+        <header>
+            <h1>{{ page.title }}</h1>
+            {% if page.image %}
+                <figure class="post-cover">
+            <!-- TODO: Images for diffrent screen size -->
+                    <img src="{{ page.image | relative_url }}" alt="{{ page.image_alt }}" class="post-cover_image" />
+                </figure>
+            {% endif %}
+            <p class="post-metadata">
+                {{ page.date | date_to_string }}
+            </p>
+
+        </header>
+        <div class="post-content">
+            {{ content }}
+        </div>
+    </div>
+</div>

data/_layouts/posts_feed.html

@@ -0,0 +1,43 @@
+---
+layout: default
+category: home
+---
+<div class="content-container">
+    <div class="post-feed">
+        {% for post in site.posts %}
+            {% if post.category == page.category %}
+                <article>
+                    <hr>
+                    <header>
+                        <p class="article-date">{{ post.date | date: "%Y-%m-%d" }}</p>
+                        <h2>
+                            {% if post.external_url %}
+                            <a href="{{ post.external_url | relative_url }}" target="_blank">
+                            {% else %}
+                            <a href="{{ post.url | relative_url }}">
+                            {% endif %}
+                                {{ post.title }}
+                            </a>
+                        </h2>
+                    </header>
+                    <section>
+                        <figure>
+                            <img src="{{ post.image | relative_url }}" alt="{{ page.image_alt }}" class="post-feed_image" />
+                        </figure>
+                        <p>
+                            {{ post.summary }}
+                        </p>
+                    </section>
+                    <span class="article-read">
+                        {% if post.external_url %}
+                        <a href="{{ post.external_url | relative_url }}" target="_blank">
+                        {% else %}
+                        <a href="{{ post.url | relative_url }}">
+                        {% endif %}
+                        </a>
+                    </span>
+                </article>
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>

data/_sass/minimal-music-project.scss

@@ -0,0 +1,2 @@
+@import './variables/_index.scss';
+@import './styles/_index.scss';

data/_sass/styles/_cookies.scss

@@ -0,0 +1,53 @@
+.cookie-container {
+    position: fixed;
+    padding: 20px 15px;
+    z-index: $pop-ups-z-1;
+    background-image: radial-gradient(farthest-corner at 25% 0, $black, $black);
+    box-shadow: 0 0 6px 0 $black;
+    text-align: center;
+    opacity: 0.95;
+    -webkit-transition: opacity 800ms, visibility 800ms;
+    transition: opacity 800ms, visibility 800ms;
+    bottom: 30px;
+    left: 40px;
+    max-width: 300px;
+    border-radius: 3px;
+    border: 3px solid $black;
+
+    p {
+        color: $p_text;
+        line-height: 1.6em;
+        margin-bottom: 10px;
+    }
+    &.hidden {
+        opacity: 0;
+        visibility: hidden;
+    }
+    button {
+        line-height: 1.4;
+        font-weight: 700;
+        display: inline-block;
+        padding: 10px 20px;
+        background-color: $black;
+        color: $p_text;
+        border: none;
+        border-radius: 3px;
+        text-decoration: none;
+        cursor: pointer;
+        -webkit-transition: background-color 200ms;
+        transition: background-color 200ms;
+        &:hover {
+            background-color: $black;
+        }
+    }
+    @include mobile {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        max-width: 100%;
+        padding: 12px 10px;
+        border-left: 0;
+        border-right: 0;
+        border-bottom: 0;
+    }
+}

data/_sass/styles/_defaults.scss

@@ -0,0 +1,82 @@
+h1 {
+    text-transform: uppercase;
+    font-weight: 700;
+    text-rendering: optimizeLegibility;
+    color: $black;
+    text-align: center;
+    font-size: 2.5em;
+    letter-spacing: -1px;
+    padding: 0.5em;
+}
+
+h2, h2, h3 a {
+    font-weight: 600;
+    font-size: 1.4em;
+    line-height: 1.4em;
+    color: $black;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    line-height: 1.7em;
+}
+body {
+    font-size: 16px;
+    color: $white;
+    font-family: 'Jost',Arial,sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+main {
+    .content-container {
+        margin: 0px auto;
+        width: 90%;
+        padding: 0px 18px 24px;
+        flex-grow: 1;
+        position: relative;
+        p {
+            @include hyperlink-convention();
+        }
+        .content-separator {
+            margin: $gap auto;
+            color: $p_text;
+            width: 100%;
+            &:last-child {
+                margin: $gap auto 0 auto;
+            }
+        }
+    }
+}
+a {
+    text-decoration-line: none;
+    color: inherit;
+    transition: all 0.4s ease-in-out 0s;
+}
+
+a, p, li {
+    font-size: 1.1em;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: inline-block;
+    margin: 0;
+    vertical-align: top;
+}
+
+@include mobile {
+    body {
+        font-size: 15px;
+    }
+    h1 {
+        font-size: 2em;
+    }
+    main {
+        .content-container {
+            width: 100%;
+            padding: 0px 9px 12px;
+        }
+    }
+}

data/_sass/styles/_index.scss

@@ -0,0 +1,6 @@
+@import './defaults';
+@import './menu';
+@import './layout';
+@import './posts_feed';
+@import './post';
+@import './cookies';

data/_sass/styles/_layout.scss

@@ -0,0 +1,50 @@
+main {
+    background-color: $white;
+    color: black;
+    float: right;
+    width: $content-width-desktop;
+    min-height: 300px;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+    position: fixed;
+    left: $menu-size;
+    top: 0;
+    @include mobile {
+        top: $menu-size;
+        left: 0;
+        width: 100%;
+        height: calc(100% - #{$menu-size});
+    }
+    &.no-menu {
+        width: 100%;
+        left: 0;
+        top: 0;
+    }
+}
+footer {
+    width: 100%;
+    text-align: center;
+    color:$p_text;
+    display: flex;
+    justify-content: center;
+    font-size: 0.7em;
+    p {
+        margin: 0;
+    }
+}
+
+.is-minimal-menu {
+    main {
+        width: $content-width-desktop-minimal-menu;
+        left: $minimal-menu-size;
+        @include mobile {
+            top: $minimal-menu-size;
+            left: 0;
+            width: 100%;
+            height: calc(100% - #{$minimal-menu-size});
+        }
+    }
+}

data/_sass/styles/_menu.scss

@@ -0,0 +1,78 @@
+.menu {
+    $root: &;
+    background-color: $white;
+    position: fixed;
+    left: 0;
+    top: 0;
+
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: auto;
+    float: left;
+    width: $menu-size;
+    box-sizing: border-box;
+    padding: 8px 0 0 22px;    
+    @include mobile {
+        flex-direction: row;
+        width: 100%;
+        height: $menu-size;
+    }
+    
+    &-top {
+        box-sizing: border-box;
+        height: 100%;
+        flex-grow: 1;
+        padding-left: 3px;
+        padding-right: 3px;
+        @include mobile {
+            padding: 3px 10px 3px 10px;
+        }
+
+        &_logo {
+            max-width: 100px;
+            a {
+                color: #000000;
+                img {
+                    max-height: 100%;
+                    width: auto;
+                    max-width: 100%;
+                    border: 0;
+                }
+            }
+        }
+    }
+    ul {
+        li {
+            list-style: none;
+            margin-bottom: 8px;
+            margin-top: 8px;
+
+            a {
+                align-items: flex-start;
+                color: $p_text;
+                cursor: pointer;
+                display: flex;
+                font-weight: 400;
+                letter-spacing: 3px;
+                
+                &:hover {
+                    color: $black;
+
+                }
+                &.selected {
+                    font-weight: 600;
+                }
+                @include mobile {
+                    height: calc(#{$menu-size} - 10px);
+                    width: $menu-size;
+                    font-size: 30px;
+                }
+
+                i {
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+}

data/_sass/styles/_post.scss

@@ -0,0 +1,77 @@
+.post {
+    $root: &;
+    font-size: 1.2em;
+    color: black;
+    @include hyperlink-convention();
+    @include mobile{
+        font-size: 1em;
+    }
+    figure {
+        margin: 0;
+        width: 100%;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        margin-left: -0.5em;
+        margin-right: -0.5em;
+        width: calc(100% + 1em);
+        & > pre {
+            overflow: auto;
+        }
+
+    }
+    p, ul {
+        margin-bottom: $gap * .5;
+        margin-top: $gap * .5;
+    }
+    ul {
+        display: block;
+        list-style-type: disc;
+        margin-block-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+        padding-inline-start: 40px;
+    }
+    li {
+        display: list-item;
+    }
+
+    &-content {
+        background: $white;
+        padding: 0.2em 2rem 2rem 2rem;
+        border-radius: 10px;
+        @include mobile {
+            padding: 0.2em 1.2rem 1.2rem 1.2rem;
+        }
+    }
+
+    header {
+        padding: 1em 0.5em 0.8em 0.5em;
+        h1 {
+            padding: 0;
+            line-height: 1em;
+        }
+        p {
+            margin: 0;
+            color: $p_text;
+
+            &#{$root}-metadata {
+                font-size: 0.7em;
+                text-align: center;
+            }
+        }
+    }
+
+    &-cover {
+        &_image {
+            display: block;
+            max-width: 100%;
+            width: auto;
+            background-repeat: no-repeat;
+            background-size: cover;
+            height: auto;
+            max-height: 84vh;
+            margin: auto;
+        }
+    }
+}

data/_sass/styles/_posts_feed.scss

@@ -0,0 +1,57 @@
+$image-dim: 192px;
+
+.post-feed {
+    margin-top: 4em;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    color: $p_text;
+    article {
+        width: 100%;
+    }
+    hr {
+        margin-top: 2em;
+        margin-bottom: 0.5em;
+    }
+    .page-summary {
+        flex: 0;
+        width: 100%;
+        text-align: center;
+    }
+    h1 {
+        flex: 0;
+        margin: auto;
+        display: flex;
+        align-items: center;
+    }
+    h2 {
+        margin-bottom: 0.5em;
+    }
+    a {
+        line-height: 1.1em;
+        &:hover {
+            text-decoration: underline $black;
+        }
+    }
+    .article-date {
+        font-size: 0.8em;
+        margin-top: -0.5em;
+        opacity: 0.5;
+        text-align: right;
+    }
+
+    figure {
+        width: max-content;
+        margin: auto;
+        margin-bottom: 0.5em;
+    }
+
+    &_image {
+        max-width: 100%;
+        max-height: 80vh;
+        border: 0;
+        margin: auto;
+    }
+}

data/_sass/variables/_colors.scss

@@ -0,0 +1,4 @@
+$black: #000000;
+$white: #FFF;
+
+$p_text: #000000;

data/_sass/variables/_index.scss

@@ -0,0 +1,3 @@
+@import './colors';
+@import './layout';
+@import './mixins';

data/_sass/variables/_layout.scss

@@ -0,0 +1,27 @@
+$tablet-width: 768px;
+$desktop-width: 1024px;
+$menu-size: 200px;
+$minimal-menu-size: 50px;
+$gap: 30px;
+$pop-ups-z-1: 100;
+
+$content-width-desktop: calc(100% - #{$menu-size});
+$content-width-desktop-minimal-menu: calc(100% - #{$minimal-menu-size});
+
+@mixin tablet {
+    @media only screen and (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
+      @content;
+    }
+  }
+  
+@mixin desktop {
+    @media only screen and (min-width: #{$desktop-width}) {
+      @content;
+    }
+}
+
+@mixin mobile {
+    @media only screen and (max-device-width: #{$tablet-width - 1px}) {
+        @content;
+    }
+}

data/_sass/variables/_mixins.scss

@@ -0,0 +1,47 @@
+@mixin tooltip {
+    position: relative;
+    &:hover .tooltip {
+        visibility: visible;
+        opacity: 1;
+      }
+    & .tooltip {
+        visibility: hidden;
+        width: 120px;
+        background-color: #555;
+        color: #fff;
+        text-align: center;
+        border-radius: 6px;
+        padding: 5px 0;
+        position: absolute;
+        z-index: 1;
+        bottom: 100%;
+        left: 50%;
+        margin-left: -60px;
+        opacity: 0;
+        transition: opacity 0.3s;
+        font-size: 14px;
+        &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #555 transparent transparent transparent;
+          }
+    }
+}
+
+@mixin hyperlink-convention {
+    a {
+      transition: all 300ms ease 0s;
+      cursor: pointer;
+      text-decoration-line: none;
+      text-decoration: underline $black;
+      &:hover {
+          color: $black;
+          font-weight: 500;
+      }
+  }
+}

data/assets/img/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/assets/img/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

data/assets/img/safari-pinned-tab.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M164 1906 c-72 -49 -107 -92 -94 -117 6 -10 15 -19 20 -19 5 0 56
+-79 114 -176 l106 -176 -38 -65 c-20 -35 -41 -72 -47 -81 -5 -10 -38 -65 -72
+-122 -34 -58 -78 -123 -97 -144 -20 -22 -37 -44 -37 -50 -5 -41 10 -55 98 -97
+82 -38 128 -39 146 -1 8 15 17 41 20 58 5 25 123 241 147 267 10 12 142 -216
+160 -277 22 -72 51 -81 127 -41 30 17 68 45 84 63 25 28 27 36 18 60 -6 15
+-23 41 -38 57 -16 17 -72 107 -125 202 l-97 171 101 149 c57 81 120 163 142
+182 46 40 63 74 48 101 -6 11 -44 36 -84 56 -57 28 -81 35 -103 29 -35 -8 -53
+-23 -53 -42 0 -13 -167 -263 -175 -263 -2 0 -105 182 -164 290 -15 27 -54 22
+-107 -14z"/>
+<path d="M1024 1906 c-72 -49 -107 -92 -94 -117 6 -10 15 -19 20 -19 11 0 222
+-349 217 -358 -43 -80 -225 -377 -241 -394 -46 -47 -59 -74 -44 -98 17 -29
+146 -90 189 -90 38 0 61 27 72 86 5 25 123 241 147 267 10 12 148 -226 159
+-275 18 -79 59 -87 148 -29 100 65 109 96 44 166 -16 17 -72 107 -126 202
+l-97 172 65 93 c35 51 84 122 108 157 24 35 53 68 65 73 12 6 31 27 43 49 30
+52 19 69 -73 115 -57 28 -81 35 -103 29 -34 -8 -53 -23 -53 -42 0 -12 -103
+-170 -159 -242 l-18 -23 -77 138 c-42 77 -80 146 -85 154 -15 27 -54 22 -107
+-14z"/>
+<path d="M1874 1906 c-72 -49 -107 -92 -94 -117 6 -10 15 -19 20 -19 5 0 46
+-62 91 -137 44 -76 92 -155 106 -175 l25 -37 -108 -186 c-60 -103 -121 -199
+-136 -215 -75 -80 -69 -104 35 -154 93 -45 141 -48 160 -8 8 15 17 41 20 58 5
+25 123 241 147 267 10 12 146 -221 162 -279 19 -70 50 -79 124 -39 113 61 131
+105 71 172 -19 21 -78 115 -131 210 l-98 172 108 156 c60 86 120 164 135 172
+30 18 61 75 53 97 -8 21 -73 61 -130 81 -60 21 -99 10 -115 -32 -9 -25 -111
+-181 -158 -242 l-18 -23 -77 138 c-42 77 -80 146 -85 154 -15 27 -54 22 -107
+-14z"/>
+</g>
+</svg>

data/assets/img/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/assets/img/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/img/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

data/assets/styles/styles.scss

@@ -0,0 +1,8 @@
+---
+---
+// {% if site.data.metaData.lightTheme %}
+// @import "./variables/light-theme";
+// {% else %}
+// @import "./variables/black-theme";
+// {% endif %}
+@import "minimal-music-project";

data/pages/about.html

@@ -0,0 +1,12 @@
+---
+layout: post
+title: About
+permalink: about.html
+category: about
+
+---
+<div class="profile">
+    {% include avatar.html %}
+    <h2>{{ site.data.menu.menu_headline }}</h2>
+    <p>{{ site.data.menu.menu_intro }}</p>
+</div>

data/pages/collaborations.html

@@ -0,0 +1,7 @@
+---
+layout: discography
+title: Collaborations
+permalink: collaborations.html
+category: collaborations
+
+---

data/pages/discography.html

@@ -0,0 +1,7 @@
+---
+layout: discography
+title: Discography
+permalink: discography.html
+category: discography
+
+---

metadata

@@ -0,0 +1,102 @@
+--- !ruby/object:Gem::Specification
+name: minimal-music-project
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Patryk Bieszke
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2021-01-25 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.9.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.9.0
+description:
+email:
+- bieszke.patryk@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- 404.html
+- LICENSE.txt
+- README.md
+- _config.yml
+- _data/customs.yml
+- _data/menu.yml
+- _data/metaData.yml
+- _includes/avatar.html
+- _includes/common-head.html
+- _includes/cookies.js
+- _includes/customizations.html
+- _includes/footer.html
+- _includes/menu.html
+- _layouts/default.html
+- _layouts/discography.html
+- _layouts/post.html
+- _layouts/posts_feed.html
+- _sass/minimal-music-project.scss
+- _sass/styles/_cookies.scss
+- _sass/styles/_defaults.scss
+- _sass/styles/_index.scss
+- _sass/styles/_layout.scss
+- _sass/styles/_menu.scss
+- _sass/styles/_post.scss
+- _sass/styles/_posts_feed.scss
+- _sass/variables/_colors.scss
+- _sass/variables/_index.scss
+- _sass/variables/_layout.scss
+- _sass/variables/_mixins.scss
+- assets/img/android-chrome-192x192.png
+- assets/img/android-chrome-256x256.png
+- assets/img/apple-touch-icon.png
+- assets/img/band_logo.png
+- assets/img/browserconfig.xml
+- assets/img/favicon-16x16.png
+- assets/img/favicon-32x32.png
+- assets/img/favicon.ico
+- assets/img/mstile-150x150.png
+- assets/img/post-2.jpg
+- assets/img/safari-pinned-tab.svg
+- assets/img/site.webmanifest
+- assets/styles/styles.scss
+- pages/about.html
+- pages/collaborations.html
+- pages/discography.html
+homepage: https://github.com/ItsMeaga1n/minimal-music-project
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.1.2
+signing_key:
+specification_version: 4
+summary: minimal-music-project is a Jekyll theme for GitHub Pages
+test_files: []