From 33ebc4beb31926c5ba5445c71b854cdf3c2b2b4c Mon Sep 17 00:00:00 2001 From: Robin Tuszik Date: Fri, 11 Oct 2024 22:16:53 +0200 Subject: [PATCH] style(index_template.html): improve header layout with flexbox for better alignment and spacing fix(index_template.html): adjust logo and dark mode toggle positions for consistency style(index_template.html): change dark mode GitHub button color for better contrast --- src/index_template.html | 42 +++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/src/index_template.html b/src/index_template.html index f9de88d..9518da3 100644 --- a/src/index_template.html +++ b/src/index_template.html @@ -88,17 +88,24 @@ background-color: var(--mocha-base); } + .header { + display: flex; + justify-content: space-between; + align-items: center; + } + #logo_img { - top: 20px; - left: 20px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + top: 10px; + left: 10px; } h1 { + flex-grow: 2; color: var(--latte-mauve); text-align: center; font-size: 2.5rem; margin-bottom: 2rem; + margin-right: 8rem; } body.dark-mode h1 { @@ -106,9 +113,6 @@ } #dark-mode-toggle { - position: absolute; - top: 20px; - right: 20px; background: none; border: none; cursor: pointer; @@ -351,7 +355,7 @@ } .dark-mode .GitHub_Button { - background-color: var(--mocha-peach); + background-color: var(--mocha-maroon); } .GitHub_Button .text { @@ -408,19 +412,17 @@ - -

Cheatsheet Index

- +
+ +

Cheatsheet Index

+ +