minimal-categorized 0.0.12 → 0.0.13

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: e9ecd370164a3292e9f9f243415565b854c51eef66fa001291f5bc1c8d3cbae8
4
+ data.tar.gz: e0aecaf432d6887732f2115bdd0e7e1283630a47f5ae94f4652ef0aef841661e
5
5
  SHA512:
6
- metadata.gz: 1a06a339da722ff87ddbdf43e7541190e70c0afafdc48f1313394ea813a5fe3acd8a842533df7086bb1bd98d5cfa345f9845091f0f4485c688748df557fb841b
7
- data.tar.gz: 8e3812adf408c92c8ba2382504be75b7b8bd5993c954e7579ff0e7f10729509b330ace8395e270969824c221ad995c65cc078be29950610769bfe9c6f987e2ed
6
+ metadata.gz: 808d35f7797f0ea4c3a63b3b886351b6338cff33b83acdcd3c002eba683d900939edbce0ea9cdedb37cc4167c6a3b22bd032a355392e0780f66be353878e6fa4
7
+ data.tar.gz: e7060e7731d29217b1453135027af3aadfbbdebb0cb68ac961eb03f3e268ba71c4087c2f5cccffe0a9b91ef1c0f7b9ba8078f4f1602ab090fa8ff441dba8c9c8
@@ -1,5 +1,6 @@
1
1
  author: Site Author
2
2
  avatar_url: assets/img/avatar.png
3
+ lightTheme: True
3
4
  cookies:
4
5
  enabled: True
5
6
  message: This site might be using cookies! Customize your message or disable cookies in metaData.yml!
@@ -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>
@@ -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>
@@ -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
  * {
@@ -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 {
@@ -6,7 +6,7 @@
6
6
  flex-wrap: wrap;
7
7
  justify-content: space-between;
8
8
  align-items: flex-start;
9
- background-color: $p_dark;
9
+ background-color: $main-bg-color;
10
10
  a {
11
11
  display: flex;
12
12
  flex: 0 50%;
@@ -47,7 +47,7 @@
47
47
  opacity: 0;
48
48
  position: absolute;
49
49
  text-align: center;
50
- text-shadow: $p_dark 3px 3px 3px;
50
+ text-shadow: $dark 3px 3px 3px;
51
51
  @include mobile {
52
52
  opacity: 1;
53
53
  }
@@ -5,4 +5,5 @@
5
5
  @import './category-aggregator';
6
6
  @import './profile';
7
7
  @import './post';
8
- @import './cookies';
8
+ @import './cookies';
9
+ @import './projects-collection.scss';
@@ -27,7 +27,7 @@ main {
27
27
  footer {
28
28
  width: 100%;
29
29
  text-align: center;
30
- color: black;
30
+ color:$p_text;
31
31
  display: flex;
32
32
  justify-content: center;
33
33
  font-size: 0.7em;
@@ -1,6 +1,6 @@
1
1
  .menu {
2
2
  $root: &;
3
- background-image: linear-gradient(142deg, $p_dark 0%, $primary 45%, $p_dark 90%);
3
+ background-image: linear-gradient(142deg, $dark 0%, $p_darkest 45%, $dark 90%);
4
4
  position: fixed;
5
5
  left: 0;
6
6
  top: 0;
@@ -12,7 +12,7 @@
12
12
  float: left;
13
13
  width: $menu-size;
14
14
  box-sizing: border-box;
15
- border-right: 2px solid $p_dark;
15
+ border-right: 2px solid $dark;
16
16
 
17
17
  @include mobile {
18
18
  flex-direction: row;
@@ -44,6 +44,8 @@
44
44
  display: flex;
45
45
  height: 50px;
46
46
  justify-content:center;
47
+ position: relative;
48
+
47
49
  a {
48
50
  align-items:center;
49
51
  color: $p_text;
@@ -59,7 +61,19 @@
59
61
 
60
62
  }
61
63
  &.selected {
62
- color: $s_lighter;
64
+ color: $primary;
65
+
66
+ &::before{
67
+ content: "";
68
+ display: block;
69
+ width: 2px;
70
+ height: 100%;
71
+ background-color: $primary;
72
+ position: absolute;
73
+ left: -2px;
74
+ top: 0px;
75
+ box-shadow: $primary 4px 0px 22px;
76
+ }
63
77
  }
64
78
  @include mobile {
65
79
  height: calc(#{$menu-size} - 10px);
@@ -109,7 +123,7 @@
109
123
  }
110
124
  }
111
125
  a {
112
- color: $p_lighter;
126
+ color: $p_text;
113
127
  cursor:pointer;
114
128
  text-align:left;
115
129
  text-size-adjust:100%;
@@ -117,7 +131,8 @@
117
131
  margin-left: 4px;
118
132
  margin-right: 4px;
119
133
  &:hover {
120
- color: $p_lightest;
134
+ font-weight: 900;
135
+ color: $p_lighter;
121
136
  }
122
137
  }
123
138
  }
@@ -38,4 +38,10 @@
38
38
  li {
39
39
  display: list-item;
40
40
  }
41
+
42
+ &-content {
43
+ background: $base-white;
44
+ padding: 2rem;
45
+ border-radius: 10px;
46
+ }
41
47
  }
@@ -0,0 +1,82 @@
1
+ .collection {
2
+ text-align: center;
3
+ display: flex;
4
+ flex-flow: row wrap;
5
+ justify-content: center;
6
+ margin-top: 1em;
7
+ .group {
8
+ margin: 4px;
9
+ display: inline-block;
10
+ border: 2px solid $p_darkest;
11
+ border-radius: 5px;
12
+ position: relative;
13
+ text-align: initial;
14
+ min-width: 300px;
15
+ max-width: 375px;
16
+ width: 100%;
17
+ background-color: $dark;
18
+ height: fit-content;
19
+ .title {
20
+ background-color: $dark;
21
+ padding: 6px;
22
+ text-align: center;
23
+ font-weight: 900;
24
+ line-height: 10px;
25
+ }
26
+ .item {
27
+ padding: 18px 15px 18px 15px;
28
+ width: 100%;
29
+ display: flex;
30
+ cursor: pointer;
31
+ transition: 0.5s ease all;
32
+ -webkit-transition: 0.5s ease all;
33
+ position: relative;
34
+ box-sizing: border-box;
35
+ color: $p_text;
36
+ line-height: 1.2em;
37
+ border-bottom: 1px solid $p_darkest;
38
+ border-top: 1px solid $p_darkest;
39
+ &:last-child {
40
+ border-bottom: none;
41
+ }
42
+ &:first-child {
43
+ border-top: 2px solid $p_darkest;
44
+ }
45
+ &:hover {
46
+ background-image: linear-gradient(to right, $p_darkest, $dark);
47
+ &::before {
48
+ content: "";
49
+ display: block;
50
+ width: 4px;
51
+ height: 100%;
52
+ background-color: $primary;
53
+ position: absolute;
54
+ left: -2px;
55
+ top: 0px;
56
+ box-shadow: $primary 4px 0px 22px;
57
+ }
58
+ }
59
+ .icon {
60
+ min-width: 50px;
61
+ img, i {
62
+ width: 32px;
63
+ height: 32px;
64
+ }
65
+ }
66
+ .content {
67
+ h4 {
68
+ margin: 0px;
69
+ font-weight: 500;
70
+ min-height: 1.5em;
71
+ font-size: 1em;
72
+ line-height: 1em;
73
+ }
74
+ .description {
75
+ padding-left: 1px;
76
+ font-size: 0.75em;
77
+ line-height: 1.1em;
78
+ }
79
+ }
80
+ }
81
+ }
82
+ }
@@ -1,15 +1,25 @@
1
1
  $base-white: #fafafa;
2
- $main-bg-color: #fafafa;
3
-
4
- $primary: #455a64;
5
- $p_light: #718792;
6
- $p_lighter_less: #8fa4ad;
7
- $p_lighter: #a8bac2;
8
- $p_lightest: #eef3f5;
9
- $p_dark: #1c313a;
10
- $secondary: #303f9f;
11
- $s_light: #666ad1;
12
- $s_lighter: #a0a0d1;
2
+ $main-bg-color: #162129;
3
+
4
+ $primary: #4fc2f7;
5
+ $p_light: #81d3fa;
6
+ $p_lighter_less: #81d3fa;
7
+ $p_lighter: #b3e4fc;
8
+ $p_lightest: #e1f5fe;
9
+ $p_dark: #09a7f4;
10
+ $p_darker: #0986d0;
11
+ $p_darkest: #07559a;
12
+
13
+ $dark: #162129;
14
+
15
+ $secondary: #f7844f;
16
+ $s_light: #faa682;
17
+ $s_lighter: #fdc9b3;
18
+ $s_lightest: #fbe8e4;
13
19
  $s_dark: #001970;
14
- $p_text: #ffffff;
20
+
21
+ $p_text: #ecf8ff;
22
+ $p_text_dimmed: #5e8ca7;
15
23
  $s_text: #ffffff;
24
+
25
+ $post_content_bg_color: #fff;
@@ -1,4 +1,8 @@
1
1
  ---
2
2
  ---
3
-
3
+ // {% if site.data.metaData.lightTheme %}
4
+ // @import "./variables/light-theme";
5
+ // {% else %}
6
+ // @import "./variables/dark-theme";
7
+ // {% endif %}
4
8
  @import "minimal-categorized";
@@ -5,4 +5,76 @@ permalink: category-1.html
5
5
  category: category-1
6
6
  summary: Summary of a category. It is just a special placeholder wrapped in a particular class, so it looks more interesting. You can always make your own layout for a category, or make a category.html look the way you want.
7
7
  ---
8
-
8
+ <hr>
9
+ <h2>Showcase of customizing aggregator site</h2>
10
+ <div class="collection">
11
+ <div class="group">
12
+ <div class="title">Title for this section</div>
13
+ <ul>
14
+ <a class="item" href="super-cat.html">
15
+ <div class="icon"><img src="assets/img/project-1.png"></div>
16
+ <div class="content">
17
+ <h4>Super cat</h4>
18
+ <div class="description">
19
+ With this customization you can showcase here whatever you want, and create a separate pages fot each of those. This one will redirect to the Super cat site
20
+ </div>
21
+ </div>
22
+ </a>
23
+ <a class="item">
24
+ <div class="icon"><img src="assets/img/project-2.svg"></div>
25
+ <div class="content">
26
+ <h4>CatoCat</h4>
27
+ <div class="description">
28
+ CatoCat description. It's very fun and so on
29
+ </div>
30
+ </div>
31
+ </a>
32
+ </ul>
33
+ </div>
34
+ <div class="group">
35
+ <div class="title">Title for this section</div>
36
+ <ul>
37
+ <a class="item">
38
+ <div class="icon"><img src="assets/img/project-3.svg"></div>
39
+ <div class="content">
40
+ <h4>Track tacking</h4>
41
+ <div class="description">
42
+ Track tacking description. It's a track, but more colorful
43
+ </div>
44
+ </div>
45
+ </a>
46
+ <a class="item" href="https://ko-fi.com/itsmeaga1n0929" target="_blank">
47
+ <div class="icon"><img src="assets/img/ko-fi.jpg"></div>
48
+ <div class="content">
49
+ <h4>Ko-fi</h4>
50
+ <div class="description">
51
+ If you enjoy what I'm doing, maybe you want to sponsor me a coffee?
52
+ </div>
53
+ </div>
54
+ </a>
55
+ </ul>
56
+ </div>
57
+ <div class="group">
58
+ <div class="title">Title for this section</div>
59
+ <ul>
60
+ <a class="item">
61
+ <div class="icon"><img src="assets/img/project-4.png"></div>
62
+ <div class="content">
63
+ <h4>Project coffuska</h4>
64
+ <div class="description">
65
+ Project that converts coffee into lines of code
66
+ </div>
67
+ </div>
68
+ </a>
69
+ <a class="item">
70
+ <div class="icon"><i class="fas fa-cat"></i></div>
71
+ <div class="content">
72
+ <h4>Project x</h4>
73
+ <div class="description">
74
+ Project x description. It's very fun and so on
75
+ </div>
76
+ </div>
77
+ </a>
78
+ </ul>
79
+ </div>
80
+ </div>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: minimal-categorized
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.12
4
+ version: 0.0.13
5
5
  platform: ruby
6
6
  authors:
7
7
  - Patryk Bieszke
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-11-05 00:00:00.000000000 Z
11
+ date: 2020-11-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -58,6 +58,7 @@ files:
58
58
  - _sass/styles/_menu.scss
59
59
  - _sass/styles/_post.scss
60
60
  - _sass/styles/_profile.scss
61
+ - _sass/styles/_projects-collection.scss
61
62
  - _sass/variables/_colors.scss
62
63
  - _sass/variables/_index.scss
63
64
  - _sass/variables/_layout.scss