more css tweaks

new font and better margins
This commit is contained in:
Giulio Alessandrini 2021-08-03 13:26:56 +02:00
parent 8315ac0fd4
commit f5c71d71c1
2 changed files with 72 additions and 46 deletions

View File

@ -45,7 +45,7 @@
</script>
<div class = "panel">
<h2 class= "title">TODO</h2>
<h2 class= "title">todo</h2>
<hr/>
<div class="todo-input">
<input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
@ -71,6 +71,7 @@
* {
--cream: #FEF9EF;
--blue: #227c9d;
--blue-disabled: #aabac0;
--green: #17C3B2;
--yellow: #FFCB77;
--red: #FE6D73;
@ -78,23 +79,33 @@
.panel {
padding: 10px;
padding-top: 1rem;
padding-bottom: 1rem;
background-color: var(--cream);
font-size: 1rem;
font-family: 'Atkinson Hyperlegible', sans-serif;
}
@media only screen and (min-width: 500px) {
.panel {
margin-left: auto;
margin-right: auto;
width: 500px;
border: solid var(--cream) 1px;
border-radius: 5px;
border: solid var(--cream) 0px;
border-radius: 10px;
}
}
.title {
margin-left: 2rem;
font-weight: 400;
font-size: 3rem;
color: var(--yellow);
}
hr {
margin-top: 10px;
margin-bottom: 20px;
border: 1px solid var(--yellow);
margin-left: 1rem;
margin-bottom: 1rem;
border: 2px solid var(--yellow);
}
button {
@ -103,99 +114,106 @@ button {
background-color: var(--blue);
border: solid var(--blue) 1px;
border-radius: 5px;
color: var(--cream);
color: white;
font-family: 'Atkinson Hyperlegible', sans-serif;
font-size: 1rem;
}
.todo-input {
font-size: 0px;
margin: 1rem;
}
.todo-text {
padding: 7px;
padding: 4px;
margin: 0px;
border: solid white 2px;
border-right: 0px;
border-radius: 0px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
font-family: 'Atkinson Hyperlegible', sans-serif;
font-size: 1rem;
}
.todo-text:focus {
outline: none;
border-bottom-color: var(--blue);
/* border-left-color: var(--blue);
border-top-color: var(--blue); */
}
.todo-add {
padding: 8px;
border-radius: 0px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
}
.disabled {
background-color: var(--blue-disabled);
border-color: var(--blue-disabled);
}
button:active {
background-color: var(--yellow);
border-color: var(--yellow);
color: black;
}
button:active {
background-color: var(--yellow);
color: black;
}
.title {
padding: 0px;
margin: 0px;
margin-left: 5px;
font-weight: 400;
font-size: 1.5rem;
color: var(--yellow);
button:active.disabled {
background-color: var(--blue-disabled);
border-color: var(--blue-disabled);
color: white;
}
.todo-filter {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.todo-filter button {
margin-right: 5px;
margin-right: 0.5rem;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.todo-list {
display: flex;
flex-direction: column;
min-height: 10em;
padding: 1rem;
padding-bottom: 0.5rem;
background-color: var(--blue-disabled);
/* list
* padding 1.5rem
todo
* content 1.0rem
* padding 1.0rem
* marging 0.5rem
button
* padding 6px
* border 6px
total
(1.5 + 2.5*3)rem (9rem)
+ (12*3)px (36px)
*/
min-height: calc(11.5rem + 48px);
}
.todo {
padding: 10px;
margin: 5px 0px 5px 0px;
padding: 0.5rem;
margin-bottom: 0.5rem;
background-color: var(--yellow);
border-radius: 5px;
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 1.2rem;
}
.todo.done {
/* background-color: #FEF9EF; */
}
.done p {
/* text-decoration: line-through; */
color: var(--cream);
background-color: var(--cream);
}
.todo button {
padding: 3px;
margin-left: auto;
background-color: var(--green);
border-color: var(--green);
font-size: 1rem;
border: solid 3px var(--green);
color: var(--cream)
}
@ -205,4 +223,9 @@ button:active {
color: var(--cream);
}
.todo button:active {
background-color: var(--yellow);
color: black;
}
</style>

View File

@ -10,6 +10,8 @@
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
:global(*) {
padding: 0px;
margin: 0px;
@ -25,4 +27,5 @@
display: flex;
flex-direction: column;
}
</style>