florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update colors from google material palette

Browse source
This commit is contained in:
Florian RICHER 2023-06-04 18:23:39 +02:00
parent 1dadd6c821
commit 3afe69de9e
7 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/App.css
View file

@ -1,3 +0,0 @@
#root {
@apply m-0 p-0;
}

3
src/App.scss Normal file
View file

@ -0,0 +1,3 @@
#root {
@apply m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
}

2
src/App.tsx
View file

@ -1,4 +1,4 @@
import './App.css'
import './App.scss'
import TopComponent from "./components/TopComponent";
import MonParcours from './components/MonParcours';

3
src/components/Tag.scss
View file

@ -1,3 +1,4 @@
.tag {
@apply text-white bg-gray-500 rounded-lg px-3 py-1 font-thin text-sm;
@apply rounded-lg px-3 py-1 font-thin text-sm;
@apply bg-primary dark:bg-dark_primary text-on_primary dark:text-dark_on_primary;
}

7
src/components/timeline/Timeline.scss
View file

@ -1,13 +1,14 @@
.timeline {
@apply w-full p-5;
@apply w-full px-5;
& > ul {
@apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;
// Draw center line
&:before {
@apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2 bg-[#f5f5f5];
box-shadow: 1px 1px 5px #dee1e4, -1px -1px 5px #fff;
@apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2;
@apply bg-primary/5 dark:bg-dark_primary/5;
// @apply shadow-2xl shadow-on_surface/50 dark:shadow-dark_on_surface/50;
}
}
}

15
src/components/timeline/TimelineElement.scss
View file

@ -3,8 +3,9 @@
// Place point in center line
&:before {
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 bg-[#f8f8f8] -ml-2 z-50;
box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 -ml-2 z-50;
@apply bg-primary/5 dark:bg-dark_primary/5;
// box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
}
&:nth-child(even) {
@ -21,12 +22,14 @@
.timeline-element__category {
@apply top-5 flex md:justify-end mb-12;
@apply text-on_surface dark:text-dark_on_surface;
}
.timeline-element__info {
& > details {
@apply mb-12 rounded-xl overflow-hidden relative bg-[#f5f5f5];
box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
@apply mb-12 rounded-xl overflow-hidden relative;
@apply bg-primary/5 dark:bg-dark_primary/5;
// box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;
& > summary, & > div {
@apply p-5;
@ -34,6 +37,7 @@
& > summary {
@apply block select-none cursor-pointer outline-none p-5 font-semibold;
@apply text-on_surface dark:text-dark_on_surface;
// BEGIN TRANSITION
@apply mb-0;
@ -41,14 +45,13 @@
// END TRANSITION
&:hover {
@apply bg-[#f8f8f8];
@apply bg-opacity-5;
}
}
&[open] {
& > summary {
@apply mb-5; // TRANSITION
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
}

15
tailwind.config.js
View file

@ -5,8 +5,21 @@ export default {
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
extend: {
colors: {
primary: '#005db5',
dark_primary: '#a8c8ff',
on_primary: '#ffffff',
dark_on_primary: '#003062',
surface: '#fdfbff',
dark_surface: '#1a1b1e',
on_surface: '#1a1b1e',
dark_on_surface: '#e3e2e6'
}
},
},
plugins: [],
}
// #005eb6
// https://m3.material.io/theme-builder#/custom