From 7cbbdf2f1a1101c837419d16d8936147246d6ef5 Mon Sep 17 00:00:00 2001 From: Gianmarco Pettinato Date: Mon, 18 Apr 2022 15:36:18 +0200 Subject: [PATCH] wip: new theme --- Jenkinsfile | 1 + src/app.scss | 3 - src/elements/AboutMe.svelte | 166 ++++--------- src/elements/Contacts.svelte | 123 ++++------ src/elements/JobElement.svelte | 72 ++++++ src/elements/Jobs.svelte | 124 +--------- src/elements/Menu.svelte | 157 ++++++------ src/elements/Training.svelte | 135 +++++------ src/model/jobs.json | 8 +- src/routes/index.svelte | 171 +++++++------- static/breakpoints.scss | 2 + static/colors.scss | 2 +- static/elements.scss | 420 ++++++++++++++++++++++++++++++++- static/main.css | 3 +- 14 files changed, 813 insertions(+), 574 deletions(-) create mode 100644 Jenkinsfile create mode 100644 src/elements/JobElement.svelte create mode 100644 static/breakpoints.scss diff --git a/Jenkinsfile b/Jenkinsfile new file mode 100644 index 0000000..81750b9 --- /dev/null +++ b/Jenkinsfile @@ -0,0 +1 @@ +{ \ No newline at end of file diff --git a/src/app.scss b/src/app.scss index 65a0846..e69de29 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,3 +0,0 @@ -:root { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -} diff --git a/src/elements/AboutMe.svelte b/src/elements/AboutMe.svelte index cff4ece..71430fa 100644 --- a/src/elements/AboutMe.svelte +++ b/src/elements/AboutMe.svelte @@ -1,130 +1,60 @@ -
-
profile -
-

Gianmarco Pettinato

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

- {who[currentLanguage]} -

-
-
- curriculum_it.pdf - curriculum_en.pdf -
+ +
+ +
+

+ {who[currentLanguage]} +

+
+
+ + +
+ diff --git a/src/elements/Contacts.svelte b/src/elements/Contacts.svelte index 1b70954..9dce0ef 100644 --- a/src/elements/Contacts.svelte +++ b/src/elements/Contacts.svelte @@ -1,81 +1,48 @@ -
-
-
profile
- -
+ +
+
profile
+
+ \ No newline at end of file + @import './static/elements.scss'; + @import './static/breakpoints.scss'; + .contacts { + width: 80%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: auto; + } + ul { + text-align: justify; + list-style-type: none; + white-space: nowrap; + } + @media screen and (min-width: $min-tablet) { + .contacts { + width: 80%; + flex-direction: row; + margin: auto; + } + } + diff --git a/src/elements/JobElement.svelte b/src/elements/JobElement.svelte new file mode 100644 index 0000000..2a44493 --- /dev/null +++ b/src/elements/JobElement.svelte @@ -0,0 +1,72 @@ + + +
+

{job.title[currentLanguage]}

+
+
+ {#each job.images as image} + {image} + {/each} +
+
+ {@html md.render(job.content[currentLanguage])} +
+
+
+ {#if job.year.lenght != 0} + Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if} + {/if} +
+ {#if job.collaborators.length != 0} + Collab: + {/if} + {#each job.collaborators as collaborator, index} + {collaborator.name} {collaborator.surname}{index != + job.collaborators.length - 1 + ? ', ' + : ''} + {/each} +
+
+ {#if job.languages.length != 0} + Lang: + {/if} + {#each job.languages as language, index} + {language}{index != job.languages.length - 1 ? ', ' : ''} + {/each} +
+
+ {#if job.tecnologies.length != 0} + Tech: + {/if} + {#each job.tecnologies as tecnology, index} + {tecnology}{index != job.tecnologies.length - 1 ? ', ' : ''} + {/each} +
+
+
+ + diff --git a/src/elements/Jobs.svelte b/src/elements/Jobs.svelte index e6e027c..67919ac 100644 --- a/src/elements/Jobs.svelte +++ b/src/elements/Jobs.svelte @@ -1,128 +1,14 @@ -
+
{#each jobs as job } -
-

{job.title[currentLanguage]}

-
-
- {#each job.images as image } - {image} - {/each} -
-
- {@html md.render(job.content[currentLanguage])} -
-
-
- {#if job.year.lenght!=0} - Date: {job.year.start}{#if job.year.end.length!=0}; {job.year.end} {/if} - {/if} -
- {#if job.collaborators.length!=0} - Collab: - {/if} - {#each job.collaborators as collaborator, index } - {collaborator.name} {collaborator.surname}{index!=job.collaborators.length-1?', ':''} - {/each} -
-
- {#if job.languages.length!=0} - Lang: - {/if} - {#each job.languages as language,index } - {language}{index!=job.languages.length-1?', ':''} - {/each} -
-
- {#if job.tecnologies.length!=0} - Tech: - {/if} - {#each job.tecnologies as tecnology, index } - {tecnology}{index!=job.tecnologies.length-1?', ':''} - {/each} -
-
-
+ {/each}
- diff --git a/src/elements/Menu.svelte b/src/elements/Menu.svelte index bc912c3..7b726d2 100644 --- a/src/elements/Menu.svelte +++ b/src/elements/Menu.svelte @@ -1,86 +1,85 @@
-
- {menu.home[currentLanguage]} - {menu.job[currentLanguage]} - {menu.school[currentLanguage]} - {menu.portfolio[currentLanguage]} - {menu.contacts[currentLanguage]} -
+
+ + {menu.home[currentLanguage]} + + {menu.job[currentLanguage]} + + {menu.school[currentLanguage]} + + {menu.portfolio[currentLanguage]} + + {menu.contacts[currentLanguage]} +
\ No newline at end of file + @import './static/elements.scss'; + @import './static/breakpoints.scss'; + @import '/node_modules/@fortawesome/fontawesome-free/css/all.css'; + .div-menu { + width: 90%; + max-width: 1024px; + } + .wrapper { + width: 100%; + display: flex; + } + a { + border: solid black; + width: 15%; + font-size: 20px; + margin: auto; + text-align: center; + } + @media screen and (max-width: $min-tablet) { + .hide { + display: none; + } + } + diff --git a/src/elements/Training.svelte b/src/elements/Training.svelte index 20f6914..a4d886d 100644 --- a/src/elements/Training.svelte +++ b/src/elements/Training.svelte @@ -1,84 +1,61 @@ -
- {#each training as school } -
- school logo -
-

{school.title[currentLanguage]}

-

{school.content[currentLanguage]}

-

{school.year.start} - {school.year.end}

-
-
- {/each} + +
+ {#each training as school} +
+ school logo +
+

{school.title[currentLanguage]}

+

{school.content[currentLanguage]}

+

{school.year.start} - {school.year.end}

+
+
+ {/each}
+ \ No newline at end of file + @media screen and (min-width: $min-tablet) { + .element { + flex-direction: row; + div { + width: 50%; + margin-right: 0; + } + img { + margin: auto; + } + } + } + diff --git a/src/model/jobs.json b/src/model/jobs.json index 14aa10c..e6e65d7 100644 --- a/src/model/jobs.json +++ b/src/model/jobs.json @@ -35,8 +35,8 @@ }, "title": {"en":"Jatus.tech my start-up","it":"La mia start-up Jatus.tech"}, "content": { - "en":"Through the 2021, I've worked to begin my independent activity base on my idea of business. To do so, I learnt different practices and filled many roles:
\n- Create a work's infrastructure, mainly create a centralized resource on the server:\n - Manage the **GNU\/Linux** server with \"Unraid\" as distribution.\n - Manage all the services using **Docker**:\n - **GitLab**, with the runner for CI\/CD, other than the software repositories I managed to setup:\n - package **npm** repository\n - **Docker** repository\n - **NginxProxyManager** to handle the public services in reverse proxy\n - **SonarQube** to automatically verify the software quality\n - Manage all the virtual machines to develop and deploy software in the staging environment\n - Project and develop the software, main activity of this endeavour:\n - Project the software architecture\n - Project the database\n - Implement the software based on the architecture:\n - Back-end **TypeScript** on **AWS-Lambda** platform with **Serverless framework**\n - Front-end in **TypeScript** with **Nativescript** framework\n - Implement the database architecture with **MongoDB**\n - Create a Proof of Concept of the application\n - Project and develop **CI\/CD** solution for the product:\n - Create pipelines for the CI\/CD process in the **GitLab** environment\n - Create **Docker files** to perform the unit test and compilation of the source code in the repositories.
", - "it":"Nel corso del 2021 ho lavorato, per avviare una attività indipendente che si basa su una mia idea di app. Per far ciò, durante questo periodo ho dovuto ricoprire diversi ruoli e svolgere diverse mansioni:
\n- Creare un'infrastruttura di lavoro, un server dove centralizzare le risorse, nello specifico:\n - Gestire il server **GNU\/Linux** con la distribuzione *prosumer* Unraid..\n - Gestire i vari servizi in container **Docker**:\n - **GitLab** con il suo runner per le pipeline **CI/CD**:\n - *repository* di pacchetti **npm** \n - *repository* di immagini **Docker**\n - **NginxProxyManager** per la gestione dei servizi pubblici in reverse proxy\n - **SonarQube** per la verifica automatica della qualità del codice\n - Gestione di macchine virtuali per lo sviluppo di codice ma anche come *staging area* per testare le applicazioni in un ambiente *production like*\n - Progettare e sviluppare il software, focus di questa attività:\n - Progettare l'architettura del software\n - Progettare il database\n - Implementare l'architettura:\n - Back-end in **TypeScript** su piattaforma **AWS-Lambda** con **Serveless framework**\n - Front-end in app *cross-platform* in **TypeScript** con **Nativescript**\n - Implementare l'architettura di database in **MongoDB**\n - Creare un *proof of concept* dell'applicazione.\n - Progettare e sviluppare soluzioni di **CI\/CD** legate al prodotto:\n - Creare pipeline automatiche in **GitLab** con riferimento al \"versionamento\" interno\n - Creare Docker-file con l'ambiente di compilazione da utilizzare con le pipeline automatiche.
" + "en":"Through the 2021, I've worked to begin my independent activity base on my idea of business. To do so, I learnt different practices and filled many roles:\n- Create a work's infrastructure, mainly create a centralized resource on the server:\n - Manage the **GNU\/Linux** server with \"Unraid\" as distribution.\n - Manage all the services using **Docker**:\n - **GitLab**, with the runner for CI\/CD, other than the software repositories I managed to setup:\n - package **npm** repository\n - **Docker** repository\n - **NginxProxyManager** to handle the public services in reverse proxy\n - **SonarQube** to automatically verify the software quality\n - Manage all the virtual machines to develop and deploy software in the staging environment\n - Project and develop the software, main activity of this endeavour:\n - Project the software architecture\n - Project the database\n - Implement the software based on the architecture:\n - Back-end **TypeScript** on **AWS-Lambda** platform with **Serverless framework**\n - Front-end in **TypeScript** with **Nativescript** framework\n - Implement the database architecture with **MongoDB**\n - Create a Proof of Concept of the application\n - Project and develop **CI\/CD** solution for the product:\n - Create pipelines for the CI\/CD process in the **GitLab** environment\n - Create **Docker files** to perform the unit test and compilation of the source code in the repositories.", + "it":"Nel corso del 2021 ho lavorato, per avviare una attività indipendente che si basa su una mia idea di app. Per far ciò, durante questo periodo ho dovuto ricoprire diversi ruoli e svolgere diverse mansioni:\n- Creare un'infrastruttura di lavoro, un server dove centralizzare le risorse, nello specifico:\n - Gestire il server **GNU\/Linux** con la distribuzione *prosumer* Unraid..\n - Gestire i vari servizi in container **Docker**:\n - **GitLab** con il suo runner per le pipeline **CI/CD**:\n - *repository* di pacchetti **npm** \n - *repository* di immagini **Docker**\n - **NginxProxyManager** per la gestione dei servizi pubblici in reverse proxy\n - **SonarQube** per la verifica automatica della qualità del codice\n - Gestione di macchine virtuali per lo sviluppo di codice ma anche come *staging area* per testare le applicazioni in un ambiente *production like*\n - Progettare e sviluppare il software, focus di questa attività:\n - Progettare l'architettura del software\n - Progettare il database\n - Implementare l'architettura:\n - Back-end in **TypeScript** su piattaforma **AWS-Lambda** con **Serveless framework**\n - Front-end in app *cross-platform* in **TypeScript** con **Nativescript**\n - Implementare l'architettura di database in **MongoDB**\n - Creare un *proof of concept* dell'applicazione.\n - Progettare e sviluppare soluzioni di **CI\/CD** legate al prodotto:\n - Creare pipeline automatiche in **GitLab** con riferimento al \"versionamento\" interno\n - Creare Docker-file con l'ambiente di compilazione da utilizzare con le pipeline automatiche." }, "collaborators": [], "languages": [ @@ -108,8 +108,8 @@ }, "title": {"en":"ICT office's assistant","it":"Assistente dell'ufficio ICT "}, "content": { - "en":"I applied to this position, in Saxon Hill Academy, through the European project Leonardo which provided accommodation for the stay, an English course and a workplace mainly for practices the language skill. In Saxon Hill Academy, my responsibilities were:
\n - Maintenance of administration's computers.\n - Maintenance of students' computers.\n - Make the sensorial room usable.
", - "it":"Ho avuto l'opportunità di lavorare in questo ambiente grazie al progetto europeo Leonardo. Questo progetto di 4 settimane si occupava di fornire agli studenti tutto il necessario tra vitto e alloggio, prevedeva, inoltre, un corso di inglese e un luogo di lavoro dove fare principalmente pratica con la lingua. In questo contesto sono stato assegnato a Saxon Hill Academy dove ho svolto le seguenti mansioni:
\n - Manutenzione dei computer della segreteria\n - Manutenzione dei computer degli studenti \n - Rendere operativa la \"sensiorial room\"
" + "en":"I applied to this position, in Saxon Hill Academy, through the European project Leonardo which provided accommodation for the stay, an English course and a workplace mainly for practices the language skill. In Saxon Hill Academy, my responsibilities were:\n - Maintenance of administration's computers.\n - Maintenance of students' computers.\n - Make the sensorial room usable.", + "it":"Ho avuto l'opportunità di lavorare in questo ambiente grazie al progetto europeo Leonardo. Questo progetto di 4 settimane si occupava di fornire agli studenti tutto il necessario tra vitto e alloggio, prevedeva, inoltre, un corso di inglese e un luogo di lavoro dove fare principalmente pratica con la lingua. In questo contesto sono stato assegnato a Saxon Hill Academy dove ho svolto le seguenti mansioni:\n - Manutenzione dei computer della segreteria\n - Manutenzione dei computer degli studenti \n - Rendere operativa la \"sensiorial room\"" }, "collaborators": [], "languages": [], diff --git a/src/routes/index.svelte b/src/routes/index.svelte index e6c77fb..69ad06c 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,90 +1,91 @@ -
- - -
- -
-
- -
-
-

{titles.job[currentLanguage]}

- -
-
-

{titles.school[currentLanguage]}

- -
-
-

{titles.portfolio[currentLanguage]}

- -
-
-

{titles.contacts[currentLanguage]}

- -
+
+ +
+ Lang: + + +
+ +
+ +
+ +

{titles.home[currentLanguage]}

+
+ +
+
+

{titles.job[currentLanguage]}

+ +
+
+

{titles.school[currentLanguage]}

+ +
+
+

{titles.portfolio[currentLanguage]}

+ +
+
+

{titles.contacts[currentLanguage]}

+ +
+ \ No newline at end of file + @import './static/shared.scss'; + @import './static/elements.scss'; + .language-selector { + width: 100%; + height: 30px; + text-align: center; + text-transform: uppercase; + text-align: end; + a { + margin: 20px; + } + } + .menu { + position: sticky; + position: -webkit-sticky; + top: 30px; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + } + diff --git a/static/breakpoints.scss b/static/breakpoints.scss new file mode 100644 index 0000000..b6a813c --- /dev/null +++ b/static/breakpoints.scss @@ -0,0 +1,2 @@ +$min-tablet: 768px; +$min-desktop: 1024px; \ No newline at end of file diff --git a/static/colors.scss b/static/colors.scss index f1f6418..56b62c9 100644 --- a/static/colors.scss +++ b/static/colors.scss @@ -1,6 +1,6 @@ /* SCSS HEX */ $cultured: #f2f2f2ff; -$rich-black-fogra-29: #011627ff; +: #011627ff; $navajo-white: #ffddadff; $middle-blue-green: #9ad5d3ff; $steel-blue: #3a7ca5ff; diff --git a/static/elements.scss b/static/elements.scss index 6b92560..da7738c 100644 --- a/static/elements.scss +++ b/static/elements.scss @@ -1,11 +1,419 @@ - .box-with-shadow { - background-color: $cultured; border-style: solid; border-width: 0.1px; - border-color: $sonic-silver ; border-radius: 10px; - box-shadow: -12px 26px 25px -14px $sonic-silver; - -webkit-box-shadow: -12px 26px 25px -14px $sonic-silver; - -moz-box-shadow: -12px 26px 25px -14px $sonic-silver; +} + +img.profile{ + border-radius: 50%; + width: 35vw; + max-width: 150px; + border: solid 1px; +} + +div.default{ + width: 90%; + max-width: 1024px; + border: solid 1px; + padding: 10px 10px; + margin: auto; + margin-top: 50px; + margin-bottom: 50px; + text-align: center; + @media screen and (min-width: 768px) { + width: 80%; + } +} + +.image-container{ + width: 80%; + margin: auto; + text-align: center; + align-items: center; + img{ + max-width: 100%; + max-height: 300px; + object-fit: scale-down; + } +} + +a { + text-decoration:none; + color: black; +} + +/* Generated Styles - Do Not Edit */ + +.display1 { + font-family: var(--md-sys-typescale-display1-font); + font-weight: var(--md-sys-typescale-display1-weight); + font-size: var(--md-sys-typescale-display1-size); + line-height: var(--md-sys-typescale-display1-line-height); + letter-spacing: var(--md-sys-typescale-display1-tracking); +} + +.display2, .display-large { + font-family: var(--md-sys-typescale-display2-font); + font-weight: var(--md-sys-typescale-display2-weight); + font-size: var(--md-sys-typescale-display2-size); + line-height: var(--md-sys-typescale-display2-line-height); + letter-spacing: var(--md-sys-typescale-display2-tracking); +} + +.display3, .display-medium { + font-family: var(--md-sys-typescale-display3-font); + font-weight: var(--md-sys-typescale-display3-weight); + font-size: var(--md-sys-typescale-display3-size); + line-height: var(--md-sys-typescale-display3-line-height); + letter-spacing: var(--md-sys-typescale-display3-tracking); +} + +.headline1, .display-small { + font-family: var(--md-sys-typescale-headline1-font); + font-weight: var(--md-sys-typescale-headline1-weight); + font-size: var(--md-sys-typescale-headline1-size); + line-height: var(--md-sys-typescale-headline1-line-height); + letter-spacing: var(--md-sys-typescale-headline1-tracking); +} + +.headline2, .headline-large { + font-family: var(--md-sys-typescale-headline2-font); + font-weight: var(--md-sys-typescale-headline2-weight); + font-size: var(--md-sys-typescale-headline2-size); + line-height: var(--md-sys-typescale-headline2-line-height); + letter-spacing: var(--md-sys-typescale-headline2-tracking); +} + +.headline3, .headline-medium { + font-family: var(--md-sys-typescale-headline3-font); + font-weight: var(--md-sys-typescale-headline3-weight); + font-size: var(--md-sys-typescale-headline3-size); + line-height: var(--md-sys-typescale-headline3-line-height); + letter-spacing: var(--md-sys-typescale-headline3-tracking); +} + +.headline4, .headline-small { + font-family: var(--md-sys-typescale-headline4-font); + font-weight: var(--md-sys-typescale-headline4-weight); + font-size: var(--md-sys-typescale-headline4-size); + line-height: var(--md-sys-typescale-headline4-line-height); + letter-spacing: var(--md-sys-typescale-headline4-tracking); +} + +.headline5, .title-large { + font-family: var(--md-sys-typescale-headline5-font); + font-weight: var(--md-sys-typescale-headline5-weight); + font-size: var(--md-sys-typescale-headline5-size); + line-height: var(--md-sys-typescale-headline5-line-height); + letter-spacing: var(--md-sys-typescale-headline5-tracking); +} + +.headline6 { + font-family: var(--md-sys-typescale-headline6-font); + font-weight: var(--md-sys-typescale-headline6-weight); + font-size: var(--md-sys-typescale-headline6-size); + line-height: var(--md-sys-typescale-headline6-line-height); + letter-spacing: var(--md-sys-typescale-headline6-tracking); +} + +.subhead1, .title-medium { + font-family: var(--md-sys-typescale-subhead1-font); + font-weight: var(--md-sys-typescale-subhead1-weight); + font-size: var(--md-sys-typescale-subhead1-size); + line-height: var(--md-sys-typescale-subhead1-line-height); + letter-spacing: var(--md-sys-typescale-subhead1-tracking); +} + +.subhead2, .title-small { + font-family: var(--md-sys-typescale-subhead2-font); + font-weight: var(--md-sys-typescale-subhead2-weight); + font-size: var(--md-sys-typescale-subhead2-size); + line-height: var(--md-sys-typescale-subhead2-line-height); + letter-spacing: var(--md-sys-typescale-subhead2-tracking); +} + +.body1, .body-large { + font-family: var(--md-sys-typescale-body1-font); + font-weight: var(--md-sys-typescale-body1-weight); + font-size: var(--md-sys-typescale-body1-size); + line-height: var(--md-sys-typescale-body1-line-height); + letter-spacing: var(--md-sys-typescale-body1-tracking); +} + +.body2, .body-medium { + font-family: var(--md-sys-typescale-body2-font); + font-weight: var(--md-sys-typescale-body2-weight); + font-size: var(--md-sys-typescale-body2-size); + line-height: var(--md-sys-typescale-body2-line-height); + letter-spacing: var(--md-sys-typescale-body2-tracking); +} + +.caption, .body-small { + font-family: var(--md-sys-typescale-caption-font); + font-weight: var(--md-sys-typescale-caption-weight); + font-size: var(--md-sys-typescale-caption-size); + line-height: var(--md-sys-typescale-caption-line-height); + letter-spacing: var(--md-sys-typescale-caption-tracking); +} + +.button, .label-large { + font-family: var(--md-sys-typescale-button-font); + font-weight: var(--md-sys-typescale-button-weight); + font-size: var(--md-sys-typescale-button-size); + line-height: var(--md-sys-typescale-button-line-height); + letter-spacing: var(--md-sys-typescale-button-tracking); +} + +.overline, .label-medium { + font-family: var(--md-sys-typescale-overline-font); + font-weight: var(--md-sys-typescale-overline-weight); + font-size: var(--md-sys-typescale-overline-size); + line-height: var(--md-sys-typescale-overline-line-height); + letter-spacing: var(--md-sys-typescale-overline-tracking); +} + +.material-theme { + --md-sys-typescale-display1-font: Roboto; + --md-sys-typescale-display1-weight: Regular; + --md-sys-typescale-display1-size: 64px; + --md-sys-typescale-display1-line-height: 76px; + --md-sys-typescale-display1-tracking: -0.5px; + --md-sys-typescale-display2-font: Roboto; + --md-sys-typescale-display2-weight: Regular; + --md-sys-typescale-display2-size: 57px; + --md-sys-typescale-display2-line-height: 64px; + --md-sys-typescale-display2-tracking: -0.25px; + --md-sys-typescale-display3-font: Roboto; + --md-sys-typescale-display3-weight: Regular; + --md-sys-typescale-display3-size: 45px; + --md-sys-typescale-display3-line-height: 52px; + --md-sys-typescale-display3-tracking: 0px; + --md-sys-typescale-headline1-font: Roboto; + --md-sys-typescale-headline1-weight: Regular; + --md-sys-typescale-headline1-size: 36px; + --md-sys-typescale-headline1-line-height: 44px; + --md-sys-typescale-headline1-tracking: 0px; + --md-sys-typescale-headline2-font: Roboto; + --md-sys-typescale-headline2-weight: Regular; + --md-sys-typescale-headline2-size: 32px; + --md-sys-typescale-headline2-line-height: 40px; + --md-sys-typescale-headline2-tracking: 0px; + --md-sys-typescale-headline3-font: Roboto; + --md-sys-typescale-headline3-weight: Regular; + --md-sys-typescale-headline3-size: 28px; + --md-sys-typescale-headline3-line-height: 36px; + --md-sys-typescale-headline3-tracking: 0px; + --md-sys-typescale-headline4-font: Roboto; + --md-sys-typescale-headline4-weight: Regular; + --md-sys-typescale-headline4-size: 24px; + --md-sys-typescale-headline4-line-height: 32px; + --md-sys-typescale-headline4-tracking: 0px; + --md-sys-typescale-headline5-font: Roboto; + --md-sys-typescale-headline5-weight: Regular; + --md-sys-typescale-headline5-size: 22px; + --md-sys-typescale-headline5-line-height: 28px; + --md-sys-typescale-headline5-tracking: 0px; + --md-sys-typescale-headline6-font: Roboto; + --md-sys-typescale-headline6-weight: Regular; + --md-sys-typescale-headline6-size: 18px; + --md-sys-typescale-headline6-line-height: 24px; + --md-sys-typescale-headline6-tracking: 0px; + --md-sys-typescale-subhead1-font: Roboto; + --md-sys-typescale-subhead1-weight: Medium; + --md-sys-typescale-subhead1-size: 16px; + --md-sys-typescale-subhead1-line-height: 24px; + --md-sys-typescale-subhead1-tracking: 0.1px; + --md-sys-typescale-subhead2-font: Roboto; + --md-sys-typescale-subhead2-weight: Medium; + --md-sys-typescale-subhead2-size: 14px; + --md-sys-typescale-subhead2-line-height: 20px; + --md-sys-typescale-subhead2-tracking: 0.1px; + --md-sys-typescale-body1-font: Roboto; + --md-sys-typescale-body1-weight: Regular; + --md-sys-typescale-body1-size: 16px; + --md-sys-typescale-body1-line-height: 24px; + --md-sys-typescale-body1-tracking: 0.5px; + --md-sys-typescale-body2-font: Roboto; + --md-sys-typescale-body2-weight: Regular; + --md-sys-typescale-body2-size: 14px; + --md-sys-typescale-body2-line-height: 20px; + --md-sys-typescale-body2-tracking: 0.25px; + --md-sys-typescale-caption-font: Roboto; + --md-sys-typescale-caption-weight: Regular; + --md-sys-typescale-caption-size: 12px; + --md-sys-typescale-caption-line-height: 16px; + --md-sys-typescale-caption-tracking: 0.4px; + --md-sys-typescale-button-font: Roboto; + --md-sys-typescale-button-weight: Medium; + --md-sys-typescale-button-size: 14px; + --md-sys-typescale-button-line-height: 20px; + --md-sys-typescale-button-tracking: 0.1px; + --md-sys-typescale-overline-font: Roboto; + --md-sys-typescale-overline-weight: Medium; + --md-sys-typescale-overline-size: 12px; + --md-sys-typescale-overline-line-height: 16px; + --md-sys-typescale-overline-tracking: 0.5px; + --md-sys-color-primary-light: #5056a9; + --md-sys-color-on-primary-light: #ffffff; + --md-sys-color-primary-container-light: #dfe0ff; + --md-sys-color-on-primary-container-light: #050764; + --md-sys-color-secondary-light: #5c5d72; + --md-sys-color-on-secondary-light: #ffffff; + --md-sys-color-secondary-container-light: #e1e0fa; + --md-sys-color-on-secondary-container-light: #191a2b; + --md-sys-color-tertiary-light: #79536b; + --md-sys-color-on-tertiary-light: #ffffff; + --md-sys-color-tertiary-container-light: #ffd7ef; + --md-sys-color-on-tertiary-container-light: #2e1126; + --md-sys-color-error-light: #ba1b1b; + --md-sys-color-on-error-light: #ffffff; + --md-sys-color-error-container-light: #ffdad4; + --md-sys-color-on-error-container-light: #410001; + --md-sys-color-outline-light: #777680; + --md-sys-color-background-light: #fffbff; + --md-sys-color-on-background-light: #1b1b1f; + --md-sys-color-surface-light: #fffbff; + --md-sys-color-on-surface-light: #1b1b1f; + --md-sys-color-surface-variant-light: #e4e1ec; + --md-sys-color-on-surface-variant-light: #46464f; + --md-sys-color-inverse-surface-light: #313034; + --md-sys-color-inverse-on-surface-light: #f3eff4; + --md-sys-color-primary-dark: #bdc2ff; + --md-sys-color-on-primary-dark: #202578; + --md-sys-color-primary-container-dark: #383e90; + --md-sys-color-on-primary-container-dark: #dfe0ff; + --md-sys-color-secondary-dark: #c5c4dd; + --md-sys-color-on-secondary-dark: #2e2f42; + --md-sys-color-secondary-container-dark: #444559; + --md-sys-color-on-secondary-container-dark: #e1e0fa; + --md-sys-color-tertiary-dark: #e8b9d5; + --md-sys-color-on-tertiary-dark: #45263b; + --md-sys-color-tertiary-container-dark: #5e3c52; + --md-sys-color-on-tertiary-container-dark: #ffd7ef; + --md-sys-color-error-dark: #ffb4a9; + --md-sys-color-on-error-dark: #680003; + --md-sys-color-error-container-dark: #930006; + --md-sys-color-on-error-container-dark: #ffdad4; + --md-sys-color-outline-dark: #91909a; + --md-sys-color-background-dark: #1b1b1f; + --md-sys-color-on-background-dark: #e4e1e6; + --md-sys-color-surface-dark: #1b1b1f; + --md-sys-color-on-surface-dark: #e4e1e6; + --md-sys-color-surface-variant-dark: #46464f; + --md-sys-color-on-surface-variant-dark: #c7c5d0; + --md-sys-color-inverse-surface-dark: #e4e1e6; + --md-sys-color-inverse-on-surface-dark: #1b1b1f; +} +@media (prefers-color-scheme: light) { + .material-theme { + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + } + .dark-theme { + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + } +} + +@media (prefers-color-scheme: dark) { + .material-theme { + --md-sys-color-primary: var(--md-sys-color-primary-dark); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); + --md-sys-color-secondary: var(--md-sys-color-secondary-dark); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); + --md-sys-color-error: var(--md-sys-color-error-dark); + --md-sys-color-on-error: var(--md-sys-color-on-error-dark); + --md-sys-color-error-container: var(--md-sys-color-error-container-dark); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); + --md-sys-color-outline: var(--md-sys-color-outline-dark); + --md-sys-color-background: var(--md-sys-color-background-dark); + --md-sys-color-on-background: var(--md-sys-color-on-background-dark); + --md-sys-color-surface: var(--md-sys-color-surface-dark); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); + } + .light-theme { + --md-sys-color-primary: var(--md-sys-color-primary-light); + --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); + --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); + --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); + --md-sys-color-secondary: var(--md-sys-color-secondary-light); + --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); + --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); + --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); + --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); + --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); + --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); + --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); + --md-sys-color-error: var(--md-sys-color-error-light); + --md-sys-color-on-error: var(--md-sys-color-on-error-light); + --md-sys-color-error-container: var(--md-sys-color-error-container-light); + --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); + --md-sys-color-outline: var(--md-sys-color-outline-light); + --md-sys-color-background: var(--md-sys-color-background-light); + --md-sys-color-on-background: var(--md-sys-color-on-background-light); + --md-sys-color-surface: var(--md-sys-color-surface-light); + --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); + --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); + --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); + --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); + --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); + } } diff --git a/static/main.css b/static/main.css index a8df53b..60c63be 100644 --- a/static/main.css +++ b/static/main.css @@ -1,6 +1,5 @@ body{ padding: 0; margin: 0; - background-color: #9ad5d3ff; + text-align: center; } -