Browse Source

reworking podcast template

Axolotle 1 year ago
parent
commit
dd709281e3

+ 41
- 8
app/static/css/player.css View File

@@ -10,8 +10,12 @@ mixin selection
10 10
   background-color: white; }
11 11
 
12 12
 #slider-bar {
13
-  width: 100%;
13
+  display: -webkit-box;
14
+  display: -moz-box;
15
+  display: -ms-flexbox;
16
+  display: -webkit-flex;
14 17
   display: flex;
18
+  width: 100%;
15 19
   height: 1.2em;
16 20
   border-bottom: 5px solid black;
17 21
   box-sizing: content-box; }
@@ -31,16 +35,22 @@ mixin selection
31 35
     margin-top: calc(-1.2em + 5px); }
32 36
 
33 37
 .box-text {
38
+  display: -webkit-box;
39
+  display: -moz-box;
40
+  display: -ms-flexbox;
41
+  display: -webkit-flex;
42
+  display: flex;
43
+  -webkit-align-items: center;
44
+  -moz-align-items: center;
45
+  -ms-align-items: center;
46
+  align-items: center;
34 47
   position: absolute;
35 48
   top: -1.8em;
36 49
   height: 1.8em;
37 50
   background-color: black;
38 51
   color: white;
39 52
   border-top: 5px solid black;
40
-  border-top-left-radius: 2.5px;
41
-  border-top-right-radius: 2.5px;
42
-  display: flex;
43
-  align-items: center; }
53
+  border-top-right-radius: 2.5px; }
44 54
   .box-text .separator {
45 55
     margin: 0 0.25em; }
46 56
 
@@ -50,7 +60,8 @@ mixin selection
50 60
 #track {
51 61
   width: 78%;
52 62
   margin-right: 2%;
53
-  border-right: 5px solid black; }
63
+  border-right: 5px solid black;
64
+  border-top-right-radius: 2.5px; }
54 65
 
55 66
 #mute {
56 67
   left: 80%;
@@ -65,24 +76,46 @@ mixin selection
65 76
   width: 100%; }
66 77
 
67 78
 #controls {
79
+  display: -webkit-box;
80
+  display: -moz-box;
81
+  display: -ms-flexbox;
82
+  display: -webkit-flex;
68 83
   display: flex;
69 84
   height: 6em; }
70 85
 
71 86
 .pan {
72 87
   height: 100%;
88
+  display: -webkit-box;
89
+  display: -moz-box;
90
+  display: -ms-flexbox;
91
+  display: -webkit-flex;
73 92
   display: flex; }
74 93
   .pan div {
94
+    display: -webkit-box;
95
+    display: -moz-box;
96
+    display: -ms-flexbox;
97
+    display: -webkit-flex;
75 98
     display: flex;
76
-    justify-content: center; }
99
+    -webkit-justify-content: center;
100
+    -moz-justify-content: center;
101
+    -ms-justify-content: center;
102
+    justify-content: center;
103
+    -ms-flex-pack: center; }
77 104
   .pan .button {
105
+    -webkit-align-items: center;
106
+    -moz-align-items: center;
107
+    -ms-align-items: center;
78 108
     align-items: center;
79 109
     width: 6em;
80 110
     cursor: pointer; }
81 111
   .pan .text {
112
+    -webkit-flex-direction: column;
113
+    -moz-flex-direction: column;
114
+    -ms-flex-direction: column;
82 115
     flex-direction: column; }
83 116
     .pan .text h3 {
84 117
       font-family: pixelpath;
85
-      font-size: 2em; }
118
+      font-size: 2.2em; }
86 119
 
87 120
 #play-pan {
88 121
   width: 40%;

+ 2
- 2
app/static/css/player.css.map View File

@@ -1,7 +1,7 @@
1 1
 {
2 2
 "version": 3,
3
-"mappings": "AAYA;;;;EAIE;ACdF,OAAQ;EACJ,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,gBAAgB,EDDZ,KAAK;;ACKb,WAAY;EACR,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,KAAK;EACb,aAAa,EDLR,eAAe;ECMpB,UAAU,EAAE,WAAW;;AAG3B,QAAS;EACL,UAAU,EDVL,eAAe;ECWpB,MAAM,EAAE,IAAI;EACZ,gBAAgB,EDfZ,KAAK;ECiBT,YAAI;IACA,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,EAAE;IACT,gBAAgB,EDnBX,WAAW;ICoBhB,QAAQ,EAAE,QAAQ;EAGtB,uBAAe;IACX,gBAAgB,ED1BhB,KAAK;EC4BT,wBAAgB;IACZ,UAAU,EAAE,kBAAkB;;AAItC,SAAU;EACN,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,MAAM;EACX,MAAM,EAAE,KAAK;EACb,gBAAgB,EDpCZ,KAAK;ECqCT,KAAK,EDtCD,KAAK;ECuCT,UAAU,EDnCL,eAAe;ECoCpB,sBAAsB,EAAE,KAAK;EAC7B,uBAAuB,EAAE,KAAK;EAC9B,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EAEnB,oBAAW;IACP,MAAM,EAAE,QAAQ;;AAIxB,KAAM;EACF,OAAO,EAAE,OAAO;;AAGpB,MAAO;EACH,KAAK,EAAE,GAAG;EACV,YAAY,EAAE,EAAE;EAChB,YAAY,EDrDP,eAAe;;ACwDxB,KAAM;EACF,IAAI,EAAE,GAAG;EACT,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,OAAO;;AAGnB,OAAQ;EACJ,KAAK,EAAE,GAAG;EACV,WAAW,EDhEN,eAAe;;ACmExB,cAAe;EACX,KAAK,EAAE,IAAI;;AAIf,SAAU;EACN,OAAO,EAAE,IAAI;EACb,MAAM,EDzEM,GAAG;;AC4EnB,IAAK;EACD,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EAEb,QAAI;IACA,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,MAAM;EAG3B,YAAQ;IACJ,WAAW,EAAE,MAAM;IACnB,KAAK,EDvFG,GAAG;ICwFX,MAAM,EAAE,OAAO;EAGnB,UAAM;IACF,cAAc,EAAE,MAAM;IAEtB,aAAG;MACC,WAAW,EDxGV,SAAS;MCyGV,SAAS,EDvGH,GAAG;;AC4GrB,SAAU;EACN,KAAK,EAAE,GAAG;EACV,YAAY,EDxGP,eAAe;;AC2GxB,aAAc;EACV,KAAK,EAAE,GAAG;;AAGd,aAAc;EACV,KAAK,EAAE,GAAG;EACV,WAAW,EDjHN,eAAe;;ACoHxB,KAAM;EACF,UAAU,EAAE,WAAW;EACvB,WAAW,EDtHN,eAAe;ECuHpB,YAAY,EDvHP,eAAe;;ACyHxB,WAAY;EACR,WAAW,EAAE,KAAK",
4
-"sources": ["../scss/_rules.scss","../scss/player.scss"],
3
+"mappings": "AAaA;;;;EAIE;ACdF,OAAQ;EACJ,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,gBAAgB,EDFZ,KAAK;;ACMb,WAAY;EC4BV,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,QAAQ;EACjB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,IAAI;ED9BX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EACb,aAAa,EDNR,eAAe;ECOpB,UAAU,EAAE,WAAW;;AAG3B,QAAS;EACL,UAAU,EDXL,eAAe;ECYpB,MAAM,EAAE,IAAI;EACZ,gBAAgB,EDhBZ,KAAK;ECkBT,YAAI;IACA,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,EAAE;IACT,gBAAgB,EDpBX,WAAW;ICqBhB,QAAQ,EAAE,QAAQ;EAGtB,uBAAe;IACX,gBAAgB,ED3BhB,KAAK;EC6BT,wBAAgB;IACZ,UAAU,EAAE,kBAAkB;;AAItC,SAAU;ECAR,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,QAAQ;EACjB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,IAAI;EA+Gb,mBAAmB,EDjHI,MAAM;ECkH1B,gBAAgB,EDlHI,MAAM;ECmHzB,eAAe,EDnHI,MAAM;ECoHrB,WAAW,EDpHI,MAAM;EAC3B,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,MAAM;EACX,MAAM,EAAE,KAAK;EACb,gBAAgB,EDvCZ,KAAK;ECwCT,KAAK,EDzCD,KAAK;EC0CT,UAAU,EDtCL,eAAe;ECuCpB,uBAAuB,EDtCd,KAAK;ECwCd,oBAAW;IACP,MAAM,EAAE,QAAQ;;AAIxB,KAAM;EACF,OAAO,EAAE,OAAO;;AAGpB,MAAO;EACH,KAAK,EAAE,GAAG;EACV,YAAY,EAAE,EAAE;EAChB,YAAY,EDrDP,eAAe;ECsDpB,uBAAuB,EDrDd,KAAK;;ACwDlB,KAAM;EACF,IAAI,EAAE,GAAG;EACT,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,OAAO;;AAGnB,OAAQ;EACJ,KAAK,EAAE,GAAG;EACV,WAAW,EDjEN,eAAe;;ACoExB,cAAe;EACX,KAAK,EAAE,IAAI;;AAIf,SAAU;EC3CR,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,QAAQ;EACjB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,IAAI;EDyCX,MAAM,EDzEM,GAAG;;AC4EnB,IAAK;EACD,MAAM,EAAE,IAAI;ECjDd,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,QAAQ;EACjB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,IAAI;EDgDX,QAAI;ICpDN,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,IAAI;IA0Fb,uBAAuB,EDxCQ,MAAM;ICyClC,oBAAoB,EDzCQ,MAAM;IC0CjC,mBAAmB,ED1CQ,MAAM;IC2C7B,eAAe,ED3CQ,MAAM;IC4C3B,aAAa,ED5CQ,MAAM;EAGnC,YAAQ;IC0DV,mBAAmB,EDzDQ,MAAM;IC0D9B,gBAAgB,ED1DQ,MAAM;IC2D7B,eAAe,ED3DQ,MAAM;IC4DzB,WAAW,ED5DQ,MAAM;IAC3B,KAAK,EDvFG,GAAG;ICwFX,MAAM,EAAE,OAAO;EAGnB,UAAM;ICzCR,sBAAsB,ED0CQ,MAAM;ICzCjC,mBAAmB,EDyCQ,MAAM;ICxChC,kBAAkB,EDwCQ,MAAM;ICvC5B,cAAc,EDuCQ,MAAM;IAE9B,aAAG;MACC,WAAW,EDzGV,SAAS;MC0GV,SAAS,EDxGH,KAAK;;AC6GvB,SAAU;EACN,KAAK,EAAE,GAAG;EACV,YAAY,EDzGP,eAAe;;AC4GxB,aAAc;EACV,KAAK,EAAE,GAAG;;AAGd,aAAc;EACV,KAAK,EAAE,GAAG;EACV,WAAW,EDlHN,eAAe;;ACqHxB,KAAM;EACF,UAAU,EAAE,WAAW;EACvB,WAAW,EDvHN,eAAe;ECwHpB,YAAY,EDxHP,eAAe;;AC0HxB,WAAY;EACR,WAAW,EAAE,KAAK",
4
+"sources": ["../scss/_rules.scss","../scss/player.scss","../scss/_mixins.scss"],
5 5
 "names": [],
6 6
 "file": "player.css"
7 7
 }

+ 94
- 23
app/static/css/style.css View File

@@ -15,9 +15,14 @@ html {
15 15
 
16 16
 body {
17 17
   height: 100%;
18
+  display: -webkit-box;
19
+  display: -moz-box;
20
+  display: -ms-flexbox;
21
+  display: -webkit-flex;
18 22
   display: flex;
19 23
   height: calc(100% - 7.5em);
20
-  margin-bottom: 7.5em; }
24
+  margin-bottom: 7.5em;
25
+  padding-bottom: 3em; }
21 26
 
22 27
 p, h1, h2, h3, h4, h5, h6 {
23 28
   color: black; }
@@ -29,9 +34,7 @@ nav {
29 34
   height: 100%;
30 35
   width: 20%;
31 36
   padding-left: 3em;
32
-  margin-bottom: 3em;
33
-  position: sticky;
34
-  position: webkit-sticky;
37
+  margin-right: 3em;
35 38
   top: 0; }
36 39
   nav #logo {
37 40
     display: block;
@@ -48,30 +51,98 @@ nav {
48 51
       stroke: black; }
49 52
 
50 53
 main {
54
+  display: -webkit-box;
55
+  display: -moz-box;
56
+  display: -ms-flexbox;
57
+  display: -webkit-flex;
51 58
   display: flex;
52 59
   width: 100%; }
53
-  main a:hover {
54
-    background-color: springgreen;
55
-    border-bottom: none; }
60
+
61
+::-moz-selection {
62
+  background-color: black;
63
+  color: white; }
64
+
65
+::selection {
66
+  background-color: black;
67
+  color: white; }
68
+
69
+.marg {
70
+  margin-top: 1em; }
71
+
72
+.marg2 {
73
+  margin-top: 3em; }
74
+
75
+.decal {
76
+  margin-left: 5.5em; }
56 77
 
57 78
 section {
58
-  padding: 5em 3em 3em 3em; }
59
-  section h2 {
60
-    margin-bottom: 0.7em;
61
-    padding: 0em 0.5em;
79
+  padding-top: 5em; }
80
+  section.solo {
81
+    max-width: 40em; }
82
+  section div.flex {
83
+    display: -webkit-box;
84
+    display: -moz-box;
85
+    display: -ms-flexbox;
86
+    display: -webkit-flex;
87
+    display: flex; }
88
+  section div.bloc {
89
+    border: 5px solid black;
90
+    border-bottom-left-radius: 2.5px;
91
+    border-top-right-radius: 2.5px;
92
+    border-bottom-right-radius: 2.5px;
93
+    padding: 0.5em 2em 1em 1.5em; }
94
+  section div.name {
95
+    width: 100%; }
96
+  section div.section p.decal {
97
+    margin-top: 0.7em;
98
+    margin-bottom: 1em; }
99
+  section div.section p.bloc {
100
+    box-sizing: content-box;
101
+    width: 40px;
102
+    text-align: center;
103
+    display: inline-block;
104
+    border-top: 5px solid black;
105
+    border-left: 5px solid black;
106
+    border-bottom: 5px solid black;
107
+    border-top-left-radius: 2.5px;
108
+    border-bottom-left-radius: 2.5px; }
109
+  section div.section h4 {
110
+    border: 5px solid black;
111
+    border-bottom-left-radius: 2.5px;
112
+    border-top-right-radius: 2.5px;
113
+    border-bottom-right-radius: 2.5px;
114
+    font-family: pixelpath;
115
+    font-size: 1.85em;
62 116
     color: white;
63
-    background-color: black; }
64
-  section article div ~ div {
65
-    margin-top: 0.8em; }
66
-  section article:last-child {
67
-    margin-top: 3em; }
68
-  section:last-child {
69
-    margin-right: 3em;
70
-    min-width: 30%;
71
-    max-width: 40%; }
72
-
73
-#left-panel {
74
-  width: 100%; }
117
+    background-color: black;
118
+    padding: 0 2em 0 1em; }
119
+  section span.license {
120
+    display: block;
121
+    text-align: right;
122
+    margin-top: 0.4em;
123
+    margin-right: 0.5em; }
124
+  section a.picto {
125
+    box-sizing: content-box;
126
+    display: inline-block;
127
+    width: 40px;
128
+    height: 40px;
129
+    border-top: 5px solid black;
130
+    border-left: 5px solid black;
131
+    border-bottom: 5px solid black;
132
+    border-top-left-radius: 2.5px;
133
+    border-bottom-left-radius: 2.5px; }
134
+  section .tags a {
135
+    border: none;
136
+    text-decoration: underline; }
137
+  section a {
138
+    border-bottom: 5px solid springgreen;
139
+    color: black;
140
+    text-decoration: none; }
141
+    section a:hover {
142
+      border-bottom-color: black; }
143
+  section h3 {
144
+    font-family: pixelpath;
145
+    font-size: 2.2em; }
75 146
 
76 147
 .list-elem {
77 148
   margin-top: 2em; }

+ 2
- 2
app/static/css/style.css.map View File

@@ -1,7 +1,7 @@
1 1
 {
2 2
 "version": 3,
3
-"mappings": "AAYA;;;;EAIE;ACdF,CAAE;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;;AAG1B,IAAK;EACD,WAAW,EDTF,eAAe;ECUxB,SAAS,EDRI,KAAK;ECSlB,gBAAgB,EDNZ,KAAK;;ACSb,IAAK;EACD,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,kBAAkB;EAC1B,aAAa,EAAE,KAAK;;AAGxB,yBAA0B;EACtB,KAAK,EDhBD,KAAK;;ACkBb,CAAE;EACE,OAAO,EAAE,CAAC;;AAGd,GAAI;EACA,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,GAAG;EACV,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,MAAM;EAChB,QAAQ,EAAE,aAAa;EACvB,GAAG,EAAE,CAAC;EAEN,SAAM;IACF,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,OAAO;IAEf,aAAI;MACA,SAAS,EAAE,IAAI;EAIvB,kBAAe;IACX,UAAU,EAAE,GAAG;EAGnB,KAAE;IACE,OAAO,EAAE,KAAK;IACd,aAAa,EAAE,KAAK;IACpB,SAAS,EAAE,KAAK;IAGZ,uBAAY;MACR,MAAM,EAAE,KAAK;;AAM7B,IAAK;EACD,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EAWP,YAAQ;IACJ,gBAAgB,EDtEf,WAAW;ICuEZ,aAAa,EAAE,IAAI;;AC9E/B,OAAQ;EACJ,OAAO,EAAE,eAAe;EAExB,UAAG;IACC,aAAa,EAAE,KAAK;IACpB,OAAO,EAAE,SAAS;IAClB,KAAK,EFDL,KAAK;IEEL,gBAAgB,EFDhB,KAAK;EEKL,yBAAU;IACN,UAAU,EAAE,KAAK;EAGrB,0BAAa;IACT,UAAU,EAAE,GAAG;EAIvB,kBAAa;IACT,YAAY,EAAE,GAAG;IACjB,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;;AAKtB,WAAY;EACR,KAAK,EAAE,IAAI;;AAOf,UAAW;EACP,UAAU,EAAE,GAAG;;ACrCnB,UAAU;AACV,KAAM;EACF,IAAI,EAAE,IAAI;EACV,cAAc,EAAE,KAAK;EACrB,eAAe,EAAE,KAAK;;AAE1B,WAAY;EACR,YAAY,EAAE,CAAC;EACf,iBAAiB,EAAE,CAAC;;AAExB,UAAW;EACP,YAAY,EAAE,CAAC;EACf,iBAAiB,EAAE,CAAC;;AAExB,MAAO;EACH,MAAM,EHTF,KAAK;;AGWb,WAAY;EACR,MAAM,EHXG,WAAW;;AGaxB,OAAQ;EACJ,IAAI,EHfA,KAAK;EGgBT,MAAM,EAAE,IAAI;;ACtBhB,WAAW;AAEX,sCAAsC;AACtC,UAKC;EAJC,WAAW,EAAE,WAAW;EACxB,GAAG,EAAE,yIAAyI;EAC9I,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;AAIpB;;sBAEsB;AACtB,UAKC;EAJC,WAAW,EAAE,MAAM;EACnB,GAAG,EAAE,wNAAwN;EAC7N,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;AAGpB,UAKC;EAJC,WAAW,EAAE,MAAM;EACnB,GAAG,EAAE,+MAA+M;EACpN,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;AAGpB,UAKC;EAJC,WAAW,EAAE,MAAM;EACnB,GAAG,EAAE,qNAAqN;EAC1N,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;AAGpB,UAKC;EAJC,WAAW,EAAE,MAAM;EACnB,GAAG,EAAE,iOAAiO;EACtO,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM",
4
-"sources": ["../scss/_rules.scss","../scss/style.scss","../scss/_sections.scss","../scss/_svgs.scss","../scss/_fonts.scss"],
3
+"mappings": "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",
4
+"sources": ["../scss/_rules.scss","../scss/style.scss","../scss/_mixins.scss","../scss/_sections.scss","../scss/_svgs.scss","../scss/_fonts.scss"],
5 5
 "names": [],
6 6
 "file": "style.css"
7 7
 }

+ 169
- 0
app/static/scss/_mixins.scss View File

@@ -0,0 +1,169 @@
1
+
2
+// combo the mixin to add border-bottom, etc. and radius to the correct angles
3
+
4
+@mixin border($directions) {
5
+    @each $direction in $directions {
6
+        @if $direction == "t" {
7
+            border-top: $border;
8
+        } @else if $direction == "r" {
9
+            border-right: $border;
10
+        } @else if $direction == "l" {
11
+            border-left: $border;
12
+        } @else if $direction == "b" {
13
+            border-bottom: $border;
14
+        }
15
+    }
16
+}
17
+
18
+@mixin border-radius($directions) {
19
+    @each $direction in $directions {
20
+        @if $direction == "tl" {
21
+            border-top-left-radius: $border-rad;
22
+        } @else if $direction == "tr" {
23
+            border-top-right-radius: $border-rad;
24
+        } @else if $direction == "bl" {
25
+            border-bottom-left-radius: $border-rad;
26
+        } @else if $direction == "br" {
27
+            border-bottom-right-radius: $border-rad;
28
+        }
29
+    }
30
+}
31
+
32
+
33
+// --------------------------------------------------
34
+// Flexbox SASS mixins
35
+// The spec: http://www.w3.org/TR/css3-flexbox
36
+// --------------------------------------------------
37
+
38
+// Flexbox display
39
+@mixin flexbox() {
40
+  display: -webkit-box;
41
+  display: -moz-box;
42
+  display: -ms-flexbox;
43
+  display: -webkit-flex;
44
+  display: flex;
45
+}
46
+
47
+// The 'flex' shorthand
48
+// - applies to: flex items
49
+// <positive-number>, initial, auto, or none
50
+@mixin flex($values) {
51
+  -webkit-box-flex: $values;
52
+     -moz-box-flex: $values;
53
+      -webkit-flex: $values;
54
+  	  -ms-flex: $values;
55
+  	      flex: $values;
56
+}
57
+
58
+// Flex Flow Direction
59
+// - applies to: flex containers
60
+// row | row-reverse | column | column-reverse
61
+@mixin flex-direction($direction) {
62
+  -webkit-flex-direction: $direction;
63
+     -moz-flex-direction: $direction;
64
+      -ms-flex-direction: $direction;
65
+          flex-direction: $direction;
66
+}
67
+
68
+// Flex Line Wrapping
69
+// - applies to: flex containers
70
+// nowrap | wrap | wrap-reverse
71
+@mixin flex-wrap($wrap) {
72
+  -webkit-flex-wrap: $wrap;
73
+     -moz-flex-wrap: $wrap;
74
+      -ms-flex-wrap: $wrap;
75
+          flex-wrap: $wrap;
76
+}
77
+
78
+// Flex Direction and Wrap
79
+// - applies to: flex containers
80
+// <flex-direction> || <flex-wrap>
81
+@mixin flex-flow($flow) {
82
+  -webkit-flex-flow: $flow;
83
+     -moz-flex-flow: $flow;
84
+      -ms-flex-flow: $flow;
85
+          flex-flow: $flow;
86
+}
87
+
88
+// Display Order
89
+// - applies to: flex items
90
+// <integer>
91
+@mixin order($val) {
92
+  -webkit-box-ordinal-group: $val;
93
+     -moz-box-ordinal-group: $val;
94
+  	     -ms-flex-order: $val;
95
+  	      -webkit-order: $val;
96
+  		      order: $val;
97
+}
98
+
99
+// Flex grow factor
100
+// - applies to: flex items
101
+// <number>
102
+@mixin flex-grow($grow) {
103
+  -webkit-flex-grow: $grow;
104
+     -moz-flex-grow: $grow;
105
+      -ms-flex-grow: $grow;
106
+          flex-grow: $grow;
107
+}
108
+
109
+// Flex shrink
110
+// - applies to: flex item shrink factor
111
+// <number>
112
+@mixin flex-shrink($shrink) {
113
+  -webkit-flex-shrink: $shrink;
114
+     -moz-flex-shrink: $shrink;
115
+      -ms-flex-shrink: $shrink;
116
+          flex-shrink: $shrink;
117
+}
118
+
119
+// Flex basis
120
+// - the initial main size of the flex item
121
+// - applies to: flex itemsnitial main size of the flex item
122
+// <width>
123
+@mixin flex-basis($width) {
124
+  -webkit-flex-basis: $width;
125
+     -moz-flex-basis: $width;
126
+      -ms-flex-basis: $width;
127
+          flex-basis: $width;
128
+}
129
+
130
+// Axis Alignment
131
+// - applies to: flex containers
132
+// flex-start | flex-end | center | space-between | space-around
133
+@mixin justify-content($justify) {
134
+  -webkit-justify-content: $justify;
135
+     -moz-justify-content: $justify;
136
+      -ms-justify-content: $justify;
137
+          justify-content: $justify;
138
+            -ms-flex-pack: $justify;
139
+}
140
+
141
+// Packing Flex Lines
142
+// - applies to: multi-line flex containers
143
+// flex-start | flex-end | center | space-between | space-around | stretch
144
+@mixin align-content($align) {
145
+  -webkit-align-content: $align;
146
+     -moz-align-content: $align;
147
+      -ms-align-content: $align;
148
+          align-content: $align;
149
+}
150
+
151
+// Cross-axis Alignment
152
+// - applies to: flex containers
153
+// flex-start | flex-end | center | baseline | stretch
154
+@mixin align-items($align) {
155
+  -webkit-align-items: $align;
156
+     -moz-align-items: $align;
157
+      -ms-align-items: $align;
158
+          align-items: $align;
159
+}
160
+
161
+// Cross-axis Alignment
162
+// - applies to: flex items
163
+// auto | flex-start | flex-end | center | baseline | stretch
164
+@mixin align-self($align) {
165
+  -webkit-align-self: $align;
166
+     -moz-align-self: $align;
167
+      -ms-align-self: $align;
168
+          align-self: $align;
169
+}

+ 2
- 1
app/static/scss/_rules.scss View File

@@ -1,13 +1,14 @@
1 1
 $font-text : hack, monospace;
2 2
 $font-title: pixelpath;
3 3
 $font-text-size: 0.8em;
4
-$font-title-size: 2em;
4
+$font-title-size: 2.2em;
5 5
 
6 6
 $white: white;
7 7
 $black: black;
8 8
 $main-color: springgreen;
9 9
 
10 10
 $border: 5px solid black;
11
+$border-rad: 2.5px;
11 12
 $player-height: 6em;
12 13
 
13 14
 /* TODO

+ 90
- 16
app/static/scss/_sections.scss View File

@@ -1,33 +1,107 @@
1
+
2
+.marg {
3
+    margin-top: 1em;
4
+}
5
+.marg2 {
6
+    margin-top: 3em;
7
+}
8
+.decal {
9
+    margin-left: 5.5em;
10
+}
11
+
1 12
 section {
2
-    padding: 5em 3em 3em 3em;
13
+    padding-top: 5em;
3 14
 
4
-    h2 {
5
-        margin-bottom: 0.7em;
6
-        padding: 0em 0.5em;
7
-        color: $white;
8
-        background-color: $black;
15
+    &.solo {
16
+        max-width: 40em;
9 17
     }
10 18
 
11
-    article {
12
-        div ~ div {
13
-            margin-top: 0.8em;
19
+    div {
20
+        &.flex {
21
+            @include flexbox();
22
+        }
23
+        &.bloc {
24
+            border: $border;
25
+            @include border-radius(bl tr br);
26
+            padding: 0.5em 2em 1em 1.5em;
14 27
         }
28
+        &.name {
29
+            width: 100%;
30
+        }
31
+        &.section {
32
+            p.decal {
33
+                margin-top: 0.7em;
34
+                margin-bottom: 1em;
35
+            }
36
+            p.bloc {
37
+                box-sizing: content-box;
38
+                width: 40px;
39
+                text-align: center;
40
+                display: inline-block;
41
+                @include border(t l b);
42
+                @include border-radius(tl bl);
43
+            }
44
+            h4 {
45
+                border: $border;
46
+                @include border-radius(bl tr br);
47
+                font-family: $font-title;
48
+                font-size: 1.85em;
49
+                color: white;
50
+                background-color: $black;
51
+                padding: 0 2em 0 1em;
52
+            }
53
+        }
54
+    }
15 55
 
16
-        &:last-child {
17
-            margin-top: 3em;
56
+    span {
57
+        &.license {
58
+            display: block;
59
+            text-align: right;
60
+            margin-top: 0.4em;
61
+            margin-right: 0.5em;
18 62
         }
63
+
64
+    }
65
+
66
+    a.picto {
67
+        // FIXME try to merge with the section time
68
+        box-sizing: content-box;
69
+        display: inline-block;
70
+        width: 40px;
71
+        height: 40px;
72
+        @include border(t l b);
73
+        @include border-radius(tl bl);
19 74
     }
20 75
 
21
-    &:last-child {
22
-        margin-right: 3em;
23
-        min-width: 30%;
24
-        max-width: 40%;
76
+    .tags a {
77
+        border: none;
78
+        text-decoration: underline;
25 79
     }
80
+
81
+    a {
82
+        //FIXME use mixin (adapt it)
83
+        border-bottom: 5px solid $main-color;
84
+        color: black;
85
+        text-decoration: none;
86
+
87
+        &:hover {
88
+            border-bottom-color: $black;
89
+        }
90
+    }
91
+
92
+    h3 {
93
+        font-family: $font-title;
94
+        font-size: $font-title-size;
95
+    }
96
+
97
+
98
+
99
+
26 100
 }
27 101
 
28 102
 
29 103
 #left-panel {
30
-    width: 100%;
104
+
31 105
 }
32 106
 #right-panel {
33 107
 

+ 12
- 11
app/static/scss/player.scss View File

@@ -1,4 +1,5 @@
1 1
 @import 'rules';
2
+@import 'mixins';
2 3
 
3 4
 #player {
4 5
     position: fixed;
@@ -9,8 +10,8 @@
9 10
 
10 11
 
11 12
 #slider-bar {
13
+    @include flexbox();
12 14
     width: 100%;
13
-    display: flex;
14 15
     height: 1.2em;
15 16
     border-bottom: $border;
16 17
     box-sizing: content-box;
@@ -37,16 +38,15 @@
37 38
 }
38 39
 
39 40
 .box-text {
41
+    @include flexbox();
42
+    @include align-items(center);
40 43
     position: absolute;
41 44
     top: -1.8em;
42 45
     height: 1.8em;
43 46
     background-color: $black;
44 47
     color: $white;
45 48
     border-top: $border;
46
-    border-top-left-radius: 2.5px;
47
-    border-top-right-radius: 2.5px;
48
-    display: flex;
49
-    align-items: center;
49
+    border-top-right-radius: $border-rad;
50 50
 
51 51
     .separator {
52 52
         margin: 0 0.25em;
@@ -61,6 +61,7 @@
61 61
     width: 78%;
62 62
     margin-right: 2%;
63 63
     border-right: $border;
64
+    border-top-right-radius: $border-rad;
64 65
 }
65 66
 
66 67
 #mute {
@@ -80,27 +81,27 @@
80 81
 
81 82
 
82 83
 #controls {
83
-    display: flex;
84
+    @include flexbox();
84 85
     height: $player-height;
85 86
 }
86 87
 
87 88
 .pan {
88 89
     height: 100%;
89
-    display: flex;
90
+    @include flexbox();
90 91
 
91 92
     div {
92
-        display: flex;
93
-        justify-content: center;
93
+        @include flexbox();
94
+        @include justify-content(center);
94 95
     }
95 96
 
96 97
     .button {
97
-        align-items: center;
98
+        @include align-items(center);
98 99
         width: $player-height;
99 100
         cursor: pointer;
100 101
     }
101 102
 
102 103
     .text {
103
-        flex-direction: column;
104
+        @include flex-direction(column);
104 105
 
105 106
         h3 {
106 107
             font-family: $font-title;

+ 21
- 10
app/static/scss/style.scss View File

@@ -1,4 +1,5 @@
1 1
 @import 'rules';
2
+@import 'mixins';
2 3
 
3 4
 * {
4 5
     margin: 0;
@@ -14,9 +15,10 @@ html {
14 15
 
15 16
 body {
16 17
     height: 100%;
17
-    display: flex;
18
+    @include flexbox();
18 19
     height: calc(100% - 7.5em);
19 20
     margin-bottom: 7.5em;
21
+    padding-bottom: 3em;
20 22
 }
21 23
 
22 24
 p, h1, h2, h3, h4, h5, h6 {
@@ -30,9 +32,9 @@ nav {
30 32
     height: 100%;
31 33
     width: 20%;
32 34
     padding-left: 3em;
33
-    margin-bottom: 3em;
34
-    position: sticky;
35
-    position: webkit-sticky;
35
+    margin-right: 3em;
36
+    // position: sticky;
37
+    // position: webkit-sticky;
36 38
     top: 0;
37 39
 
38 40
     #logo {
@@ -62,25 +64,34 @@ nav {
62 64
 }
63 65
 
64 66
 main {
65
-    display: flex;
67
+    @include flexbox();
66 68
     width: 100%;
67 69
 
68 70
     a {
71
+
69 72
         // font-family: pixelpath;
70 73
         // font-size: $font-title-size;
71 74
         // text-decoration: none;
72
-        // border-bottom: 3px solid $main-color;
75
+
73 76
         // background-color: $white;
74 77
         // position: sticky;
75 78
         // top: 0;
76 79
 
77
-        &:hover {
78
-            background-color: $main-color;
79
-            border-bottom: none;
80
-        }
80
+        // &:hover {
81
+        //     background-color: $main-color;
82
+        //     border-bottom: none;
83
+        // }
81 84
     }
82 85
 }
86
+::-moz-selection {
87
+    background-color: $black;
88
+    color: $white;
83 89
 
90
+ }
91
+::selection {
92
+    background-color: $black;
93
+    color: $white;
94
+}
84 95
 
85 96
 @import 'sections';
86 97
 @import 'svgs';

+ 63
- 46
app/templates/elem_pages/podcast.html View File

@@ -1,70 +1,87 @@
1
-<section>
1
+<section class="solo">
2 2
 
3
-    <p><a class="content-link" href="{{ url_for('main.play', id=elem.id) }}">
4
-        {% include 'svg/small_play.svg' -%}
5
-    </a> {{ elem.name }}</p>
3
+    <div class="flex">
4
+        <a class="picto content-link" href="{{ url_for('main.play', id=elem.id) }}">
5
+            {% include 'svg/small_play.svg' -%}
6
+        </a>
7
+        <div class="bloc name">
8
+            <h3> {{ elem.name }} </h3>
9
+            {% if elem.channel.name %}
10
+            <h3><a class="content-link" href="">{{ elem.channel.name|upper }}</a></h3>
11
+            {% endif %}
12
+        </div>
13
+    </div>
14
+    <span class="license">{{ elem.timestamp|format_date }} / {{ elem.license }}</span>
6 15
 
7
-    <p>CONTRIBUTEURS: </br>
8
-    {% for contributor in elem.contributors %}
16
+    {% if elem.collectives|length > 0 %}
17
+    <p class="marg decal">Par
18
+    {% for collective in elem.collectives %}
9 19
         <a class="content-link"
10
-            href="{{ url_for('main.contributor', id=contributor.id) }}">
11
-        {{ contributor.name -}}
20
+            href="{{ url_for('main.collective', id=collective.id) }}">
21
+        {{ collective.name -}}
12 22
         </a>
13 23
         {%- if not loop.last %}, {% endif %}
14 24
     {% endfor %}
15 25
     </p>
26
+    {% endif %}
16 27
 
17
-    </br>
18
-
19
-    <p>CHANNEL : {{ elem.channel.name }}</p>
20
-    <p>COLLECTIFS : </br>
21
-    {% for collective in elem.collectives %}
28
+    {% if elem.contributors|length > 0 %}
29
+    <p class="marg decal">Avec
30
+    {% for contributor in elem.contributors %}
22 31
         <a class="content-link"
23
-            href="{{ url_for('main.collective', id=collective.id) }}">
24
-        {{ collective.name -}}
32
+            href="{{ url_for('main.contributor', id=contributor.id) }}">
33
+        {{ contributor.name -}}
25 34
         </a>
26 35
         {%- if not loop.last %}, {% endif %}
27 36
     {% endfor %}
28 37
     </p>
38
+    {% endif %}
29 39
 
30
-    </br>
31
-
32
-    <p>PUBLICATION : {{ elem.timestamp|format_date }}</p>
33
-    <p>LICENCE : {{ elem.license }}</p>
34
-    </br>
40
+    {% if elem.description %}
41
+    <div class="marg2 decal">
42
+        {{ elem.description|safe }}
43
+    </div>
44
+    {% endif %}
35 45
 
36
-    <p>DESCRIPTION :</p>
37
-    {{ elem.description|safe }}
46
+    {% if elem.sections|length > 0 %}
47
+    <div class="marg2">
48
+        {% for section in elem.sections %}
49
+        <div class="section">
50
+            <div class="flex">
51
+                <div>
52
+                    <p class="bloc">{{ section.begin|format_date('%-M') }}'</p>
53
+                </div>
54
+                <div class="">
55
+                    <h4>{{ section.name }}</h4>
56
+                </div>
38 57
 
39
-    </br>
40
-
41
-    {% for section in elem.sections %}
42
-    <p>SECTIONS: </br>
43
-        {{ section.name }}
44
-        <a href="#">
45
-        {% for contributor in section.contributors %}
46
-            <a class="content-link"
47
-                href="{{ url_for('main.contributor', id=contributor.id) }}">
48
-            {{ contributor.name }}
49
-            </a>
50
-            {% if not loop.last %}, {% endif %}
58
+            </div>
59
+            <p class="decal">
60
+                {% if section.contributors|length > 0 %}
61
+                Par
62
+                <a href="#">
63
+                {% for contributor in section.contributors %}
64
+                    <a class="content-link"
65
+                        href="{{ url_for('main.contributor', id=contributor.id) }}">
66
+                    {{ contributor.name }}
67
+                    </a>
68
+                    {% if not loop.last %}, {% endif %}
69
+                {% endfor %}
70
+                </a>
71
+                {% endif %}
72
+            </p>
73
+        </div>
51 74
         {% endfor %}
52
-        </a>
53
-    </p>
54
-    {% endfor %}
55
-
56
-    </br>
75
+    </div>
76
+    {% endif %}
57 77
 
58
-    <p>TAGS : </br>
78
+    {% if elem.tags|length > 0 %}
79
+    <p class="tags decal marg2">Tags :
59 80
     {% for tag in elem.tags %}
60
-        {{ tag.name }}
81
+        <a>{{ tag.name }}</a>
61 82
         {% if not loop.last %}, {% endif %}
62 83
     {% endfor %}
63 84
     </p>
64
-
65
-    <p>MOOD : {{ elem.mood }}</p>
66
-    <p>MUSIC: {{ elem.music }}</p>
67
-
68
-
85
+    {% endif %}
69 86
 
70 87
 </section>

+ 1
- 1
app/templates/main_pages/blogs.html View File

@@ -14,7 +14,7 @@
14 14
     {% endif %}
15 15
 
16 16
     <p>{{ post.timestamp }}</p>
17
-    <p>{{ post.description }}</p>
17
+    {{ post.description|safe }}
18 18
 </div>
19 19
 {% endfor %}
20 20
 </section>

+ 2
- 4
app/templates/svg/small_play.svg View File

@@ -1,5 +1,3 @@
1
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 36.48 40">
2
-    <g class="line main-width black">
3
-        <polygon points="7.745,2.5 28.735,20 7.745,37.5"/>
4
-    </g>
1
+<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40">
2
+    <polygon class="line main-width black" points="15.778,8.889 15.778,31.111 26.889,20 "/>
5 3
 </svg>

Loading…
Cancel
Save