jekyll-theme-backwhite 2.0.0 → 2.1.0

Sign up to get free protection for your applications and to get access to all the features.
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