New CSS #1
18
default.conf
18
default.conf
@ -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;
|
||||
}
|
||||
@ -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
|
||||
@ -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
13
list of cv
@ -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
1539
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -42,6 +42,7 @@
|
||||
"@fortawesome/fontawesome-free": "^5.15.4",
|
||||
"json-schema-to-typescript": "^10.1.5",
|
||||
"markdown-it": "^12.2.0",
|
||||
"material-components-web": "^13.0.0",
|
||||
"milligram": "^1.4.1",
|
||||
"punycode": "^2.1.1"
|
||||
}
|
||||
|
||||
79
src/app.scss
79
src/app.scss
@ -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 {}
|
||||
@ -22,7 +22,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="aboutMe">
|
||||
<Contacts />
|
||||
<div class="whoIAm">
|
||||
<p>
|
||||
@ -44,8 +44,8 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/elements.scss';
|
||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
||||
@import '../app.scss';
|
||||
.cv {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
@ -53,8 +53,14 @@
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.whoIAm {
|
||||
width: 80% !important;
|
||||
margin: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
.aboutMe {
|
||||
background-color: $basecolor2;
|
||||
border: solid 1px $border-color;
|
||||
border-radius: $default-border-radius;
|
||||
padding: 30px;
|
||||
margin: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,46 +1,66 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<div class="contacts">
|
||||
<div><img src="/profile_pic.jpg" alt="profile" class="profile" /></div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="mailto://gianmarco@pettinato.eu"
|
||||
><i class="fas fa-at" /> e-mail: gianmarco@pettinato.eu</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://www.linkedin.com/in/gianmarco-pettinato/"
|
||||
><i class="fab fa-linkedin-in" /> linkedin: Gianmarco Pettinato</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<img src="/profile_pic.jpg" alt="profile" class="profile" />
|
||||
<div class="links">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="mailto://gianmarco@pettinato.eu"
|
||||
><i class="fas fa-at" /> e-mail: gianmarco@pettinato.eu</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://www.linkedin.com/in/gianmarco-pettinato/"
|
||||
><i class="fab fa-linkedin-in" /> linkedin: Gianmarco Pettinato</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/elements.scss';
|
||||
@import './static/breakpoints.scss';
|
||||
@import '../app.scss';
|
||||
img.profile {
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: solid 1px $border-color;
|
||||
}
|
||||
.contacts {
|
||||
width: 80%;
|
||||
background-color: $basecolor2;
|
||||
border: solid 1px $border-color;
|
||||
border-radius: $default-border-radius;
|
||||
padding: 30px;
|
||||
margin: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
}
|
||||
ul {
|
||||
text-align: justify;
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
|
||||
.contacts:last-of-type {
|
||||
width: 86%;
|
||||
}
|
||||
@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 {
|
||||
width: 80%;
|
||||
flex-direction: row;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
export let currentLanguage = '';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="job-container">
|
||||
<h3>{job.title[currentLanguage]}</h3>
|
||||
<div>
|
||||
<div class="image-container">
|
||||
@ -59,14 +59,21 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/elements.scss';
|
||||
@import '../app.scss';
|
||||
.text-content {
|
||||
margin: auto;
|
||||
width: 70%;
|
||||
text-align: justify;
|
||||
}
|
||||
.added-info {
|
||||
margin-top: 50px;
|
||||
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>
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
<script lang="ts">
|
||||
import type { Schema } from 'src/model/job';
|
||||
import JobElement from './JobElement.svelte';
|
||||
export let currentLanguage = '';
|
||||
export let jobs:Schema[] = [];
|
||||
import type { Schema } from 'src/model/job';
|
||||
import JobElement from './JobElement.svelte';
|
||||
export let currentLanguage = '';
|
||||
export let jobs: Schema[] = [];
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#each jobs as job }
|
||||
<JobElement {job} {currentLanguage} />
|
||||
{/each}
|
||||
{#each jobs as job}
|
||||
<JobElement {job} {currentLanguage} />
|
||||
{/each}
|
||||
</div>
|
||||
<style lang="scss">
|
||||
@import './static/elements.scss';
|
||||
</style>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
>
|
||||
|
||||
<a
|
||||
use:scrollto={{ element: '#jobs', offset: -50 }}
|
||||
use:scrollto={{ element: '#jobs', offset: -70 }}
|
||||
class="menu-element"
|
||||
href="#jobs"
|
||||
alt={menu.job[currentLanguage]}
|
||||
@ -29,7 +29,7 @@
|
||||
>
|
||||
|
||||
<a
|
||||
use:scrollto={{ element: '#training', offset: -50 }}
|
||||
use:scrollto={{ element: '#training', offset: -70 }}
|
||||
class="menu-element"
|
||||
href="#training"
|
||||
alt={menu.school[currentLanguage]}
|
||||
@ -39,7 +39,7 @@
|
||||
>
|
||||
|
||||
<a
|
||||
use:scrollto={{ element: '#portfolio', offset: -50 }}
|
||||
use:scrollto={{ element: '#portfolio', offset: -70 }}
|
||||
class="menu-element"
|
||||
href="#portfolio"
|
||||
alt={menu.portfolio[currentLanguage]}
|
||||
@ -47,7 +47,7 @@
|
||||
>
|
||||
|
||||
<a
|
||||
use:scrollto={{ element: '#contacts', offset: -50 }}
|
||||
use:scrollto={{ element: '#contacts', offset: -70 }}
|
||||
class="menu-element"
|
||||
href="#contacts"
|
||||
alt={menu.contacts[currentLanguage]}
|
||||
@ -59,11 +59,13 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/elements.scss';
|
||||
@import './static/breakpoints.scss';
|
||||
@import '../app.scss';
|
||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.div-menu {
|
||||
width: 90%;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
.wrapper {
|
||||
@ -71,15 +73,35 @@
|
||||
display: flex;
|
||||
}
|
||||
a {
|
||||
border: solid black;
|
||||
width: 15%;
|
||||
font-size: 20px;
|
||||
border: solid $button-border-color 1px;
|
||||
border-radius: $default-border-radius;
|
||||
width: 50px;
|
||||
margin: auto;
|
||||
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 {
|
||||
display: none;
|
||||
display: unset;
|
||||
}
|
||||
a {
|
||||
width: 130px;
|
||||
i {
|
||||
font-size: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: $min-desktop) {
|
||||
a {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,8 +25,7 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/elements.scss';
|
||||
@import './static/breakpoints.scss';
|
||||
@import '../app.scss';
|
||||
.training {
|
||||
width: 100%;
|
||||
}
|
||||
@ -46,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $min-tablet) {
|
||||
@media (min-width: $min-tablet) {
|
||||
.element {
|
||||
flex-direction: row;
|
||||
div {
|
||||
|
||||
@ -12,8 +12,8 @@
|
||||
let currentLanguage: string = 'it';
|
||||
let titles = {
|
||||
home: {
|
||||
it: 'Gianmarco Pettinato Sviluppatore Fullstack',
|
||||
en: 'Gianmarco Pettinato Fullstack Developer'
|
||||
it: 'Gianmarco Pettinato \n Software Developer',
|
||||
en: 'Gianmarco Pettinato \n Software Developer'
|
||||
},
|
||||
job: { it: 'Esperienze', en: 'Experiences' },
|
||||
school: { it: 'Formazione', en: 'Training' },
|
||||
@ -25,15 +25,14 @@
|
||||
<main class="material-theme dark-theme light-theme body">
|
||||
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||
<div class="language-selector" id="language-selector">
|
||||
Lang:
|
||||
<button
|
||||
class="buttton"
|
||||
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
||||
on:click={() => {
|
||||
currentLanguage = 'it';
|
||||
}}>it</button
|
||||
>
|
||||
<button
|
||||
class="buttton"
|
||||
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
||||
on:click={() => {
|
||||
currentLanguage = 'en';
|
||||
}}>en</button
|
||||
@ -44,48 +43,69 @@
|
||||
<Menu {currentLanguage} />
|
||||
</div>
|
||||
|
||||
<h1>{titles.home[currentLanguage]}</h1>
|
||||
<div class="default" id="home">
|
||||
<div id="home" class="default">
|
||||
<h1>{titles.home[currentLanguage]}</h1>
|
||||
<AboutMe {currentLanguage} />
|
||||
</div>
|
||||
<div class="default" id="jobs">
|
||||
<div id="jobs" class="default">
|
||||
<h2>{titles.job[currentLanguage]}</h2>
|
||||
<Jobs {jobs} {currentLanguage} />
|
||||
</div>
|
||||
<div class="default" id="training">
|
||||
<div id="training" class="default">
|
||||
<h2>{titles.school[currentLanguage]}</h2>
|
||||
<Training {currentLanguage} />
|
||||
</div>
|
||||
<div class="default" id="portfolio">
|
||||
<div id="portfolio" class="default">
|
||||
<h2>{titles.portfolio[currentLanguage]}</h2>
|
||||
<Jobs jobs={portfolio} {currentLanguage} />
|
||||
</div>
|
||||
<div class="default" id="contacts">
|
||||
<div id="contacts" class="default">
|
||||
<h2>{titles.contacts[currentLanguage]}</h2>
|
||||
<Contacts />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
@import './static/shared.scss';
|
||||
@import './static/elements.scss';
|
||||
@import '../app.scss';
|
||||
.language-selector {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-align: end;
|
||||
a {
|
||||
margin: 20px;
|
||||
}
|
||||
background-color: $basecolor2;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.menu {
|
||||
background-color: $basecolor2;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 30px;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
justify-content: 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>
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
$min-tablet: 768px;
|
||||
$min-desktop: 1024px;
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -3,3 +3,4 @@ body{
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
"paths": {
|
||||
"$lib": ["src/lib"],
|
||||
"$lib/*": ["src/lib/*"],
|
||||
"$elem":["src/elements"],
|
||||
// "$model":["src/model"]
|
||||
"$elem/*":["src/elements/*"],
|
||||
"$model/*":["src/model/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user