You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
3.2 KiB
170 lines
3.2 KiB
/******* RESET *******/
|
|
|
|
html,
|
|
body,
|
|
p,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/************** VARIABLES **************/
|
|
|
|
:root {
|
|
/* colors */
|
|
--main: hsl(229, 27%, 8%);
|
|
--main-light: hsl(30, 35%, 40%);
|
|
--module-background: hsl(31, 77%, 60%);
|
|
--search-background: hsl(4, 100%, 74%);
|
|
--pomme-background: hsl(118, 18%, 66%);
|
|
--myrtille-background: hsl(235, 17%, 63%);
|
|
|
|
/* font-family */
|
|
--font-family-sans: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, 'Helvetica Neue', sans-serif;
|
|
|
|
/* font Modular scale */
|
|
--scale-000: 0.75rem; /* 12px */
|
|
--scale-00: 0.875rem; /* 14px */
|
|
--scale-0: 1rem; /* 16px */
|
|
--scale-1: 1.125rem; /* 18px */
|
|
--scale-2: 1.25rem; /* 20px */
|
|
--scale-3: 1.5rem; /* 24px */
|
|
--scale-4: 1.875rem; /* 30px */
|
|
--scale-5: 2.25rem; /* 36px */
|
|
|
|
/* font weights */
|
|
--font-weight-regular: 400;
|
|
--font-weight-bold: 700;
|
|
|
|
/* sizing property -> margin, padding, height */
|
|
--spacing-0000: 4px;
|
|
--spacing-000: 8px;
|
|
--spacing-00: 12px;
|
|
--spacing-0: 16px;
|
|
--spacing-1: 20px;
|
|
--spacing-2: 32px;
|
|
--spacing-3: 48px;
|
|
--spacing-4: 64px;
|
|
--spacing-5: 96px;
|
|
|
|
/* Widths applied as max-width */
|
|
--width-00: 120px;
|
|
|
|
/* Grid gaps */
|
|
--gap-00: 12px;
|
|
--gap-0: 16px;
|
|
--gap-1: 24px;
|
|
}
|
|
|
|
/************** GLOBAL STYLES **************/
|
|
|
|
html {
|
|
background-color: var(--main);
|
|
}
|
|
|
|
body {
|
|
padding: var(--spacing-4);
|
|
overflow: hidden;
|
|
font-family: var(--font-family-sans);
|
|
}
|
|
|
|
grid {
|
|
display: grid;
|
|
grid-auto-flow: dense;
|
|
grid-auto-rows: var(--spacing-2);
|
|
grid-gap: var(--gap-1);
|
|
grid-template-columns: repeat(auto-fit, minmax(var(--width-00), 1fr));
|
|
}
|
|
|
|
pomme {
|
|
grid-row: span 2;
|
|
background-color: var(--pomme-background);
|
|
border-radius: 10px;
|
|
animation: fadein-page 200ms ease-out normal backwards;
|
|
}
|
|
|
|
pp-loader {
|
|
display: grid;
|
|
grid-gap: var(--gap-00);
|
|
grid-template-areas:
|
|
'pp-loader-dot pp-loader-dot'
|
|
'pp-loader-dot pp-loader-dot';
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
}
|
|
|
|
pp-loader-dot {
|
|
width: var(--spacing-1);
|
|
height: var(--spacing-1);
|
|
background-color: var(--main);
|
|
border-radius: 50%;
|
|
animation: loader-animation 1s linear 1s infinite alternate;
|
|
}
|
|
|
|
pp-loader-dot:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
pp-loader-dot:nth-child(2) {
|
|
animation-delay: -0.2s;
|
|
}
|
|
|
|
pp-loader-dot:nth-child(3) {
|
|
animation-delay: -0.4s;
|
|
}
|
|
|
|
pp-loader-dot:nth-child(4) {
|
|
animation-delay: -0.6s;
|
|
}
|
|
|
|
.error-notification {
|
|
color: var(--search-background);
|
|
font-weight: var(--font-weight-regular);
|
|
font-size: var(--scale-2);
|
|
}
|
|
|
|
/******* ANIMATION *******/
|
|
|
|
@keyframes module-display {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes loader-animation {
|
|
100% { background-color: var(--module-background); }
|
|
}
|
|
|
|
@keyframes fadein-page {
|
|
0% { transform: scale(0); }
|
|
70% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
/******* IMPORTS *******/
|
|
|
|
@import './myrtille/myrtille.css';
|
|
@import './raisin/raisin.css';
|
|
@import './clock/clock.css';
|
|
@import './search/search.css';
|
|
@import './binance/binance.css';
|
|
@import './openweather/openweather.css';
|
|
@import './unsplash/unsplash.css';
|
|
@import './stormglass/stormglass.css';
|