Jatus/cv-site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

materia design
Some checks failed
pettinato.eu/cv-site/pipeline/head There was a failure building this commit
Details

Browse Source
This commit is contained in:
Gianmarco Pettinato 2022-04-23 17:34:01 +02:00
parent 7cbbdf2f1a
commit 23b18ccc7a
18 changed files with 1768 additions and 565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
default.conf
View File

@ -1,18 +0,0 @@
server {
# The port to listen on
listen 80;
# The root directory, which must exactly match the internal volume share
root /usr/share/nginx/html;
# For all files with the PHP extension run the following
location ~ ^/.+\.php(/|$) {
# Pass the request to the host "php" and port 9000 (default PHP-FPM port)
fastcgi_pass php:9000;
# Include the default NGINX FastCGI Parameters
include fastcgi_params;
# Define one additional parameter telling PHP-FPM where to find the file
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
add_header Cache-Control no-cache;
expires 1s;
}

23
docker-compose.yml
View File

@ -1,23 +0,0 @@
# The specification version of Docker-compose
version: "3.9"
# The collection of applications composing this service
services:
# The NGINX custom container
web:
# Instead of referencing image: nginx:mainline-alpine here, use build to
# reference the current directory (.), which will look for a dockerfile
# by default
build: .
# The external directory location to map to an internal location
volumes:
- /home/gianm/Project/myCv/build:/usr/share/nginx/html
# The external port mapping to internal port mapping
ports:
- "80:80"
php:
image: php:fpm-alpine
ports:
- "9000:9000"
# It is important that both containers can reference the same files
volumes:
- /home/gianm/Project/myCv/build:/usr/share/nginx/html

6
dockerfile
View File

@ -1,6 +0,0 @@
# The image to pull the base configuration from
FROM nginx:mainline-alpine
# The directory where any additional files will be referenced
WORKDIR /home/gianm/Project/myCv/build
# Copy the custom default.conf from the WORKDIR (.) and overwrite the existing internal configuration in the NGINX container
COPY ./default.conf /etc/nginx/conf.d/default.conf

13
list of cv
View File

@ -1,13 +0,0 @@
lista delle cose da mettere in cv
Laurea in scienze informatiche all'università di Padova.
Questo sito web
Greenpass scanner web; with Marco Celadin
GoCart project; with Marco Celadin
Server in casa - {server git, reverse proxy}
Tirocinio di due mesi ad Athesys.
Stampante 3d rpi
swe typescript, Docker, serverless-framework - { latex multi compiler, serverless service, Docker }
Pao c++ - Qontainer
Antrlr parser 1 e 2; with Mariano Sciacco
Telegram bot alternativestudio
Progetto Leonardo - ICT in Saxon Hill Academy Dean

1539
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -42,6 +42,7 @@
"@fortawesome/fontawesome-free": "^5.15.4", "@fortawesome/fontawesome-free": "^5.15.4",
"json-schema-to-typescript": "^10.1.5", "json-schema-to-typescript": "^10.1.5",
"markdown-it": "^12.2.0", "markdown-it": "^12.2.0",
"material-components-web": "^13.0.0",
"milligram": "^1.4.1", "milligram": "^1.4.1",
"punycode": "^2.1.1" "punycode": "^2.1.1"
} }

79
src/app.scss
View File

@ -0,0 +1,79 @@
// $basecolor:#CDCBD6;
// $basecolor2:#E3F5E7;
// $accent2: #E3E8F5;
// $contrast: #E3E8F5;
// $contrast2: #F5E3F1;
// $img-contrast: #F5E3F1;
// @media (prefers-color-scheme: dark) {
// $basecolor:#140a0a;
// $basecolor2:#E3F5E7;
// $accent2: #E3E8F5;
// $contrast: #E3E8F5;
// $contrast2: #F5E3F1;
// $img-contrast:#00000000;
// }
$basecolor:#E5E5E5;
$basecolor2:#FFFFFF;
// $basecolor2:#FCA311;
$accent2: #FCA311;
$contrast: #14213D;
$contrast2: #000000;
$img-contrast: #14213D;
$text-color: #011936;
$border-color: #D77A61;
$button-border-color: #D77A61;
$min-tablet: 768px;
$min-desktop: 1024px;
$default-border-radius:5px;
:root {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: $text-color;
background-color: $basecolor
}
.box-with-shadow {
border-style: solid;
border-width: 0.1px;
border-radius: 10px;
}
.default{
// margin: auto;
// margin-top: 50px;
// margin-bottom: 50px;
// text-align: center;
// @media (min-width: $min-tablet) {
// width: 80%;
// max-width: 1024px;
// }
}
.image-container{
width: 80%;
margin: auto;
text-align: center;
align-items: center;
img{
max-width: 100%;
max-height: 300px;
object-fit: scale-down;
@media (prefers-color-scheme: light) {
background-color: $contrast;
}
}
}
a {
text-decoration:none;
color: $text-color;
}
button{
color: $text-color;
}
h1, h2, h3 {}

12
src/elements/AboutMe.svelte
View File

@ -22,7 +22,7 @@
}; };
</script> </script>
<div> <div class="aboutMe">
<Contacts /> <Contacts />
<div class="whoIAm"> <div class="whoIAm">
<p> <p>
@ -44,8 +44,8 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import './static/elements.scss';
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css'; @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../app.scss';
.cv { .cv {
width: 80%; width: 80%;
margin: auto; margin: auto;
@ -53,8 +53,14 @@
justify-content: space-evenly; justify-content: space-evenly;
} }
.whoIAm { .whoIAm {
width: 80% !important;
margin: auto; margin: auto;
text-align: justify; text-align: justify;
} }
.aboutMe {
background-color: $basecolor2;
border: solid 1px $border-color;
border-radius: $default-border-radius;
padding: 30px;
margin: 30px;
}
</style> </style>

42
src/elements/Contacts.svelte
View File

@ -1,7 +1,8 @@
<script lang="ts"></script> <script lang="ts"></script>
<div class="contacts"> <div class="contacts">
<div><img src="/profile_pic.jpg" alt="profile" class="profile" /></div> <img src="/profile_pic.jpg" alt="profile" class="profile" />
<div class="links">
<ul> <ul>
<li> <li>
<a href="mailto://gianmarco@pettinato.eu" <a href="mailto://gianmarco@pettinato.eu"
@ -21,26 +22,45 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
<style lang="scss"> <style lang="scss">
@import './static/elements.scss'; @import '../app.scss';
@import './static/breakpoints.scss'; img.profile {
border-radius: 50%;
max-width: 150px;
border: solid 1px $border-color;
}
.contacts { .contacts {
width: 80%; background-color: $basecolor2;
border: solid 1px $border-color;
border-radius: $default-border-radius;
padding: 30px;
margin: 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-evenly;
align-items: center; align-items: center;
margin: auto; margin: auto;
} }
ul {
text-align: justify; .contacts:last-of-type {
list-style-type: none; width: 86%;
white-space: nowrap;
} }
@media screen and (min-width: $min-tablet) { .links {
text-align: left;
ul {
padding: 0;
list-style-type: none;
line-height: 20px;
white-space: nowrap;
li {
margin-left: 0px;
}
}
}
@media (min-width: $min-tablet) {
.contacts { .contacts {
width: 80%;
flex-direction: row; flex-direction: row;
margin: auto; margin: auto;
} }

13
src/elements/JobElement.svelte
View File

@ -12,7 +12,7 @@
export let currentLanguage = ''; export let currentLanguage = '';
</script> </script>
<div> <div class="job-container">
<h3>{job.title[currentLanguage]}</h3> <h3>{job.title[currentLanguage]}</h3>
<div> <div>
<div class="image-container"> <div class="image-container">
@ -59,14 +59,21 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import './static/elements.scss'; @import '../app.scss';
.text-content { .text-content {
margin: auto; margin: auto;
width: 70%;
text-align: justify; text-align: justify;
} }
.added-info { .added-info {
margin-top: 50px; margin-top: 50px;
text-align: left; text-align: left;
font-size: smaller;
}
.job-container {
background-color: $basecolor2;
border: solid 1px $border-color;
border-radius: $default-border-radius;
padding: 30px;
margin: 30px;
} }
</style> </style>

4
src/elements/Jobs.svelte
View File

@ -4,11 +4,9 @@
export let currentLanguage = ''; export let currentLanguage = '';
export let jobs: Schema[] = []; export let jobs: Schema[] = [];
</script> </script>
<div> <div>
{#each jobs as job} {#each jobs as job}
<JobElement {job} {currentLanguage} /> <JobElement {job} {currentLanguage} />
{/each} {/each}
</div> </div>
<style lang="scss">
@import './static/elements.scss';
</style>

46
src/elements/Menu.svelte
View File

@ -21,7 +21,7 @@
> >
<a <a
use:scrollto={{ element: '#jobs', offset: -50 }} use:scrollto={{ element: '#jobs', offset: -70 }}
class="menu-element" class="menu-element"
href="#jobs" href="#jobs"
alt={menu.job[currentLanguage]} alt={menu.job[currentLanguage]}
@ -29,7 +29,7 @@
> >
<a <a
use:scrollto={{ element: '#training', offset: -50 }} use:scrollto={{ element: '#training', offset: -70 }}
class="menu-element" class="menu-element"
href="#training" href="#training"
alt={menu.school[currentLanguage]} alt={menu.school[currentLanguage]}
@ -39,7 +39,7 @@
> >
<a <a
use:scrollto={{ element: '#portfolio', offset: -50 }} use:scrollto={{ element: '#portfolio', offset: -70 }}
class="menu-element" class="menu-element"
href="#portfolio" href="#portfolio"
alt={menu.portfolio[currentLanguage]} alt={menu.portfolio[currentLanguage]}
@ -47,7 +47,7 @@
> >
<a <a
use:scrollto={{ element: '#contacts', offset: -50 }} use:scrollto={{ element: '#contacts', offset: -70 }}
class="menu-element" class="menu-element"
href="#contacts" href="#contacts"
alt={menu.contacts[currentLanguage]} alt={menu.contacts[currentLanguage]}
@ -59,11 +59,13 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import './static/elements.scss'; @import '../app.scss';
@import './static/breakpoints.scss';
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css'; @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
.hide {
display: none;
}
.div-menu { .div-menu {
width: 90%; width: 100%;
max-width: 1024px; max-width: 1024px;
} }
.wrapper { .wrapper {
@ -71,15 +73,35 @@
display: flex; display: flex;
} }
a { a {
border: solid black; border: solid $button-border-color 1px;
width: 15%; border-radius: $default-border-radius;
font-size: 20px; width: 50px;
margin: auto; margin: auto;
text-align: center; text-align: center;
padding: 5px;
i {
font-size: 22px;
margin: 5px;
} }
@media screen and (max-width: $min-tablet) { }
a:hover {
background-color: $accent2;
}
@media (min-width: $min-tablet) {
.hide { .hide {
display: none; display: unset;
}
a {
width: 130px;
i {
font-size: unset;
}
}
}
@media (min-width: $min-desktop) {
a {
width: 150px;
} }
} }
</style> </style>

5
src/elements/Training.svelte
View File

@ -25,8 +25,7 @@
</div> </div>
<style lang="scss"> <style lang="scss">
@import './static/elements.scss'; @import '../app.scss';
@import './static/breakpoints.scss';
.training { .training {
width: 100%; width: 100%;
} }
@ -46,7 +45,7 @@
} }
} }
@media screen and (min-width: $min-tablet) { @media (min-width: $min-tablet) {
.element { .element {
flex-direction: row; flex-direction: row;
div { div {

54
src/routes/index.svelte
View File

@ -12,8 +12,8 @@
let currentLanguage: string = 'it'; let currentLanguage: string = 'it';
let titles = { let titles = {
home: { home: {
it: 'Gianmarco Pettinato Sviluppatore Fullstack', it: 'Gianmarco Pettinato \n Software Developer',
en: 'Gianmarco Pettinato Fullstack Developer' en: 'Gianmarco Pettinato \n Software Developer'
}, },
job: { it: 'Esperienze', en: 'Experiences' }, job: { it: 'Esperienze', en: 'Experiences' },
school: { it: 'Formazione', en: 'Training' }, school: { it: 'Formazione', en: 'Training' },
@ -25,15 +25,14 @@
<main class="material-theme dark-theme light-theme body"> <main class="material-theme dark-theme light-theme body">
<!-- svelte-ignore a11y-invalid-attribute --> <!-- svelte-ignore a11y-invalid-attribute -->
<div class="language-selector" id="language-selector"> <div class="language-selector" id="language-selector">
Lang:
<button <button
class="buttton" class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
on:click={() => { on:click={() => {
currentLanguage = 'it'; currentLanguage = 'it';
}}>it</button }}>it</button
> >
<button <button
class="buttton" class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
on:click={() => { on:click={() => {
currentLanguage = 'en'; currentLanguage = 'en';
}}>en</button }}>en</button
@ -44,48 +43,69 @@
<Menu {currentLanguage} /> <Menu {currentLanguage} />
</div> </div>
<div id="home" class="default">
<h1>{titles.home[currentLanguage]}</h1> <h1>{titles.home[currentLanguage]}</h1>
<div class="default" id="home">
<AboutMe {currentLanguage} /> <AboutMe {currentLanguage} />
</div> </div>
<div class="default" id="jobs"> <div id="jobs" class="default">
<h2>{titles.job[currentLanguage]}</h2> <h2>{titles.job[currentLanguage]}</h2>
<Jobs {jobs} {currentLanguage} /> <Jobs {jobs} {currentLanguage} />
</div> </div>
<div class="default" id="training"> <div id="training" class="default">
<h2>{titles.school[currentLanguage]}</h2> <h2>{titles.school[currentLanguage]}</h2>
<Training {currentLanguage} /> <Training {currentLanguage} />
</div> </div>
<div class="default" id="portfolio"> <div id="portfolio" class="default">
<h2>{titles.portfolio[currentLanguage]}</h2> <h2>{titles.portfolio[currentLanguage]}</h2>
<Jobs jobs={portfolio} {currentLanguage} /> <Jobs jobs={portfolio} {currentLanguage} />
</div> </div>
<div class="default" id="contacts"> <div id="contacts" class="default">
<h2>{titles.contacts[currentLanguage]}</h2> <h2>{titles.contacts[currentLanguage]}</h2>
<Contacts /> <Contacts />
</div> </div>
</main> </main>
<style lang="scss"> <style lang="scss">
@import './static/shared.scss'; @import '../app.scss';
@import './static/elements.scss';
.language-selector { .language-selector {
width: 100%; width: 100%;
height: 30px; height: 30px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
text-align: end; text-align: end;
a { background-color: $basecolor2;
margin: 20px; padding-top: 10px;
}
} }
.menu { .menu {
background-color: $basecolor2;
position: sticky; position: sticky;
position: -webkit-sticky; position: -webkit-sticky;
top: 30px; top: 0px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; padding: 10px;
border-bottom: solid black 1px;
}
.custom-button {
border: 0;
background: none;
box-shadow: none;
border-radius: 0px;
border: solid $button-border-color 1px;
cursor: pointer;
}
.custom-button:hover {
background-color: $accent2;
}
.custom-button-active {
cursor: unset;
background-color: $accent2;
}
@media (max-width: $min-tablet) {
.custom-button {
font-size: large;
}
} }
</style> </style>

2
static/breakpoints.scss
View File

@ -1,2 +0,0 @@
$min-tablet: 768px;
$min-desktop: 1024px;

419
static/elements.scss
View File

@ -1,419 +0,0 @@
.box-with-shadow {
border-style: solid;
border-width: 0.1px;
border-radius: 10px;
}
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);
}
}

1
static/main.css
View File

@ -3,3 +3,4 @@ body{
margin: 0; margin: 0;
text-align: center; text-align: center;
} }

4
tsconfig.json
View File

@ -25,8 +25,8 @@
"paths": { "paths": {
"$lib": ["src/lib"], "$lib": ["src/lib"],
"$lib/*": ["src/lib/*"], "$lib/*": ["src/lib/*"],
"$elem":["src/elements"], "$elem/*":["src/elements/*"],
// "$model":["src/model"] "$model/*":["src/model/*"]
} }
}, },
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"] "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]