jekyll-theme-backwhite 1.1.0 → 2.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/{LICENSE.txt → LICENSE} +0 -0
- data/README.md +1 -1
- data/_config.yml +26 -10
- data/_includes/back.html +44 -35
- data/_includes/head.html +11 -3
- data/_layouts/centered.html +12 -0
- data/_layouts/default.html +6 -5
- data/_layouts/page.html +1 -1
- data/_layouts/post-index.html +30 -0
- data/_sass/jekyll-theme-backwhite.scss +3 -1
- data/_sass/jekyll-theme-backwhite/_back.scss +2 -11
- data/_sass/jekyll-theme-backwhite/_base.scss +7 -1
- data/_sass/jekyll-theme-backwhite/_front.scss +15 -3
- data/_sass/jekyll-theme-backwhite/_links.scss +25 -0
- data/_sass/jekyll-theme-backwhite/_misc.scss +108 -8
- data/_sass/jekyll-theme-backwhite/_mixins.scss +5 -0
- data/_sass/jekyll-theme-backwhite/_post-index.scss +36 -0
- data/_sass/jekyll-theme-backwhite/_variables-and-fonts.scss +6 -2
- data/assets/js/backwhite.js +36 -10745
- metadata +7 -4
- data/assets/js/backwhite.js.map +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1ba702cd9230e9eb47dfa92bd909e38a5299ec7537f52356e104d2030576cab5
|
4
|
+
data.tar.gz: 05c6aabc5c77ccbd958ce70ef5f10be0668105d96347814936e83ca2bb333980
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8047122d6199359aaa659ec55edb6162bfea879ea152119cf3e1ca581ae5b6230f0a81830831dd13e3a56cf9f949c196785936c03b003b18aa1cf17f34c0ed47
|
7
|
+
data.tar.gz: 8251a23cae48c59531e29469ef9b6449cf21c41dacaea90a1956e2441830d34dcc59d1ab5cbb79ab28561727b5d1371864dab9fe345eca3b4b39e661389762dd
|
data/{LICENSE.txt → LICENSE}
RENAMED
File without changes
|
data/README.md
CHANGED
data/_config.yml
CHANGED
@@ -9,15 +9,31 @@ description: >
|
|
9
9
|
occaecat cupidatat non proident, sunt in culpa qui officia
|
10
10
|
deserunt mollit anim id est laborum.
|
11
11
|
|
12
|
+
# Page links
|
12
13
|
links:
|
13
|
-
- url: '
|
14
|
-
text:
|
15
|
-
- url: '
|
16
|
-
text:
|
17
|
-
- url: '
|
18
|
-
text:
|
19
|
-
- url: '
|
20
|
-
text:
|
14
|
+
- url: '/showcase'
|
15
|
+
text: Showcase
|
16
|
+
- url: '/usage-bruh'
|
17
|
+
text: Usage
|
18
|
+
- url: '/post-example'
|
19
|
+
text: Post
|
20
|
+
- url: '/center-page'
|
21
|
+
text: Center Page
|
22
|
+
- url: '/bogus'
|
23
|
+
text: Bogus Page
|
24
|
+
- url: '/post-index-example'
|
25
|
+
text: Post Index
|
21
26
|
|
22
|
-
|
23
|
-
|
27
|
+
# Example social media
|
28
|
+
social:
|
29
|
+
youtube: PewDiePie
|
30
|
+
linkedin: anshul-kharbanda-03433712b
|
31
|
+
twitter: "@example"
|
32
|
+
instagram: khartesian_coordinate_system
|
33
|
+
facebook: Anshul.Kharbanda.1997
|
34
|
+
github: example
|
35
|
+
email: example@mail.com
|
36
|
+
|
37
|
+
# Build details
|
38
|
+
exclude:
|
39
|
+
- TODO.md
|
data/_includes/back.html
CHANGED
@@ -5,45 +5,54 @@
|
|
5
5
|
<button class="bw-action bw-show-on-mobile bw-close">
|
6
6
|
<span class="fas fa-chevron-left"></span>
|
7
7
|
</button>
|
8
|
-
<a href="{{ site.url }}" class="bw-title bw-mega">{{ site.title }}</a>
|
8
|
+
<a href="{{ "/" | prepend: site.baseurl | prepend: site.url }}" class="bw-title bw-mega">{{ site.title }}</a>
|
9
9
|
</div>
|
10
10
|
|
11
|
-
<!--
|
12
|
-
<
|
13
|
-
{%
|
14
|
-
|
15
|
-
{% for i in (1..rows) %}
|
16
|
-
{% assign offset = forloop.index0 | times: rowsize %}
|
17
|
-
<tr>
|
18
|
-
{% for link in site.links limit:rowsize offset:offset %}
|
19
|
-
<td>
|
20
|
-
<a href="{{ link.url }}">
|
21
|
-
{{ link.text }}
|
22
|
-
</a>
|
23
|
-
</td>
|
24
|
-
{% endfor %}
|
25
|
-
</tr>
|
11
|
+
<!-- Page links grid -->
|
12
|
+
<div class="bw-links">
|
13
|
+
{% for link in site.links %}
|
14
|
+
<a href="{{ link.url | prepend: site.baseurl | prepend: site.url }}">{{ link.text }}</a>
|
26
15
|
{% endfor %}
|
16
|
+
</div>
|
27
17
|
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
{
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
18
|
+
<!-- Social links grid -->
|
19
|
+
<div class="bw-social">
|
20
|
+
{% if site.social.youtube %}
|
21
|
+
<a href="https://youtube.com/user/{{ site.social.youtube }}">
|
22
|
+
<span class='fab fa-youtube'></span>
|
23
|
+
</a>
|
24
|
+
{% endif %}
|
25
|
+
{% if site.social.twitter %}
|
26
|
+
<a href="https://twitter.com/{{ site.social.twitter }}">
|
27
|
+
<span class='fab fa-twitter'></span>
|
28
|
+
</a>
|
29
|
+
{% endif %}
|
30
|
+
{% if site.social.instagram %}
|
31
|
+
<a href="https://instagram.com/{{ site.social.instagram }}">
|
32
|
+
<span class='fab fa-instagram'></span>
|
33
|
+
</a>
|
34
|
+
{% endif %}
|
35
|
+
{% if site.social.github %}
|
36
|
+
<a href="https://github.com/{{ site.social.github }}">
|
37
|
+
<span class='fab fa-github'></span>
|
38
|
+
</a>
|
39
|
+
{% endif %}
|
40
|
+
{% if site.social.facebook %}
|
41
|
+
<a href="https://facebook.com/{{ site.social.facebook }}">
|
42
|
+
<span class='fab fa-facebook'></span>
|
43
|
+
</a>
|
44
|
+
{% endif %}
|
45
|
+
{% if site.social.linkedin %}
|
46
|
+
<a href="https://linkedin.com/in/{{ site.social.linkedin }}">
|
47
|
+
<span class='fab fa-linkedin'></span>
|
48
|
+
</a>
|
49
|
+
{% endif %}
|
50
|
+
{% if site.social.email %}
|
51
|
+
<a href="mailto://{{ site.social.email }}">
|
52
|
+
<span class="fas fa-envelope"></span>
|
53
|
+
</a>
|
54
|
+
{% endif %}
|
55
|
+
</div>
|
47
56
|
|
48
57
|
<!-- Footer -->
|
49
58
|
<footer class="bw-footer">
|
data/_includes/head.html
CHANGED
@@ -1,14 +1,22 @@
|
|
1
1
|
<head>
|
2
|
+
<!-- Metadata -->
|
2
3
|
<meta charset="utf-8">
|
3
4
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
4
5
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
5
|
-
|
6
|
-
<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
|
7
|
-
|
8
6
|
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
|
9
7
|
{% if page.keywords %}<meta name="keywords" content="{{ page.keywords | join: ',' }}">{% endif %}
|
10
8
|
|
9
|
+
<!-- Site Title -->
|
10
|
+
<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
|
11
|
+
|
12
|
+
<!-- CSS And Canonical Links -->
|
11
13
|
<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl | prepend: site.url }}">
|
12
14
|
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
|
15
|
+
|
16
|
+
<!-- Script Links -->
|
17
|
+
<script
|
18
|
+
src="https://code.jquery.com/jquery-3.5.1.js"
|
19
|
+
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
|
20
|
+
crossorigin="anonymous"></script>
|
13
21
|
<script src="{{ "/assets/js/backwhite.js" | prepend: site.baseurl | prepend: site.url }}"></script>
|
14
22
|
</head>
|
data/_layouts/default.html
CHANGED
@@ -2,11 +2,12 @@
|
|
2
2
|
<html>
|
3
3
|
{% include head.html %}
|
4
4
|
<body>
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
5
|
+
<div class='bw-app'>
|
6
|
+
{% include back.html %}
|
7
|
+
<div class="bw-front">
|
8
|
+
<div class="bw-front-container">
|
9
|
+
{{ content }}
|
10
|
+
</div>
|
10
11
|
</div>
|
11
12
|
</div>
|
12
13
|
</body>
|
data/_layouts/page.html
CHANGED
@@ -0,0 +1,30 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
<div class="bw-page-header">
|
5
|
+
<h1 class="bw-title">{{ site.title }}</h1>
|
6
|
+
<button class='bw-action bw-show-on-mobile bw-open'>
|
7
|
+
<span class="fas fa-chevron-right"></span>
|
8
|
+
</button>
|
9
|
+
</div>
|
10
|
+
<div class="bw-post-grid">
|
11
|
+
{% for post in site.posts %}
|
12
|
+
<div class="bw-post">
|
13
|
+
<div class="bw-post-header">
|
14
|
+
<h3 class="bw-post-title">{{ post.title }}</h3>
|
15
|
+
{% if post.date %}
|
16
|
+
<h4 class="bw-post-date">{{ post.date | date: "%b %-d, %Y" }}</h4>
|
17
|
+
{% endif %}
|
18
|
+
</div>
|
19
|
+
<div class="bw-post-excerpt">
|
20
|
+
{{ post.excerpt }}
|
21
|
+
</div>
|
22
|
+
<p class="bw-post-links">
|
23
|
+
<a class="bw-cutout-button"
|
24
|
+
href="{{ post.url | prepend: site.baseurl }}">
|
25
|
+
Read More
|
26
|
+
</a>
|
27
|
+
</p>
|
28
|
+
</div>
|
29
|
+
{% endfor %}
|
30
|
+
</div>
|
@@ -12,4 +12,6 @@ $fa-font-path: "/assets/fonts";
|
|
12
12
|
@import "jekyll-theme-backwhite/base";
|
13
13
|
@import "jekyll-theme-backwhite/form";
|
14
14
|
@import "jekyll-theme-backwhite/misc";
|
15
|
-
@import "jekyll-theme-backwhite/syntax-highlighting";
|
15
|
+
@import "jekyll-theme-backwhite/syntax-highlighting";
|
16
|
+
@import "jekyll-theme-backwhite/post-index";
|
17
|
+
@import "jekyll-theme-backwhite/links";
|
@@ -7,7 +7,7 @@
|
|
7
7
|
* how it's included in the document.
|
8
8
|
* It is exactly what it says, the
|
9
9
|
* z-axis position of the element */
|
10
|
-
z-index:
|
10
|
+
z-index: 1;
|
11
11
|
|
12
12
|
/* Back panel sizing. Fill vertically from
|
13
13
|
* top to bottom. Horizontally, start at
|
@@ -16,6 +16,7 @@
|
|
16
16
|
left: 0%;
|
17
17
|
bottom: 0%;
|
18
18
|
width: $desktop-menu-size;
|
19
|
+
max-width: 100%;
|
19
20
|
|
20
21
|
// Styling
|
21
22
|
background-color: $back-color;
|
@@ -55,16 +56,6 @@
|
|
55
56
|
}
|
56
57
|
}
|
57
58
|
|
58
|
-
// Links
|
59
|
-
.bw-links {
|
60
|
-
a {
|
61
|
-
text-decoration: none;
|
62
|
-
&:hover {
|
63
|
-
border-bottom: 1px solid;
|
64
|
-
}
|
65
|
-
}
|
66
|
-
}
|
67
|
-
|
68
59
|
// Backwhite footer
|
69
60
|
.bw-footer {
|
70
61
|
color: darken($white-color, 25%);
|
@@ -1,7 +1,6 @@
|
|
1
1
|
body {
|
2
2
|
font-family: $font-family;
|
3
3
|
font-size: $normal-font-size;
|
4
|
-
overflow-x: hidden;
|
5
4
|
}
|
6
5
|
|
7
6
|
a {
|
@@ -94,4 +93,11 @@ img {
|
|
94
93
|
margin: $spacing-unit auto;
|
95
94
|
max-width: 100%;
|
96
95
|
box-shadow: 0px 0pt 8pt darken($white-color, 33%);
|
96
|
+
}
|
97
|
+
|
98
|
+
figure {
|
99
|
+
display: block;
|
100
|
+
margin: 0pt;
|
101
|
+
margin-top: $spacing-unit;
|
102
|
+
margin-bottom: $spacing-unit;
|
97
103
|
}
|
@@ -1,15 +1,21 @@
|
|
1
1
|
.bw-front {
|
2
|
+
// No transition
|
3
|
+
transition: none;
|
4
|
+
|
2
5
|
// Positioning and sizing
|
3
6
|
position: absolute;
|
4
7
|
top: 0%;
|
5
8
|
left: $desktop-menu-size;
|
6
9
|
right: 0%;
|
7
10
|
min-height: 100%;
|
11
|
+
&.slided {
|
12
|
+
left: $desktop-menu-size;
|
13
|
+
}
|
8
14
|
|
9
15
|
/* Setting a z-index of 0 to so that
|
10
16
|
* this is in front of the back layer
|
11
17
|
* with a z-index of -1 (see _back.scss) */
|
12
|
-
z-index:
|
18
|
+
z-index: 2;
|
13
19
|
|
14
20
|
// Only vertical scrolling
|
15
21
|
overflow-x: hidden;
|
@@ -24,11 +30,17 @@
|
|
24
30
|
|
25
31
|
// Mobile
|
26
32
|
@include on-mobile {
|
27
|
-
//
|
33
|
+
// Animated transition
|
34
|
+
transition: left 0.5s ease-in-out;
|
35
|
+
|
36
|
+
// Positioning and slide handling
|
28
37
|
top: 0%;
|
29
38
|
left: 0%;
|
30
39
|
right: 0%;
|
31
|
-
|
40
|
+
min-width: 100%;
|
41
|
+
&.slided {
|
42
|
+
left: 100%;
|
43
|
+
}
|
32
44
|
};
|
33
45
|
|
34
46
|
// Container
|
@@ -0,0 +1,25 @@
|
|
1
|
+
// Links
|
2
|
+
.bw-links {
|
3
|
+
display: grid;
|
4
|
+
grid-template-columns: repeat(3, 1fr);
|
5
|
+
a {
|
6
|
+
text-align: center;
|
7
|
+
display: inline-block;
|
8
|
+
text-decoration: none;
|
9
|
+
margin: $spacing-unit;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
// Social
|
14
|
+
.bw-social {
|
15
|
+
margin: $spacing-unit 0pt;
|
16
|
+
display: flex;
|
17
|
+
flex-direction: row;
|
18
|
+
justify-content: center;
|
19
|
+
align-items: center;
|
20
|
+
a {
|
21
|
+
flex: 1;
|
22
|
+
text-align: center;
|
23
|
+
font-size: $back-icon-size;
|
24
|
+
}
|
25
|
+
}
|
@@ -1,3 +1,73 @@
|
|
1
|
+
.bw-app {
|
2
|
+
position: absolute;
|
3
|
+
display: block;
|
4
|
+
top: 0%;
|
5
|
+
left: 0%;
|
6
|
+
max-width: 100%;
|
7
|
+
width: 100%;
|
8
|
+
min-height: 100%;
|
9
|
+
overflow-x: hidden;
|
10
|
+
overflow-y: visible;
|
11
|
+
}
|
12
|
+
|
13
|
+
.bw-full-back {
|
14
|
+
// Position
|
15
|
+
position: absolute;
|
16
|
+
top: 0%;
|
17
|
+
left: 0%;
|
18
|
+
bottom: 0%;
|
19
|
+
right: 0%;
|
20
|
+
|
21
|
+
// Grid Layout
|
22
|
+
display: grid;
|
23
|
+
grid-template-rows: 1fr;
|
24
|
+
grid-template-columns: 1fr;
|
25
|
+
place-items: center;
|
26
|
+
|
27
|
+
// Coloring
|
28
|
+
background-color: $back-color;
|
29
|
+
color: $white-color;
|
30
|
+
|
31
|
+
// Container
|
32
|
+
.bw-full-back-container {
|
33
|
+
// Transform and sizing
|
34
|
+
transform: translateY(-25%);
|
35
|
+
max-width: 25%;
|
36
|
+
margin: 0pt $spacing-unit;
|
37
|
+
|
38
|
+
@include on-mobile {
|
39
|
+
max-width: 75%;
|
40
|
+
}
|
41
|
+
|
42
|
+
// Title
|
43
|
+
.bw-full-back-page-title {
|
44
|
+
padding: $spacing-unit 0pt;
|
45
|
+
color: $white-color;
|
46
|
+
border-bottom: 1px solid $white-color;
|
47
|
+
}
|
48
|
+
|
49
|
+
// Content
|
50
|
+
.bw-full-back-page-content {
|
51
|
+
margin: 2*$spacing-unit 0pt;
|
52
|
+
}
|
53
|
+
|
54
|
+
// Link
|
55
|
+
.bw-full-back-page-links {
|
56
|
+
display: flex;
|
57
|
+
flex-direction: row-reverse;
|
58
|
+
.bw-full-back-page-link {
|
59
|
+
@extend .bw-border-button;
|
60
|
+
border-color: $white-color !important;
|
61
|
+
padding: $spacing-unit/2 $spacing-unit !important;
|
62
|
+
&:hover {
|
63
|
+
background-color: $white-color;
|
64
|
+
color: black;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
1
71
|
// Hide on desktop, show on mobile
|
2
72
|
.bw-show-on-mobile {
|
3
73
|
display: none;
|
@@ -15,24 +85,43 @@
|
|
15
85
|
|
16
86
|
// Basic header with action button availability
|
17
87
|
.bw-header {
|
88
|
+
// Flex systme
|
18
89
|
display: flex;
|
19
|
-
|
20
|
-
|
90
|
+
flex-direction: row;
|
91
|
+
align-items: stretch;
|
92
|
+
|
93
|
+
// Spacing and border
|
21
94
|
margin: $spacing-unit 0pt;
|
95
|
+
border-bottom: 1px solid;
|
22
96
|
|
97
|
+
// Title button
|
23
98
|
.bw-title {
|
24
99
|
flex: 1;
|
25
100
|
margin: 0;
|
26
101
|
color: inherit;
|
27
102
|
}
|
28
103
|
|
104
|
+
// Action button
|
29
105
|
.bw-action {
|
30
106
|
flex: 0;
|
31
|
-
background:
|
107
|
+
background-color: inherit;
|
32
108
|
border: none;
|
33
109
|
color: inherit;
|
34
|
-
padding: $spacing-unit
|
35
|
-
|
110
|
+
padding: $spacing-unit;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
// Front page header
|
115
|
+
.bw-page-header {
|
116
|
+
@extend .bw-header;
|
117
|
+
align-items: center !important;
|
118
|
+
|
119
|
+
// Front header action
|
120
|
+
.bw-action {
|
121
|
+
@include cutout;
|
122
|
+
padding: $spacing-unit 4*$spacing-unit/3 !important;
|
123
|
+
background-color: $back-color !important;
|
124
|
+
color: $white-color !important;
|
36
125
|
}
|
37
126
|
}
|
38
127
|
|
@@ -45,9 +134,6 @@
|
|
45
134
|
@include on-tablet {
|
46
135
|
max-width: 100%;
|
47
136
|
}
|
48
|
-
@include on-mobile {
|
49
|
-
max-width: 100%;
|
50
|
-
}
|
51
137
|
}
|
52
138
|
|
53
139
|
// Grid rows
|
@@ -76,6 +162,11 @@
|
|
76
162
|
color: inherit;
|
77
163
|
padding: $spacing-unit;
|
78
164
|
}
|
165
|
+
.bw-border-button {
|
166
|
+
@extend .bw-text-button;
|
167
|
+
border: 1px solid;
|
168
|
+
border-color: $back-color;
|
169
|
+
}
|
79
170
|
.bw-cutout-button {
|
80
171
|
@include cutout;
|
81
172
|
border: none;
|
@@ -94,10 +185,19 @@
|
|
94
185
|
box-shadow: none;
|
95
186
|
}
|
96
187
|
}
|
188
|
+
.bw-emph-button {
|
189
|
+
@extend .bw-cutout-button;
|
190
|
+
}
|
97
191
|
|
98
192
|
// Cutout section (appears as a recessed section that uses the back color)
|
99
193
|
.bw-cutout {
|
100
194
|
@include block-cutout;
|
195
|
+
.bw-border-button {
|
196
|
+
border-color: $white-color;
|
197
|
+
}
|
198
|
+
.bw-emph-button {
|
199
|
+
@extend .bw-raised-button;
|
200
|
+
}
|
101
201
|
}
|
102
202
|
|
103
203
|
// Wraps an element with a horizontal scroll bar
|