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

New CSS #1

Merged
Jatus merged 13 commits from feature/material_desing into develop 2023-05-27 15:38:49 +02:00
Conversation 0 Commits 13 Files Changed 97 +1768 -565
18 changed files with 1768 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 23b18ccc7a - Show all commits

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>

78
src/elements/Contacts.svelte
View File

@@ -1,46 +1,66 @@
<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" />
<ul> <div class="links">
<li> <ul>
<a href="mailto://gianmarco@pettinato.eu" <li>
><i class="fas fa-at" /> e-mail: gianmarco@pettinato.eu</a <a href="mailto://gianmarco@pettinato.eu"
> ><i class="fas fa-at" /> e-mail: gianmarco@pettinato.eu</a
</li> >
<li> </li>
<a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane" /> telegram: @jatus_93</a> <li>
</li> <a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane" /> telegram: @jatus_93</a>
<li> </li>
<a href="https://twitter.com/jatus_93"><i class="fab fa-twitter" /> twitter: @jatus_93</a> <li>
</li> <a href="https://twitter.com/jatus_93"><i class="fab fa-twitter" /> twitter: @jatus_93</a>
<li> </li>
<a href="https://www.linkedin.com/in/gianmarco-pettinato/" <li>
><i class="fab fa-linkedin-in" /> linkedin: Gianmarco Pettinato</a <a href="https://www.linkedin.com/in/gianmarco-pettinato/"
> ><i class="fab fa-linkedin-in" /> linkedin: Gianmarco Pettinato</a
</li> >
</ul> </li>
</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>

18
src/elements/Jobs.svelte
View File

@@ -1,14 +1,12 @@
<script lang="ts"> <script lang="ts">
import type { Schema } from 'src/model/job'; import type { Schema } from 'src/model/job';
import JobElement from './JobElement.svelte'; import JobElement from './JobElement.svelte';
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 {

56
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>
<h1>{titles.home[currentLanguage]}</h1> <div id="home" class="default">
<div class="default" id="home"> <h1>{titles.home[currentLanguage]}</h1>
<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"]