materialize-jekyll 1.0.2 → 1.5.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/README.md +3 -1
- data/_includes/author.html +1 -1
- data/_includes/footer.html +1 -0
- data/_includes/minutes-to-read.html +2 -2
- data/_includes/navbar.html +2 -1
- data/_includes/share.html +1 -1
- data/_layouts/home.html +11 -12
- data/_layouts/post.html +17 -22
- data/_sass/_author.scss +1 -1
- data/_sass/_cards.scss +44 -23
- data/_sass/_navbar.scss +5 -4
- data/_sass/_post.scss +14 -2
- data/_sass/_syntax.scss +1 -1
- data/_sass/_tags.scss +11 -7
- data/_sass/_variables.scss +11 -0
- data/assets/css/main.scss +126 -6
- data/assets/img/icons/moon.svg +1 -0
- data/assets/img/icons/sun.svg +1 -0
- data/assets/js/mode-switcher.js +64 -0
- metadata +14 -13
- data/assets/.DS_Store +0 -0
- data/assets/img/.DS_Store +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: f5ac0e991e3e7f0e6bfa9255525ba161742726115c93f3d793395a0009be12ab
|
|
4
|
+
data.tar.gz: 64f4097a8d38b40db2330ec011674d894bcbd3ec28aa39f7ba7b7523bf3c7a88
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e6d2efeadb507031d509d6a6262f31a4a027e3719c4809e3c3569fc5eef33d2ac4482ed18f7bc2e9593cce2a9d33b8b17730ae469b155a786c55b797f9389aae
|
|
7
|
+
data.tar.gz: a80b73f077d49f2176ec7bc4cb485aed92baa60ee7cf7504ece64ad634e0cc956eb3dc84c53318e432ee52e7cbbfa9072a5f25ae5c2b18da5732d11febebe923
|
data/README.md
CHANGED
|
@@ -29,7 +29,9 @@ Or install it yourself as:
|
|
|
29
29
|
$ gem install materialize-jekyll
|
|
30
30
|
|
|
31
31
|
|
|
32
|
-
> **Note**: if you are hosting your site with [GitHub Pages](https://pages.github.com/) you will have to clone this project and copy the theme files manually to your directory
|
|
32
|
+
> **Note**: ~~if you are hosting your site with [GitHub Pages](https://pages.github.com/) you will have to clone this project and copy the theme files manually to your directory.~~
|
|
33
|
+
|
|
34
|
+
> Since [November 2017](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) you can use this theme by adding: `remote_theme: victorpre/materialize-jekyll` on your `_config.yml` file.
|
|
33
35
|
|
|
34
36
|
|
|
35
37
|
## Usage
|
data/_includes/author.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<img itemprop="image" src="{{site.profile_img_url}}" alt="{{site.name}}" class="circle author-img responsive-img">
|
|
5
5
|
</div>
|
|
6
6
|
<div class="col s12 m7 author-info">
|
|
7
|
-
<h5 class="">
|
|
7
|
+
<h5 class="">Author</h5>
|
|
8
8
|
<h3 class="white-text author-name">{{ site.name }}</h3>
|
|
9
9
|
<p class="white-text author-description">{{ site.user_description }}</p>
|
|
10
10
|
<div class="contact-info">
|
data/_includes/footer.html
CHANGED
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
|
|
15
15
|
<script src="{{ "/assets/js/vendor/masonry.pkgd.min.js" | prepend: site.baseurl }}"></script>
|
|
16
16
|
<script src="{{ "/assets/js/init.js" | prepend: site.baseurl }}"></script>
|
|
17
|
+
<script src="{{ "/assets/js/mode-switcher.js" | prepend: site.baseurl }}"></script>
|
|
17
18
|
{% include stats.html %}
|
|
18
19
|
</body>
|
|
19
20
|
</html>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{% assign words = content | number_of_words %}
|
|
2
2
|
|
|
3
3
|
{% if words < 360 %}
|
|
4
|
-
{% assign minutesText = '1 min
|
|
4
|
+
{% assign minutesText = '1 min.' %}
|
|
5
5
|
{% else %}
|
|
6
|
-
{% assign minutesText = words | divided_by:180 | append: ' mins
|
|
6
|
+
{% assign minutesText = words | divided_by:180 | append: ' mins.' %}
|
|
7
7
|
{% endif %}
|
data/_includes/navbar.html
CHANGED
data/_includes/share.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<section class="row share">
|
|
2
2
|
<div class="col s12 valign-wrapper center-align">
|
|
3
3
|
<div class="col s10 offset-s1">
|
|
4
|
-
<p class="share-header">
|
|
4
|
+
<p class="share-header">{{ page.share_text }}</p>
|
|
5
5
|
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}" class="btn-floating btn-large waves-effect waves-light fb-color" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;" title="Compartilhar no Facebook">
|
|
6
6
|
<div class="fb-btn btn-white ">
|
|
7
7
|
</div>
|
data/_layouts/home.html
CHANGED
|
@@ -8,11 +8,13 @@ layout: default
|
|
|
8
8
|
<div id="masonry-grid" class="row">
|
|
9
9
|
{% for post in site.posts %}
|
|
10
10
|
<div class="col s12 m6 l4 card-wrapper">
|
|
11
|
-
<div class="card hoverable">
|
|
11
|
+
<div class="card card-hoverable">
|
|
12
12
|
{% if post.image %}
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
|
|
13
|
+
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
|
|
14
|
+
<div class="card-image">
|
|
15
|
+
<img src="{{ post.image }}">
|
|
16
|
+
</div>
|
|
17
|
+
</a>
|
|
16
18
|
|
|
17
19
|
<div class="btn-menu" style="padding:0px">
|
|
18
20
|
<div class="fixed-action-btn horizontal click-to-toggle" style="position:relative; float:right; bottom:30px; right:10px; z-index: 1">
|
|
@@ -36,10 +38,12 @@ layout: default
|
|
|
36
38
|
|
|
37
39
|
{% endif %}
|
|
38
40
|
<div class="card-content">
|
|
39
|
-
<span class="grey-text text-lighten-1">{% include date.html date=post.date %}</span>
|
|
40
|
-
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}"><span class="flow-text card-title"><b>{{ post.title }}</b></span></a>
|
|
41
41
|
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">
|
|
42
|
-
<
|
|
42
|
+
<div>
|
|
43
|
+
<span class="grey-text text-lighten-1">{% include date.html date=post.date %}</span>
|
|
44
|
+
<span class="flow-text card-title"><b>{{ post.title }}</b></span>
|
|
45
|
+
<p class="post-description">{{ post.description }}</p>
|
|
46
|
+
</div>
|
|
43
47
|
</a>
|
|
44
48
|
<br>
|
|
45
49
|
<div class="tags">
|
|
@@ -48,11 +52,6 @@ layout: default
|
|
|
48
52
|
{% endfor %}
|
|
49
53
|
</div>
|
|
50
54
|
</div>
|
|
51
|
-
<div class="card-action">
|
|
52
|
-
<div class="center-align">
|
|
53
|
-
<a href="{{ post.url | prepend: site.baseurl }}" class="read-more">Read More</a>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
55
|
</div>
|
|
57
56
|
</div>
|
|
58
57
|
{% endfor %}
|
data/_layouts/post.html
CHANGED
|
@@ -5,30 +5,25 @@ layout: default
|
|
|
5
5
|
|
|
6
6
|
<header id="top-bar" class="main-top"></header>
|
|
7
7
|
<div class="container container-main">
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
<div class="post content">
|
|
9
|
+
<div class="row">
|
|
10
|
+
<div class="col s12 m12">
|
|
11
11
|
<div class="col s10 offset-s1" >
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
<h2 class="post-title col s12 center-align">{{ page.title }}</h2>
|
|
13
|
+
<div class="col s12">
|
|
14
|
+
<div class="grey-text text-lighten-1 center-align valign post-specs">
|
|
15
|
+
<i class="material-icons">today </i> {% include date.html date=page.date %} — <i class="material-icons">access_time </i> {{ minutesText }} {{ page.reading_time }}
|
|
16
|
+
</div>
|
|
16
17
|
</div>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
{% include share.html %}
|
|
30
|
-
{% include author.html %}
|
|
31
|
-
</div>
|
|
18
|
+
<p class="flow-text grey-text text-lighten-1 col s12">{{ page.introduction }}</p>
|
|
19
|
+
<img class="center-align" style="width: 100%;" src="{{ page.image }}">
|
|
20
|
+
{{ content }}
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
{% include share.html %}
|
|
25
|
+
{% include author.html %}
|
|
26
|
+
</div>
|
|
32
27
|
</div>
|
|
33
28
|
|
|
34
29
|
{% include comments.html %}
|
data/_sass/_author.scss
CHANGED
data/_sass/_cards.scss
CHANGED
|
@@ -2,44 +2,65 @@
|
|
|
2
2
|
color: rgba(0, 0, 0, 0.87);
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.hoverable {
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
.card-hoverable {
|
|
6
|
+
position: relative; /* For positioning the pseudo-element */
|
|
7
|
+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
|
|
8
8
|
|
|
9
|
-
.
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
.post-link-hidden {
|
|
10
|
+
position: absolute;
|
|
11
|
+
top: 0;
|
|
12
|
+
left: 0;
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
}
|
|
12
16
|
}
|
|
13
17
|
|
|
14
|
-
.
|
|
15
|
-
-
|
|
16
|
-
|
|
18
|
+
.card-hoverable::before {
|
|
19
|
+
/* Position the pseudo-element. */
|
|
20
|
+
content: ' ';
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 0;
|
|
23
|
+
right: 0;
|
|
24
|
+
bottom: 0;
|
|
25
|
+
left: 0;
|
|
26
|
+
|
|
27
|
+
/* Create the box shadow at expanded size. */
|
|
28
|
+
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5);
|
|
29
|
+
|
|
30
|
+
/* Hidden by default. */
|
|
31
|
+
opacity: 0;
|
|
32
|
+
transition: opacity 500ms;
|
|
17
33
|
}
|
|
18
34
|
|
|
19
|
-
.card-
|
|
20
|
-
-
|
|
21
|
-
|
|
35
|
+
.card-hoverable:hover::before {
|
|
36
|
+
/* Show the pseudo-element on hover. */
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
opacity: 1;
|
|
22
39
|
}
|
|
23
40
|
|
|
24
|
-
.
|
|
25
|
-
|
|
26
|
-
background-color: $secondaryColor;
|
|
27
|
-
}
|
|
41
|
+
.btn-floating {
|
|
42
|
+
background-color: var(--secondary-color);
|
|
28
43
|
}
|
|
44
|
+
|
|
29
45
|
.nested-btn {
|
|
30
46
|
width: 36px !important;
|
|
31
47
|
height: 22px !important;
|
|
32
48
|
margin-top: 8px;
|
|
33
49
|
}
|
|
34
50
|
|
|
35
|
-
.post-
|
|
36
|
-
|
|
51
|
+
a.post-link {
|
|
52
|
+
text-decoration: none;
|
|
53
|
+
position: relative;
|
|
37
54
|
}
|
|
38
55
|
|
|
39
|
-
.
|
|
40
|
-
color:
|
|
41
|
-
}
|
|
56
|
+
.card-content {
|
|
57
|
+
background-color: var(--card-color);
|
|
42
58
|
|
|
43
|
-
|
|
44
|
-
|
|
59
|
+
.card-title {
|
|
60
|
+
color: var(--main-text-color);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.post-description {
|
|
64
|
+
color: var(--main-text-color) !important;
|
|
65
|
+
}
|
|
45
66
|
}
|
data/_sass/_navbar.scss
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
.nav-wrapper {
|
|
2
2
|
z-index: 150;
|
|
3
|
-
background-color:
|
|
3
|
+
background-color: var(--main-color);
|
|
4
4
|
|
|
5
5
|
li a {
|
|
6
|
-
color:
|
|
6
|
+
color: var(--ligther-main-color);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
#nav-mobile {
|
|
10
|
+
background-color: var(--main-background-color);
|
|
10
11
|
a {
|
|
11
|
-
color:
|
|
12
|
+
color: var(--text-color);
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
15
|
}
|
|
@@ -30,7 +31,7 @@
|
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
.button-collapse {
|
|
33
|
-
color:
|
|
34
|
+
color: var(--ligther-main-color);
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
@media only screen and (max-width : 537px) {
|
data/_sass/_post.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.main-top {
|
|
2
|
-
background-color:
|
|
2
|
+
background-color: var(--ligther-main-color);
|
|
3
3
|
height: 200px;
|
|
4
4
|
float: left;
|
|
5
5
|
width: 100%;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.content {
|
|
11
|
-
background-color:
|
|
11
|
+
background-color: var(--card-color);
|
|
12
12
|
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.26);
|
|
13
13
|
border-radius: 2px;
|
|
14
14
|
overflow: hidden;
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
display: inline-block;
|
|
21
21
|
padding: 50px 0 0 0;
|
|
22
22
|
max-width: 100%;
|
|
23
|
+
color: var(--main-text-color);
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.post > .row {
|
|
@@ -46,6 +47,10 @@ section {
|
|
|
46
47
|
.blog-post-img img {
|
|
47
48
|
width: 100%;
|
|
48
49
|
}
|
|
50
|
+
|
|
51
|
+
.post-specs {
|
|
52
|
+
font-size: .8em;
|
|
53
|
+
}
|
|
49
54
|
}
|
|
50
55
|
|
|
51
56
|
.browser-default > li {
|
|
@@ -54,3 +59,10 @@ section {
|
|
|
54
59
|
font-size: 1.25rem;
|
|
55
60
|
letter-spacing: 0.1rem;
|
|
56
61
|
}
|
|
62
|
+
|
|
63
|
+
.material-icons {
|
|
64
|
+
display: inline-flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
vertical-align: middle;
|
|
68
|
+
}
|
data/_sass/_syntax.scss
CHANGED
data/_sass/_tags.scss
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
.tag-name {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
.tags-collection {
|
|
2
6
|
padding: 50px 25px 100px 25px;
|
|
3
7
|
}
|
|
@@ -12,7 +16,7 @@
|
|
|
12
16
|
li {
|
|
13
17
|
transition: 0.4s ease;
|
|
14
18
|
margin-bottom: 50px;
|
|
15
|
-
border-bottom: 1px solid
|
|
19
|
+
border-bottom: 1px solid var(--ligther-main-color);
|
|
16
20
|
line-height: 50px;
|
|
17
21
|
}
|
|
18
22
|
|
|
@@ -22,7 +26,7 @@
|
|
|
22
26
|
|
|
23
27
|
.post-title {
|
|
24
28
|
font-size: 20px;
|
|
25
|
-
color:
|
|
29
|
+
color: var(--ligther-main-color);
|
|
26
30
|
font-weight: 300;
|
|
27
31
|
border-bottom: 5px;
|
|
28
32
|
.entry-date{
|
|
@@ -35,22 +39,22 @@
|
|
|
35
39
|
}
|
|
36
40
|
|
|
37
41
|
.chip {
|
|
38
|
-
color:
|
|
39
|
-
background:
|
|
40
|
-
border:
|
|
42
|
+
color: var(--secondary-color);
|
|
43
|
+
background-color: var(--card-color);
|
|
44
|
+
border: var(--secondary-color) solid 1px;
|
|
41
45
|
transition: background-color 0.4s ease;
|
|
42
46
|
transition: border-color 0.4s ease;
|
|
43
47
|
transition: color 0.4s ease;
|
|
44
48
|
}
|
|
45
49
|
|
|
46
50
|
.chip:hover {
|
|
47
|
-
background:
|
|
51
|
+
background: var(--secondary-color);
|
|
48
52
|
color: #fff;
|
|
49
53
|
border: #e4e4e4 solid 1px;
|
|
50
54
|
}
|
|
51
55
|
|
|
52
56
|
.chip.active {
|
|
53
|
-
background:
|
|
57
|
+
background: var(--secondary-color);
|
|
54
58
|
color: #fff;
|
|
55
59
|
border: #e4e4e4 solid 1px;
|
|
56
60
|
}
|
data/_sass/_variables.scss
CHANGED
|
@@ -1,7 +1,18 @@
|
|
|
1
1
|
$mainColor: #8d6e63;
|
|
2
|
+
$cardColor: #fff;
|
|
3
|
+
$textColor: #000;
|
|
2
4
|
$lightMainColor: #bcaaa4;
|
|
3
5
|
$lighterMainColor: #d7ccc8;
|
|
6
|
+
$background: #fff;
|
|
4
7
|
$secondaryColor: #26a69a;
|
|
5
8
|
|
|
9
|
+
$darkMainColor: #3A3A3A;
|
|
10
|
+
$darkCardColor: #191919;
|
|
11
|
+
$darkTextColor: #e0e0e0;
|
|
12
|
+
$darkLightMainColor: #757575;
|
|
13
|
+
$darkLighterMainColor: #616161;
|
|
14
|
+
$darkBackground: #808080;
|
|
15
|
+
$darkSecondaryColor: #00796b;
|
|
16
|
+
|
|
6
17
|
$facebookColor: #3b5998;
|
|
7
18
|
$twitterColor: #55acee;
|
data/assets/css/main.scss
CHANGED
|
@@ -10,9 +10,50 @@
|
|
|
10
10
|
@import "post";
|
|
11
11
|
|
|
12
12
|
body {
|
|
13
|
+
background-color: var(--main-background-color);
|
|
13
14
|
display: flex;
|
|
14
15
|
min-height: 100vh;
|
|
15
16
|
flex-direction: column;
|
|
17
|
+
|
|
18
|
+
.highlighter-rouge {
|
|
19
|
+
color: #000;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
nav {
|
|
24
|
+
background-color: var(--main-color);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
#theme-toggle {
|
|
28
|
+
&.dark {
|
|
29
|
+
background-color: #fff;
|
|
30
|
+
mask: url(../img/icons/sun.svg) no-repeat;
|
|
31
|
+
-webkit-mask: url(../img/icons/sun.svg) no-repeat;
|
|
32
|
+
|
|
33
|
+
&:hover {
|
|
34
|
+
background-color: #212121;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&.light {
|
|
39
|
+
background-color: #000;
|
|
40
|
+
mask: url(../img/icons/moon.svg) no-repeat;
|
|
41
|
+
-webkit-mask: url(../img/icons/moon.svg) no-repeat;
|
|
42
|
+
&:hover {
|
|
43
|
+
background-color: #9e9e9e;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
right: 30px;
|
|
48
|
+
top: 75px;
|
|
49
|
+
position: absolute;
|
|
50
|
+
display: inline-block;
|
|
51
|
+
width: 35px;
|
|
52
|
+
height: 35px;
|
|
53
|
+
-webkit-mask-size: contain;
|
|
54
|
+
mask-size: contain;
|
|
55
|
+
-webkit-mask-position: center;
|
|
56
|
+
mask-position: center;
|
|
16
57
|
}
|
|
17
58
|
|
|
18
59
|
main {
|
|
@@ -60,31 +101,110 @@ p {
|
|
|
60
101
|
.author-info {
|
|
61
102
|
text-align: center;
|
|
62
103
|
}
|
|
104
|
+
|
|
105
|
+
#theme-toggle {
|
|
106
|
+
top: 12px;
|
|
107
|
+
z-index: 1000;
|
|
108
|
+
}
|
|
63
109
|
}
|
|
64
110
|
|
|
65
111
|
@media screen and (max-width : 1250px ){
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
112
|
+
.blog-posts {
|
|
113
|
+
width: 75%;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
#theme-toggle {
|
|
117
|
+
z-index: 1;
|
|
118
|
+
}
|
|
69
119
|
}
|
|
70
120
|
|
|
71
121
|
@media screen and (max-width : 768px ){
|
|
72
122
|
.container-main {
|
|
73
123
|
width: 98%;
|
|
74
124
|
}
|
|
125
|
+
|
|
126
|
+
#top-bar {
|
|
127
|
+
padding-top: 0px;
|
|
128
|
+
height: 150px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
#theme-toggle {
|
|
132
|
+
position: fixed;
|
|
133
|
+
top: 12px;
|
|
134
|
+
z-index: 1000;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@media screen and (max-width : 425px ){
|
|
139
|
+
#theme-toggle {
|
|
140
|
+
top: 12px;
|
|
141
|
+
}
|
|
75
142
|
}
|
|
76
143
|
|
|
77
144
|
footer.page-footer {
|
|
78
145
|
margin: 0;
|
|
79
146
|
padding-top: 0px;
|
|
80
|
-
background-color:
|
|
147
|
+
background-color: var(--main-color);
|
|
81
148
|
|
|
82
149
|
.footer-copyright {
|
|
83
|
-
background-color:
|
|
150
|
+
background-color: var(--main-color);
|
|
84
151
|
}
|
|
85
152
|
|
|
86
153
|
.container {
|
|
87
|
-
color:
|
|
154
|
+
color: var(--ligther-main-color);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
html, html[data-theme="light"] {
|
|
159
|
+
--text-color: #{$textColor};
|
|
160
|
+
--main-color: #{$mainColor};
|
|
161
|
+
--card-color: #{$cardColor};
|
|
162
|
+
--main-background-color: #{$background};
|
|
163
|
+
--light-main-color: #{$lightMainColor};
|
|
164
|
+
--ligther-main-color: #{$lighterMainColor};
|
|
165
|
+
--main-text-color: #{$textColor};
|
|
166
|
+
--secondary-color: #{$secondaryColor};
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
html[data-theme="dark"] {
|
|
170
|
+
--text-color: #{$darkTextColor};
|
|
171
|
+
--main-color: #{$darkMainColor};
|
|
172
|
+
--card-color: #{$darkCardColor};
|
|
173
|
+
--main-background-color: #{$darkBackground};
|
|
174
|
+
--light-main-color: #{$darkLightMainColor};
|
|
175
|
+
--ligther-main-color: #{$darkLighterMainColor};
|
|
176
|
+
--main-text-color: #{$darkTextColor};
|
|
177
|
+
--secondary-color: #{$darkSecondaryColor};
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@media (prefers-color-scheme: dark) {
|
|
181
|
+
html, html[data-theme="dark"] {
|
|
182
|
+
--text-color: #{$darkTextColor};
|
|
183
|
+
--main-color: #{$darkMainColor};
|
|
184
|
+
--card-color: #{$darkCardColor};
|
|
185
|
+
--main-background-color: #{$darkBackground};
|
|
186
|
+
--light-main-color: #{$darkLightMainColor};
|
|
187
|
+
--ligther-main-color: #{$darkLighterMainColor};
|
|
188
|
+
--main-text-color: #{$darkTextColor};
|
|
189
|
+
--secondary-color: #{$darkSecondaryColor};
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
html[data-theme="light"] {
|
|
193
|
+
--text-color: #{$textColor};
|
|
194
|
+
--main-color: #{$mainColor};
|
|
195
|
+
--card-color: #{$cardColor};
|
|
196
|
+
--main-background-color: #{$background};
|
|
197
|
+
--light-main-color: #{$lightMainColor};
|
|
198
|
+
--ligther-main-color: #{$lighterMainColor};
|
|
199
|
+
--main-text-color: #{$textColor};
|
|
200
|
+
--secondary-color: #{$secondaryColor};
|
|
88
201
|
}
|
|
89
202
|
}
|
|
90
203
|
|
|
204
|
+
html,
|
|
205
|
+
html *,
|
|
206
|
+
html *:before,
|
|
207
|
+
html *:after {
|
|
208
|
+
transition: color 1s;
|
|
209
|
+
transition: background-color 1s;
|
|
210
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 312.999 312.999"><path d="M305.6 178.053c-3.2-.8-6.4 0-9.2 2-10.4 8.8-22.4 16-35.6 20.8-12.4 4.8-26 7.2-40.4 7.2-32.4 0-62-13.2-83.2-34.4-21.2-21.2-34.4-50.8-34.4-83.2 0-13.6 2.4-26.8 6.4-38.8 4.4-12.8 10.8-24.4 19.2-34.4 3.6-4.4 2.8-10.8-1.6-14.4-2.8-2-6-2.8-9.2-2-34 9.2-63.6 29.6-84.8 56.8-20.4 26.8-32.8 60-32.8 96.4 0 43.6 17.6 83.2 46.4 112s68.4 46.4 112 46.4c36.8 0 70.8-12.8 98-34 27.6-21.6 47.6-52.4 56-87.6 2-6-1.2-11.6-6.8-12.8zm-61.2 83.6c-23.2 18.4-52.8 29.6-85.2 29.6-38 0-72.4-15.6-97.2-40.4-24.8-24.8-40.4-59.2-40.4-97.2 0-31.6 10.4-60.4 28.4-83.6 12.4-16 28-29.2 46-38.4-2 4.4-4 8.8-5.6 13.6-5.2 14.4-7.6 29.6-7.6 45.6 0 38 15.6 72.8 40.4 97.6s59.6 40.4 97.6 40.4c16.8 0 32.8-2.8 47.6-8.4 5.2-2 10.4-4 15.2-6.4-9.6 18.4-22.8 34.8-39.2 47.6z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.4 302.4"><path d="M204.8 97.6C191.2 84 172 75.2 151.2 75.2s-40 8.4-53.6 22.4c-13.6 13.6-22.4 32.8-22.4 53.6s8.8 40 22.4 53.6c13.6 13.6 32.8 22.4 53.6 22.4s40-8.4 53.6-22.4c13.6-13.6 22.4-32.8 22.4-53.6s-8.4-40-22.4-53.6zm-14.4 92.8c-10 10-24 16-39.2 16s-29.2-6-39.2-16-16-24-16-39.2 6-29.2 16-39.2 24-16 39.2-16 29.2 6 39.2 16 16 24 16 39.2-6 29.2-16 39.2zM292 140.8h-30.8c-5.6 0-10.4 4.8-10.4 10.4 0 5.6 4.8 10.4 10.4 10.4H292c5.6 0 10.4-4.8 10.4-10.4 0-5.6-4.8-10.4-10.4-10.4zM151.2 250.8c-5.6 0-10.4 4.8-10.4 10.4V292c0 5.6 4.8 10.4 10.4 10.4 5.6 0 10.4-4.8 10.4-10.4v-30.8c0-5.6-4.8-10.4-10.4-10.4zM258 243.6l-22-22c-3.6-4-10.4-4-14.4 0s-4 10.4 0 14.4l22 22c4 4 10.4 4 14.4 0s4-10.4 0-14.4zM151.2 0c-5.6 0-10.4 4.8-10.4 10.4v30.8c0 5.6 4.8 10.4 10.4 10.4 5.6 0 10.4-4.8 10.4-10.4V10.4c0-5.6-4.8-10.4-10.4-10.4zM258.4 44.4c-4-4-10.4-4-14.4 0l-22 22c-4 4-4 10.4 0 14.4 3.6 4 10.4 4 14.4 0l22-22c4-4 4-10.4 0-14.4zM41.2 140.8H10.4c-5.6 0-10.4 4.8-10.4 10.4s4.4 10.4 10.4 10.4h30.8c5.6 0 10.4-4.8 10.4-10.4 0-5.6-4.8-10.4-10.4-10.4zM80.4 221.6c-3.6-4-10.4-4-14.4 0l-22 22c-4 4-4 10.4 0 14.4s10.4 4 14.4 0l22-22c4-4 4-10.4 0-14.4zM80.4 66.4l-22-22c-4-4-10.4-4-14.4 0s-4 10.4 0 14.4l22 22c4 4 10.4 4 14.4 0s4-10.4 0-14.4z"/></svg>
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
let systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)");
|
|
2
|
+
let theme = sessionStorage.getItem('theme');
|
|
3
|
+
|
|
4
|
+
if (systemInitiatedDark.matches) {
|
|
5
|
+
document.getElementById("theme-toggle").classList.add('dark');
|
|
6
|
+
document.getElementById("theme-toggle").classList.remove('light');
|
|
7
|
+
} else {
|
|
8
|
+
document.getElementById("theme-toggle").classList.add('light');
|
|
9
|
+
document.getElementById("theme-toggle").classList.remove('dark');
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function prefersColorTest(systemInitiatedDark) {
|
|
13
|
+
if (systemInitiatedDark.matches) {
|
|
14
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
15
|
+
document.getElementById("theme-toggle").classList.add('light');
|
|
16
|
+
document.getElementById("theme-toggle").classList.remove('dark');
|
|
17
|
+
sessionStorage.setItem('theme', '');
|
|
18
|
+
} else {
|
|
19
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
20
|
+
document.getElementById("theme-toggle").classList.add('dark');
|
|
21
|
+
document.getElementById("theme-toggle").classList.remove('light');
|
|
22
|
+
sessionStorage.setItem('theme', '');
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
systemInitiatedDark.addListener(prefersColorTest);
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
function modeSwitcher() {
|
|
29
|
+
let theme = sessionStorage.getItem('theme');
|
|
30
|
+
if (theme === "dark") {
|
|
31
|
+
document.getElementById("theme-toggle").classList.add('light');
|
|
32
|
+
document.getElementById("theme-toggle").classList.remove('dark');
|
|
33
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
34
|
+
sessionStorage.setItem('theme', 'light');
|
|
35
|
+
} else if (theme === "light") {
|
|
36
|
+
document.getElementById("theme-toggle").classList.add('dark');
|
|
37
|
+
document.getElementById("theme-toggle").classList.remove('light');
|
|
38
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
39
|
+
sessionStorage.setItem('theme', 'dark');
|
|
40
|
+
} else if (systemInitiatedDark.matches) {
|
|
41
|
+
document.getElementById("theme-toggle").classList.add('dark');
|
|
42
|
+
document.getElementById("theme-toggle").classList.remove('light');
|
|
43
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
44
|
+
sessionStorage.setItem('theme', 'light');
|
|
45
|
+
} else {
|
|
46
|
+
document.getElementById("theme-toggle").classList.add('light');
|
|
47
|
+
document.getElementById("theme-toggle").classList.remove('dark');
|
|
48
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
49
|
+
sessionStorage.setItem('theme', 'dark');
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
if (theme === "dark") {
|
|
54
|
+
document.getElementById("theme-toggle").classList.add('dark');
|
|
55
|
+
document.getElementById("theme-toggle").classList.remove('light');
|
|
56
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
57
|
+
sessionStorage.setItem('theme', 'dark');
|
|
58
|
+
// document.getElementById("theme-toggle").innerHTML = sun;
|
|
59
|
+
} else if (theme === "light") {
|
|
60
|
+
document.getElementById("theme-toggle").classList.add('light');
|
|
61
|
+
document.getElementById("theme-toggle").classList.remove('dark');
|
|
62
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
63
|
+
sessionStorage.setItem('theme', 'light');
|
|
64
|
+
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: materialize-jekyll
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.5.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Victor Presumido
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2020-05-27 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -16,56 +16,56 @@ dependencies:
|
|
|
16
16
|
requirements:
|
|
17
17
|
- - "~>"
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
|
-
version:
|
|
19
|
+
version: 3.7.3
|
|
20
20
|
type: :runtime
|
|
21
21
|
prerelease: false
|
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
23
23
|
requirements:
|
|
24
24
|
- - "~>"
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
|
-
version:
|
|
26
|
+
version: 3.7.3
|
|
27
27
|
- !ruby/object:Gem::Dependency
|
|
28
28
|
name: jekyll
|
|
29
29
|
requirement: !ruby/object:Gem::Requirement
|
|
30
30
|
requirements:
|
|
31
31
|
- - "~>"
|
|
32
32
|
- !ruby/object:Gem::Version
|
|
33
|
-
version:
|
|
33
|
+
version: 3.7.3
|
|
34
34
|
type: :development
|
|
35
35
|
prerelease: false
|
|
36
36
|
version_requirements: !ruby/object:Gem::Requirement
|
|
37
37
|
requirements:
|
|
38
38
|
- - "~>"
|
|
39
39
|
- !ruby/object:Gem::Version
|
|
40
|
-
version:
|
|
40
|
+
version: 3.7.3
|
|
41
41
|
- !ruby/object:Gem::Dependency
|
|
42
42
|
name: bundler
|
|
43
43
|
requirement: !ruby/object:Gem::Requirement
|
|
44
44
|
requirements:
|
|
45
45
|
- - "~>"
|
|
46
46
|
- !ruby/object:Gem::Version
|
|
47
|
-
version:
|
|
47
|
+
version: 1.17.1
|
|
48
48
|
type: :development
|
|
49
49
|
prerelease: false
|
|
50
50
|
version_requirements: !ruby/object:Gem::Requirement
|
|
51
51
|
requirements:
|
|
52
52
|
- - "~>"
|
|
53
53
|
- !ruby/object:Gem::Version
|
|
54
|
-
version:
|
|
54
|
+
version: 1.17.1
|
|
55
55
|
- !ruby/object:Gem::Dependency
|
|
56
56
|
name: rake
|
|
57
57
|
requirement: !ruby/object:Gem::Requirement
|
|
58
58
|
requirements:
|
|
59
59
|
- - "~>"
|
|
60
60
|
- !ruby/object:Gem::Version
|
|
61
|
-
version:
|
|
61
|
+
version: 12.3.1
|
|
62
62
|
type: :development
|
|
63
63
|
prerelease: false
|
|
64
64
|
version_requirements: !ruby/object:Gem::Requirement
|
|
65
65
|
requirements:
|
|
66
66
|
- - "~>"
|
|
67
67
|
- !ruby/object:Gem::Version
|
|
68
|
-
version:
|
|
68
|
+
version: 12.3.1
|
|
69
69
|
description:
|
|
70
70
|
email:
|
|
71
71
|
- victor.presumido@gmail.com
|
|
@@ -96,16 +96,17 @@ files:
|
|
|
96
96
|
- _sass/_syntax.scss
|
|
97
97
|
- _sass/_tags.scss
|
|
98
98
|
- _sass/_variables.scss
|
|
99
|
-
- assets/.DS_Store
|
|
100
99
|
- assets/css/.DS_Store
|
|
101
100
|
- assets/css/main.scss
|
|
102
|
-
- assets/img/.DS_Store
|
|
103
101
|
- assets/img/icons/facebook.svg
|
|
104
102
|
- assets/img/icons/github.svg
|
|
105
103
|
- assets/img/icons/instagram.svg
|
|
106
104
|
- assets/img/icons/linkedin.svg
|
|
105
|
+
- assets/img/icons/moon.svg
|
|
106
|
+
- assets/img/icons/sun.svg
|
|
107
107
|
- assets/img/icons/twitter.svg
|
|
108
108
|
- assets/js/init.js
|
|
109
|
+
- assets/js/mode-switcher.js
|
|
109
110
|
- assets/js/vendor/masonry.pkgd.min.js
|
|
110
111
|
homepage: https://github.com/victorpre/materialize-jekyll
|
|
111
112
|
licenses:
|
|
@@ -127,7 +128,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
127
128
|
version: '0'
|
|
128
129
|
requirements: []
|
|
129
130
|
rubyforge_project:
|
|
130
|
-
rubygems_version: 2.6
|
|
131
|
+
rubygems_version: 2.7.6
|
|
131
132
|
signing_key:
|
|
132
133
|
specification_version: 4
|
|
133
134
|
summary: A material design Jekyll theme for blog using MaterializeCSS.
|
data/assets/.DS_Store
DELETED
|
Binary file
|
data/assets/img/.DS_Store
DELETED
|
Binary file
|