minimal-music-project 0.1.2 → 0.1.5

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 (49) hide show
  1. checksums.yaml +4 -4
  2. data/404.html +11 -11
  3. data/LICENSE.txt +21 -21
  4. data/README.md +142 -133
  5. data/_config.yml +38 -38
  6. data/_data/customs.yml +2 -2
  7. data/_data/menu.yml +32 -32
  8. data/_data/metaData.yml +20 -20
  9. data/_includes/common-head.html +22 -22
  10. data/_includes/common.js +95 -95
  11. data/_includes/cookies.js +63 -63
  12. data/_includes/customizationsScripts.html +6 -6
  13. data/_includes/customizationsStyles.html +6 -6
  14. data/_includes/discography-entry-metadata.html +77 -77
  15. data/_includes/discography-entry.html +41 -37
  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 -28
  22. data/_layouts/default.html +21 -21
  23. data/_layouts/discography.html +15 -15
  24. data/_layouts/post.html +34 -34
  25. data/_layouts/posts_feed.html +72 -68
  26. data/_sass/minimal-music-project.scss +1 -1
  27. data/_sass/styles/_cookies.scss +60 -60
  28. data/_sass/styles/_defaults.scss +164 -164
  29. data/_sass/styles/_discography.scss +74 -45
  30. data/_sass/styles/_embedded-player.scss +8 -8
  31. data/_sass/styles/_index.scss +9 -9
  32. data/_sass/styles/_layout.scss +49 -49
  33. data/_sass/styles/_menu.scss +177 -176
  34. data/_sass/styles/_modal.scss +29 -29
  35. data/_sass/styles/_music-player.scss +91 -91
  36. data/_sass/styles/_post.scss +94 -94
  37. data/_sass/styles/_posts_feed.scss +73 -73
  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/browserconfig.xml +9 -9
  43. data/assets/img/safari-pinned-tab.svg +38 -38
  44. data/assets/img/site.webmanifest +19 -19
  45. data/assets/styles/styles.scss +7 -7
  46. data/pages/about.html +65 -65
  47. data/pages/cookies.html +9 -9
  48. data/pages/privacyPolicy.html +9 -9
  49. metadata +4 -4
data/_sass/styles/_discography.scss CHANGED
@@ -1,45 +1,74 @@
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
- }
45
- }
1
+ .discography,
2
+ .post-feed {
3
+ max-width: 100%;
4
+
5
+ & &-album {
6
+ display: flex;
7
+ flex-direction: row;
8
+ position: relative;
9
+
10
+ @include mobile {
11
+ flex-direction: column;
12
+ }
13
+
14
+ &_cover {
15
+ width: 20vw;
16
+ height: 20vw;
17
+ max-width: 500px;
18
+ max-height: 500px;
19
+
20
+ &-wrapper {
21
+ display: block;
22
+ margin-right: 0.5em;
23
+
24
+ @include mobile {
25
+ margin: 0;
26
+ width: 100%;
27
+ }
28
+ }
29
+
30
+ img {
31
+ max-height: 20vw;
32
+ }
33
+
34
+ @include mobile {
35
+ width: 40vw;
36
+ height: 40vw;
37
+ margin: auto;
38
+
39
+ img {
40
+ width: 40vw;
41
+ height: 40vw;
42
+ max-height: 40vw;
43
+ }
44
+ }
45
+ }
46
+
47
+ p,
48
+ a {
49
+ font-size: 0.9em;
50
+ line-height: 1em;
51
+ font-weight: 300;
52
+ padding-bottom: 0.5em;
53
+ color: $p_text;
54
+ }
55
+
56
+ a {
57
+ @include underline-on-hover($p_text);
58
+ }
59
+
60
+ section {
61
+ width: 100%;
62
+ }
63
+
64
+ &_title {
65
+ margin-top: 3vw;
66
+ font-size: 2em;
67
+ margin-bottom: 0.6em;
68
+ }
69
+
70
+ &_summary {
71
+ padding-bottom: 0.5em;
72
+ }
73
+ }
74
+ }
data/_sass/styles/_embedded-player.scss CHANGED
@@ -1,9 +1,9 @@
1
- .embedded-player {
2
- width: 100%;
3
- max-width: 600px;
4
- outline: none;
5
- border: none;
6
- &.hidden {
7
- visibility: hidden;
8
- }
1
+ .embedded-player {
2
+ width: 100%;
3
+ max-width: 600px;
4
+ outline: none;
5
+ border: none;
6
+ &.hidden {
7
+ visibility: hidden;
8
+ }
9
9
  }
data/_sass/styles/_index.scss CHANGED
@@ -1,10 +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';
9
- @import './modal';
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
10
  @import './embedded-player';
data/_sass/styles/_layout.scss CHANGED
@@ -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
  }
data/_sass/styles/_menu.scss CHANGED
@@ -1,177 +1,178 @@
1
- .menu {
2
- $root: &;
3
- background-color: $white;
4
- position: fixed;
5
- left: 0;
6
- top: 0;
7
-
8
- display: flex;
9
- flex-direction: column;
10
- height: 100%;
11
- overflow-y: auto;
12
- float: left;
13
- width: $menu-size;
14
- box-sizing: border-box;
15
- padding: 8px 0 0 22px;
16
- overflow: hidden;
17
- @include mobile {
18
- flex-direction: row;
19
- width: 100%;
20
- max-height: $mobile-menu-height;
21
- }
22
- &.expanded--visible {
23
- @include mobile {
24
- .navigation {
25
- opacity: 1;
26
- }
27
- .menu-contact {
28
- opacity: 1;
29
- }
30
- }
31
- }
32
- &.expanded {
33
- z-index: 10;
34
- .menu-top_expand {
35
- .bar_top {
36
- -webkit-transform: rotate(-45deg) translate(-8px, 8px);
37
- transform: rotate(-45deg) translate(-8px, 8px);
38
- }
39
-
40
- .bar_middle {opacity: 0;}
41
-
42
- .bar_bottom {
43
- -webkit-transform: rotate(45deg) translate(-8px, -8px);
44
- transform: rotate(45deg) translate(-8px, -8px);
45
- }
46
- }
47
- @include mobile {
48
- .navigation {
49
- display: block;
50
- }
51
- .menu-contact {
52
- display: flex;
53
- position: fixed;
54
- bottom: 0.5em;
55
- left: 1em;
56
- }
57
- }
58
-
59
- }
60
- &-top {
61
- box-sizing: border-box;
62
- height: 100%;
63
- flex-grow: 1;
64
- padding-right: 3px;
65
- &_logo {
66
- max-width: 100px;
67
- margin-bottom: 1em;
68
- a {
69
- color: #000000;
70
- img {
71
- max-height: 100px;
72
- @include mobile {
73
- max-height: calc(#{$mobile-menu-height} - 15px);
74
- }
75
- width: auto;
76
- max-width: 100%;
77
- border: 0;
78
- }
79
- }
80
- }
81
- &_expand {
82
- display: none;
83
- @include mobile {
84
- display: inline-block;
85
- }
86
- cursor: pointer;
87
- flex-grow: 0;
88
- position: absolute;
89
- right: 10px;
90
- top: 15px;
91
- .bar_top, .bar_middle, .bar_bottom {
92
- width: 35px;
93
- height: 5px;
94
- background-color: #333;
95
- margin: 6px 0;
96
- transition: 0.4s;
97
- }
98
- }
99
- }
100
- ul, ol, dl {
101
- li, dt {
102
- margin-left: 0;
103
- list-style: none;
104
- margin-bottom: 8px;
105
- margin-top: 8px;
106
-
107
- a {
108
- align-items: flex-start;
109
- color: $p_text;
110
- cursor: pointer;
111
- display: flex;
112
- font-weight: 400;
113
- letter-spacing: 3px;
114
- font-size: 1em;
115
- &:hover {
116
- transition: all 0.3s ease-in-out 0s;
117
- color: $p_light;
118
- text-decoration: none;
119
- }
120
- &.selected {
121
- font-weight: 600;
122
- }
123
-
124
- i {
125
- margin-right: 5px;
126
- }
127
-
128
- span {
129
- max-width: 100%;
130
- hyphens: auto;
131
- }
132
- }
133
- }
134
- }
135
-
136
- .navigation {
137
- transition: opacity 0.3s ease-in-out;
138
- @include mobile {
139
- display: none;
140
- opacity: 0;
141
- position: fixed;
142
- left: 0;
143
- top: $mobile-menu-height;
144
- height: calc(100% - #{$mobile-menu-height});
145
- width: 100%;
146
- background-color: $white;
147
- padding-left: 2em;
148
- }
149
- }
150
-
151
- &-contact {
152
- display:flex;
153
- justify-content:left;
154
- margin-bottom: 0.6em;
155
- flex-wrap: wrap;
156
- transition: opacity 0.3s ease-in-out;
157
- @include mobile {
158
- display: none;
159
- opacity: 0;
160
- }
161
- a {
162
- color: $p_text;
163
- cursor:pointer;
164
- text-align:left;
165
- text-size-adjust:100%;
166
- user-select:none;
167
- margin-left: 4px;
168
- margin-right: 4px;
169
- opacity: 60%;
170
- &:hover {
171
- opacity: 100%;
172
- }
173
- }
174
- }
175
-
176
-
1
+ .menu {
2
+ $root: &;
3
+ background-color: $white;
4
+ position: fixed;
5
+ left: 0;
6
+ top: 0;
7
+
8
+ display: flex;
9
+ flex-direction: column;
10
+ height: 100%;
11
+ overflow-y: auto;
12
+ float: left;
13
+ width: $menu-size;
14
+ box-sizing: border-box;
15
+ padding: 8px 0 0 22px;
16
+ overflow: hidden;
17
+ @include mobile {
18
+ flex-direction: row;
19
+ width: 100%;
20
+ max-height: $mobile-menu-height;
21
+ }
22
+ &.expanded--visible {
23
+ @include mobile {
24
+ .navigation {
25
+ opacity: 1;
26
+ }
27
+ .menu-contact {
28
+ opacity: 1;
29
+ }
30
+ }
31
+ }
32
+ &.expanded {
33
+ z-index: 10;
34
+ .menu-top_expand {
35
+ .bar_top {
36
+ -webkit-transform: rotate(-45deg) translate(-8px, 8px);
37
+ transform: rotate(-45deg) translate(-8px, 8px);
38
+ }
39
+
40
+ .bar_middle {opacity: 0;}
41
+
42
+ .bar_bottom {
43
+ -webkit-transform: rotate(45deg) translate(-8px, -8px);
44
+ transform: rotate(45deg) translate(-8px, -8px);
45
+ }
46
+ }
47
+ @include mobile {
48
+ .navigation {
49
+ display: block;
50
+ }
51
+ .menu-contact {
52
+ display: flex;
53
+ position: fixed;
54
+ bottom: 0.5em;
55
+ left: 1em;
56
+ }
57
+ }
58
+
59
+ }
60
+ &-top {
61
+ box-sizing: border-box;
62
+ height: 100%;
63
+ flex-grow: 1;
64
+ padding-right: 3px;
65
+ &_logo {
66
+ max-width: 100px;
67
+ margin-bottom: 1em;
68
+ a {
69
+ color: #000000;
70
+ img {
71
+ max-height: 100px;
72
+ @include mobile {
73
+ max-height: calc(#{$mobile-menu-height} - 15px);
74
+ }
75
+ width: auto;
76
+ max-width: 100%;
77
+ border: 0;
78
+ object-fit: contain;
79
+ }
80
+ }
81
+ }
82
+ &_expand {
83
+ display: none;
84
+ @include mobile {
85
+ display: inline-block;
86
+ }
87
+ cursor: pointer;
88
+ flex-grow: 0;
89
+ position: absolute;
90
+ right: 10px;
91
+ top: 15px;
92
+ .bar_top, .bar_middle, .bar_bottom {
93
+ width: 35px;
94
+ height: 5px;
95
+ background-color: #333;
96
+ margin: 6px 0;
97
+ transition: 0.4s;
98
+ }
99
+ }
100
+ }
101
+ ul, ol, dl {
102
+ li, dt {
103
+ margin-left: 0;
104
+ list-style: none;
105
+ margin-bottom: 8px;
106
+ margin-top: 8px;
107
+
108
+ a {
109
+ align-items: flex-start;
110
+ color: $p_text;
111
+ cursor: pointer;
112
+ display: flex;
113
+ font-weight: 400;
114
+ letter-spacing: 3px;
115
+ font-size: 1em;
116
+ &:hover {
117
+ transition: all 0.3s ease-in-out 0s;
118
+ color: $p_light;
119
+ text-decoration: none;
120
+ }
121
+ &.selected {
122
+ font-weight: 600;
123
+ }
124
+
125
+ i {
126
+ margin-right: 5px;
127
+ }
128
+
129
+ span {
130
+ max-width: 100%;
131
+ hyphens: auto;
132
+ }
133
+ }
134
+ }
135
+ }
136
+
137
+ .navigation {
138
+ transition: opacity 0.3s ease-in-out;
139
+ @include mobile {
140
+ display: none;
141
+ opacity: 0;
142
+ position: fixed;
143
+ left: 0;
144
+ top: $mobile-menu-height;
145
+ height: calc(100% - #{$mobile-menu-height});
146
+ width: 100%;
147
+ background-color: $white;
148
+ padding-left: 2em;
149
+ }
150
+ }
151
+
152
+ &-contact {
153
+ display:flex;
154
+ justify-content:left;
155
+ margin-bottom: 0.6em;
156
+ flex-wrap: wrap;
157
+ transition: opacity 0.3s ease-in-out;
158
+ @include mobile {
159
+ display: none;
160
+ opacity: 0;
161
+ }
162
+ a {
163
+ color: $p_text;
164
+ cursor:pointer;
165
+ text-align:left;
166
+ text-size-adjust:100%;
167
+ user-select:none;
168
+ margin-left: 4px;
169
+ margin-right: 4px;
170
+ opacity: 60%;
171
+ &:hover {
172
+ opacity: 100%;
173
+ }
174
+ }
175
+ }
176
+
177
+
177
178
  }
data/_sass/styles/_modal.scss CHANGED
@@ -1,30 +1,30 @@
1
- .modal {
2
- &__picture-zoomed {
3
- background-color: rgba(0,0,0,0.5);
4
- background-position: center;
5
- background-repeat: no-repeat;
6
- background-size: auto;
7
- width: 100%;
8
- height: 100%;
9
- position: fixed;
10
- z-index: 10000;
11
- top: 0;
12
- left: 0;
13
- cursor: zoom-out;
14
- transition: opacity 0.3s ease-in-out;
15
- opacity: 1;
16
- display: flex;
17
- align-items: center;
18
- justify-content: center;
19
- @include mobile {
20
- background-size: contain;
21
- }
22
- &--image {
23
- max-height: 96vh;
24
- max-width: 96vw;
25
- }
26
- &.hidden {
27
- opacity: 0;
28
- }
29
- }
1
+ .modal {
2
+ &__picture-zoomed {
3
+ background-color: rgba(0,0,0,0.5);
4
+ background-position: center;
5
+ background-repeat: no-repeat;
6
+ background-size: auto;
7
+ width: 100%;
8
+ height: 100%;
9
+ position: fixed;
10
+ z-index: 10000;
11
+ top: 0;
12
+ left: 0;
13
+ cursor: zoom-out;
14
+ transition: opacity 0.3s ease-in-out;
15
+ opacity: 1;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ @include mobile {
20
+ background-size: contain;
21
+ }
22
+ &--image {
23
+ max-height: 96vh;
24
+ max-width: 96vw;
25
+ }
26
+ &.hidden {
27
+ opacity: 0;
28
+ }
29
+ }
30
30
  }