jekyll-theme-backwhite 2.0.0 → 2.1.0

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: 141ba9b66d6fc73a0e2590c3f87c05208319b137d914835c0dc194a8cb3e2b33
4
- data.tar.gz: 14df658aa43bfd6101276b3e251b04a9caa138b708abcb26595a35db710c0bb1
3
+ metadata.gz: 757b53e8180965eb6dea1f1c17d53707875b375ad740757c0b1e2ae1d612604b
4
+ data.tar.gz: 6821b35294dd71ac9c0bf7da938846c76ef53a5a6df1f659addbe0a8925d6856
5
5
  SHA512:
6
- metadata.gz: a1e5fd779392b622b9f565d53aaf8a91d3afb35b31239456ec3b373e01a4971f10a04045d8dbe157c6ebe17f959f8e78e05bfbee8f4388ee9d386220c006b961
7
- data.tar.gz: 42120638d8655b210015a6e0d60d24d9a59844a6220553cc49d88a6081402ac5d710299943a81bbdc544bf72596cc2dfdc13d8530d1b7f55b915f6037805af8a
6
+ metadata.gz: e980303a5d5938a7da145f80979bf55d74ddf4c3b682c5725c9bbeea659ffe8a1a48e17f774846a7606aa864c3a69e42452ea7b354c10d2b699829685a4fe784
7
+ data.tar.gz: 7d0724095d76bf5388d3c0069b497a1153fbf13d4162cfcd6ef126696d730612eaf5f7e7bcc6fced482385552decf3c85311a7a0a0beedefeb543f8dc04efe38
@@ -9,17 +9,30 @@ 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
14
  - url: '/showcase'
14
15
  text: Showcase
15
16
  - url: '/usage-bruh'
16
17
  text: Usage
17
18
  - url: '/post-example'
18
- text: 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
19
26
 
20
27
  # Example social media
21
- github_username: example
22
- email_address: example@mail.com
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
23
36
 
24
37
  # Build details
25
38
  exclude:
@@ -5,56 +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="{{ "/" | prepend: site.baseurl | prepend: site.url }}" class="bw-title bw-mega">
9
- {{ site.title }}
10
- </a>
8
+ <a href="{{ "/" | prepend: site.baseurl | prepend: site.url }}" class="bw-title bw-mega">{{ site.title }}</a>
11
9
  </div>
12
10
 
13
- <!-- Links Table -->
14
- <table class="bw-links">
15
- <!-- Link Rows -->
16
- {% assign rowsize = 3 %}
17
- {% assign rows = site.links.size | times: 1.0 | divided_by: rowsize | ceil %}
18
- {% for i in (1..rows) %}
19
- {% assign offset = forloop.index0 | times: rowsize %}
20
- <tr>
21
- {% for link in site.links limit:rowsize offset:offset %}
22
- <td>
23
- <a href="{{ link.url | prepend: site.baseurl | prepend: site.url }}">
24
- {{ link.text }}
25
- </a>
26
- </td>
27
- {% endfor %}
28
- </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>
29
15
  {% endfor %}
30
-
31
- <!-- User's Social Media -->
32
- <tr>
33
- {% if site.github_username %}
34
- <td>
35
- <a href="https://github.com/{{ site.github_username }}">
36
- <span class='fab fa-github'></span>
37
- {{ site.github_username }}
38
- </a>
39
- </td>
40
- {% endif %}
41
- {% if site.twitter_username %}
42
- <td>
43
- <a href="https://twitter.com/{{ site.twitter_username }}">
16
+ </div>
44
17
 
45
- </a>
46
- </td>
47
- {% endif %}
48
- {% if site.email_address %}
49
- <td>
50
- <a href="mailto://{{ site.email_address }}">
51
- <span class="fas fa-envelope"></span>
52
- Email
53
- </a>
54
- </td>
55
- {% endif %}
56
- </tr>
57
- </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>
58
56
 
59
57
  <!-- Footer -->
60
58
  <footer class="bw-footer">
@@ -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,9 +2,8 @@
2
2
  <html>
3
3
  {% include head.html %}
4
4
  <body>
5
- <div class="bw-app">
5
+ <div class='bw-app'>
6
6
  {% include back.html %}
7
-
8
7
  <div class="bw-front">
9
8
  <div class="bw-front-container">
10
9
  {{ content }}
@@ -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 {
@@ -15,7 +15,7 @@
15
15
  /* Setting a z-index of 0 to so that
16
16
  * this is in front of the back layer
17
17
  * with a z-index of -1 (see _back.scss) */
18
- z-index: 0;
18
+ z-index: 2;
19
19
 
20
20
  // Only vertical scrolling
21
21
  overflow-x: hidden;
@@ -37,7 +37,6 @@
37
37
  top: 0%;
38
38
  left: 0%;
39
39
  right: 0%;
40
- left: 0%;
41
40
  min-width: 100%;
42
41
  &.slided {
43
42
  left: 100%;
@@ -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,14 +1,70 @@
1
- // Root app component
2
1
  .bw-app {
3
- position: fixed;
2
+ position: absolute;
3
+ display: block;
4
4
  top: 0%;
5
5
  left: 0%;
6
- right: 0%;
6
+ max-width: 100%;
7
+ width: 100%;
7
8
  min-height: 100%;
8
9
  overflow-x: hidden;
9
- overflow-y: scroll;
10
- &.scroll-lock {
11
- overflow-y: 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
+ }
12
68
  }
13
69
  }
14
70
 
@@ -78,9 +134,6 @@
78
134
  @include on-tablet {
79
135
  max-width: 100%;
80
136
  }
81
- @include on-mobile {
82
- max-width: 100%;
83
- }
84
137
  }
85
138
 
86
139
  // Grid rows
@@ -111,7 +164,7 @@
111
164
  }
112
165
  .bw-border-button {
113
166
  @extend .bw-text-button;
114
- border: 2px solid;
167
+ border: 1px solid;
115
168
  border-color: $back-color;
116
169
  }
117
170
  .bw-cutout-button {
@@ -4,6 +4,11 @@
4
4
  @content;
5
5
  }
6
6
  }
7
+ @mixin on-vert-tablet {
8
+ @media only screen and (max-width: $vert-tablet-width) {
9
+ @content;
10
+ }
11
+ }
7
12
  @mixin on-tablet {
8
13
  @media only screen and (max-width: $tablet-width) {
9
14
  @content;
@@ -0,0 +1,36 @@
1
+ .bw-post-grid {
2
+ display: grid;
3
+ grid-template-columns: repeat(3, 1fr);
4
+ row-gap: $spacing-unit;
5
+ column-gap: $spacing-unit;
6
+
7
+ @include on-tablet {
8
+ grid-template-columns: repeat(2, 1fr);
9
+ }
10
+ @include on-vert-tablet {
11
+ grid-template-columns: repeat(1, 1fr);
12
+ }
13
+
14
+ .bw-post {
15
+ display: grid;
16
+ grid-template-rows: auto 1fr auto;
17
+
18
+ .bw-post-links {
19
+ display: block;
20
+ text-align: right;
21
+
22
+ @include on-mobile {
23
+ display: flex;
24
+ flex-direction: row-reverse;
25
+ }
26
+
27
+ a {
28
+ flex: 0;
29
+ text-align: center;
30
+ @include on-mobile {
31
+ flex: 1;
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
@@ -11,19 +11,23 @@ $desktop-menu-size: 300px !default;
11
11
  // Gutters width
12
12
  $gutters-width: 64%;
13
13
 
14
- // Normal font size
14
+ // Font sizes
15
15
  $mega-font-size: 30pt !default;
16
16
  $large-font-size: 20pt !default;
17
17
  $medium-font-size: 14pt !default;
18
18
  $normal-font-size: 11pt !default;
19
19
  $small-font-size: 8pt !default;
20
20
 
21
+ // Icon size
22
+ $back-icon-size: 14pt !default;
23
+
21
24
  // Font
22
25
  $font-family: "Calibri Light", sans-serif !default;
23
26
  $code-font-family: "Consolas", monospace !default;
24
27
 
25
28
  // Responsive sizes
26
- $mobile-width: 760px !default;
29
+ $mobile-width: 430px !default;
30
+ $vert-tablet-width: 770px !default;
27
31
  $tablet-width: 1200px !default;
28
32
 
29
33
  // Import consolas font
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-backwhite
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.0.0
4
+ version: 2.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - andydevs
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-07-09 00:00:00.000000000 Z
11
+ date: 2020-07-13 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -64,8 +64,10 @@ files:
64
64
  - _config.yml
65
65
  - _includes/back.html
66
66
  - _includes/head.html
67
+ - _layouts/centered.html
67
68
  - _layouts/default.html
68
69
  - _layouts/page.html
70
+ - _layouts/post-index.html
69
71
  - _layouts/post.html
70
72
  - _sass/fontawesome/_animated.scss
71
73
  - _sass/fontawesome/_bordered-pulled.scss
@@ -90,8 +92,10 @@ files:
90
92
  - _sass/jekyll-theme-backwhite/_base.scss
91
93
  - _sass/jekyll-theme-backwhite/_form.scss
92
94
  - _sass/jekyll-theme-backwhite/_front.scss
95
+ - _sass/jekyll-theme-backwhite/_links.scss
93
96
  - _sass/jekyll-theme-backwhite/_misc.scss
94
97
  - _sass/jekyll-theme-backwhite/_mixins.scss
98
+ - _sass/jekyll-theme-backwhite/_post-index.scss
95
99
  - _sass/jekyll-theme-backwhite/_syntax-highlighting.scss
96
100
  - _sass/jekyll-theme-backwhite/_variables-and-fonts.scss
97
101
  - assets/css/main.scss