From 5b4535197014bd3dc87eb6f59ce88b963efed037 Mon Sep 17 00:00:00 2001 From: welpo Date: Sat, 11 Feb 2023 20:49:03 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20center=20tables;=20colo?= =?UTF-8?q?ur=20headers;=20round=20borders?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sass/main.scss | 7 ++++--- sass/parts/_misc.scss | 31 +++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/sass/main.scss b/sass/main.scss index a05da44..1a2ca17 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -41,7 +41,7 @@ --code-font: 'Cascadia Code'; - --bg-0: #fff; + --bg-0: #f0f0f0; --bg-1: #e7e7e7; --bg-2: #fefefe; --hover-color: white; @@ -58,16 +58,16 @@ --input-color: #e0a615; --meta-color: rgb(53, 53, 53); --accent-color: #aacb73; + --table-header-color: #91bf47; } [data-theme='dark'] { - --bg-0: #818181; + --bg-0: #2f2f2f; --bg-1: rgba(133, 133, 133, 0.5); --bg-2: rgba(23, 23, 23, 100%); --primary-color: #ef5350; --hover-color: white; --background-color: #1f1f1f; --secondary-color: #696969; - --highlights: #b35a5a; --links: #d35d6e; --text-color: #e1e1e1; --code: #ef476f; @@ -77,6 +77,7 @@ --input-color: #294797; --meta-color: rgb(198, 197, 197); --accent-color: #ff9a8c; + --table-header-color: #554994; .invertable-image { filter: invert(.88); diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index 737e7b5..0bffe3c 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -60,3 +60,34 @@ a:hover { padding: 0; } } + +table { + justify-self: center; + font: inherit; + overflow: hidden; + border-style : hidden!important; + margin: 2rem 0; + font-family: sans-serif; + min-width: 400px; + border-radius: 0.8rem; + border: none; + margin-left: auto; + margin-right: auto; + min-width: 13rem; +} + +table thead tr { + background-color: var(--table-header-color); + color: white; + text-align: left; +} + +table th, +table td { + padding: 0.5em 0.7em; + font-family: 'Source Serif Pro', serif; +} + +table tbody tr:nth-child(even) { + background-color: var(--bg-0); +}