oscailte 3.0.0 → 3.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/_includes/comments.html +20 -20
  4. data/_includes/footer.html +10 -10
  5. data/_includes/google-analytics.html +10 -10
  6. data/_includes/head.html +11 -11
  7. data/_includes/header.html +17 -17
  8. data/_includes/hero.html +16 -16
  9. data/_includes/icon.html +1 -1
  10. data/_includes/navigation.html +17 -17
  11. data/_includes/social.html +16 -16
  12. data/_includes/strings.html +8 -8
  13. data/_layouts/default.html +6 -6
  14. data/_layouts/home.html +43 -43
  15. data/_layouts/page.html +4 -4
  16. data/_layouts/post.html +37 -37
  17. data/_sass/_oscailte.scss +146 -146
  18. data/_sass/oscailte/components/_button.scss +10 -10
  19. data/_sass/oscailte/components/_card.scss +18 -18
  20. data/_sass/oscailte/components/_footer.scss +21 -21
  21. data/_sass/oscailte/components/_header.scss +50 -50
  22. data/_sass/oscailte/components/_hero.scss +84 -84
  23. data/_sass/oscailte/components/_icon.scss +6 -6
  24. data/_sass/oscailte/components/_navigation.scss +31 -31
  25. data/_sass/oscailte/components/_recentposts.scss +58 -58
  26. data/_sass/oscailte/components/_skipnav.scss +10 -10
  27. data/_sass/oscailte/components/_social.scss +54 -54
  28. data/_sass/oscailte/components/_syntax.scss +72 -72
  29. data/_sass/oscailte/elements/_blockquote.scss +5 -5
  30. data/_sass/oscailte/elements/_body.scss +6 -6
  31. data/_sass/oscailte/elements/_code.scss +18 -18
  32. data/_sass/oscailte/elements/_headings.scss +14 -14
  33. data/_sass/oscailte/elements/_hr.scss +3 -3
  34. data/_sass/oscailte/elements/_html.scss +9 -9
  35. data/_sass/oscailte/elements/_img.scss +2 -2
  36. data/_sass/oscailte/elements/_links.scss +3 -3
  37. data/_sass/oscailte/generic/_font-face.scss +62 -62
  38. data/_sass/oscailte/generic/_lobotomised-owl.scss +2 -2
  39. data/_sass/oscailte/generic/_modern-normalize.scss +273 -273
  40. data/_sass/oscailte/layout/_container.scss +4 -4
  41. data/_sass/oscailte/layout/_post.scss +13 -13
  42. data/_sass/oscailte/layout/_stickyfooter.scss +10 -10
  43. data/_sass/oscailte/objects/_circuited.scss +5 -5
  44. data/_sass/oscailte/objects/_lists.scss +10 -10
  45. data/_sass/oscailte/objects/_muted.scss +2 -2
  46. data/_sass/oscailte/objects/_no-owl.scss +3 -3
  47. data/_sass/oscailte/tools/_functions.scss +26 -26
  48. data/_sass/oscailte/tools/_mixins.scss +28 -28
  49. data/assets/css/main.scss +4 -4
  50. data/assets/oscailte/fonts/lato-v16-latin-regular.svg +435 -435
  51. data/assets/oscailte/fonts/merriweather-v21-latin-700.svg +375 -375
  52. data/assets/oscailte/fonts/merriweather-v21-latin-italic.svg +390 -390
  53. data/assets/oscailte/fonts/merriweather-v21-latin-regular.svg +374 -374
  54. data/assets/oscailte/img/icons.svg +62 -62
  55. metadata +1 -1
@@ -1,85 +1,85 @@
1
- .Hero {
2
- padding: 3.5em 0;
3
- text-align: center;
4
-
5
- .avatar {
6
- border: 0.75rem solid var(--color-primary);
7
- border-radius: 50%;
8
- height: auto;
9
- }
10
-
11
- &__content {
12
- color: #fff;
13
- position: relative;
14
- z-index: 1;
15
- }
16
-
17
- &__title {
18
- margin: 0;
19
- text-shadow: 1px 1px 0 #000;
20
- }
21
-
22
- &.o-circuited {
23
- background-color: #222;
24
- }
25
- }
26
-
27
- .Site--default,
28
- .Site--home {
29
- .Hero {
30
- position: relative;
31
-
32
- &::after {
33
- background-color: rgba(#000, .1);
34
- background-image: var(--hero-matrix-url);
35
- content: "";
36
- display: block;
37
- position: absolute;
38
- top: 0;
39
- right: 0;
40
- bottom: 0;
41
- left: 0;
42
- }
43
- }
44
-
45
- .Hero__title {
46
- max-width: 58rem;
47
- }
48
- }
49
-
50
- .Site--post {
51
- .Hero__title {
52
- text-align: center;
53
- }
54
-
55
- .Hero__content {
56
- flex-direction: column;
57
- justify-content: center;
58
- }
59
- }
60
-
61
- @include breakpoint("medium") {
62
- .Hero {
63
- .avatar {
64
- max-width: 100%;
65
- }
66
-
67
- &__content {
68
- align-items: center;
69
- display: flex;
70
- }
71
-
72
- &__title {
73
- padding: 0 1em;
74
- text-align: left;
75
- }
76
- }
77
- }
78
-
79
- @include breakpoint("large") {
80
- .Hero {
81
- .avatar {
82
- margin: 0 5%;
83
- }
84
- }
1
+ .Hero {
2
+ padding: 3.5em 0;
3
+ text-align: center;
4
+
5
+ .avatar {
6
+ border: 0.75rem solid var(--color-primary);
7
+ border-radius: 50%;
8
+ height: auto;
9
+ }
10
+
11
+ &__content {
12
+ color: #fff;
13
+ position: relative;
14
+ z-index: 1;
15
+ }
16
+
17
+ &__title {
18
+ margin: 0;
19
+ text-shadow: 1px 1px 0 #000;
20
+ }
21
+
22
+ &.o-circuited {
23
+ background-color: #222;
24
+ }
25
+ }
26
+
27
+ .Site--default,
28
+ .Site--home {
29
+ .Hero {
30
+ position: relative;
31
+
32
+ &::after {
33
+ background-color: rgba(#000, .1);
34
+ background-image: var(--hero-matrix-url);
35
+ content: "";
36
+ display: block;
37
+ position: absolute;
38
+ top: 0;
39
+ right: 0;
40
+ bottom: 0;
41
+ left: 0;
42
+ }
43
+ }
44
+
45
+ .Hero__title {
46
+ max-width: 58rem;
47
+ }
48
+ }
49
+
50
+ .Site--post {
51
+ .Hero__title {
52
+ text-align: center;
53
+ }
54
+
55
+ .Hero__content {
56
+ flex-direction: column;
57
+ justify-content: center;
58
+ }
59
+ }
60
+
61
+ @include breakpoint("medium") {
62
+ .Hero {
63
+ .avatar {
64
+ max-width: 100%;
65
+ }
66
+
67
+ &__content {
68
+ align-items: center;
69
+ display: flex;
70
+ }
71
+
72
+ &__title {
73
+ padding: 0 1em;
74
+ text-align: left;
75
+ }
76
+ }
77
+ }
78
+
79
+ @include breakpoint("large") {
80
+ .Hero {
81
+ .avatar {
82
+ margin: 0 5%;
83
+ }
84
+ }
85
85
  }
@@ -1,7 +1,7 @@
1
- .Icon {
2
- fill: currentColor;
3
- line-height: 1;
4
- height: 1em;
5
- vertical-align: middle;
6
- width: 1em;
1
+ .Icon {
2
+ fill: currentColor;
3
+ line-height: 1;
4
+ height: 1em;
5
+ vertical-align: middle;
6
+ width: 1em;
7
7
  }
@@ -1,32 +1,32 @@
1
- .Navigation {
2
- &__items,
3
- &__item {
4
- height: 100%;
5
- }
6
-
7
- &__items {
8
- display: flex;
9
- flex-direction: row;
10
- justify-content: center;
11
- }
12
-
13
- &__item {
14
- align-items: center;
15
- display: flex;
16
- margin: 0;
17
- }
18
-
19
- &__link {
20
- display: block;
21
- padding: .5em 1em;
22
- text-align: center;
23
- text-decoration: none;
24
- width: 100%;
25
- }
26
- }
27
-
28
- @include breakpoint("medium") {
29
- .Navigation {
30
- margin-top: 0;
31
- }
1
+ .Navigation {
2
+ &__items,
3
+ &__item {
4
+ height: 100%;
5
+ }
6
+
7
+ &__items {
8
+ display: flex;
9
+ flex-direction: row;
10
+ justify-content: center;
11
+ }
12
+
13
+ &__item {
14
+ align-items: center;
15
+ display: flex;
16
+ margin: 0;
17
+ }
18
+
19
+ &__link {
20
+ display: block;
21
+ padding: .5em 1em;
22
+ text-align: center;
23
+ text-decoration: none;
24
+ width: 100%;
25
+ }
26
+ }
27
+
28
+ @include breakpoint("medium") {
29
+ .Navigation {
30
+ margin-top: 0;
31
+ }
32
32
  }
@@ -1,59 +1,59 @@
1
- .RecentPosts {
2
- &__title {
3
- display: inline-block;
4
- }
5
-
6
- &__list {
7
- display: grid;
8
- grid-template: auto;
9
- gap: var(--site-owl-spacing);
10
- }
11
-
12
- &__item {
13
- display: flex;
14
- flex-direction: column;
15
- max-height: 20rem;
16
- }
17
-
18
- &__excerpt {
19
- flex: 1;
20
- overflow: hidden;
21
- position: relative;
22
-
23
- &::before {
24
- background-image: linear-gradient(to top, #fff, transparent);
25
- content: "";
26
- display: block;
27
- height: 3rem;
28
- position: absolute;
29
- bottom: 0;
30
- width: 100%;
31
- }
32
-
33
- > p {
34
- margin: 0;
35
- }
36
- }
37
-
38
- .Button {
39
- align-self: flex-end;
40
- display: block;
41
- width: 100%;
42
- }
43
- }
44
-
45
- @include breakpoint("medium") {
46
- .RecentPosts__list {
47
- grid-template: auto / repeat(2, 1fr);
48
- }
49
- .RecentPosts .Button {
50
- font-size: 1rem;
51
- width: auto;
52
- }
53
- }
54
-
55
- @include breakpoint("large") {
56
- .RecentPosts__list {
57
- grid-template: auto / repeat(3, 1fr);
58
- }
1
+ .RecentPosts {
2
+ &__title {
3
+ display: inline-block;
4
+ }
5
+
6
+ &__list {
7
+ display: grid;
8
+ grid-template: auto;
9
+ gap: var(--site-owl-spacing);
10
+ }
11
+
12
+ &__item {
13
+ display: flex;
14
+ flex-direction: column;
15
+ max-height: 20rem;
16
+ }
17
+
18
+ &__excerpt {
19
+ flex: 1;
20
+ overflow: hidden;
21
+ position: relative;
22
+
23
+ &::before {
24
+ background-image: linear-gradient(to top, #fff, transparent);
25
+ content: "";
26
+ display: block;
27
+ height: 3rem;
28
+ position: absolute;
29
+ bottom: 0;
30
+ width: 100%;
31
+ }
32
+
33
+ > p {
34
+ margin: 0;
35
+ }
36
+ }
37
+
38
+ .Button {
39
+ align-self: flex-end;
40
+ display: block;
41
+ width: 100%;
42
+ }
43
+ }
44
+
45
+ @include breakpoint("medium") {
46
+ .RecentPosts__list {
47
+ grid-template: auto / repeat(2, 1fr);
48
+ }
49
+ .RecentPosts .Button {
50
+ font-size: 1rem;
51
+ width: auto;
52
+ }
53
+ }
54
+
55
+ @include breakpoint("large") {
56
+ .RecentPosts__list {
57
+ grid-template: auto / repeat(3, 1fr);
58
+ }
59
59
  }
@@ -1,11 +1,11 @@
1
- .SkipNav {
2
- margin: 0;
3
- padding: 0;
4
- position: absolute;
5
- top: 0;
6
- transform: translateY(-100vh);
7
-
8
- &:focus {
9
- transform: translateY(0);
10
- }
1
+ .SkipNav {
2
+ margin: 0;
3
+ padding: 0;
4
+ position: absolute;
5
+ top: 0;
6
+ transform: translateY(-100vh);
7
+
8
+ &:focus {
9
+ transform: translateY(0);
10
+ }
11
11
  }
@@ -1,55 +1,55 @@
1
- .Social {
2
- &__list {
3
- display: flex;
4
- flex-wrap: wrap;
5
- gap: calc(var(--site-owl-spacing) / 2);
6
- justify-content: center;
7
- }
8
-
9
- &__item {
10
- font-size: 2em;
11
-
12
- @each $site, $color in $social-map {
13
- &--#{$site} {
14
- background-color: $color;
15
- color: auto-contrast($color);
16
- }
17
- }
18
- }
19
-
20
- &__link {
21
- color: inherit;
22
- display: block;
23
- line-height: 1;
24
- overflow: hidden;
25
- padding: 0.2em;
26
- text-decoration: none;
27
- z-index: 1;
28
-
29
- &:hover {
30
- .Icon {
31
- transform: scale(1.15) rotate(10deg);
32
- }
33
- }
34
- }
35
-
36
- .Icon {
37
- transition: all 120ms ease-out;
38
- vertical-align: top;
39
- }
40
- }
41
-
42
- @include breakpoint("medium") {
43
- .Social {
44
- margin-top: 0;
45
- }
46
-
47
- .Social__list {
48
- display: grid;
49
- grid-template: auto / repeat(5, auto);
50
- }
51
-
52
- .Icon {
53
- font-size: 1em;
54
- }
1
+ .Social {
2
+ &__list {
3
+ display: flex;
4
+ flex-wrap: wrap;
5
+ gap: calc(var(--site-owl-spacing) / 2);
6
+ justify-content: center;
7
+ }
8
+
9
+ &__item {
10
+ font-size: 2em;
11
+
12
+ @each $site, $color in $social-map {
13
+ &--#{$site} {
14
+ background-color: $color;
15
+ color: auto-contrast($color);
16
+ }
17
+ }
18
+ }
19
+
20
+ &__link {
21
+ color: inherit;
22
+ display: block;
23
+ line-height: 1;
24
+ overflow: hidden;
25
+ padding: 0.2em;
26
+ text-decoration: none;
27
+ z-index: 1;
28
+
29
+ &:hover {
30
+ .Icon {
31
+ transform: scale(1.15) rotate(10deg);
32
+ }
33
+ }
34
+ }
35
+
36
+ .Icon {
37
+ transition: all 120ms ease-out;
38
+ vertical-align: top;
39
+ }
40
+ }
41
+
42
+ @include breakpoint("medium") {
43
+ .Social {
44
+ margin-top: 0;
45
+ }
46
+
47
+ .Social__list {
48
+ display: grid;
49
+ grid-template: auto / repeat(5, auto);
50
+ }
51
+
52
+ .Icon {
53
+ font-size: 1em;
54
+ }
55
55
  }