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 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