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.
 
 
 
 

213 lines
3.2 KiB

@tailwind base;
@tailwind components;
body {
@apply h-screen flex bg-black text-gray-200 font-sans
}
main {
@apply max-w-screen-xl mx-auto flex-1 flex flex-col
}
menu {
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
@apply flex-initial flex flex-row justify-around bg-gray-900
}
nav {
@apply flex flex-row justify-around
}
.nav-button {
@apply block p-6
}
.nav-button:hover {
@apply bg-gray-700 text-blue-500 cursor-pointer
}
.nav-button:active {
@apply bg-gray-900 text-blue-600 cursor-wait
}
aside {
background-image: url("./photo.jpg");
box-shadow: inset 0 0 110px rgba(0,0,0,0.9);
@apply flex bg-center bg-cover bg-no-repeat justify-center
}
.person {
@apply self-center flex flex-col p-4 text-center
}
.person h1 {
@apply text-4xl p-2 font-bold
}
.person h2 {
@apply text-xl p-2 text-blue-500 font-bold
}
.person ul {
@apply flex flex-row justify-around p-2
}
.person li:hover {
@apply text-blue-500
}
.person li:active {
@apply text-blue-600 cursor-wait
}
.content {
scroll-behavior: smooth;
@apply flex flex-col overflow-auto min-h-0 p-4 flex-grow bg-gray-900
}
.content h2 {
@apply py-4 text-5xl font-bold
}
.content h3 {
@apply py-2 text-2xl font-bold flex
}
.content h3 svg {
@apply text-blue-500 inline self-center mr-2
}
.content section {
@apply flex flex-col
}
.content p {
@apply text-gray-400 py-2 text-xl
}
.content span {
@apply text-gray-600
}
.content span em {
@apply text-xl text-blue-500 font-bold
}
.content li span {
@apply text-blue-500 text-2xl font-bold
}
.about-me {
@apply flex flex-col
}
.about-me span em {
@apply mx-4
}
.about-me span em:first-of-type {
@apply ml-0
}
.kpis ul, .tools ul {
@apply flex flex-row py-4
}
.kpis li, .tools li {
@apply flex flex-1 flex-col items-center text-center text-gray-100 text-xs font-bold
}
.tools ul {
@apply flex-wrap
}
.tools li {
@apply flex self-center m-2
}
.tools li img {
height: 64px;
max-width: inherit;
}
.tools li svg {
@apply text-blue-500
}
.content .formations-experiences {
@apply flex flex-col-reverse
}
.formations-experiences article {
@apply py-4 mx-2
}
.formations-experiences em {
@apply text-sm text-blue-500 font-bold not-italic
}
.formations-experiences span {
@apply text-sm text-gray-600
}
.formations-experiences h4 {
@apply text-xl
}
.formations-experiences ul {
@apply flex ml-4 flex-col list-disc
}
.formations-experiences li {
@apply text-gray-500 text-sm
}
.content .formations, .content .experiences {
@apply flex-1
}
.content .pin {
@apply inline-block bg-blue-500 rounded-full px-3 py-1 mx-1 my-2 text-sm font-semibold text-gray-200
}
@screen md {
body {
@apply justify-center items-center
}
main {
height: 90vh;
@apply flex-row
}
menu {
@apply my-20 flex-col
}
nav {
@apply flex-col
}
aside {
@apply flex-shrink flex flex-wrap
}
.person {
@apply self-end mb-24 ml-24 mr-24
}
.content {
@apply my-20 p-8
}
.content .formations-experiences {
@apply flex-row
}
}
@tailwind utilities;