minimal-categorized 0.0.11 → 0.0.16

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 60b00053fc68dba704da894303403887a302cac570b27c992a6c348a2369e16c
4
- data.tar.gz: 57d20f961c3b1b8be197f9418774c17d09637ef607c50949bacfa8c9171268ff
3
+ metadata.gz: 6a417377ac8433703b5cf922aa5cb23a1281bf1e9166e1e9b31c843036df8afe
4
+ data.tar.gz: 4628f4f186f1c1f921b83ecf9bce9d884c55e4847d46a654ac110b11e99e86c3
5
5
  SHA512:
6
- metadata.gz: 85e3a1b2a3fd308725e66f040b07533badd0769b8aa615d4be58a813be42b2d9a801b2f9618cbb07b07a802853f4317a65f51562918a262c255067ef2c99b0e3
7
- data.tar.gz: 2a07fc4f37f0df2101937592f1fedda33b59ea92d49bf60015bfbe7c706e16ed0b37398906d7b7f09bd551534c78042bf0589447fc771572c6044c67087cf6d6
6
+ metadata.gz: 51a672adcdd742512f4c8514a3cd073de24a196885d2ee7fe0469b8b3f6045417ac1902a5733d0f523161a69b2f0c7b964edb0dddd3dcf1dcb5066639e65d8a6
7
+ data.tar.gz: e4fc1c881f5d2d0b55b4295f32095433c98b1536d0839397af2918ad9e79653ce9cf3d8b7d8ca2d234037233a82b99349b0af99cac2c7db26576b1004040fb9b
data/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  [![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/mmistakes/minimal-mistakes/master/LICENSE)
4
4
  [![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%203.9-blue.svg)](https://jekyllrb.com/)
5
- [![Ruby gem](https://img.shields.io/gem/v/minimal-mistakes-jekyll.svg)](https://rubygems.org/gems/minimal-mistakes-jekyll)
5
+ [![Gem Version](https://badge.fury.io/rb/minimal-categorized.svg)](https://badge.fury.io/rb/minimal-categorized)
6
6
 
7
7
  minimal-categorized is a flexible Jekyll theme, designed for sites with content easily aggregated into categories. Demo is available [here](https://itsmeaga1n.github.io/minimal-categorized/).
8
8
 
@@ -40,7 +40,7 @@ Structure of `_data/menu.yml`:
40
40
  * menu_title: Displayed on menu (only for normal menu)
41
41
  * menu_headline: Displayed in menu (only for normal menu) and in about page
42
42
  * menu_intro: Displayed in menu (only for normal menu) and in about page
43
- * show_menu_on_category_select: Boolean value determining if menu should be visible on category selection page
43
+ * show_menu_on_gate_page: Boolean value determining if menu should be visible on category selection page
44
44
  * minimal_menu: Boolean value determining the style of menu bar
45
45
  * menu_logo: Path to logo displayed on menu (only for normal menu)
46
46
  * menu_pages: a list of items in menu. Each item contains information:
@@ -1,11 +1,17 @@
1
1
  menu_title: Example menu title
2
2
  menu_headline: example menu headline
3
3
  menu_intro: Hi! This is an example of intro that you could write for your jekyll minimal-categorized theme!
4
- show_menu_on_category_select: False
4
+ show_menu_on_gate_page: False
5
5
  minimal_menu: True
6
6
  menu_logo: assets/img/avatar.png
7
7
 
8
8
  menu_pages:
9
+ - title: Home
10
+ url: /
11
+ show_on_home: False
12
+ icon_name: fas fa-home
13
+ category: home
14
+
9
15
  - title: Category 1
10
16
  url: /category-1.html
11
17
  show_on_home: True
@@ -13,6 +19,7 @@ menu_pages:
13
19
  icon_name: fas fa-dice
14
20
  category: category-1
15
21
  tooltip: This is category 1
22
+ description: Category 1 description, which is written in menu.yml file under :description property
16
23
 
17
24
  - title: Category 2
18
25
  url: /category-2.html
@@ -21,8 +28,9 @@ menu_pages:
21
28
  icon_name: fas fa-cogs
22
29
  category: category-2
23
30
  tooltip: This is category 2
31
+ description: Category 2 description, which is written in menu.yml file under :description property
24
32
 
25
- - title: ABOUT
33
+ - title: About
26
34
  url: about.html
27
35
  show_on_home: False
28
36
  icon_name: fas fa-address-card
@@ -1,5 +1,7 @@
1
1
  author: Site Author
2
2
  avatar_url: assets/img/avatar.png
3
+ lightTheme: False
4
+ show_menu_logo_on_home_page: True
3
5
  cookies:
4
6
  enabled: True
5
7
  message: This site might be using cookies! Customize your message or disable cookies in metaData.yml!
@@ -0,0 +1,5 @@
1
+ <div class="avatar_container">
2
+ <div class="avatar" >
3
+ <img src="{{ site.data.metaData.avatar_url }}" alt="avatar" onerror="this.style.display='none'">
4
+ </div>
5
+ </div>
File without changes
@@ -1,62 +1,61 @@
1
1
  {% if site.data.menu.minimal_menu %}
2
- <aside class="menu">
3
- <div class="menu-top">
2
+ <aside class="menu">
3
+ <div class="menu-top">
4
4
 
5
- <ul class="navigation">
6
- {% for menu_item in site.data.menu.menu_pages %}
7
- <li>
8
- <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
9
- <i class="{{ menu_item.icon_name }}"> </i>
5
+ <ul class="navigation">
6
+ {% for menu_item in site.data.menu.menu_pages %}
7
+ <li>
8
+ <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
9
+ <i class="{{ menu_item.icon_name }}"> </i>
10
+ </a>
11
+ </li>
12
+ {% endfor %}
13
+ </ul>
14
+ </div>
15
+ <div class="menu-contact">
16
+ {% for contact in site.data.menu.menu_contacts %}
17
+ <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
18
+ <i class="{{ contact.faicon }}"></i>
10
19
  </a>
11
- </li>
12
20
  {% endfor %}
13
- </ul>
14
- </div>
15
- <div class="menu-contact">
16
- {% for contact in site.data.menu.menu_contacts %}
17
-
18
- <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
19
- <i class="{{ contact.faicon }}"></i>
20
- </a>
21
- {% endfor %}
22
- </div>
23
- </aside>
21
+ </div>
22
+ </aside>
24
23
 
25
24
  {% else %}
26
25
 
27
- <aside class="menu">
28
- <div class="menu-top">
29
- <div class="profile">
30
- <div class="avatar">
31
- <a href="{{ '/about.html' | relative_url }}" alt="avatar">
32
- <img src="{{ site.data.menu.menu_logo | relative_url }}" alt="avatar" onerror="this.style.display='none'">
33
- </a>
26
+ <aside class="menu">
27
+ <div class="menu-top">
28
+ <div class="profile">
29
+ <div class="avatar">
30
+ <a href="{{ '/about.html' | relative_url }}" alt="avatar">
31
+ <img src="{{ site.data.menu.menu_logo | relative_url }}" alt="avatar" onerror="this.style.display='none'">
32
+ </a>
33
+ </div>
34
+ <h1>{{ site.data.menu.menu_title }}</h1>
35
+ <h2>{{ site.data.menu.menu_headline }}</h2>
36
+ <p>{{ site.data.menu.menu_intro }}</p>
34
37
  </div>
35
- <h1>{{ site.data.menu.menu_title }}</h1>
36
- <h2>{{ site.data.menu.menu_headline }}</h2>
37
- <p>{{ site.data.menu.menu_intro }}</p>
38
+
39
+ <ul class="navigation">
40
+ {% for menu_item in site.data.menu.menu_pages %}
41
+ <li>
42
+ <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
43
+ <i class="{{ menu_item.icon_name }}"> </i>
44
+ <span>{{ menu_item.title }}</span>
45
+ </a>
46
+ </li>
47
+ {% endfor %}
48
+ </ul>
38
49
  </div>
50
+ <div class="menu-contact">
51
+ {% for contact in site.data.menu.menu_contacts %}
39
52
 
40
- <ul class="navigation">
41
- {% for menu_item in site.data.menu.menu_pages %}
42
- <li>
43
- <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}">
44
- <i class="{{ menu_item.icon_name }}"> </i>
45
- <span>{{ menu_item.title }}</span>
46
- </a>
47
- </li>
53
+ <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
54
+ <i class="{{ contact.faicon }}"></i>
55
+ </a>
48
56
  {% endfor %}
49
- </ul>
50
- </div>
51
- <div class="menu-contact">
52
- {% for contact in site.data.menu.menu_contacts %}
53
-
54
- <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
55
- <i class="{{ contact.faicon }}"></i>
56
- </a>
57
- {% endfor %}
58
- </div>
59
- </aside>
57
+ </div>
58
+ </aside>
60
59
  {% endif %}
61
60
 
62
61
  <script>
@@ -0,0 +1,35 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ {% include common-head.html %}
5
+ <script>
6
+ {% include gate.js %}
7
+ </script>
8
+ </head>
9
+ {% if site.data.menu.minimal_menu and site.data.menu.show_menu_on_gate_page %}
10
+ <body class="is-minimal-menu" >
11
+ {% else %}
12
+ <body>
13
+ {% endif %}
14
+ {% if site.data.menu.show_menu_on_gate_page %}
15
+ {% include menu.html %}
16
+ <main class="content-layout">
17
+ {% else %}
18
+ <main class="content-layout no-menu">
19
+ {% endif %}
20
+ <div class="gate">
21
+ {% for menu_item in site.data.menu.menu_pages %}
22
+ {% if menu_item.show_on_home %}
23
+ <a href="{{ menu_item.url | relative_url }}" class="category-container">
24
+ <div class="category" style="background-image: url('{{ menu_item.image_url | relative_url}}')"></div>
25
+ <p>
26
+ {{ menu_item.title }}
27
+ </p>
28
+ </a>
29
+ {% endif %}
30
+ {% endfor %}
31
+ </div>
32
+ </main>
33
+ </body>
34
+ </html>
35
+
@@ -1,35 +1,35 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- {% include common-head.html %}
5
- <script>
6
- {% include home.js %}
7
- </script>
8
- </head>
9
- {% if site.data.menu.minimal_menu and site.data.menu.show_menu_on_category_select %}
10
- <body class="is-minimal-menu" >
11
- {% else %}
12
- <body>
13
- {% endif %}
14
- {% if site.data.menu.show_menu_on_category_select %}
15
- {% include menu.html %}
16
- <main class="content-layout">
17
- {% else %}
18
- <main class="content-layout no-menu">
1
+ ---
2
+ layout: default
3
+ category: home
4
+ ---
5
+ <div class="content-container home">
6
+
7
+ <h1>
8
+ {% if site.data.metaData.show_menu_logo_on_home_page %}
9
+ {% include avatar.html %}
19
10
  {% endif %}
20
- <div class="home">
21
- {% for menu_item in site.data.menu.menu_pages %}
22
- {% if menu_item.show_on_home %}
23
- <a href="{{ menu_item.url | relative_url }}" class="category-container">
24
- <div class="category" style="background-image: url('{{ menu_item.image_url | relative_url}}')"></div>
25
- <p>
26
- {{ menu_item.title }}
27
- </p>
11
+ {{ page.title }}
12
+ </h1>
13
+ <p class="page-summary">{{ page.summary }}</p>
14
+ <div class="category_wrapper">
15
+ {% for menu_item in site.data.menu.menu_pages %}
16
+ {% if menu_item.show_on_home %}
17
+ <div class="category_container">
18
+ <div class="category_image">
19
+ <a href="{{ menu_item.url | relative_url }}">
20
+ <img class="category" src="{{ menu_item.image_url | relative_url}}">
28
21
  </a>
29
- {% endif %}
30
- {% endfor %}
31
- </div>
32
- </main>
33
- </body>
34
- </html>
35
-
22
+ </div>
23
+ <div class="category_description">
24
+ <a href="{{ menu_item.url | relative_url }}">
25
+ <h2> {{ menu_item.title }} </h2>
26
+ </a>
27
+ <p>
28
+ {{ menu_item.description }}
29
+ </p>
30
+ </div>
31
+ </div>
32
+ {% endif %}
33
+ {% endfor %}
34
+ </div>
35
+ </div>
@@ -9,6 +9,8 @@ layout: default
9
9
  {% endif %}
10
10
  <div class="content-container {{ page.category }}">
11
11
  <h1>{{ page.title }}</h1>
12
- {{content}}
12
+ <div class="post-content">
13
+ {{content}}
14
+ </div>
13
15
  </div>
14
16
  </div>
@@ -0,0 +1,16 @@
1
+ .avatar {
2
+ &_container {
3
+ justify-content: center!important;
4
+ display: flex;
5
+ }
6
+ display: block;
7
+ width: $avatar-dim;
8
+ height: $avatar-dim;
9
+ border-radius: 50%;
10
+ border: 2px solid $p_light;
11
+ overflow: hidden;
12
+ img {
13
+ height: $avatar-dim;
14
+ width: $avatar-dim;
15
+ }
16
+ }
@@ -1,16 +1,16 @@
1
1
  .category-aggregator {
2
- color: $p_dark;
2
+ color: $p_text;
3
3
  a {
4
- color: $secondary;
4
+ color: $p_text;
5
5
  &:hover {
6
- color: darken($secondary, 10%);
6
+ color: $primary;
7
7
  }
8
8
  }
9
9
  hr {
10
10
  border: 0;
11
11
  height: 0;
12
12
  border-top: 1px solid rgba(0, 0, 0, 0.1);
13
- border-bottom: 1px solid rgba(255, 255, 255, 0.3);
13
+ border-bottom: 1px solid $p_text_dimmed;
14
14
  margin: $gap auto $gap * 0.5 auto;
15
15
  }
16
16
  article {
@@ -20,7 +20,7 @@
20
20
  padding-left: 18px;
21
21
  font-style: italic;
22
22
  margin-top: -0.6em;
23
- color: rgba(0, 0, 0, 0.4);
23
+ color: $p_text_dimmed;
24
24
  font-size: 0.9em;
25
25
  }
26
26
  .article-read {
@@ -2,8 +2,8 @@
2
2
  position: fixed;
3
3
  padding: 20px 15px;
4
4
  z-index: $pop-ups-z-1;
5
- background-image: radial-gradient(farthest-corner at 25% 0, $primary, $p_dark);
6
- box-shadow: 0 0 6px 0 $p_dark;
5
+ background-image: radial-gradient(farthest-corner at 25% 0, $p_darkest, $dark);
6
+ box-shadow: 0 0 6px 0 $dark;
7
7
  text-align: center;
8
8
  opacity: 0.95;
9
9
  -webkit-transition: opacity 800ms, visibility 800ms;
@@ -12,7 +12,7 @@
12
12
  left: 40px;
13
13
  max-width: 300px;
14
14
  border-radius: 3px;
15
- border: 3px solid $p_dark;
15
+ border: 3px solid $dark;
16
16
 
17
17
  p {
18
18
  color: $p_text;
@@ -26,14 +26,19 @@
26
26
  button {
27
27
  line-height: 1.4;
28
28
  font-weight: 700;
29
- font-family: Titillium Web,sans-serif;
30
29
  display: inline-block;
31
30
  padding: 10px 20px;
32
- background: $p_text;
33
- color: $primary;
34
- border: 3px solid $p_light;
31
+ background-color: $p_dark;
32
+ color: $p_text;
33
+ border: none;
35
34
  border-radius: 3px;
36
35
  text-decoration: none;
36
+ cursor: pointer;
37
+ -webkit-transition: background-color 200ms;
38
+ transition: background-color 200ms;
39
+ &:hover {
40
+ background-color: $primary;
41
+ }
37
42
  }
38
43
  @include mobile {
39
44
  bottom: 0;
@@ -2,18 +2,18 @@ h1 {
2
2
  text-transform: uppercase;
3
3
  font-weight: 700;
4
4
  text-rendering: optimizeLegibility;
5
- color: inherit;
5
+ color: $primary;
6
6
  text-align: center;
7
7
  font-size: 2.5em;
8
8
  letter-spacing: -1px;
9
- padding: 1em 50px 1em;
9
+ padding: 0.5em;
10
10
  }
11
11
 
12
- h2, h2 a {
12
+ h2, h2, h3 a {
13
13
  font-weight: 700;
14
14
  font-size: 1.4em;
15
15
  line-height: 1.4em;
16
- color: $secondary;
16
+ color: $primary;
17
17
  }
18
18
 
19
19
  * {
@@ -26,6 +26,7 @@ body {
26
26
  font-size: 16px;
27
27
  color: $base-white;
28
28
  font-family: forma-djr-micro,Arial,sans-serif;
29
+ -webkit-font-smoothing: antialiased;
29
30
  }
30
31
  main {
31
32
  .content-container {
@@ -35,7 +36,9 @@ main {
35
36
  padding: 0px 18px 24px;
36
37
  flex-grow: 1;
37
38
  position: relative;
38
-
39
+ p {
40
+ @include hyperlink-convention();
41
+ }
39
42
  .content-separator {
40
43
  margin: $gap auto;
41
44
  &:last-child {
@@ -0,0 +1,64 @@
1
+
2
+ .gate {
3
+ flex-grow: 1;
4
+ display: flex;
5
+ flex-direction: row;
6
+ flex-wrap: wrap;
7
+ justify-content: space-between;
8
+ align-items: flex-start;
9
+ background-color: $main-bg-color;
10
+ a {
11
+ display: flex;
12
+ flex: 0 50%;
13
+ height: 100%;
14
+ justify-content: center;
15
+ align-items: center;
16
+ box-sizing: border-box;
17
+ border: 1px solid $base-white;
18
+ transition: .5s ease;
19
+ &:hover {
20
+ .category {
21
+ opacity: 0.25;
22
+ }
23
+ p {
24
+ opacity: 1;
25
+ }
26
+ }
27
+
28
+ .category {
29
+ display: flex;
30
+ flex: 0 100%;
31
+ opacity: 0.7;
32
+ height: 100%;
33
+ background-repeat: no-repeat;
34
+ background-size: cover;
35
+ transition: .5s ease;
36
+ backface-visibility: hidden;
37
+ @include mobile {
38
+ opacity: 0.25;
39
+ }
40
+ }
41
+
42
+ p {
43
+ color: $p_lightest;
44
+ font-size: 42px;
45
+ font-weight: 700;
46
+ transition: .5s ease;
47
+ opacity: 0;
48
+ position: absolute;
49
+ text-align: center;
50
+ text-shadow: $dark 3px 3px 3px;
51
+ @include mobile {
52
+ opacity: 1;
53
+ }
54
+ }
55
+ }
56
+
57
+ @include mobile {
58
+ flex-direction: column;
59
+ a {
60
+ height: 50%;
61
+ width: 100%;
62
+ }
63
+ }
64
+ }