minimal-categorized 0.0.8 → 0.0.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +5 -1
- data/_data/customs.yml +3 -0
- data/_data/metaData.yml +6 -1
- data/_includes/common-head.html +1 -0
- data/_includes/cookies.js +29 -0
- data/_includes/customizations.html +15 -0
- data/_includes/home.js +2 -2
- data/_includes/menu.html +47 -48
- data/_layouts/default.html +5 -0
- data/_layouts/post.html +3 -1
- data/_sass/styles/_category-aggregator.scss +5 -5
- data/_sass/styles/_cookies.scss +53 -0
- data/_sass/styles/_defaults.scss +9 -4
- data/_sass/styles/_home.scss +2 -2
- data/_sass/styles/_index.scss +3 -1
- data/_sass/styles/_layout.scss +3 -1
- data/_sass/styles/_menu.scss +21 -6
- data/_sass/styles/_post.scss +6 -0
- data/_sass/styles/_projects-collection.scss +82 -0
- data/_sass/variables/_colors.scss +22 -11
- data/_sass/variables/_layout.scss +2 -0
- data/assets/styles/styles.scss +5 -1
- data/pages/category-1.html +73 -1
- metadata +7 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e9ecd370164a3292e9f9f243415565b854c51eef66fa001291f5bc1c8d3cbae8
|
|
4
|
+
data.tar.gz: e0aecaf432d6887732f2115bdd0e7e1283630a47f5ae94f4652ef0aef841661e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 808d35f7797f0ea4c3a63b3b886351b6338cff33b83acdcd3c002eba683d900939edbce0ea9cdedb37cc4167c6a3b22bd032a355392e0780f66be353878e6fa4
|
|
7
|
+
data.tar.gz: e7060e7731d29217b1453135027af3aadfbbdebb0cb68ac961eb03f3e268ba71c4087c2f5cccffe0a9b91ef1c0f7b9ba8078f4f1602ab090fa8ff441dba8c9c8
|
data/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://raw.githubusercontent.com/mmistakes/minimal-mistakes/master/LICENSE)
|
|
4
4
|
[](https://jekyllrb.com/)
|
|
5
|
-
[](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
|
|
|
@@ -55,6 +55,10 @@ Structure of `_data/menu.yml`:
|
|
|
55
55
|
* faicon: FavIcon to be displayed in menu
|
|
56
56
|
* url: URL for href
|
|
57
57
|
* target: target value of \<a> tag
|
|
58
|
+
* cookies: customize information about site cookies
|
|
59
|
+
* enabled: determine if should show cookies pop-up
|
|
60
|
+
* message: text on cookie pop-up
|
|
61
|
+
* agreeButtonText: text on agree button
|
|
58
62
|
|
|
59
63
|
Structure of `_data/metaData.yml`:
|
|
60
64
|
author: Site Author name
|
data/_data/customs.yml
ADDED
data/_data/metaData.yml
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
author: Site Author
|
|
2
|
-
avatar_url: assets/img/avatar.png
|
|
2
|
+
avatar_url: assets/img/avatar.png
|
|
3
|
+
lightTheme: True
|
|
4
|
+
cookies:
|
|
5
|
+
enabled: True
|
|
6
|
+
message: This site might be using cookies! Customize your message or disable cookies in metaData.yml!
|
|
7
|
+
agreeButtonText: Agree
|
data/_includes/common-head.html
CHANGED
|
@@ -2,4 +2,5 @@
|
|
|
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
4
|
<script src="https://kit.fontawesome.com/79c31398dc.js" crossorigin="anonymous"></script>
|
|
5
|
+
{% include customizations.html %}
|
|
5
6
|
{% seo %}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
(function() {
|
|
2
|
+
const consentPropName = "cookies_consent";
|
|
3
|
+
const storageType = localStorage;
|
|
4
|
+
|
|
5
|
+
shouldShowCookieConsent = () => !storageType.getItem(consentPropName);
|
|
6
|
+
acceptCookieConsent = () => storageType.setItem(consentPropName, true);
|
|
7
|
+
window.addEventListener("load", () => {
|
|
8
|
+
if(!shouldShowCookieConsent()) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
const cookieContainer = document.createElement("div");
|
|
12
|
+
cookieContainer.classList.add("hidden");
|
|
13
|
+
const cookieParagraph = document.createElement("p");
|
|
14
|
+
const cookieContent = document.createTextNode("{{ site.data.metaData.cookies.message }}");
|
|
15
|
+
const cookieAgreeButton = document.createElement("button");
|
|
16
|
+
const cookieButtonContent = document.createTextNode("{{ site.data.metaData.cookies.agreeButtonText }}");
|
|
17
|
+
cookieAgreeButton.appendChild(cookieButtonContent);
|
|
18
|
+
cookieAgreeButton.onclick = () => {
|
|
19
|
+
acceptCookieConsent();
|
|
20
|
+
cookieContainer.classList.add("hidden");
|
|
21
|
+
window.setTimeout(cookieContainer.remove.bind(cookieContainer), 1000);
|
|
22
|
+
}
|
|
23
|
+
cookieParagraph.append(cookieContent);
|
|
24
|
+
cookieContainer.append(cookieParagraph, cookieAgreeButton);
|
|
25
|
+
cookieContainer.classList.add("cookie-container")
|
|
26
|
+
document.body.appendChild(cookieContainer);
|
|
27
|
+
window.setTimeout(() => cookieContainer.classList.remove("hidden"));
|
|
28
|
+
});
|
|
29
|
+
})();
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{% for javascript in page.custom-js %}
|
|
2
|
+
<script src="{{ javascript }}"></script>
|
|
3
|
+
{% endfor %}
|
|
4
|
+
|
|
5
|
+
{% for javascript in site.data.customs.custom-js %}
|
|
6
|
+
<script src="{{ javascript }}"></script>
|
|
7
|
+
{% endfor %}
|
|
8
|
+
|
|
9
|
+
{% for css in page.custom-css %}
|
|
10
|
+
<link href="{{ css }}" rel="stylesheet">
|
|
11
|
+
{% endfor %}
|
|
12
|
+
|
|
13
|
+
{% for css in site.data.customs.custom-css %}
|
|
14
|
+
<link href="{{ css }}" rel="stylesheet">
|
|
15
|
+
{% endfor %}
|
data/_includes/home.js
CHANGED
data/_includes/menu.html
CHANGED
|
@@ -1,62 +1,61 @@
|
|
|
1
1
|
{% if site.data.menu.minimal_menu %}
|
|
2
|
-
<aside class="menu">
|
|
3
|
-
|
|
2
|
+
<aside class="menu">
|
|
3
|
+
<div class="menu-top">
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
-
</
|
|
14
|
-
</
|
|
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
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
|
-
|
|
36
|
-
<
|
|
37
|
-
|
|
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
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
</
|
|
50
|
-
</
|
|
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>
|
data/_layouts/default.html
CHANGED
data/_layouts/post.html
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
.category-aggregator {
|
|
2
|
-
color: $
|
|
2
|
+
color: $p_text;
|
|
3
3
|
a {
|
|
4
|
-
color: $
|
|
4
|
+
color: $p_text;
|
|
5
5
|
&:hover {
|
|
6
|
-
color:
|
|
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
|
|
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:
|
|
23
|
+
color: $p_text_dimmed;
|
|
24
24
|
font-size: 0.9em;
|
|
25
25
|
}
|
|
26
26
|
.article-read {
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
.cookie-container {
|
|
2
|
+
position: fixed;
|
|
3
|
+
padding: 20px 15px;
|
|
4
|
+
z-index: $pop-ups-z-1;
|
|
5
|
+
background-image: radial-gradient(farthest-corner at 25% 0, $p_darkest, $dark);
|
|
6
|
+
box-shadow: 0 0 6px 0 $dark;
|
|
7
|
+
text-align: center;
|
|
8
|
+
opacity: 0.95;
|
|
9
|
+
-webkit-transition: opacity 800ms, visibility 800ms;
|
|
10
|
+
transition: opacity 800ms, visibility 800ms;
|
|
11
|
+
bottom: 30px;
|
|
12
|
+
left: 40px;
|
|
13
|
+
max-width: 300px;
|
|
14
|
+
border-radius: 3px;
|
|
15
|
+
border: 3px solid $dark;
|
|
16
|
+
|
|
17
|
+
p {
|
|
18
|
+
color: $p_text;
|
|
19
|
+
line-height: 1.6em;
|
|
20
|
+
margin-bottom: 10px;
|
|
21
|
+
}
|
|
22
|
+
&.hidden {
|
|
23
|
+
opacity: 0;
|
|
24
|
+
visibility: hidden;
|
|
25
|
+
}
|
|
26
|
+
button {
|
|
27
|
+
line-height: 1.4;
|
|
28
|
+
font-weight: 700;
|
|
29
|
+
display: inline-block;
|
|
30
|
+
padding: 10px 20px;
|
|
31
|
+
background-color: $p_dark;
|
|
32
|
+
color: $p_text;
|
|
33
|
+
border: none;
|
|
34
|
+
border-radius: 3px;
|
|
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
|
+
}
|
|
42
|
+
}
|
|
43
|
+
@include mobile {
|
|
44
|
+
bottom: 0;
|
|
45
|
+
left: 0;
|
|
46
|
+
width: 100%;
|
|
47
|
+
max-width: 100%;
|
|
48
|
+
padding: 12px 10px;
|
|
49
|
+
border-left: 0;
|
|
50
|
+
border-right: 0;
|
|
51
|
+
border-bottom: 0;
|
|
52
|
+
}
|
|
53
|
+
}
|
data/_sass/styles/_defaults.scss
CHANGED
|
@@ -2,18 +2,18 @@ h1 {
|
|
|
2
2
|
text-transform: uppercase;
|
|
3
3
|
font-weight: 700;
|
|
4
4
|
text-rendering: optimizeLegibility;
|
|
5
|
-
color:
|
|
5
|
+
color: $primary;
|
|
6
6
|
text-align: center;
|
|
7
7
|
font-size: 2.5em;
|
|
8
8
|
letter-spacing: -1px;
|
|
9
|
-
|
|
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: $
|
|
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 {
|
|
@@ -34,9 +35,13 @@ main {
|
|
|
34
35
|
width: 90%;
|
|
35
36
|
padding: 0px 18px 24px;
|
|
36
37
|
flex-grow: 1;
|
|
38
|
+
position: relative;
|
|
37
39
|
|
|
38
40
|
.content-separator {
|
|
39
41
|
margin: $gap auto;
|
|
42
|
+
&:last-child {
|
|
43
|
+
margin: $gap auto 0 auto;
|
|
44
|
+
}
|
|
40
45
|
}
|
|
41
46
|
}
|
|
42
47
|
}
|
data/_sass/styles/_home.scss
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
flex-wrap: wrap;
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
align-items: flex-start;
|
|
9
|
-
background-color: $
|
|
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: $
|
|
50
|
+
text-shadow: $dark 3px 3px 3px;
|
|
51
51
|
@include mobile {
|
|
52
52
|
opacity: 1;
|
|
53
53
|
}
|
data/_sass/styles/_index.scss
CHANGED
data/_sass/styles/_layout.scss
CHANGED
|
@@ -16,6 +16,7 @@ main {
|
|
|
16
16
|
top: $menu-size;
|
|
17
17
|
left: 0;
|
|
18
18
|
width: 100%;
|
|
19
|
+
height: calc(100% - #{$menu-size});
|
|
19
20
|
}
|
|
20
21
|
&.no-menu {
|
|
21
22
|
width: 100%;
|
|
@@ -26,7 +27,7 @@ main {
|
|
|
26
27
|
footer {
|
|
27
28
|
width: 100%;
|
|
28
29
|
text-align: center;
|
|
29
|
-
color
|
|
30
|
+
color:$p_text;
|
|
30
31
|
display: flex;
|
|
31
32
|
justify-content: center;
|
|
32
33
|
font-size: 0.7em;
|
|
@@ -43,6 +44,7 @@ footer {
|
|
|
43
44
|
top: $minimal-menu-size;
|
|
44
45
|
left: 0;
|
|
45
46
|
width: 100%;
|
|
47
|
+
height: calc(100% - #{$minimal-menu-size});
|
|
46
48
|
}
|
|
47
49
|
}
|
|
48
50
|
}
|
data/_sass/styles/_menu.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.menu {
|
|
2
2
|
$root: &;
|
|
3
|
-
background-image: linear-gradient(142deg, $
|
|
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 $
|
|
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: $
|
|
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);
|
|
@@ -76,7 +90,7 @@
|
|
|
76
90
|
|
|
77
91
|
h1 {
|
|
78
92
|
font-size: 2em;
|
|
79
|
-
|
|
93
|
+
padding: 0.5em;
|
|
80
94
|
}
|
|
81
95
|
|
|
82
96
|
h2 {
|
|
@@ -109,7 +123,7 @@
|
|
|
109
123
|
}
|
|
110
124
|
}
|
|
111
125
|
a {
|
|
112
|
-
color: $
|
|
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
|
-
|
|
134
|
+
font-weight: 900;
|
|
135
|
+
color: $p_lighter;
|
|
121
136
|
}
|
|
122
137
|
}
|
|
123
138
|
}
|
data/_sass/styles/_post.scss
CHANGED
|
@@ -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,14 +1,25 @@
|
|
|
1
1
|
$base-white: #fafafa;
|
|
2
|
-
$main-bg-color: #
|
|
3
|
-
|
|
4
|
-
$primary: #
|
|
5
|
-
$p_light: #
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
$
|
|
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;
|
|
12
19
|
$s_dark: #001970;
|
|
13
|
-
|
|
20
|
+
|
|
21
|
+
$p_text: #ecf8ff;
|
|
22
|
+
$p_text_dimmed: #5e8ca7;
|
|
14
23
|
$s_text: #ffffff;
|
|
24
|
+
|
|
25
|
+
$post_content_bg_color: #fff;
|
|
@@ -3,9 +3,11 @@ $desktop-width: 1024px;
|
|
|
3
3
|
$menu-size: 200px;
|
|
4
4
|
$minimal-menu-size: 50px;
|
|
5
5
|
$gap: 30px;
|
|
6
|
+
$pop-ups-z-1: 100;
|
|
6
7
|
|
|
7
8
|
$content-width-desktop: calc(100% - #{$menu-size});
|
|
8
9
|
$content-width-desktop-minimal-menu: calc(100% - #{$minimal-menu-size});
|
|
10
|
+
|
|
9
11
|
@mixin tablet {
|
|
10
12
|
@media only screen and (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
|
|
11
13
|
@content;
|
data/assets/styles/styles.scss
CHANGED
data/pages/category-1.html
CHANGED
|
@@ -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.
|
|
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-
|
|
11
|
+
date: 2020-11-07 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -35,9 +35,12 @@ files:
|
|
|
35
35
|
- LICENSE.txt
|
|
36
36
|
- README.md
|
|
37
37
|
- _config.yml
|
|
38
|
+
- _data/customs.yml
|
|
38
39
|
- _data/menu.yml
|
|
39
40
|
- _data/metaData.yml
|
|
40
41
|
- _includes/common-head.html
|
|
42
|
+
- _includes/cookies.js
|
|
43
|
+
- _includes/customizations.html
|
|
41
44
|
- _includes/footer.html
|
|
42
45
|
- _includes/home.js
|
|
43
46
|
- _includes/menu.html
|
|
@@ -47,6 +50,7 @@ files:
|
|
|
47
50
|
- _layouts/post.html
|
|
48
51
|
- _sass/minimal-categorized.scss
|
|
49
52
|
- _sass/styles/_category-aggregator.scss
|
|
53
|
+
- _sass/styles/_cookies.scss
|
|
50
54
|
- _sass/styles/_defaults.scss
|
|
51
55
|
- _sass/styles/_home.scss
|
|
52
56
|
- _sass/styles/_index.scss
|
|
@@ -54,6 +58,7 @@ files:
|
|
|
54
58
|
- _sass/styles/_menu.scss
|
|
55
59
|
- _sass/styles/_post.scss
|
|
56
60
|
- _sass/styles/_profile.scss
|
|
61
|
+
- _sass/styles/_projects-collection.scss
|
|
57
62
|
- _sass/variables/_colors.scss
|
|
58
63
|
- _sass/variables/_index.scss
|
|
59
64
|
- _sass/variables/_layout.scss
|