feat: finish table styling

This commit is contained in:
Alexander Daichendt 2022-07-26 19:22:43 +02:00
parent 68e0efd51c
commit c342dadf21
2 changed files with 36 additions and 8 deletions

View file

@ -1,19 +1,47 @@
<script>
</script>
<table id="table">
<slot />
</table>
<div>
<table id="table">
<slot />
</table>
</div>
<style>
table {
background-color: var(--light-color);
border-radius: 1rem;
div {
border-radius: 0.5rem;
padding: 1rem;
box-shadow: 0px 0px 2px var(--shadow-color);
border: 1px solid var(--outline-color);
}
table {
border-collapse: collapse;
width: 100%;
}
:global(#table thead th) {
padding-bottom: 0.25rem;
border: solid;
width: 350px;
margin: auto;
border-top: none;
border-left: none;
border-right: none;
border-bottom: none;
background: linear-gradient(var(--special-color), var(--special-color)) bottom
/* left or right or else */ no-repeat;
background-size: 50% 2px;
}
:global(#table tbody tr) {
margin: 1rem;
border-bottom: 1px solid var(--outline-color);
}
:global(#table tbody tr:last-child) {
border-bottom: none;
}
:global(#table tbody td) {
padding: 0.5rem;
}
</style>

View file

@ -4,7 +4,7 @@ title: 'Software recommendations for a privacy conscious digital life'
description: ''
keywords:
- privacy
hidden: false
hidden: true
---
<script context="module" lang="ts">