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

Begin add MonParcours + Update css work

Browse source
This commit is contained in:
Florian RICHER 2023-10-10 22:59:08 +02:00
parent 1e27d18cb3
commit f4dba8213d
21 changed files with 1499 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

13
style/link.css Normal file
View file

@ -0,0 +1,13 @@
@layer components {
.link {
@apply flex gap-1 font-semibold italic;
& > i {
@apply flex items-center;
& > svg {
@apply scale-75;
}
}
}
}

12
style/portfolio.css
View file

@ -1,3 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import './link.css';
@import './social_links.css';
@import './tag.css';
@import './timeline.css';
@import './top_component.css';

24
style/project.css Normal file
View file

@ -0,0 +1,24 @@
@layer components {
.project_list {
@apply grid grid-cols-1 gap-4 md:grid-cols-2 mt-3;
& > a {
@apply rounded-lg p-5 flex flex-col items-center gap-2;
@apply bg-primary/10 dark:bg-dark_primary/10;
@apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
&:hover {
@apply bg-primary/20 dark:bg-dark_primary/20;
@apply shadow-md shadow-primary/10 dark:shadow-dark_primary/10;
}
& > img {
@apply h-1/2;
}
& > div {
@apply flex flex-col justify-center h-full;
}
}
}
}

15
style/social_links.css Normal file
View file

@ -0,0 +1,15 @@
@layer components {
.social_links {
@apply flex gap-5 justify-center flex-wrap my-5;
& > .social_link {
& > svg {
@apply mx-auto scale-150 mb-1;
}
& > span {
@apply text-sm;
}
}
}
}

6
style/tag.css Normal file
View file

@ -0,0 +1,6 @@
@layer components {
.tag {
@apply rounded-lg px-3 py-1 font-normal text-sm;
@apply bg-primary dark:bg-dark_primary text-on_primary dark:text-dark_on_primary;
}
}

102
style/timeline.css Normal file
View file

@ -0,0 +1,102 @@
@layer components {
.timeline {
@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;
@apply bg-primary/10 dark:bg-dark_primary/10;
@apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
}
}
}
.timeline-element {
@apply relative flex flex-col md:flex-row justify-between;
/* Place point in center line */
&:before {
@apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 -ml-2 z-50;
@apply bg-primary/10 dark:bg-dark_primary/10;
@apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
}
&:nth-child(even) {
@apply md:flex-row-reverse;
.timeline-element__category {
@apply md:flex-row-reverse;
}
}
.timeline-element__info, .timeline-element__category {
@apply relative w-4/5 md:w-2/5 left-[10%] md:left-0;
@apply text-on_surface dark:text-dark_on_surface;
}
.timeline-element__category {
@apply top-5 flex md:justify-end mb-12;
}
.timeline-element__info {
& > details {
@apply mb-12 rounded-xl overflow-hidden relative;
@apply bg-primary/10 dark:bg-dark_primary/10;
@apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
& > summary, & > div {
@apply p-5;
}
& > summary {
@apply relative block select-none cursor-pointer outline-none p-5 pr-10 font-semibold;
&:hover {
@apply bg-primary/20 dark:bg-dark_primary/20;
}
i {
@apply absolute right-5 h-full top-0 flex items-center;
& > svg {
@apply scale-125;
transition: transform 300ms ease;
}
}
}
&[open] {
& > summary {
& > i > svg {
@apply -rotate-180;
}
& ~ * {
animation: toggle 0.4s ease-in-out;
}
}
}
}
}
}
@keyframes toggle {
0% {
font-size: 0;
opacity: 0;
}
90% {
font-size: 1rem;
opacity: 0;
}
100% {
font-size: 1rem;
opacity: 1;
}
}
}

34
style/top_component.css Normal file
View file

@ -0,0 +1,34 @@
@layer components {
.top_component {
@apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;
& > div {
@apply flex-1 p-10;
}
& > .top_component__image {
@apply flex justify-center items-center;
& > img {
@apply mx-auto rounded-lg;
}
}
& > .top_component__presentation {
@apply flex flex-col gap-3;
& > h1 {
@apply font-bold text-3xl;
}
& > h4 {
@apply font-semibold text-xl;
}
& > p {
@apply font-normal text-base;
}
}
}
}