jekyll-theme-backwhite 1.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fef2c903f90707c796f8b2dccd1e80ddd66e350ae85a5088731b0ca4d9777cf3
4
- data.tar.gz: d2c0f72f81a11c8bf7788a8d323219f447a5c8e44c513d0a1526ba1124757360
3
+ metadata.gz: 1ba702cd9230e9eb47dfa92bd909e38a5299ec7537f52356e104d2030576cab5
4
+ data.tar.gz: 05c6aabc5c77ccbd958ce70ef5f10be0668105d96347814936e83ca2bb333980
5
5
  SHA512:
6
- metadata.gz: a9c9e6027a48ae2e031a7caf5d2337e94dfe45639a3710ab78ef1c717c3d38e3253be6661563fccd2fed33691dd5de086d472abf835b68e111e331dca0d0f943
7
- data.tar.gz: 543a98f4a7c04a5bd32c78895e430092df9a8620b9c23b5bcf04cbef1c4818888e688a76f80ee26a03163dab63f72cd9369f7d828d1556f8b207111350625b0c
6
+ metadata.gz: 8047122d6199359aaa659ec55edb6162bfea879ea152119cf3e1ca581ae5b6230f0a81830831dd13e3a56cf9f949c196785936c03b003b18aa1cf17f34c0ed47
7
+ data.tar.gz: 8251a23cae48c59531e29469ef9b6449cf21c41dacaea90a1956e2441830d34dcc59d1ab5cbb79ab28561727b5d1371864dab9fe345eca3b4b39e661389762dd
File without changes
data/README.md CHANGED
@@ -38,7 +38,7 @@ Or install it yourself as:
38
38
 
39
39
  ## Usage
40
40
 
41
- Refer to [Usage](./USAGE.md) document.
41
+ Refer to [Usage](./usage-bruh.md) document.
42
42
 
43
43
  ## Contributing
44
44
 
@@ -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: Example 1
15
- - url: '#'
16
- text: Example 2
17
- - url: '#'
18
- text: Example 3
19
- - url: '#'
20
- text: Machine Learning
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
- github_username: example
23
- email_address: example@mail.com
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
@@ -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
- <!-- Links Table -->
12
- <table class="bw-links">
13
- {% assign rowsize = 3 %}
14
- {% assign rows = site.links.size | times: 1.0 | divided_by: rowsize | ceil %}
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
- <tr>
29
- {% if site.github_username %}
30
- <td>
31
- <a href="https://github.com/{{ site.github_username }}">
32
- <span class='fab fa-github'></span>
33
- {{ site.github_username }}
34
- </a>
35
- </td>
36
- {% endif %}
37
- {% if site.email_address %}
38
- <td>
39
- <a href="mailto://{{ site.email_address }}">
40
- <span class="fas fa-envelope"></span>
41
- Email
42
- </a>
43
- </td>
44
- {% endif %}
45
- </tr>
46
- </table>
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">
@@ -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>
@@ -0,0 +1,12 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ {% include head.html %}
4
+ <body>
5
+ <div class="bw-full-back">
6
+ <div class="bw-full-back-container">
7
+ <h1 class="bw-full-back-page-title">{{ page.title }}</h1>
8
+ {{ content }}
9
+ </div>
10
+ </div>
11
+ </body>
12
+ </html>
@@ -2,11 +2,12 @@
2
2
  <html>
3
3
  {% include head.html %}
4
4
  <body>
5
- {% include back.html %}
6
-
7
- <div class="bw-front">
8
- <div class="bw-front-container">
9
- {{ content }}
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>
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  layout: default
3
3
  ---
4
- <div class="bw-header">
4
+ <div class="bw-page-header">
5
5
  <h1 class="bw-title">{{ page.title }}</h1>
6
6
  <button class='bw-action bw-show-on-mobile bw-open'>
7
7
  <span class="fas fa-chevron-right"></span>
@@ -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: -1;
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: 0;
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
- // Positioning
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
- margin-left: 0%;
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
- align-items: center;
20
- border-bottom: 1px solid;
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: none;
107
+ background-color: inherit;
32
108
  border: none;
33
109
  color: inherit;
34
- padding: $spacing-unit/2;
35
- margin: $spacing-unit/2;
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