Browse Source

Add member section

master
Alfred 1 year ago
parent
commit
6fca9e0388

+ 11
- 0
README.md View File

@@ -24,3 +24,14 @@ You can add a `production.toml`file to the root folder. It will be taken into ac
24 24
   form_url = " < To set the end-point url to send the contact form >"
25 25
 ```
26 26
 
27
+## How to upgrade this code?
28
+
29
+You can change the structure, the content and see those changes executing:
30
+```
31
+fab serve
32
+```
33
+
34
+To update styles you will need the `sass` tool. Go to the path: `/themes/personal/static/styles/scss` and execute:
35
+```
36
+sass --watch main.scss:../stylesheet.cs
37
+```

+ 15
- 10
config.toml View File

@@ -357,16 +357,21 @@ When I discovered it, I did my best to cooperate with them.
357 357
 [ Params.member ]
358 358
     title = "Member of"
359 359
 
360
-    [[ Params.volunteer.position ]]
361
-    organization = "Gamestar(t)"
362
-    position = "Companion"
363
-    website = "http://gamestart.arsgames.net/"
364
-    startDate = "2015, April"
365
-    endDate = "2015, September"
366
-    summary = """
367
-Gamestar(t) is a project that brings together art, videogames, and technology. All of these elements are connected using an innovative theory in pedagogy. 
368
-When I discovered it, I did my best to cooperate with them.
369
-"""
360
+    [[ Params.member.membership ]]
361
+    text = """[![FSF logo](../static/fsf.png)](https://www.fsf.org/)
362
+    
363
+    Free Software Foundation"""
364
+
365
+    [[ Params.member.membership ]]
366
+    text = """[![PyBCN logo](../static/pybcn.png)](https://pybcn.org/association/info/)
367
+    
368
+    PyBCN"""
369
+
370
+    [[ Params.member.membership ]]
371
+    text = """[![Codi Cooperatiu logo](../static/codi.little.png)](https://codi.coop)
372
+    
373
+    Codi Cooperatiu"""
374
+    
370 375
 
371 376
 [ Params.mainData ]
372 377
     title = "Information"

BIN
content/static/codi.little.png View File


BIN
content/static/fsf.png View File


BIN
content/static/pybcn.png View File


+ 1
- 0
themes/personal/layouts/index.html View File

@@ -32,6 +32,7 @@
32 32
         {{ partial "education.html" . }}
33 33
         {{ partial "projects.html" . }}
34 34
         {{ partial "volunteer.html" . }}
35
+        {{ partial "member.html" . }}
35 36
         {{ partial "mainData.html" . }}
36 37
         {{ partial "contact.html" . }}
37 38
     </main>

+ 12
- 0
themes/personal/layouts/partials/member.html View File

@@ -0,0 +1,12 @@
1
+<section id="member" class="member">
2
+    <div class="container">
3
+        <h3>{{ markdownify .Site.Params.member.title }}</h3>
4
+        <div class="membership">
5
+        {{ range .Site.Params.member.membership }}
6
+        <div>
7
+            {{ markdownify .text }}
8
+        </div>
9
+        {{ end }}
10
+        </div>
11
+    </div>
12
+</section>

+ 15
- 0
themes/personal/static/styles/scss/sections.scss View File

@@ -118,6 +118,21 @@
118 118
     }
119 119
 }
120 120
 
121
+#member {
122
+    .membership {
123
+        display: flex;
124
+        flex-direction: row;
125
+        justify-content: space-around;
126
+
127
+        div {
128
+            display: flex;
129
+            flex-direction: column;
130
+            justify-content: center;
131
+            align-items: center;
132
+        }
133
+    }
134
+}
135
+
121 136
 #contact {
122 137
     .form-contact {
123 138
         width: 50%;

+ 194
- 256
themes/personal/static/styles/stylesheet.css View File

@@ -5,8 +5,7 @@ body {
5 5
   font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
6 6
   background-color: #1C2532;
7 7
   color: #A9C7DF;
8
-  font-size: 1.1rem;
9
-}
8
+  font-size: 1.1rem; }
10 9
 
11 10
 h1 {
12 11
   margin: 0;
@@ -14,37 +13,31 @@ h1 {
14 13
   font-weight: normal;
15 14
   font-size: 2.5em;
16 15
   color: #FAFBFC;
17
-  font-family: "Lobster", "Helvetica Neue", Helvetica, Arial, sans-serif;
18
-}
16
+  font-family: "Lobster", "Helvetica Neue", Helvetica, Arial, sans-serif; }
19 17
 
20 18
 h2 {
21 19
   color: crimson;
22 20
   font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
23 21
   font-size: 2em;
24 22
   margin: 0;
25
-  padding: 0;
26
-}
23
+  padding: 0; }
27 24
 
28 25
 h3 {
29 26
   border-bottom: 1px solid #A9C7DF;
30 27
   font-size: 1.3em;
31
-  margin-top: 0;
32
-}
28
+  margin-top: 0; }
33 29
 
34 30
 h4 {
35 31
   margin: 40px 0 0 0;
36
-  color: #FAFBFC;
37
-}
32
+  color: #FAFBFC; }
38 33
 
39 34
 p {
40 35
   margin: 0;
41
-  line-height: 150%;
42
-}
36
+  line-height: 150%; }
43 37
 
44 38
 a {
45 39
   color: #0194EF;
46
-  text-decoration: none;
47
-}
40
+  text-decoration: none; }
48 41
 
49 42
 section {
50 43
   width: 100%;
@@ -55,135 +48,106 @@ section {
55 48
   justify-items: center;
56 49
   align-content: center;
57 50
   align-items: center;
58
-  background-color: #323E4F;
59
-}
51
+  background-color: #323E4F; }
60 52
 
61 53
 @media (max-width: 1000px) {
62 54
   h1 {
63
-    text-align: center;
64
-  }
55
+    text-align: center; }
65 56
 
66 57
   h2 {
67
-    text-align: center;
68
-  }
69
-}
58
+    text-align: center; } }
70 59
 header {
71 60
   height: 100vh;
72 61
   width: 100%;
73 62
   display: flex;
74
-  flex-direction: row;
75
-}
76
-header .mid {
77
-  width: 50%;
78
-  height: 100%;
79
-  display: flex;
80
-  align-items: flex-end;
81
-  justify-content: right;
82
-  flex-direction: column;
83
-  background-color: #323E4F;
84
-}
85
-header .mid .title {
86
-  height: 100%;
87
-  display: flex;
88
-  flex-direction: row;
89
-  align-items: center;
90
-  justify-content: center;
91
-  margin: auto;
92
-}
93
-@media (max-width: 1000px) {
94
-  header .mid .title {
95
-    flex-direction: column;
96
-  }
97
-}
98
-header .mid .title div {
99
-  text-align: right;
100
-  padding-right: 20px;
101
-}
102
-header .mid .title img {
103
-  border-radius: 50%;
104
-  width: 170px;
105
-  height: 170px;
106
-  padding: 0;
107
-}
108
-header .mid ul {
109
-  display: flex;
110
-  flex-wrap: wrap;
111
-  flex-direction: row-reverse;
112
-  width: auto;
113
-  padding: 0;
114
-  margin: 10px 0 0 0;
115
-}
116
-@media (max-width: 1000px) {
117
-  header .mid ul {
118
-    margin: 10px 0;
119
-    justify-content: center;
120
-  }
121
-}
122
-header .mid ul li {
123
-  list-style: none;
124
-  color: #1C2532;
125
-  border: 2px solid #1C2532;
126
-  border-radius: 10%;
127
-  background-color: #FAFBFC;
128
-  cursor: pointer;
129
-  padding: 5px 10px;
130
-  margin-left: 10px;
131
-}
132
-header .mid ul li a {
133
-  color: #1C2532;
134
-}
135
-header .mid .web-intro {
136
-  height: 100%;
137
-  flex-direction: column;
138
-  align-items: flex-end;
139
-  justify-content: flex-end;
140
-  margin-bottom: 20px;
141
-}
142
-header .mid .web-intro span {
143
-  background-color: white;
144
-  padding: 20px;
145
-}
146
-@media (min-width: 1000px) {
147
-  header .mid2 {
148
-    background-image: url("/static/background.jpg");
149
-    background-size: cover;
150
-    background-repeat: no-repeat;
151
-    background-position: center center;
152
-    justify-content: left;
153
-  }
154
-}
155
-@media (max-width: 1000px) {
156
-  header .mid2 {
157
-    display: none;
158
-  }
63
+  flex-direction: row; }
159 64
   header .mid {
160
-    width: 100%;
161
-  }
162
-}
65
+    width: 50%;
66
+    height: 100%;
67
+    display: flex;
68
+    align-items: flex-end;
69
+    justify-content: right;
70
+    flex-direction: column;
71
+    background-color: #323E4F; }
72
+    header .mid .title {
73
+      height: 100%;
74
+      display: flex;
75
+      flex-direction: row;
76
+      align-items: center;
77
+      justify-content: center;
78
+      margin: auto; }
79
+      @media (max-width: 1000px) {
80
+        header .mid .title {
81
+          flex-direction: column; } }
82
+      header .mid .title div {
83
+        text-align: right;
84
+        padding-right: 20px; }
85
+      header .mid .title img {
86
+        border-radius: 50%;
87
+        width: 170px;
88
+        height: 170px;
89
+        padding: 0; }
90
+    header .mid ul {
91
+      display: flex;
92
+      flex-wrap: wrap;
93
+      flex-direction: row-reverse;
94
+      width: auto;
95
+      padding: 0;
96
+      margin: 10px 0 0 0; }
97
+      @media (max-width: 1000px) {
98
+        header .mid ul {
99
+          margin: 10px 0;
100
+          justify-content: center; } }
101
+      header .mid ul li {
102
+        list-style: none;
103
+        color: #1C2532;
104
+        border: 2px solid #1C2532;
105
+        border-radius: 10%;
106
+        background-color: #FAFBFC;
107
+        cursor: pointer;
108
+        padding: 5px 10px;
109
+        margin-left: 10px; }
110
+        header .mid ul li a {
111
+          color: #1C2532; }
112
+    header .mid .web-intro {
113
+      height: 100%;
114
+      flex-direction: column;
115
+      align-items: flex-end;
116
+      justify-content: flex-end;
117
+      margin-bottom: 20px; }
118
+      header .mid .web-intro span {
119
+        background-color: white;
120
+        padding: 20px; }
121
+  @media (min-width: 1000px) {
122
+    header .mid2 {
123
+      background-image: url("/static/background.jpg");
124
+      background-size: cover;
125
+      background-repeat: no-repeat;
126
+      background-position: center center;
127
+      justify-content: left; } }
128
+  @media (max-width: 1000px) {
129
+    header .mid2 {
130
+      display: none; }
131
+    header .mid {
132
+      width: 100%; } }
163 133
 
164 134
 .container {
165 135
   width: 80%;
166
-  padding: 40px 0;
167
-}
168
-@media (max-width: 1000px) {
169
-  .container {
170
-    width: 95%;
171
-  }
172
-}
136
+  padding: 40px 0; }
137
+  @media (max-width: 1000px) {
138
+    .container {
139
+      width: 95%; } }
173 140
 
174 141
 .date {
175
-  color: lightslategray;
176
-}
142
+  color: lightslategray; }
177 143
 
178 144
 .give-me-some-space {
179
-  margin-right: 20px;
180
-}
145
+  margin-right: 20px; }
181 146
 
182 147
 #introduction {
183 148
   background-color: #1C2532;
184 149
   display: flex;
185
-  flex-direction: column;
186
-}
150
+  flex-direction: column; }
187 151
 
188 152
 .introduction {
189 153
   width: 50%;
@@ -197,41 +161,33 @@ header .mid .web-intro span {
197 161
   justify-items: center;
198 162
   align-content: center;
199 163
   align-items: center;
200
-  text-align: center;
201
-}
202
-@media (max-width: 1000px) {
203
-  .introduction {
204
-    width: 80%;
205
-  }
206
-}
207
-.introduction i {
208
-  margin-right: 15px;
209
-}
210
-.introduction .button {
211
-  display: inline-block;
212
-  padding: 10px 30px;
213
-  color: #FAFBFC;
214
-  background-color: #323E4F;
215
-  cursor: pointer;
216
-  margin-top: 25px;
217
-  font-weight: bold;
218
-  font-size: 1.2rem;
219
-  text-align: center;
220
-}
221
-.introduction .button:hover {
222
-  background-color: #1C2532;
223
-}
164
+  text-align: center; }
165
+  @media (max-width: 1000px) {
166
+    .introduction {
167
+      width: 80%; } }
168
+  .introduction i {
169
+    margin-right: 15px; }
170
+  .introduction .button {
171
+    display: inline-block;
172
+    padding: 10px 30px;
173
+    color: #FAFBFC;
174
+    background-color: #323E4F;
175
+    cursor: pointer;
176
+    margin-top: 25px;
177
+    font-weight: bold;
178
+    font-size: 1.2rem;
179
+    text-align: center; }
180
+    .introduction .button:hover {
181
+      background-color: #1C2532; }
224 182
 
225 183
 #presentation p {
226 184
   margin: 0;
227 185
   margin-top: 20px;
228
-  padding: 0;
229
-}
186
+  padding: 0; }
230 187
 #presentation img {
231 188
   display: block;
232 189
   width: 125px;
233
-  margin: auto;
234
-}
190
+  margin: auto; }
235 191
 
236 192
 #profile ul {
237 193
   display: flex;
@@ -239,118 +195,103 @@ header .mid .web-intro span {
239 195
   flex-direction: row;
240 196
   width: auto;
241 197
   padding: 0;
242
-  margin: 5px 0 0 0;
243
-}
244
-#profile ul li {
245
-  list-style: none;
246
-  color: #3B5998;
247
-  border: 2px solid #3B5998;
248
-  border-radius: 100px;
249
-  background-color: #FAFBFC;
250
-  cursor: default;
251
-  padding: 5px 10px;
252
-  margin-right: 10px;
253
-  font-size: 0.8rem;
254
-  margin-top: 5px;
255
-}
198
+  margin: 5px 0 0 0; }
199
+  #profile ul li {
200
+    list-style: none;
201
+    color: #3B5998;
202
+    border: 2px solid #3B5998;
203
+    border-radius: 100px;
204
+    background-color: #FAFBFC;
205
+    cursor: default;
206
+    padding: 5px 10px;
207
+    margin-right: 10px;
208
+    font-size: 0.8rem;
209
+    margin-top: 5px; }
256 210
 
257 211
 .online-profiles {
258 212
   display: flex;
259 213
   flex-wrap: wrap;
260 214
   list-style: none;
261 215
   padding: 0;
262
-  margin: 10px 0;
263
-}
264
-.online-profiles li {
265
-  margin-right: 25px;
266
-}
267
-.online-profiles a {
268
-  color: lightslategray;
269
-}
270
-.online-profiles a:hover {
271
-  color: #0194EF;
272
-}
216
+  margin: 10px 0; }
217
+  .online-profiles li {
218
+    margin-right: 25px; }
219
+  .online-profiles a {
220
+    color: lightslategray; }
221
+    .online-profiles a:hover {
222
+      color: #0194EF; }
223
+
224
+#member .membership {
225
+  display: flex;
226
+  flex-direction: row;
227
+  justify-content: space-around; }
228
+  #member .membership div {
229
+    display: flex;
230
+    flex-direction: column;
231
+    justify-content: center;
232
+    align-items: center; }
273 233
 
274 234
 #contact .form-contact {
275 235
   width: 50%;
276 236
   display: flex;
277 237
   flex-direction: column;
278
-  margin: 30px auto;
279
-}
280
-@media (max-width: 1000px) {
281
-  #contact .form-contact {
282
-    width: 100%;
283
-  }
284
-}
285
-#contact .form-contact input, #contact .form-contact textarea {
286
-  padding: 10px;
287
-  margin: 10px 0;
288
-  border-radius: 5px;
289
-  border: 0;
290
-  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5);
291
-  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
292
-  font-size: 1.1rem;
293
-  color: #323E4F;
294
-}
295
-#contact .form-contact textarea {
296
-  overflow: auto;
297
-  min-height: 200px;
298
-}
299
-#contact .form-contact .form-row {
300
-  display: flex;
301
-  justify-content: space-between;
302
-  width: 100%;
303
-}
304
-@media (max-width: 1000px) {
238
+  margin: 30px auto; }
239
+  @media (max-width: 1000px) {
240
+    #contact .form-contact {
241
+      width: 100%; } }
242
+  #contact .form-contact input, #contact .form-contact textarea {
243
+    padding: 10px;
244
+    margin: 10px 0;
245
+    border-radius: 5px;
246
+    border: 0;
247
+    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5);
248
+    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
249
+    font-size: 1.1rem;
250
+    color: #323E4F; }
251
+  #contact .form-contact textarea {
252
+    overflow: auto;
253
+    min-height: 200px; }
305 254
   #contact .form-contact .form-row {
306
-    flex-direction: column;
307
-  }
308
-}
309
-#contact .form-contact .form-row input, #contact .form-contact .form-row textarea {
310
-  width: 100%;
311
-}
312
-@media (max-width: 1000px) {
313
-  #contact .form-contact .form-row input, #contact .form-contact .form-row textarea {
314
-    width: auto;
315
-  }
316
-}
317
-@media (min-width: 1000px) {
318
-  #contact .form-contact .form-row input:first-child, #contact .form-contact .form-row textarea:first-child {
319
-    margin-right: 10px;
320
-  }
321
-  #contact .form-contact .form-row input:last-child, #contact .form-contact .form-row textarea:last-child {
322
-    margin-left: 10px;
323
-  }
324
-}
325
-#contact .form-contact #form-submit {
326
-  margin: auto;
327
-}
328
-#contact .form-contact #form-submit input[type=submit], #contact .form-contact #form-submit textarea[type=submit] {
329
-  border-style: none;
330
-  cursor: pointer;
331
-  padding: 10px 50px;
332
-  font-size: 1.2rem;
333
-  margin: auto;
334
-}
335
-#contact .form-contact #form-thankyou {
336
-  text-align: center;
337
-  font-size: 1.2rem;
338
-  color: crimson;
339
-  font-weight: bold;
340
-  padding: 30px;
341
-}
255
+    display: flex;
256
+    justify-content: space-between;
257
+    width: 100%; }
258
+    @media (max-width: 1000px) {
259
+      #contact .form-contact .form-row {
260
+        flex-direction: column; } }
261
+    #contact .form-contact .form-row input, #contact .form-contact .form-row textarea {
262
+      width: 100%; }
263
+      @media (max-width: 1000px) {
264
+        #contact .form-contact .form-row input, #contact .form-contact .form-row textarea {
265
+          width: auto; } }
266
+      @media (min-width: 1000px) {
267
+        #contact .form-contact .form-row input:first-child, #contact .form-contact .form-row textarea:first-child {
268
+          margin-right: 10px; }
269
+        #contact .form-contact .form-row input:last-child, #contact .form-contact .form-row textarea:last-child {
270
+          margin-left: 10px; } }
271
+  #contact .form-contact #form-submit {
272
+    margin: auto; }
273
+    #contact .form-contact #form-submit input[type=submit], #contact .form-contact #form-submit textarea[type=submit] {
274
+      border-style: none;
275
+      cursor: pointer;
276
+      padding: 10px 50px;
277
+      font-size: 1.2rem;
278
+      margin: auto; }
279
+  #contact .form-contact #form-thankyou {
280
+    text-align: center;
281
+    font-size: 1.2rem;
282
+    color: crimson;
283
+    font-weight: bold;
284
+    padding: 30px; }
342 285
 
343 286
 #panel-info {
344 287
   margin: 0;
345 288
   padding: 0;
346
-  line-height: 0;
347
-}
348
-#panel-info svg {
349
-  margin: 0;
350
-  padding: 0;
351
-  line-height: 0;
352
-  fill: #FAFBFC;
353
-}
289
+  line-height: 0; }
290
+  #panel-info svg {
291
+    margin: 0;
292
+    padding: 0;
293
+    line-height: 0;
294
+    fill: #FAFBFC; }
354 295
 
355 296
 #panel-content {
356 297
   border: 4px solid #FAFBFC;
@@ -359,20 +300,17 @@ header .mid .web-intro span {
359 300
   padding: 10px 20px;
360 301
   border-radius: 25px;
361 302
   font-size: 0.9rem;
362
-  text-align: center;
363
-}
303
+  text-align: center; }
364 304
 
365 305
 footer {
366 306
   font-size: 0.8rem;
367 307
   display: flex;
368 308
   width: 100%;
369
-  justify-content: center;
370
-}
371
-footer div {
372
-  width: 25%;
373
-  min-width: 250px;
374
-  text-align: center;
375
-  margin-bottom: 50px;
376
-}
309
+  justify-content: center; }
310
+  footer div {
311
+    width: 25%;
312
+    min-width: 250px;
313
+    text-align: center;
314
+    margin-bottom: 50px; }
377 315
 
378 316
 /*# sourceMappingURL=stylesheet.css.map */

+ 7
- 1
themes/personal/static/styles/stylesheet.css.map
File diff suppressed because it is too large
View File


Loading…
Cancel
Save