minimal-music-project 0.0.6 → 0.1.2

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.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/404.html +11 -11
  3. data/LICENSE.txt +21 -21
  4. data/README.md +133 -97
  5. data/_config.yml +37 -37
  6. data/_data/customs.yml +2 -2
  7. data/_data/menu.yml +32 -32
  8. data/_data/metaData.yml +20 -7
  9. data/_includes/common-head.html +21 -21
  10. data/_includes/common.js +95 -4
  11. data/_includes/cookies.js +62 -34
  12. data/_includes/customizationsScripts.html +6 -6
  13. data/_includes/customizationsStyles.html +6 -6
  14. data/_includes/discography-entry-metadata.html +77 -80
  15. data/_includes/discography-entry.html +36 -24
  16. data/_includes/footer.html +9 -9
  17. data/_includes/menu.html +35 -35
  18. data/_includes/music-player.html +123 -123
  19. data/_includes/pagination-buttons.html +13 -13
  20. data/_includes/read-more.html +12 -12
  21. data/_layouts/cookies.html +29 -0
  22. data/_layouts/default.html +21 -21
  23. data/_layouts/discography.html +15 -15
  24. data/_layouts/post.html +34 -24
  25. data/_layouts/posts_feed.html +68 -55
  26. data/_sass/minimal-music-project.scss +1 -1
  27. data/_sass/styles/_cookies.scss +60 -52
  28. data/_sass/styles/_defaults.scss +164 -134
  29. data/_sass/styles/_discography.scss +44 -42
  30. data/_sass/styles/_embedded-player.scss +9 -0
  31. data/_sass/styles/_index.scss +10 -8
  32. data/_sass/styles/_layout.scss +49 -49
  33. data/_sass/styles/_menu.scss +176 -161
  34. data/_sass/styles/_modal.scss +30 -0
  35. data/_sass/styles/_music-player.scss +91 -91
  36. data/_sass/styles/_post.scss +94 -89
  37. data/_sass/styles/_posts_feed.scss +73 -72
  38. data/_sass/variables/_colors.scss +4 -4
  39. data/_sass/variables/_index.scss +2 -2
  40. data/_sass/variables/_layout.scss +27 -27
  41. data/_sass/variables/_mixins.scss +54 -54
  42. data/assets/img/300.png +0 -0
  43. data/assets/img/600.png +0 -0
  44. data/assets/img/browserconfig.xml +9 -9
  45. data/assets/img/safari-pinned-tab.svg +38 -38
  46. data/assets/img/site.webmanifest +19 -19
  47. data/assets/styles/styles.scss +7 -7
  48. data/pages/about.html +64 -53
  49. data/pages/cookies.html +9 -0
  50. data/pages/privacyPolicy.html +10 -0
  51. metadata +10 -3
@@ -1,53 +1,61 @@
1
- .cookie-container {
2
- position: fixed;
3
- padding: 20px 15px;
4
- z-index: $pop-ups-z-1;
5
- background-image: radial-gradient(farthest-corner at 25% 0, $white, $white);
6
- box-shadow: 0 0 6px 0 $black;
7
- text-align: center;
8
- opacity: 0.95;
9
- -webkit-transition: opacity 800ms, visibility 800ms;
10
- transition: opacity 800ms, visibility 800ms;
11
- bottom: 40px;
12
- left: 50px;
13
- max-width: 40vw;
14
- border-radius: 3px;
15
- border: 3px solid $black;
16
-
17
- p {
18
- color: $p_text;
19
- line-height: 1.6em;
20
- margin-bottom: 10px;
21
- }
22
- &.hidden {
23
- opacity: 0;
24
- visibility: hidden;
25
- }
26
- button {
27
- line-height: 1.4;
28
- font-weight: 700;
29
- display: inline-block;
30
- padding: 10px 20px;
31
- background-color: $white;
32
- color: $p_text;
33
- border: 1px solid;
34
- border-radius: 3px;
35
- text-decoration: none;
36
- cursor: pointer;
37
- -webkit-transition: background-color 200ms;
38
- transition: background-color 200ms;
39
- &:hover {
40
- background-color: rgb(168, 168, 168);
41
- }
42
- }
43
- @include mobile {
44
- bottom: 0;
45
- left: 0;
46
- width: 100%;
47
- max-width: 100%;
48
- padding: 12px 10px;
49
- border-left: 0;
50
- border-right: 0;
51
- border-bottom: 0;
52
- }
1
+ .cookie-container {
2
+ position: fixed;
3
+ padding: 20px 15px;
4
+ z-index: $pop-ups-z-1;
5
+ background-image: radial-gradient(farthest-corner at 25% 0, $white, $white);
6
+ box-shadow: 0 0 6px 0 $black;
7
+ text-align: center;
8
+ opacity: 0.95;
9
+ -webkit-transition: opacity 800ms, visibility 800ms;
10
+ transition: opacity 800ms, visibility 800ms;
11
+ bottom: 40px;
12
+ left: 50px;
13
+ max-width: 40vw;
14
+ border-radius: 3px;
15
+ border: 3px solid $black;
16
+
17
+ p {
18
+ color: $p_text;
19
+ line-height: 1.6em;
20
+ margin-bottom: 10px;
21
+ }
22
+ &.hidden {
23
+ opacity: 0;
24
+ visibility: hidden;
25
+ }
26
+ &--buttons {
27
+ display: flex;
28
+ button {
29
+ line-height: 1.4;
30
+ font-weight: 700;
31
+ display: inline-block;
32
+ padding: 10px 20px;
33
+ background-color: $white;
34
+ color: $p_text;
35
+ border: 1px solid;
36
+ border-radius: 3px;
37
+ text-decoration: none;
38
+ cursor: pointer;
39
+ -webkit-transition: background-color 200ms;
40
+ transition: background-color 200ms;
41
+ &:hover {
42
+ background-color: rgb(168, 168, 168);
43
+ }
44
+ width: calc(50% - 10px);
45
+ &:last-of-type {
46
+ margin-left: 10px;
47
+ }
48
+ }
49
+
50
+ }
51
+ @include mobile {
52
+ bottom: 0;
53
+ left: 0;
54
+ width: 100%;
55
+ max-width: 100%;
56
+ padding: 12px 10px;
57
+ border-left: 0;
58
+ border-right: 0;
59
+ border-bottom: 0;
60
+ }
53
61
  }
@@ -1,134 +1,164 @@
1
- h1 {
2
- text-transform: uppercase;
3
- font-weight: 700;
4
- text-rendering: optimizeLegibility;
5
- color: $black;
6
- text-align: center;
7
- font-size: 2.5em;
8
- letter-spacing: -1px;
9
- padding: 0.5em;
10
- }
11
-
12
- h2, h3 a {
13
- font-weight: 500;
14
- font-size: 1.4em;
15
- line-height: 1.4em;
16
- color: $black;
17
- }
18
-
19
- * {
20
- padding: 0;
21
- margin: 0;
22
- box-sizing: border-box;
23
- line-height: 1.7em;
24
- }
25
- body {
26
- font-size: 16px;
27
- color: $white;
28
- font-family: 'Jost',Arial,sans-serif;
29
- -webkit-font-smoothing: antialiased;
30
- }
31
- main {
32
- .content-container {
33
- margin: 3.5em auto 0 0;
34
- width: 90%;
35
- padding: 0px 18px 24px;
36
- flex-grow: 1;
37
- position: relative;
38
- p, li {
39
- @include hyperlink-convention();
40
- }
41
- .content-separator {
42
- margin: $gap auto;
43
- color: $p_text;
44
- width: 100%;
45
- &:last-child {
46
- margin: $gap auto 0 auto;
47
- }
48
- }
49
- }
50
-
51
- .pager {
52
- margin-top: 40px;
53
- height: 60px;
54
- width: 100%;
55
- li {
56
- position: absolute;
57
- display: inline;
58
- padding: 8px;
59
- margin: 10px;
60
- &.previous {
61
- left: 0;
62
- }
63
- &.next {
64
- right: 0;
65
- }
66
- & > a {
67
- color: $p_text;
68
- @include underline-on-hover($black);
69
- }
70
- }
71
- }
72
- }
73
-
74
- a {
75
- text-decoration-line: none;
76
- color: inherit;
77
- transition: all 0.4s ease-in-out 0s;
78
- }
79
- a, p, li {
80
- font-size: 1.1em;
81
- }
82
-
83
- li {
84
- margin-left: 1em;
85
- }
86
-
87
- hr {
88
- margin-top: 2em;
89
- margin-bottom: 0.5em;
90
- width: 100%;
91
- }
92
-
93
- img {
94
- max-width: 100%;
95
- height: auto;
96
- display: inline-block;
97
- margin: 0;
98
- vertical-align: top;
99
- object-fit: cover;
100
- }
101
-
102
- @include mobile {
103
- body {
104
- font-size: 15px;
105
- }
106
- h1 {
107
- font-size: 2em;
108
- }
109
- main {
110
- .content-container {
111
- width: 100%;
112
- padding: 0px 9px 12px;
113
- margin-top: 0;
114
- }
115
- }
116
- }
117
-
118
- audio {
119
- max-width: 100%;
120
- }
121
-
122
- .read-more {
123
- position: absolute;
124
- right: 10px;
125
- bottom: -2em;
126
- line-height: 1em;
127
- font-weight: 300;
128
- padding-bottom: 0.5em;
129
- color: #000000;
130
- a {
131
- font-size: 0.9em;
132
- @include underline-on-hover($black);
133
- }
134
- }
1
+ h1 {
2
+ text-transform: uppercase;
3
+ font-weight: 700;
4
+ text-rendering: optimizeLegibility;
5
+ color: $black;
6
+ text-align: center;
7
+ font-size: 2.5em;
8
+ letter-spacing: -1px;
9
+ padding: 0.5em;
10
+ }
11
+
12
+ h2, h3 a {
13
+ font-weight: 500;
14
+ font-size: 1.4em;
15
+ line-height: 1.4em;
16
+ color: $black;
17
+ }
18
+
19
+ * {
20
+ padding: 0;
21
+ margin: 0;
22
+ box-sizing: border-box;
23
+ line-height: 1.7em;
24
+ }
25
+ body {
26
+ font-size: 16px;
27
+ color: $white;
28
+ font-family: 'Jost',Arial,sans-serif;
29
+ -webkit-font-smoothing: antialiased;
30
+ }
31
+ main {
32
+ .content-container {
33
+ margin: 3.5em auto 0 0;
34
+ width: 90%;
35
+ padding: 0px 18px 24px;
36
+ flex-grow: 1;
37
+ position: relative;
38
+ p, li {
39
+ @include hyperlink-convention();
40
+ }
41
+ .content-separator {
42
+ margin: $gap auto;
43
+ color: $p_text;
44
+ width: 100%;
45
+ &:last-child {
46
+ margin: $gap auto 0 auto;
47
+ }
48
+ }
49
+ fieldset {
50
+ border: none;
51
+ padding: 0;
52
+ margin-bottom: 1em;
53
+ }
54
+ }
55
+
56
+ .pager {
57
+ margin-top: 40px;
58
+ height: 60px;
59
+ width: 100%;
60
+ li {
61
+ position: absolute;
62
+ display: inline;
63
+ padding: 8px;
64
+ margin: 10px;
65
+ &.previous {
66
+ left: 0;
67
+ }
68
+ &.next {
69
+ right: 0;
70
+ }
71
+ & > a {
72
+ color: $p_text;
73
+ @include underline-on-hover($black);
74
+ }
75
+ }
76
+ }
77
+ }
78
+
79
+ a {
80
+ text-decoration-line: none;
81
+ color: inherit;
82
+ transition: all 0.4s ease-in-out 0s;
83
+ }
84
+ a, p, li {
85
+ font-size: 1.1em;
86
+ }
87
+
88
+ li {
89
+ margin-left: 1em;
90
+ }
91
+
92
+ hr {
93
+ margin-top: 2em;
94
+ margin-bottom: 2em;
95
+ width: 100%;
96
+ }
97
+
98
+ img {
99
+ max-width: 100%;
100
+ height: auto;
101
+ display: inline-block;
102
+ margin: 0;
103
+ vertical-align: top;
104
+ object-fit: cover;
105
+ }
106
+
107
+ .click-to-enlarge {
108
+ cursor: zoom-in;
109
+ box-shadow: 0 0px 3px rgba(0,0,0,0.3);
110
+ position: relative;
111
+ width: fit-content;
112
+ width: -moz-fit-content;
113
+ margin: auto;
114
+
115
+ &::after {
116
+ content: '';
117
+ position: absolute;
118
+ left: 0;
119
+ top: 0;
120
+ width: 100%;
121
+ height: 100%;
122
+ opacity: 0;
123
+ box-shadow: 0 0 12px black;
124
+ opacity: 0;
125
+ transition: opacity 0.3s ease-in-out;
126
+ }
127
+ &:hover::after {
128
+ opacity: 1;
129
+ }
130
+ }
131
+
132
+ @include mobile {
133
+ body {
134
+ font-size: 15px;
135
+ }
136
+ h1 {
137
+ font-size: 2em;
138
+ }
139
+ main {
140
+ .content-container {
141
+ width: 100%;
142
+ padding: 0px 9px 12px;
143
+ margin-top: 0;
144
+ }
145
+ }
146
+ }
147
+
148
+ audio {
149
+ max-width: 100%;
150
+ }
151
+
152
+ .read-more {
153
+ position: absolute;
154
+ right: 10px;
155
+ bottom: -2em;
156
+ line-height: 1em;
157
+ font-weight: 300;
158
+ padding-bottom: 0.5em;
159
+ color: #000000;
160
+ a {
161
+ font-size: 0.9em;
162
+ @include underline-on-hover($black);
163
+ }
164
+ }
@@ -1,43 +1,45 @@
1
- .discography, .post-feed {
2
- max-width: 100%;
3
- & &-album {
4
- display: flex;
5
- flex-direction: row;
6
- position: relative;
7
- &_cover {
8
- width: 20vw;
9
- height: 20vw;
10
- border: 1px solid #CCC;
11
- max-width: 500px;
12
- max-height: 500px;
13
- &-wrapper {
14
- display: block;
15
- margin-right: 0.5em;
16
- }
17
- }
18
- p, a {
19
- font-size: 0.9em;
20
- line-height: 1em;
21
- font-weight: 300;
22
- padding-bottom: 0.5em;
23
- color: $p_text;
24
- }
25
- a {
26
- @include underline-on-hover($p_text);
27
- }
28
- section {
29
- width: 100%;
30
- }
31
-
32
- &_title {
33
- margin-top: 3vw;
34
- font-size: 2em;
35
- margin-bottom: 0.6em;
36
- @include underline-on-hover($p_text);
37
- }
38
-
39
- &_summary {
40
- margin-bottom: 1em;
41
- }
42
- }
1
+ .discography, .post-feed {
2
+ max-width: 100%;
3
+ & &-album {
4
+ display: flex;
5
+ flex-direction: row;
6
+ position: relative;
7
+ &_cover {
8
+ width: 20vw;
9
+ height: 20vw;
10
+ max-width: 500px;
11
+ max-height: 500px;
12
+ &-wrapper {
13
+ display: block;
14
+ margin-right: 0.5em;
15
+ }
16
+ img {
17
+ max-height: 20vw;
18
+ }
19
+ }
20
+ p, a {
21
+ font-size: 0.9em;
22
+ line-height: 1em;
23
+ font-weight: 300;
24
+ padding-bottom: 0.5em;
25
+ color: $p_text;
26
+ }
27
+ a {
28
+ @include underline-on-hover($p_text);
29
+ }
30
+ section {
31
+ width: 100%;
32
+ }
33
+
34
+ &_title {
35
+ margin-top: 3vw;
36
+ font-size: 2em;
37
+ margin-bottom: 0.6em;
38
+ @include underline-on-hover($p_text);
39
+ }
40
+
41
+ &_summary {
42
+ padding-bottom: 0.5em;
43
+ }
44
+ }
43
45
  }
@@ -0,0 +1,9 @@
1
+ .embedded-player {
2
+ width: 100%;
3
+ max-width: 600px;
4
+ outline: none;
5
+ border: none;
6
+ &.hidden {
7
+ visibility: hidden;
8
+ }
9
+ }
@@ -1,8 +1,10 @@
1
- @import './defaults';
2
- @import './menu';
3
- @import './layout';
4
- @import './posts_feed';
5
- @import './post';
6
- @import './cookies';
7
- @import './discography';
8
- @import './music-player.scss';
1
+ @import './defaults';
2
+ @import './menu';
3
+ @import './layout';
4
+ @import './posts_feed';
5
+ @import './post';
6
+ @import './cookies';
7
+ @import './discography';
8
+ @import './music-player';
9
+ @import './modal';
10
+ @import './embedded-player';
@@ -1,50 +1,50 @@
1
- main {
2
- background-color: $white;
3
- color: black;
4
- float: right;
5
- width: $content-width-desktop;
6
- min-height: 300px;
7
- margin: auto;
8
- display: flex;
9
- flex-direction: column;
10
- height: 100%;
11
- overflow-y: auto;
12
- position: fixed;
13
- left: $menu-size;
14
- top: 0;
15
- @include mobile {
16
- top: $mobile-menu-height;
17
- left: 0;
18
- width: 100%;
19
- height: calc(100% - #{$mobile-menu-height});
20
- }
21
- &.no-menu {
22
- width: 100%;
23
- left: 0;
24
- top: 0;
25
- }
26
- }
27
- footer {
28
- width: 100%;
29
- text-align: center;
30
- color:$p_text;
31
- display: flex;
32
- justify-content: center;
33
- font-size: 0.7em;
34
- p {
35
- margin: 0;
36
- }
37
- }
38
-
39
- .is-minimal-menu {
40
- main {
41
- width: $content-width-desktop-minimal-menu;
42
- left: $minimal-menu-size;
43
- @include mobile {
44
- top: $minimal-menu-size;
45
- left: 0;
46
- width: 100%;
47
- height: calc(100% - #{$minimal-menu-size});
48
- }
49
- }
1
+ main {
2
+ background-color: $white;
3
+ color: black;
4
+ float: right;
5
+ width: $content-width-desktop;
6
+ min-height: 300px;
7
+ margin: auto;
8
+ display: flex;
9
+ flex-direction: column;
10
+ height: 100%;
11
+ overflow-y: auto;
12
+ position: fixed;
13
+ left: $menu-size;
14
+ top: 0;
15
+ @include mobile {
16
+ top: $mobile-menu-height;
17
+ left: 0;
18
+ width: 100%;
19
+ height: calc(100% - #{$mobile-menu-height});
20
+ }
21
+ &.no-menu {
22
+ width: 100%;
23
+ left: 0;
24
+ top: 0;
25
+ }
26
+ }
27
+ footer {
28
+ width: 100%;
29
+ text-align: center;
30
+ color:$p_text;
31
+ display: flex;
32
+ justify-content: center;
33
+ font-size: 0.7em;
34
+ p {
35
+ margin: 0;
36
+ }
37
+ }
38
+
39
+ .is-minimal-menu {
40
+ main {
41
+ width: $content-width-desktop-minimal-menu;
42
+ left: $minimal-menu-size;
43
+ @include mobile {
44
+ top: $minimal-menu-size;
45
+ left: 0;
46
+ width: 100%;
47
+ height: calc(100% - #{$minimal-menu-size});
48
+ }
49
+ }
50
50
  }