jekyll-theme-minimal-ryan 0.2.0 → 0.2.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: 34577329505a0cb942e351e6a4c1e874eb89a16afa32c1cc0b6952c59468cca1
4
- data.tar.gz: ee1e6263415e5fcdaaf543f298e10a326e9a959b527af36f033c9fb09f16fdaf
3
+ metadata.gz: ecbeb258fa390117a70682a774f2419c37e541082f3eb3865d116a50b7de4cfc
4
+ data.tar.gz: 71014bd57ef7ec26b2aee44f2a706d202141af1259d755b7d6f0c7d5da38e23f
5
5
  SHA512:
6
- metadata.gz: 55ddcec692b77804cfc1595e8576ce4d459d4acae972005ade5535f1bf4f6fc94c6b13611015efe06ce38cd59472cb2fa2f6d83839d8808257325e09f3e55df9
7
- data.tar.gz: ffaa409cd64c5280b889ed7006b89e926e1f122ce8e4151bb58f680dc1d16dbdde45dea6abc1c8913674e3b59d84df9bb2d3559cec39d153131d983fdf83d715
6
+ metadata.gz: 7236aa82b9fc2c46bea89c2d5fb796287bfb1d52ed48b3d022ec194af050a7960f8f73d8f5b4127836ce872ce130bc787f9dbd156f333ea6444a426baea17fdd
7
+ data.tar.gz: 4e9bc457da1c8422b9aa30d9604562ea6ae3d468abd11f317b55e795bb74aa904e285133b6794d344a6dd17c04f5f3dfcaf7955bba72e01de114f2b900271889
data/CHANGELOG.md CHANGED
@@ -1,4 +1,4 @@
1
- ## 0.2.0 (2022-12-27)
1
+ ## 0.2.1 (2022-12-28)
2
2
 
3
3
  ### Feat
4
4
 
@@ -7,6 +7,13 @@
7
7
 
8
8
  ### Fix
9
9
 
10
+ - add Gemfile.lock to version_files
11
+ - mobile view for blog home posts
12
+ - mobile view for home page
10
13
  - images not appearing in posts correctly
11
14
  - lists not expanding entire width
12
15
  - regex not removing all html tags
16
+
17
+ ### Refactor
18
+
19
+ - convert media queries to mixins
data/_layouts/home.html CHANGED
@@ -3,10 +3,10 @@ layout: default
3
3
  ---
4
4
 
5
5
  <div id="home-page">
6
- <div id="left-column">
6
+ <div id="first-column">
7
7
  <img src="{{ site.data.theme.home.image.src }}">
8
8
  </div>
9
- <div id="right-column">
9
+ <div id="second-column">
10
10
  <div id="content-box">
11
11
  <h1 id="home-title">{{ site.data.theme.title }}</h1>
12
12
  {{ content }}
@@ -23,4 +23,33 @@ $biggest-font-size: 20px;
23
23
  }
24
24
 
25
25
  /* Layout */
26
- $header-height: 80px;
26
+ $screen-width-extra-small: 320px;
27
+ $screen-width-small: 600px;
28
+ $screen-width-medium: 900px;
29
+ $screen-width-large: 1200px;
30
+
31
+ @mixin extra-small-screen {
32
+ @media only screen and (min-width: #{$screen-width-extra-small}) {
33
+ @content;
34
+ }
35
+ }
36
+
37
+ @mixin small-screen {
38
+ @media only screen and (min-width: #{$screen-width-small}) {
39
+ @content;
40
+ }
41
+ }
42
+
43
+ @mixin medium-screen {
44
+ @media only screen and (min-width: #{$screen-width-medium}) {
45
+ @content;
46
+ }
47
+ }
48
+
49
+ @mixin large-screen {
50
+ @media only screen and (min-width: #{$screen-width-large}) {
51
+ @content;
52
+ }
53
+ }
54
+
55
+ $header-height: 80px;
@@ -1,20 +1,20 @@
1
1
  .content-container {
2
2
  margin: auto;
3
3
 
4
- @media only screen and (min-width: 320px) {
5
- width: 320px;
4
+ @include extra-small-screen {
5
+ width: $screen-width-extra-small;
6
6
  }
7
7
 
8
- @media only screen and (min-width: 600px) {
9
- width: 600px;
8
+ @include small-screen {
9
+ width: $screen-width-small;
10
10
  }
11
11
 
12
- @media only screen and (min-width: 900px) {
13
- width: 900px;
12
+ @include medium-screen {
13
+ width: $screen-width-medium;
14
14
  }
15
15
 
16
- @media only screen and (min-width: 1200px) {
17
- width: 1200px;
16
+ @include large-screen {
17
+ width: $screen-width-large;
18
18
  }
19
19
  }
20
20
 
@@ -30,50 +30,85 @@
30
30
  }
31
31
 
32
32
  #home-page {
33
- height: calc(100vh - #{$header-height});
33
+ $large-screen-second-column-width: 45%;
34
+ $mobile-column-height: calc(90vh - #{$header-height});
35
+
34
36
  display: flex;
35
- flex-direction: row;
37
+ flex-direction: column;
36
38
  justify-content: center;
37
39
 
38
- $right-column-size: 45%;
40
+ @include large-screen {
41
+ flex-direction: row;
42
+ height: calc(100vh - #{$header-height});
43
+ }
39
44
 
40
- #right-column {
41
- width: $right-column-size;
42
- background-color: $primary-color;
45
+ #first-column {
46
+ display: flex;
47
+ justify-content: center;
48
+ overflow: hidden;
49
+ height: $mobile-column-height;
50
+
51
+ @include large-screen {
52
+ width: calc(100% - #{$large-screen-second-column-width});
53
+ height: 100%;
54
+ }
43
55
 
56
+ img {
57
+ object-fit: fill;
58
+ }
59
+ }
60
+
61
+ #second-column {
62
+ background-color: $primary-color;
44
63
  display: flex;
45
64
  flex-direction: column;
46
65
  justify-content: center;
47
66
  align-items: center;
67
+ width: 100%;
68
+ height: $mobile-column-height;
69
+
70
+ @include large-screen {
71
+ width: $large-screen-second-column-width;
72
+ height: 100%;
73
+ }
48
74
 
49
75
  #content-box {
50
- text-align: right;
76
+ text-align: center;
51
77
 
52
- @media only screen and (min-width: 1200px) {
78
+ @include large-screen {
79
+ text-align: right;
53
80
  padding-right: 18%;
54
81
  }
55
82
 
56
83
  #home-title {
57
- font-size: 128px;
84
+ font-size: 16vw;
85
+
86
+ @include small-screen {
87
+ font-size: 12vw;
88
+ }
89
+
90
+ @include medium-screen {
91
+ font-size: 10vw;
92
+ }
93
+
94
+ @include large-screen {
95
+ font-size: 8vw;
96
+ }
58
97
  }
59
98
 
60
99
  p {
61
100
  font-size: $biggest-font-size;
62
- }
63
- }
64
-
65
- }
66
101
 
67
- #left-column {
68
- display: flex;
69
- justify-content: center;
70
-
71
- width: calc(100% - #{$right-column-size});
72
- overflow: hidden;
102
+ @include extra-small-screen {
103
+ padding: 0 2%;
104
+ }
73
105
 
74
- img {
75
- object-fit: fill;
106
+ @include small-screen {
107
+ padding: 0;
108
+ }
109
+ }
76
110
  }
111
+
77
112
  }
78
113
  }
79
114
 
@@ -98,6 +133,7 @@
98
133
 
99
134
  .post-content {
100
135
  flex: 7;
136
+ width: 100%;
101
137
 
102
138
  .post-title {
103
139
  font-size: $big-font-size;
@@ -130,7 +166,7 @@
130
166
  width: 100%;
131
167
  line-height: 1.4em;
132
168
 
133
- @media only screen and (min-width: 1200px) {
169
+ @include large-screen {
134
170
  width: 65%;
135
171
  }
136
172
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-theme-minimal-ryan
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.0
4
+ version: 0.2.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - ryanshepps
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-12-27 00:00:00.000000000 Z
11
+ date: 2022-12-29 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll