jekyll-theme-basically-basic 1.0.1 → 1.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.
@@ -7,6 +7,8 @@ html {
7
7
  }
8
8
 
9
9
  body {
10
+ display: -ms-flexbox;
11
+ display: flex;
10
12
  background: $background-color;
11
13
  color: $text-color;
12
14
  }
@@ -108,3 +110,9 @@ a {
108
110
  color: shade($accent-color, 25%);
109
111
  }
110
112
  }
113
+
114
+ *:focus {
115
+ border-color: $accent-color;
116
+ outline: none;
117
+ box-shadow: 0 0 10px $accent-color;
118
+ }
@@ -1,39 +1,39 @@
1
- /* ==========================================================================
2
- Buttons
3
- ========================================================================== */
4
-
5
- .btn {
6
- display: inline-block;
7
- padding: 0.5em 1em;
8
- border: 0;
9
- border-radius: $border-radius;
10
- background-color: $accent-color;
11
- color: #fff;
12
- font-weight: bold;
13
- text-align: center;
14
- text-decoration: none;
15
- cursor: pointer;
16
-
17
- &:hover {
18
- background-color: tint($accent-color, 20%);
19
- color: #fff;
20
- }
21
-
22
- &:focus {
23
- background-color: shade($accent-color, 20%);
24
- }
25
-
26
- .icon {
27
- margin-right: 0.5em;
28
- }
29
-
30
- /* block button fills width of parent container */
31
- &--block {
32
- display: block;
33
- width: 100%;
34
-
35
- + .btn--block {
36
- margin-top: 1rem;
37
- }
38
- }
39
- }
1
+ /* ==========================================================================
2
+ Buttons
3
+ ========================================================================== */
4
+
5
+ .btn {
6
+ display: inline-block;
7
+ padding: 0.5em 1em;
8
+ border: 0;
9
+ border-radius: $border-radius;
10
+ background-color: $accent-color;
11
+ color: #fff;
12
+ font-weight: bold;
13
+ text-align: center;
14
+ text-decoration: none;
15
+ cursor: pointer;
16
+
17
+ &:hover {
18
+ background-color: tint($accent-color, 20%);
19
+ color: #fff;
20
+ }
21
+
22
+ &:focus {
23
+ background-color: shade($accent-color, 20%);
24
+ }
25
+
26
+ .icon {
27
+ margin-right: 0.5em;
28
+ }
29
+
30
+ /* block button fills width of parent container */
31
+ &--block {
32
+ display: block;
33
+ width: 100%;
34
+
35
+ + .btn--block {
36
+ margin-top: 1rem;
37
+ }
38
+ }
39
+ }
@@ -1,155 +1,155 @@
1
- /* ==========================================================================
2
- Entries (Posts, collection documents, etc.)
3
- ========================================================================== */
4
-
5
- .entry {
6
- @include clearfix();
7
- margin-bottom: 2rem;
8
- padding-bottom: 2rem;
9
-
10
- &:not(:last-child) {
11
- border-bottom: 1px solid $border-color;
12
- }
13
-
14
- a {
15
- color: inherit;
16
- }
17
- }
18
-
19
- .entry-title {
20
- @include fluid-type($min-vw, $max-vw, 18px, 24px);
21
- margin-bottom: 0.5rem;
22
- color: tint($text-color, 25%);
23
- line-height: inherit;
24
-
25
- a {
26
- text-decoration: none;
27
- }
28
- }
29
-
30
- .entry-meta {
31
- @include fluid-type($min-vw, $max-vw, 12px, 16px);
32
- margin-bottom: 1rem;
33
-
34
- a {
35
- color: inherit;
36
- }
37
-
38
- .byline-item {
39
-
40
- &:not(:first-child) {
41
- margin-left: 1.5rem;
42
- }
43
- }
44
-
45
- .icon {
46
- margin-right: 0.5em;
47
- fill: $accent-color;
48
- }
49
- }
50
-
51
- /*
52
- Entry list
53
- ========================================================================== */
54
-
55
- .entries {
56
-
57
- .entry-title {
58
- word-wrap: break-word; /* break long words that could overflow */
59
-
60
- a:hover {
61
- color: $accent-color;
62
- }
63
- }
64
-
65
- .entry-excerpt {
66
- @include breakpoint($medium) {
67
- @include span(11 of 16);
68
- }
69
-
70
- /* normalize font sizes */
71
- > * {
72
- font-size: 1em;
73
- }
74
-
75
- /* remove space after last child element */
76
- > *:last-child {
77
- margin-bottom: 0;
78
- }
79
- }
80
-
81
- .entry-content {
82
- @include breakpoint($medium) {
83
- @include span(11 of 16);
84
- }
85
-
86
- /* remove space after last child element */
87
- > *:last-child {
88
- margin-bottom: 0;
89
- }
90
- }
91
-
92
- .entry-meta {
93
- @include breakpoint($medium) {
94
- @include span(5 of 16 last);
95
- @include prefix(1 of 16);
96
- }
97
-
98
- ul {
99
- @include list-unstyled();
100
-
101
- @include breakpoint(max-width $medium) {
102
- li {
103
- display: inline-block;
104
- margin-right: 1.5rem;
105
- }
106
- }
107
-
108
- @include breakpoint($medium) {
109
- li {
110
- padding-bottom: 0.5rem;
111
- }
112
- }
113
- }
114
- }
115
-
116
- > .summary {
117
-
118
- > p:first-child {
119
- font-size: 1.125em;
120
- line-height: 1.625;
121
- }
122
- }
123
- }
124
-
125
- .entry-content {
126
-
127
- > p:first-child {
128
- font-size: 1.125em;
129
- line-height: 1.625;
130
- }
131
-
132
- h1,
133
- h2,
134
- h3,
135
- h4,
136
- h5,
137
- h6 {
138
- color: tint($text-color, 25%);
139
- }
140
- }
141
-
142
- /* Footnotes */
143
- .footnotes {
144
- margin: 2rem 0;
145
- padding-top: 1rem;
146
- border-top: 1px solid $border-color;
147
- font-size: 80%;
148
- }
149
-
150
- /* Read more link */
151
- .more-link {
152
- font-size: 75%;
153
- font-weight: bold;
154
- text-decoration: none;
155
- }
1
+ /* ==========================================================================
2
+ Entries (Posts, collection documents, etc.)
3
+ ========================================================================== */
4
+
5
+ .entry {
6
+ @include clearfix();
7
+ margin-bottom: 2rem;
8
+ padding-bottom: 2rem;
9
+
10
+ &:not(:last-child) {
11
+ border-bottom: 1px solid $border-color;
12
+ }
13
+
14
+ a {
15
+ color: inherit;
16
+ }
17
+ }
18
+
19
+ .entry-title {
20
+ @include fluid-type($min-vw, $max-vw, 18px, 24px);
21
+ margin-bottom: 0.5rem;
22
+ color: tint($text-color, 25%);
23
+ line-height: inherit;
24
+
25
+ a {
26
+ text-decoration: none;
27
+ }
28
+ }
29
+
30
+ .entry-meta {
31
+ @include fluid-type($min-vw, $max-vw, 12px, 16px);
32
+ margin-bottom: 1rem;
33
+
34
+ a {
35
+ color: inherit;
36
+ }
37
+
38
+ .byline-item {
39
+
40
+ &:not(:first-child) {
41
+ margin-left: 1.5rem;
42
+ }
43
+ }
44
+
45
+ .icon {
46
+ margin-right: 0.5em;
47
+ fill: $accent-color;
48
+ }
49
+ }
50
+
51
+ /*
52
+ Entry list
53
+ ========================================================================== */
54
+
55
+ .entries {
56
+
57
+ .entry-title {
58
+ word-wrap: break-word; /* break long words that could overflow */
59
+
60
+ a:hover {
61
+ color: $accent-color;
62
+ }
63
+ }
64
+
65
+ .entry-excerpt {
66
+ @include breakpoint($medium) {
67
+ @include span(11 of 16);
68
+ }
69
+
70
+ /* normalize font sizes */
71
+ > * {
72
+ font-size: 1em;
73
+ }
74
+
75
+ /* remove space after last child element */
76
+ > *:last-child {
77
+ margin-bottom: 0;
78
+ }
79
+ }
80
+
81
+ .entry-content {
82
+ @include breakpoint($medium) {
83
+ @include span(11 of 16);
84
+ }
85
+
86
+ /* remove space after last child element */
87
+ > *:last-child {
88
+ margin-bottom: 0;
89
+ }
90
+ }
91
+
92
+ .entry-meta {
93
+ @include breakpoint($medium) {
94
+ @include span(5 of 16 last);
95
+ @include prefix(1 of 16);
96
+ }
97
+
98
+ ul {
99
+ @include list-unstyled();
100
+
101
+ @include breakpoint(max-width $medium) {
102
+ li {
103
+ display: inline-block;
104
+ margin-right: 1.5rem;
105
+ }
106
+ }
107
+
108
+ @include breakpoint($medium) {
109
+ li {
110
+ padding-bottom: 0.5rem;
111
+ }
112
+ }
113
+ }
114
+ }
115
+
116
+ > .summary {
117
+
118
+ > p:first-child {
119
+ font-size: 1.125em;
120
+ line-height: 1.625;
121
+ }
122
+ }
123
+ }
124
+
125
+ .entry-content {
126
+
127
+ > p:first-child {
128
+ font-size: 1.125em;
129
+ line-height: 1.625;
130
+ }
131
+
132
+ h1,
133
+ h2,
134
+ h3,
135
+ h4,
136
+ h5,
137
+ h6 {
138
+ color: tint($text-color, 25%);
139
+ }
140
+ }
141
+
142
+ /* Footnotes */
143
+ .footnotes {
144
+ margin: 2rem 0;
145
+ padding-top: 1rem;
146
+ border-top: 1px solid $border-color;
147
+ font-size: 80%;
148
+ }
149
+
150
+ /* Read more link */
151
+ .more-link {
152
+ font-size: 75%;
153
+ font-weight: bold;
154
+ text-decoration: none;
155
+ }
@@ -20,7 +20,9 @@
20
20
  }
21
21
 
22
22
  a {
23
+ display: -ms-flexbox;
23
24
  display: flex;
25
+ -ms-flex-align: center;
24
26
  align-items: center;
25
27
  min-height: $site-image-height;
26
28
  color: $text-color;
@@ -1,65 +1,65 @@
1
- /* ==========================================================================
2
- Page intro
3
- ========================================================================== */
4
-
5
- .intro {
6
- margin: 1rem 0;
7
- padding-top: 2rem;
8
- padding-bottom: 2rem;
9
- }
10
-
11
- .intro-image {
12
- position: relative;
13
- margin-top: -3rem; /* compensate for intro top margin */
14
- margin-bottom: 3rem;
15
-
16
- &::before {
17
- position: absolute;
18
- top: 0;
19
- right: 0;
20
- bottom: 0;
21
- left: 0;
22
- background-color: rgba($accent-color, 0.25);
23
- content: '';
24
- }
25
-
26
- img {
27
- width: 100%;
28
- }
29
- }
30
-
31
- .intro-text {
32
-
33
- /* remove space after last child element */
34
- > *:last-child {
35
- margin-bottom: 0;
36
- }
37
- }
38
-
39
- .intro-title {
40
- @include fluid-type($min-vw, $max-vw, 26px, 80px);
41
- margin-bottom: 1rem;
42
- color: tint($text-color, 25%);
43
- line-height: 1;
44
- }
45
-
46
- .intro-subtitle {
47
- @include fluid-type($min-vw, $max-vw, 18px, 28px);
48
- font-style: italic;
49
- }
50
-
51
- .intro-actions {
52
- @include list-unstyled;
53
-
54
- li {
55
- display: inline-block;
56
- }
57
- }
58
-
59
- .intro-more {
60
-
61
- > p:first-child {
62
- font-size: 1.125em;
63
- line-height: 1.625;
64
- }
65
- }
1
+ /* ==========================================================================
2
+ Page intro
3
+ ========================================================================== */
4
+
5
+ .intro {
6
+ margin: 1rem 0;
7
+ padding-top: 2rem;
8
+ padding-bottom: 2rem;
9
+ }
10
+
11
+ .intro-image {
12
+ position: relative;
13
+ margin-top: -3rem; /* compensate for intro top margin */
14
+ margin-bottom: 3rem;
15
+
16
+ &::before {
17
+ position: absolute;
18
+ top: 0;
19
+ right: 0;
20
+ bottom: 0;
21
+ left: 0;
22
+ background-color: rgba($accent-color, 0.25);
23
+ content: '';
24
+ }
25
+
26
+ img {
27
+ width: 100%;
28
+ }
29
+ }
30
+
31
+ .intro-text {
32
+
33
+ /* remove space after last child element */
34
+ > *:last-child {
35
+ margin-bottom: 0;
36
+ }
37
+ }
38
+
39
+ .intro-title {
40
+ @include fluid-type($min-vw, $max-vw, 26px, 80px);
41
+ margin-bottom: 1rem;
42
+ color: tint($text-color, 25%);
43
+ line-height: 1;
44
+ }
45
+
46
+ .intro-subtitle {
47
+ @include fluid-type($min-vw, $max-vw, 18px, 28px);
48
+ font-style: italic;
49
+ }
50
+
51
+ .intro-actions {
52
+ @include list-unstyled;
53
+
54
+ li {
55
+ display: inline-block;
56
+ }
57
+ }
58
+
59
+ .intro-more {
60
+
61
+ > p:first-child {
62
+ font-size: 1.125em;
63
+ line-height: 1.625;
64
+ }
65
+ }