├── CNAME
├── _config.yml
├── assets
    ├── images
    │   ├── favicon.ico
    │   └── og-image.png
    ├── scripts
    │   └── index.js
    └── css
    │   └── style.css
├── .gitmodules
├── README.md
├── index.md
└── _layouts
    └── default.html


/CNAME:
--------------------------------------------------------------------------------
1 | manifestotech.org
2 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | title: Manifesto Tech
2 | highlighter: none
3 | data_dir: _manifesto


--------------------------------------------------------------------------------
/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manifestotech/manifesto-site/HEAD/assets/images/favicon.ico


--------------------------------------------------------------------------------
/assets/images/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/manifestotech/manifesto-site/HEAD/assets/images/og-image.png


--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "_manifesto"]
2 | 	path = _manifesto
3 | 	url = https://github.com/manifestotech/manifestotech.git
4 | 	branch = main
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Site do Manifesto Tech
2 | 
3 | Deploy no GitHub Pages usando Jekyll.
4 | 
5 | Os dados do Manifesto em si vêm do repo https://github.com/manifestotech/manifestotech via um submódulo.
6 | 


--------------------------------------------------------------------------------
/assets/scripts/index.js:
--------------------------------------------------------------------------------
 1 | (function main(){
 2 |     const container = document.querySelector(".manifest__assigners ul")
 3 |     const btn = document.querySelector(".show-more__btn")
 4 | 
 5 |     const buttonMessages = Array.of('data-show-less', 'data-show-more').map( attribute => btn.getAttribute(attribute) )
 6 | 
 7 |     const toggleAttribute = (element, attribute) => {
 8 | 
 9 |         const hasAttribute = element.hasAttribute(attribute)
10 | 
11 |         if( hasAttribute ){
12 |             element.removeAttribute(attribute)
13 |         } else {
14 |             element.setAttribute(attribute, true)
15 |         }
16 | 
17 |         return !(hasAttribute)
18 |     }
19 | 
20 |     const toggleIsOpen = (element) => element.classList.toggle("--open")
21 | 
22 |     const toggleMessage = (element, hasAttribute, [firstMessage, secondMessage] ) => {
23 |         element.textContent = (hasAttribute) ? firstMessage : secondMessage
24 |     }
25 | 
26 |     const toggleButton = (button, isExpanded) => {
27 |         toggleMessage(button, isExpanded, buttonMessages)
28 |         toggleIsOpen(button)
29 |     }
30 | 
31 |     function handleManifestButtonClick(){
32 |         const value = toggleAttribute(container, 'data-expanded')
33 | 
34 |         toggleButton(btn, value)
35 |         toggleIsOpen(container)
36 |     }
37 | 
38 |     
39 |     btn.addEventListener("click", handleManifestButtonClick)
40 | })()


--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
 1 | <main class="manifest">
 2 |     <section class="manifest__introduction">
 3 |         <div class="container-wrapper">
 4 |             <div id="manifesto" markdown="1" class="manifest__definition">{% include_relative _manifesto/manifesto.md %}</div>
 5 |         </div>
 6 |     </section>
 7 |     <section class="manifest__principles">
 8 |         <div id="principios" markdown="1" class="container-wrapper">{% include_relative _manifesto/principios.md %}</div>
 9 |     </section>
10 |     <section class="manifest__assigners">
11 |         <div id="signatarios" class="container-wrapper">
12 |             <h3>Signatários</h3>
13 |         
14 |             <ul>
15 |             {% for signatario in site.data.signatarios %}
16 |             <li>
17 |                 <strong translate="no">{{ signatario.nome }}</strong>
18 |                 <span>{{ signatario.cargo }}</span>
19 |                 {% if signatario.implementacao %}
20 |                 <a href="{{ signatario.implementacao}}" rel="noreferrer noopener" target="_blank"> Entenda as Ações </a>
21 |                 {% endif %}
22 |             </li>
23 |             {% endfor %}
24 |             </ul>
25 |             <button class="show-more__btn" data-show-more="Ver todos(as)" data-show-less="Ver menos" type="button">Ver Todas(os)</button>
26 |         </div>
27 |     </section>
28 |     <section class="faq">
29 |         <div id="faq" markdown="1" class="container-wrapper">{% include_relative _manifesto/perguntas_frequentes.md %}</div>
30 |     </section>
31 | </main>


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-BR">
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |         <meta property="og:title" content="ManifestoTech.org">
 8 |         <meta property="og:type" content="website">
 9 |         <meta property="og:image" content="https://manifestotech.org/assets/images/og-image.png">
10 |         <meta property="og:image:alt" content="Manifesto Tech">
11 |         <meta property="og:description" content="Manifesto para o mercado de tecnologia brasileiro expandir com transformação social.">
12 |         <link rel="icon" href="https://manifestotech.org/assets/images/favicon.ico" >
13 |         <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
14 |         <link rel="preconnect" href="https://fonts.googleapis.com">
15 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16 |         <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
17 |         <title>ManifestoTech.org</title>
18 |         <meta name="description" content="Manifesto para o mercado de tecnologia brasileiro expandir com transformação social.">
19 |       </head>
20 | 
21 |     <body>
22 |           <header class="header">
23 |             <div class="container-wrapper">
24 |                 <h1 class="header__title">Manifesto <strong class="header__title-decoration">Tech</strong></h1>
25 |                 <span class="header__decoration"></span>
26 |             </div>
27 |             <span class="header__decoration"></span>
28 |             </header>
29 |             {{ content }}
30 |         
31 |             <!-- Global site tag (gtag.js) - Google Analytics -->
32 |             <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZF6B3K9RS5"></script>
33 |             <script>
34 |               window.dataLayer = window.dataLayer || [];
35 |               function gtag(){dataLayer.push(arguments);}
36 |               gtag('js', new Date());
37 | 
38 |               gtag('config', 'G-ZF6B3K9RS5');
39 |             </script>
40 |             <script src="{{ "/assets/scripts/index.js" | relative_url }}"></script>
41 |     </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   padding: 0;
  3 |   margin: 0;
  4 |   position: relative;
  5 |   counter-reset: faq;
  6 | }
  7 | 
  8 | * {
  9 |   box-sizing: border-box;
 10 | }
 11 | 
 12 | details summary {
 13 |   list-style: none;
 14 |   cursor: pointer;
 15 | }
 16 | 
 17 | :root {
 18 |   --primary-color: #282828;
 19 |   --secondary: #444444;
 20 | }
 21 | 
 22 | .container-wrapper {
 23 |   position: relative;
 24 |   max-width: 1200px;
 25 |   margin: 0 auto;
 26 |   padding: 0 1rem 0 2.5rem;
 27 | }
 28 | 
 29 | .manifest__definition > p:last-child,
 30 | .manifest__principles .container-wrapper > h3 {
 31 |   margin-left: -25px;
 32 |   padding-left: 25px;
 33 |   border-left: 1px solid #282828;
 34 | }
 35 | 
 36 | .manifest .container-wrapper {
 37 |   font-family: "Space Mono", monospace;
 38 | }
 39 | 
 40 | .manifest__title-decoration,
 41 | .manifest__principles h3 > strong {
 42 |   background-color: #444444;
 43 |   color: white;
 44 | }
 45 | 
 46 | .header {
 47 |   padding-top: 3.125rem;
 48 |   position: relative;
 49 | }
 50 | 
 51 | .header .container-wrapper {
 52 |   padding-left: 1.125rem;
 53 | }
 54 | 
 55 | .header .container-wrapper > .header__decoration {
 56 |   display: none;
 57 | }
 58 | 
 59 | .header__title {
 60 |   font-size: 1.875rem;
 61 |   font-family: "Lexend", sans-serif;
 62 |   font-weight: bold;
 63 |   text-transform: uppercase;
 64 |   line-height: 3.125rem;
 65 | 
 66 |   color: #282828;
 67 | }
 68 | 
 69 | .header__title-decoration {
 70 |   display: block;
 71 |   color: white;
 72 | }
 73 | 
 74 | .header__decoration {
 75 |   display: block;
 76 |   height: 60px;
 77 |   min-width: 150px;
 78 |   bottom: -8px;
 79 |   background-color: #282828;
 80 |   position: absolute;
 81 |   z-index: -1;
 82 | }
 83 | 
 84 | .header__decoration::after {
 85 |   content: "";
 86 |   display: block;
 87 |   height: 2px;
 88 |   min-width: 150px;
 89 |   background-color: #282828;
 90 |   position: absolute;
 91 |   left: 300px;
 92 |   top: 50%;
 93 |   transform: translate(-100px, -50%);
 94 | }
 95 | 
 96 | .header::before {
 97 |   content: "";
 98 |   display: block;
 99 | 
100 |   position: absolute;
101 |   right: 0;
102 |   top: 50%;
103 | 
104 |   height: 280px;
105 |   width: 280px;
106 |   clip-path: circle(50% at 100% 50%);
107 | 
108 |   background-color: #f4f4f4;
109 |   z-index: -1;
110 | }
111 | 
112 | .header__title .manifest__title-decoration {
113 |   display: block;
114 |   text-align: center;
115 |   width: 30%;
116 |   max-width: 18.75rem;
117 | }
118 | 
119 | .manifest__definition {
120 |   margin-top: 1.875rem;
121 | }
122 | 
123 | .manifest__definition > h2{
124 |   color: #444444;
125 |   margin-bottom: 2rem;
126 | }
127 | 
128 | .manifest__definition > p{
129 |   font-size: 1.125rem;
130 |   margin-bottom: 2.3125rem;
131 | }
132 | 
133 | .manifest__definition > ul {
134 |   padding: 0;
135 |   margin-bottom: 3rem;
136 |   list-style-type: disclosure-closed;
137 | }
138 | 
139 | .manifest__definition > ul li {
140 |   font-size: 1.25rem;
141 |   color: #444444;
142 |   line-height: 1.875rem;
143 |   margin-left: -15px;
144 |   padding-left: 15px;
145 |   margin-bottom: 1.5rem;
146 | }
147 | 
148 | .manifest__definition > p:last-child {
149 |   position: relative;
150 |   color: #575757;
151 |   margin-bottom: 0;
152 |   padding-bottom: 3.75rem;
153 | }
154 | 
155 | .manifest__principles {
156 |   position: relative;
157 |   background-color: #f4f4f4;
158 |   padding-bottom: 2.85rem;
159 | }
160 | 
161 | .manifest__principles .container-wrapper > h3 {
162 |   margin-top: 0;
163 |   padding-top: 2.5rem;
164 |   line-height: 2.5rem;
165 |   font-size: 1.875rem;
166 |   font-weight: bold;
167 |   color: #444444;
168 |   max-width: 250px;
169 | }
170 | 
171 | .manifest__title-decoration,
172 | .manifest__principles h3 > strong {
173 |   padding: 0.25rem .65rem;
174 |   margin-left: -10px;
175 |   margin-top: 0.5rem;
176 |   line-height: 3.75rem;
177 | }
178 | 
179 | .manifest__principles .container-wrapper > ul {
180 |   padding: 0;
181 |   list-style-type: disclosure-closed;
182 | }
183 | 
184 | .manifest__principles .container-wrapper > ul li {
185 |   margin-bottom: 1.25rem;
186 |   line-height: 1.5rem;
187 |   margin-left: -15px;
188 |   padding-left: 15px;
189 |   color: #575757;
190 | }
191 | 
192 | .manifest__assigners {
193 |   margin-bottom: 3.75rem;
194 | }
195 | 
196 | .manifest__assigners  .container-wrapper > h3 {
197 |   font-size: 1.25rem;
198 |   line-height: 1.875rem;
199 |   color: #575757;
200 |   padding-top: 1rem;
201 |   margin-bottom: 2.1857rem;
202 |   max-width: 200px;
203 | }
204 | 
205 | .manifest__assigners .container-wrapper > ul {
206 |   list-style: none;
207 |   padding: 0;
208 |   position: relative;
209 |   height: 36rem;
210 |   overflow-y: hidden;
211 | }
212 | 
213 | .manifest__assigners .container-wrapper > ul::before {
214 |     content: '';
215 |     display: block;
216 |     position: absolute;
217 |     bottom: 0;
218 |     left: 0;
219 |     height: 100px;
220 |     width: 100%;
221 |     background-image: linear-gradient(transparent 0%, white 20%);
222 | 
223 | }
224 | 
225 | .manifest__assigners .container-wrapper > ul.--open {
226 |     transition: height 2s ease-in-out;
227 |     height: auto;
228 | }
229 | 
230 | .manifest__assigners .container-wrapper > ul.--open::before {
231 |     content: unset;
232 | }
233 | 
234 | .manifest__assigners .container-wrapper > ul li {
235 |   margin-bottom: 1.875rem;
236 | }
237 | 
238 | .manifest__assigners  .container-wrapper > ul li {
239 |   font-size: 0.8rem;
240 |   display: grid;
241 |   grid-template-rows: repeat(3, 1fr);
242 |   color: #575757;
243 | }
244 | 
245 | .manifest__assigners  .container-wrapper > ul li strong {
246 |     font-size: 0.95rem;
247 | }
248 | 
249 | .manifest__assigners .container-wrapper > ul li a {
250 |     align-self: center;
251 |     margin-top: .5rem;
252 |     padding: .25rem .5rem;
253 |     width: 50%;
254 |     transition: background-color .25s ease-in;
255 |     background-color: #575757;
256 |     border-radius: 5px;
257 |     color: white;
258 |     text-decoration: unset;
259 |     text-align: center;
260 | }
261 | 
262 | .show-more__btn {
263 |     color: #575757;
264 |     position: relative;
265 |     border: 2px solid;
266 |     border-radius: 0;
267 |     cursor: pointer;
268 |     padding: .85rem 3.25rem .85rem 1.25rem;
269 |     background-color: transparent;
270 |     font-family: "Space Mono", sans-serif;
271 |     font-weight: bold;
272 | }
273 | 
274 | .show-more__btn::after {
275 |     content: "+";
276 |     font-size: 1.25rem;
277 |     position: absolute;
278 |     top: 50%;
279 |     right: 20px;
280 |     transform: translateY(-50%);
281 | }
282 | 
283 | .show-more__btn:hover {
284 |     color: black;
285 | }
286 | 
287 | .show-more__btn.--open::after {
288 |     content: "-";
289 | }
290 | 
291 | .manifest__assigners .container-wrapper > ul li a:hover {
292 |     background-color: black;
293 | }
294 | 
295 | .faq {
296 |   padding-bottom: 10rem;
297 | }
298 | 
299 | .faq .container-wrapper {
300 |   padding-left: 0;
301 |   padding-right: 0;
302 | }
303 | 
304 | .faq details {
305 |   margin-left: 2rem;
306 |   margin-right: 2rem;
307 | }
308 | 
309 | .faq .container-wrapper > h3{
310 |   display: inline-block;
311 |   text-align: right;
312 |   text-transform: uppercase;
313 |   color: #444444;
314 |   font-size: 2.1875rem;
315 |   background-color: #f4f4f4;
316 |   padding: 1.25rem 1.25rem 1.25rem 4.375rem;
317 |   margin-bottom: 2.5rem;
318 | }
319 | 
320 | .faq details {
321 |   border-top: 1px solid #f1efef;
322 | }
323 | 
324 | .faq details p {
325 |   margin: 0 0 2.5rem;
326 | }
327 | 
328 | .faq details:last-child {
329 |   border-bottom: 1px solid #f1efef;
330 | }
331 | 
332 | .faq summary {
333 |   display: flex;
334 |   position: relative;
335 |   padding-right: 3rem;
336 |   color: #444444;
337 |   font-weight: bold;
338 |   padding: 1.7rem 1rem 1.7rem 0;
339 | }
340 | 
341 | .faq summary::before {
342 |   counter-increment: faq;
343 |   content: counter(faq) ".";
344 |   margin-right: 8px;
345 | }
346 | 
347 | .faq summary::after {
348 |   content: "+";
349 |   font-size: 2rem;
350 |   font-weight: normal;
351 |   color: #8e8e8e;
352 |   position: absolute;
353 |   top: 50%;
354 |   right: 0;
355 |   transform: translateY(-50%);
356 | }
357 | 
358 | .faq details[open] summary {
359 |   padding-bottom: 1rem;
360 | }
361 | 
362 | .faq details[open] summary::after {
363 |   content: "-";
364 | }
365 | 
366 | .faq {
367 |   color: #575757;
368 | }
369 | 
370 | .faq summary::marker {
371 |   content: '';
372 | }
373 | 
374 | @media (min-width: 450px){
375 |   .manifest__assigners  .container-wrapper > ul {
376 |     display: grid;
377 |     grid-template-columns: repeat(auto-fit, minmax(100px, 180px));
378 |     gap: 1.875rem;
379 |   }
380 | 
381 |   .manifest__assigners .container-wrapper > ul::before {
382 |     background-image: linear-gradient(transparent 10%, white 50%);
383 |   }
384 | 
385 |   .manifest__assigners .container-wrapper > ul::before {
386 |     height: 50px;
387 |   }
388 | 
389 |   .manifest__assigners  .container-wrapper > ul li{
390 |     margin-bottom: unset;
391 |   }
392 | 
393 |   .manifest__assigners  .container-wrapper > ul li a{
394 |     width: auto;
395 |   }
396 | 
397 |   .show-more__btn {
398 |     margin-top: 1.65rem;
399 |   }
400 | }
401 | 
402 | @media (min-width: 1000px) {
403 | 
404 |   .manifest__definition > p:last-child,
405 |   .manifest__principles .container-wrapper > h3 {
406 |     margin-left: unset;
407 |     padding-left: unset;
408 |     border: unset;
409 |   }
410 | 
411 |   .container-wrapper {
412 |     padding-left: 16rem;
413 |     padding-right: 5rem;    
414 |   }
415 |   
416 |   .faq details {
417 |     margin-left: 16rem;
418 |     margin-right: 5rem;
419 |   }
420 | 
421 |   .header__title {
422 |     font-size: 4.375rem;
423 |     line-height: 4.375rem;
424 |   }
425 | 
426 |   .header .container-wrapper > .header__decoration {
427 |     display: block;
428 |     min-width: 220px;
429 |     height: 80px;
430 |     left: -2px;
431 |   }
432 | 
433 |   .header .container-wrapper > .header__decoration::after {
434 |     min-width: 500px;
435 |     left: 358px;
436 |   }
437 | 
438 |   .header > .header__decoration {
439 |     display: none;
440 |   }
441 | 
442 |   .manifest__title,
443 |   .manifest__definition > p{
444 |     font-size: 1.125rem;
445 |   }
446 | 
447 |   .manifest__definition > p:last-child {
448 |     max-width: 760px;
449 |     font-size: 1.125rem;
450 |   }
451 | 
452 |   .manifest__definition > p:last-child::after {
453 |     left: -80px;
454 |     width: 2px;
455 |     height: 450px;
456 |   }
457 | 
458 |   .manifest__principles .container-wrapper::after {
459 |     content: "";
460 |     display: block;
461 |     width: 2px;
462 |     height: 400px;
463 |     background-color: #444444;
464 |     position: absolute;
465 |     top: -60px;
466 |     left: 100px;
467 |   }
468 | 
469 |   .faq .container-wrapper > h3{
470 |     margin-left: 6.25rem;
471 |     padding-right: 3rem;
472 |     padding-left: 155px;
473 |     text-align: left;
474 |   }
475 | 
476 |   .manifest__principles .container-wrapper > h3 {
477 |     font-size: 2.1875rem;
478 |     line-height: 3.5rem;
479 |     margin-bottom: 3.5rem;
480 |     margin-top: 0;
481 |     padding-top: 2.1875rem;
482 |     max-width: 450px;
483 |   }
484 | 
485 |   .manifest__definition {
486 |     max-width: 760px;
487 |   }
488 | 
489 |   .manifest__principles .container-wrapper > ul {
490 |     max-width: 850px;
491 |   }
492 | 
493 |   .manifest__principles .container-wrapper > ul li {
494 |     font-size: 1.125rem;
495 |     margin-bottom: 2.5rem;
496 |   }
497 | 
498 |   .manifest__assigners {
499 |     position: relative;
500 |   }
501 | 
502 |   .manifest__assigners::after {
503 |     content: "";
504 |     position: absolute;
505 |     top: 50%;
506 |     transform: translateY(-50%);
507 |     left: 0;
508 |     background-color: #282828;
509 |     height: 1px;
510 |     min-width: 180px;
511 |   }
512 | 
513 |   .manifest__assigners  .container-wrapper > h3 {
514 |     margin-top: 3.75rem;
515 |     margin-bottom: 5rem;
516 |     font-size: 1.5rem;
517 |   }
518 | 
519 |   .manifest__assigners  .container-wrapper > ul {
520 |     max-width: 900px;
521 |   }
522 | 
523 |   .faq details {
524 |     font-size: 1.125rem;
525 |   }
526 | }
527 | 
528 | @media (min-width: 1200px){
529 |   .manifest__assigners::after{
530 |     width: 15%;
531 |   }
532 | }
533 | 
534 | @media (min-width: 1440px){
535 |   .manifest__assigners::after {
536 |     width: 23%;  
537 |   }
538 | }
539 | 
540 | 
541 | @media (min-width: 2000px) {
542 |   .header::before{
543 |     content: unset;
544 |   }
545 | 
546 |   .header .container-wrapper::after {
547 |     content: "";
548 |     display: block;
549 |     position: absolute;
550 |     right: -100px;
551 |     top: -50px;
552 |     height: 280px;
553 |     width: 280px;
554 |     clip-path: circle(50% at 50% 50% );
555 |     background-color: #f4f4f4;
556 |   }
557 | }
558 | 


--------------------------------------------------------------------------------