minimal-categorized 0.0.12 → 0.0.17

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: c92466dafcf4c200ddcfd91ce2f2ad8205259d20373c3bdcc02f2731bca4b254
4
- data.tar.gz: f8333e47fbd197b637006c8c410fe0a93a796b6d3ea0d507b5c8bd1fb2447cae
3
+ metadata.gz: 3e9694f26a4f2ed6362b5454ac2fbd1bb60c14610c44d0a20e12f3f235a684df
4
+ data.tar.gz: c987b221974e1cb6a7f5c6082dfb23967d7635d59fcb8c39a4ada0cd2c423c59
5
5
  SHA512:
6
- metadata.gz: 1a06a339da722ff87ddbdf43e7541190e70c0afafdc48f1313394ea813a5fe3acd8a842533df7086bb1bd98d5cfa345f9845091f0f4485c688748df557fb841b
7
- data.tar.gz: 8e3812adf408c92c8ba2382504be75b7b8bd5993c954e7579ff0e7f10729509b330ace8395e270969824c221ad995c65cc078be29950610769bfe9c6f987e2ed
6
+ metadata.gz: 5b02096251c67c465352ff975d3156191dedb3e41f8e8e2f0ad1735b279f62e197ba5a8c58193606f8402000a4f51d817137c9ca695d650efcf4d75536aeb060
7
+ data.tar.gz: 72d450171d2a92ba161ebacb13942fb1b6847670b98ceceb3cf9fd4cf750b454c042dba7797658e33c6918f718eec68e132d580885e54f23aec5f206a7e74d82
data/README.md CHANGED
@@ -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>
@@ -1,6 +1,16 @@
1
1
  <meta charset="utf-8">
2
2
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
3
3
  <link rel="stylesheet" href="{{ '/assets/styles/styles.css' | relative_url }}">
4
+ <link rel="stylesheet" href="https://indestructibletype.com/fonts/Jost.css" type="text/css" charset="utf-8" />
4
5
  <script src="https://kit.fontawesome.com/79c31398dc.js" crossorigin="anonymous"></script>
6
+ <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/img/apple-touch-icon.png' | relative_url }}">
7
+ <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/img/favicon-32x32.png' | relative_url }}">
8
+ <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/img/favicon-16x16.png' | relative_url }}">
9
+ <link rel="manifest" href="{{ '/assets/img/site.webmanifest' | relative_url }}">
10
+ <link rel="mask-icon" href="{{ '/assets/img/safari-pinned-tab.svg'| relative_url }}" color="#5bbad5">
11
+ <link rel="shortcut icon" href="{{' /assets/img/favicon.ico' | relative_url }}">
12
+ <meta name="msapplication-TileColor" content="#da532c">
13
+ <meta name="msapplication-config" content="{{ '/assets/img/browserconfig.xml' | relative_url }}">
14
+ <meta name="theme-color" content="#ffffff">
5
15
  {% include customizations.html %}
6
16
  {% seo %}
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>
@@ -2,13 +2,23 @@
2
2
  layout: default
3
3
  ---
4
4
  <div class="post">
5
- {% if page.image %}
6
- <figure>
7
- <img src="{{ page.image | relative_url }}"/>
8
- </figure>
9
- {% endif %}
5
+
10
6
  <div class="content-container {{ page.category }}">
11
- <h1>{{ page.title }}</h1>
12
- {{content}}
7
+ <header>
8
+ {% if page.image %}
9
+ <figure class="post-cover">
10
+ <!-- TODO: Images for diffrent screen size -->
11
+ <img src="{{ page.image | relative_url }}" alt="{{ page.image_alt }}" class="post-cover_image" />
12
+ </figure>
13
+ {% endif %}
14
+ <h1>{{ page.title }}</h1>
15
+ <p class="post-metadata">
16
+ {{ page.date | date_to_string }}
17
+ </p>
18
+
19
+ </header>
20
+ <div class="post-content">
21
+ {{ content }}
22
+ </div>
13
23
  </div>
14
24
  </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;
@@ -28,16 +28,16 @@
28
28
  font-weight: 700;
29
29
  display: inline-block;
30
30
  padding: 10px 20px;
31
- background: $p_light;
31
+ background-color: $p_dark;
32
32
  color: $p_text;
33
33
  border: none;
34
34
  border-radius: 3px;
35
35
  text-decoration: none;
36
36
  cursor: pointer;
37
- -webkit-transition: background 200ms;
38
- transition: background 200ms;
37
+ -webkit-transition: background-color 200ms;
38
+ transition: background-color 200ms;
39
39
  &:hover {
40
- background: $p_lighter_less;
40
+ background-color: $primary;
41
41
  }
42
42
  }
43
43
  @include mobile {
@@ -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
  * {
@@ -25,7 +25,8 @@ h2, h2 a {
25
25
  body {
26
26
  font-size: 16px;
27
27
  color: $base-white;
28
- font-family: forma-djr-micro,Arial,sans-serif;
28
+ font-family: 'Jost',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 {
@@ -55,9 +58,15 @@ a, p, li {
55
58
 
56
59
  @include mobile {
57
60
  body {
58
- font-size: 13px;
61
+ font-size: 15px;
59
62
  }
60
63
  h1 {
61
64
  font-size: 2em;
62
65
  }
66
+ main {
67
+ .content-container {
68
+ width: 100%;
69
+ padding: 0px 9px 12px;
70
+ }
71
+ }
63
72
  }