batracos/svelte-playground
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS variables

Browse Source
This commit is contained in:
Giulio Alessandrini 2021-08-01 22:40:32 +02:00
parent 94ed9867ce
commit 960ff4ee24
5 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/apps/todoApp.svelte
View File

@ -59,25 +59,28 @@
input { input {
padding: 5px; padding: 5px;
margin: 0px; margin: 0px;
border: solid rgb(161, 161, 161) 1px; border: solid var(--gray) 1px;
border-radius: 5px; border-radius: 5px;
} }
button { button {
padding: 5px; padding: 5px;
margin: 0px; margin: 0px;
border: solid rgb(182, 182, 182) 1px; background-color: var(--lightgray);
border: solid var(--gray) 1px;
border-radius: 5px; border-radius: 5px;
} }
hr { hr {
border: 1px solid rgb(182, 182, 182); margin-top: 10px;
margin-bottom: 10px;
border: 1px solid var(--gray);
} }
.panel { .panel {
background-color: rgb(245, 253, 255); background-color: rgb(245, 253, 255);
padding: 10px; padding: 10px;
border: solid rgb(182, 182, 182) 1px; border: solid var(--gray) 1px;
border-radius: 5px; border-radius: 5px;
} }
@ -113,7 +116,7 @@ hr {
padding: 10px; padding: 10px;
margin: 5px 0px 5px 0px; margin: 5px 0px 5px 0px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
border: solid rgb(182, 182, 182) 1px; border: solid var(--gray) 1px;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;

6
src/lib/components/footer.svelte
View File

@ -5,3 +5,9 @@
<a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a> <a href="https://svelte.dev/"> <img src="https://avatars.githubusercontent.com/u/23617963?s=18" alt="svelte" /></a>
</p> </p>
</footer> </footer>
<style>
footer {
margin: 20px;
}
</style>

15
src/lib/components/nav.svelte
View File

@ -1,16 +1,21 @@
<nav class = "bg-gray-200 w-60 border-black border-2 rounded text-center"> <nav>
<a class = "nav-button" href="/">Home</a> <a class = "nav-button" href="/">home</a>
<a class = "nav-button" href="/about">about</a> <a class = "nav-button" href="/about">about</a>
</nav> </nav>
<style> <style>
nav {
margin-bottom: 1rem;
display: flex;
}
.nav-button { .nav-button {
margin: 5px; margin: 5px;
padding: 5px; padding: 8px;
background-color: rgb(235, 235, 235); background-color: var(--lightgray);
border-radius: 5px;
} }
.nav-button:hover { .nav-button:hover {
background-color: rgb(206, 206, 206); background-color: var(--gray);
} }
</style> </style>

13
src/routes/__layout.svelte
View File

@ -3,22 +3,25 @@
import Footer from "$lib/components/footer.svelte" import Footer from "$lib/components/footer.svelte"
</script> </script>
<div class="p-10 mx-auto flex flex-col items-center max-w-2xl site"> <div class="site">
<Nav/> <Nav/>
<slot></slot> <slot></slot>
<Footer/> <Footer/>
</div> </div>
<style> <style>
:global(*) { :global(*) {
padding: 0; padding: 0px;
margin: 0px;
text-decoration: none; text-decoration: none;
color : black color : black;
--gray: rgb(160, 160, 160);
--lightgray: rgb(240, 240, 240);
} }
.site { .site {
padding: 10px; padding: 2em;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 50em; max-width: 50em;

6
src/routes/index.svelte
View File

@ -3,3 +3,9 @@
</script> </script>
<h1>APPS</h1> <h1>APPS</h1>
<ToDo/> <ToDo/>
<style>
h1 {
margin: 10px;
}
</style>