BuboBubo/livecodingfr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge dark and light style (CSS)

Browse Source
This commit is contained in:
Raphaël Forment
2024-02-09 11:02:52 +01:00
parent ca683c4cfa
commit 61067252eb
8 changed files with 43 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app.postcss
View File

@ -1,8 +1,4 @@
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@layer utilities {
.animate-gradient {
@ -29,47 +25,60 @@
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.sideli {
@apply text-xl ml-0;
}
.sidemenu-style {
@apply p-4 w-40 min-h-full bg-neutral-800 dark:bg-base-300 text-base-content overflow-hidden;
@apply p-4 w-40 min-h-full bg-neutral-800 text-base-content overflow-hidden;
}
.footer-style {
@apply ml-0 pl-0 pb-4 pt-4 bg-neutral-800 dark:bg-base-300 justify-between pr-16;
@apply ml-0 pl-0 pb-4 pt-4 bg-neutral-800 justify-between pr-16;
}
.mobile-menu-link {
@apply text-gray-100 hover:text-orange-300 flex md:hidden;
}
.sidebar-link {
@apply text-white hover:text-orange-300;
@apply text-white hover:text-orange-300 hover:bg-neutral-700;
}
.titlebar-link {
@apply text-gray-100 hover:text-orange-300 flex md:hidden;
}
.website-title {
@apply text-3xl uppercase font-bold bg-gradient-to-r from-orange-300 via-red-300 to-orange-200 text-transparent bg-clip-text animate-gradient
}
}
@layer base {
.inline-picture {
@apply w-24 inline;
@apply w-24 inline;
}
a {
@apply text-orange-300;
}
p {
@apply text-xl;
@apply text-xl text-white;
}
li {
@apply list-disc text-xl py-1 ml-8;
@apply list-disc text-xl text-white py-1 ml-8;
}
h1 {
@apply text-3xl border-b-2 dark:border-b-white border-b-gray-400 py-2 font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200;
}
@ -90,7 +99,7 @@
@apply my-2
}
blockquote {
@apply bg-gray-900 py-4 px-4 mx-4 my-4 border-l-4 text-xl
@apply bg-gray-900 py-4 px-4 mx-4 my-4 border-l-4 text-xl text-white
}
}
@tailwind components;

4
src/lib/components/Info.svelte
View File

@ -14,7 +14,7 @@
});
</script>
<div class="alert bg-base-300 dark:bg-base-300">
<div class="alert bg-neutral-600 border-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -27,5 +27,5 @@
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/></svg
>
<span class="text-xl">{@html info}</span>
<span class="text-xl text-white">{@html info}</span>
</div>

11
src/lib/components/Portrait.svelte
View File

@ -7,7 +7,7 @@
</script>
<div
class="mx-2 w-72 my-4 bg-base-300 dark:bg-base-300 border border-gray-200 rounded-lg shadow dark:border-gray-700"
class="mx-2 w-72 my-4 bg-neutral-800 rounded-lg shadow dark:border-gray-700"
>
<div class="flex justify-end px-4 pt-4" />
<div class="flex flex-col items-center pb-10">
@ -16,12 +16,15 @@
src={image}
alt="Portrait"
/>
<h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">
<h5 class="mb-1 text-xl font-medium text-white">
{name}
</h5>
<span class="text-sm text-gray-500 dark:text-gray-400">{description}</span>
<span class="text-sm text-gray-400">{description}</span>
<div class="flex mt-4 space-x-3 md:mt-6">
<a href={site} class="btn btn-tertiary">Site</a>
<a
href={site}
class="btn btn-tertiary border-none bg-neutral-700 text-white">Site</a
>
</div>
</div>
</div>

10
src/lib/components/Press.svelte
View File

@ -10,25 +10,23 @@
</script>
<div
class="max-w-sm my-4 w-80 h-fit bg-base-300 dark:bg-base-300 border border-gray-300 rounded-lg shadow-md dark:border-gray-700"
class="max-w-sm my-4 w-80 h-fit rounded-lg shadow-md bg-neutral-800 hover:bg-neutral-700"
>
<a href="#">
<img class="rounded-t-lg h-48 w-80 object-cover" src={image} alt="" />
</a>
<div class="p-5">
<a href="#">
<h5
class="mb-2 text-lg font-bold tracking-tight text-gray-900 dark:text-white"
>
<h5 class="mb-2 text-lg font-bold tracking-tight text-white">
{truncateString(title, 50)}
</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
<p class="mb-3 font-normal text-gray-400">
{description}
</p>
<a
href={link}
class="inline-flex items-center btn btn-primary text-sm font-medium text-center"
class="inline-flex items-center btn btn-primary text-sm font-medium text-center text-white"
>
En savoir plus
</a>

10
src/lib/components/SoftwareCard.svelte
View File

@ -8,7 +8,7 @@
<a
href={link}
class="flex flex-col items-center rounded-lg shadow md:flex-row dark:hover:bg-base-100 hover:bg-base-100 bg-base-300 dark:bg-base-300"
class="flex flex-col items-center bg-neutral-800 hover:bg-neutral-700 rounded-lg shadow md:flex-row"
>
<img
class="object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
@ -18,10 +18,12 @@
<div class="flex flex-col items-start md:items-end w-full">
<div class="flex flex-col justify-between p-4 leading-normal w-full">
<div class="flex justify-between">
<h5 class="inline mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white" > {name} </h5>
<p class="inline text-right">{creator}</p>
<h5 class="inline mb-2 text-2xl font-bold tracking-tight text-white">
{name}
</h5>
<p class="inline text-right text-orange-300">{creator}</p>
</div>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
<p class="mb-3 font-normal text-gray-400">
{description}
</p>
</div>

4
src/routes/+layout.svelte
View File

@ -8,7 +8,7 @@
</script>
<div>
<div class="bg-neutral-800 dark:bg-base-300">
<div class="bg-neutral-800">
<nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
<div class="flex items-center justify-between">
<a
@ -60,7 +60,7 @@
</div>
</div>
<main class="bg-gray-100 dark:bg-base-100">
<main class="bg-neutral-900">
<div class="drawer lg:drawer-open">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8">

2
src/routes/articles/+page.svelte
View File

@ -16,7 +16,7 @@
<ul class="">
{#each data.articles as post}
<li
class="ml-0 list-none px-4 pb-4 my-4 rounded-lg bg-base-300 dark:bg-base-300 hover:bg-base-200 hover:dark:bg-base-200 border-1 border-color-base-100"
class="ml-0 list-none px-4 pb-4 my-4 rounded-lg border-1 border-color-base-100 bg-neutral-800 hover:bg-neutral-700"
>
<h2>
<a href={post.path}>

2
src/routes/guides/+page.svelte
View File

@ -15,7 +15,7 @@
<ul>
{#each data.guides as post}
<li
class="ml-0 list-none px-4 pb-4 my-4 rounded-lg bg-base-300 dark:bg-base-300 hover:bg-base-200 hover:dark:bg-base-200 border-1 border-color-base-100"
class="ml-0 list-none px-4 pb-4 my-4 rounded-lg border-1 border-color-base-100 bg-neutral-800 hover:bg-neutral-700"
>
<h2>
<a href={post.path}>