frontend: styling

This commit is contained in:
Lennart
2024-11-10 13:32:13 +01:00
parent 130d8b00ab
commit 9cc2b37a2e
3 changed files with 32 additions and 18 deletions

View File

@@ -1,3 +1,7 @@
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}

View File

@@ -6,11 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}RustiCal{% endblock %}</title>
<link rel="stylesheet" href="/frontend/assets/style.css" />
<style>
* {
box-sizing: border-box;
}
</style>
{% block imports %}{% endblock %}
</head>

View File

@@ -7,27 +7,42 @@
<style>
li.collection-list-item {
list-style: none;
display: grid;
margin: 12px;
min-height: 80px;
background: #EEE;
padding: 8px;
border-radius: 12px;
grid-template-areas:
"title color-chip"
"description color-chip";
grid-template-rows: auto auto;
grid-template-columns: auto 50px;
padding: 0;
display: contents;
a {
display: contents;
background: #EEE;
display: grid;
margin: 12px;
min-height: 80px;
border-radius: 12px;
grid-template-areas:
". color-chip"
"title color-chip"
"description color-chip"
". color-chip";
grid-template-rows: 12px auto auto 12px;
grid-template-columns: auto 50px;
color: inherit;
text-decoration: none;
padding-left: 12px;
.title {
grid-area: title;
}
.description {
grid-area: description;
}
.color-chip {
background: var(--color);
grid-area: color-chip;
border-radius: 0 12px 12px 0;
}
&:hover {
background: #DDD;
}
}
}
</style>