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

Fix: starting to clean CSS

Browse Source
This commit is contained in:
Raphaël Forment
2024-01-21 20:19:36 +01:00
parent eb73e4ce67
commit 5773d21b4a
79 changed files with 211 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app.postcss
View File

@ -4,15 +4,31 @@
@layer utilities {
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
/* Hide scrollbar for Chrome, Safari and Opera */
.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;
}
.footer-style {
@apply ml-0 pl-0 pb-4 pt-4 bg-neutral-800 dark:bg-base-300 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;
}
}
@layer base {

88
src/routes/+layout.svelte
View File

@ -2,18 +2,26 @@
export const prerender = true;
import "../app.postcss";
let showMenu = false;
function toggleNavbar() { showMenu = !showMenu; }
function toggleNavbar() {
showMenu = !showMenu;
}
</script>
<div>
<div class="bg-neutral-800 dark:bg-base-300">
<nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
<div class="flex items-center justify-between">
<a href="/" class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 uppercase"
>livecoding.fr</a>
<a
href="/"
class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 uppercase"
>livecoding.fr</a
>
<!-- Mobile menu button -->
<div on:click={toggleNavbar} class="flex md:hidden">
<button type="button" class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400" >
<button
type="button"
class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
@ -38,15 +46,15 @@
? 'flex'
: 'hidden'}"
>
<a href="/evenements" class="text-gray-100 hover:text-orange-300 flex md:hidden" >Évènements</a>
<a href="/membres" class="text-gray-100 hover:text-orange-300 flex md:hidden">Membres</a>
<a href="/outils" class="text-gray-100 hover:text-orange-300 flex md:hidden">Outils</a>
<a href="/guides" class="text-gray-100 hover:text-orange-300 flex md:hidden">Guides</a>
<a href="/articles" class="text-gray-100 hover:text-orange-300 flex md:hidden">Articles</a>
<a href="/reseaux" class="text-gray-100 hover:text-orange-300 flex md:hidden">Réseaux</a>
<a href="/ressources" class="text-gray-100 hover:text-orange-300 flex md:hidden">Ressources</a>
<a href="/presse" class="text-gray-100 hover:text-orange-300 flex md:hidden">Presse</a>
<a href="/contacts" class="text-gray-100 hover:text-orange-300 flex md:hidden">Contact</a>
<a href="/evenements" class="mobile-menu-link">Évènements</a>
<a href="/membres" class="mobile-menu-link">Membres</a>
<a href="/outils" class="mobile-menu-link">Outils</a>
<a href="/guides" class="mobile-menu-link">Guides</a>
<a href="/articles" class="mobile-menu-link">Articles</a>
<a href="/reseaux" class="mobile-menu-link">Réseaux</a>
<a href="/ressources" class="mobile-menu-link">Ressources</a>
<a href="/presse" class="mobile-menu-link">Presse</a>
<a href="/contacts" class="mobile-menu-link">Contact</a>
</div>
</nav>
</div>
@ -64,49 +72,47 @@
aria-label="close sidebar"
class="drawer-overlay scrollbar-hide whitespace-nowrap overflow-hidden"
/>
<ul
class="menu p-4 w-40 min-h-full bg-neutral-800 dark:bg-base-300 text-base-content overflow-hidden"
>
<li class="text-xl ml-0">
<a class="text-white hover:text-orange-300" href="/evenements">Évènements</a>
<ul class="menu sidemenu-style">
<li class="sideli">
<a class="sidebar-link" href="/evenements">Évènements</a>
</li>
<li class="text-xl ml-0">
<a class="text-white hover:text-orange-300" href="/membres">Membres</a >
<li class="sideli">
<a class="sidebar-link" href="/membres">Membres</a>
</li>
<li class="text-xl ml-0">
<a
class="text-white hover:text-orange-300" href="/outils">Outils</a>
<li class="sideli">
<a class="sidebar-link" href="/outils">Outils</a>
</li>
<li class="text-xl ml-0">
<a class="text-white hover:text-orange-300" href="/guides">Guides</a>
<li class="sideli">
<a class="sidebar-link" href="/guides">Guides</a>
</li>
<li class="text-xl ml-0">
<a class="text-white hover:text-orange-300" href="/articles">Articles</a>
<li class="sideli">
<a class="sidebar-link" href="/articles">Articles</a>
</li>
<li class="text-xl ml-0">
<a class="text-white hover:text-orange-300" href="/reseaux">Réseaux</a>
<li class="sideli">
<a class="sidebar-link" href="/reseaux">Réseaux</a>
</li>
<li class="text-xl ml-0">
<a class="text-white hover:text-orange-300" href="/ressources">Ressources</a>
<li class="sideli">
<a class="sidebar-link" href="/ressources">Ressources</a>
</li>
<li class="text-xl ml-0">
<a class="text-white hover:text-orange-300" href="/presse">Presse</a>
<li class="sideli">
<a class="sidebar-link" href="/presse">Presse</a>
</li>
<li class="text-xl ml-0">
<a class="text-white hover:text-orange-300" href="/contacts">Contact</a>
<li class="sideli">
<a class="sidebar-link" href="/contacts">Contact</a>
</li>
</ul>
</div>
</div>
</main>
<footer
class="footer ml-0 pl-0 pb-4 pt-4 bg-neutral-800 dark:bg-base-300 justify-between pr-16"
>
<footer class="footer-style">
<div class="flex justify-between">
<p class="inline indent-4 text-bold text-white">Raphaël Forment</p>
<p> <a class="inline pl-4" href="https://github.com/Bubobubobubobubo/livecodingfr" >GitHub</a></p>
<p>
<a
class="inline pl-4"
href="https://github.com/Bubobubobubobubo/livecodingfr">GitHub</a
>
</p>
</div>
</footer>