From 57fa693c26cbbca4f906ff2a83b0489ffe71e966 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Sun, 28 Jul 2024 21:11:12 +0200 Subject: [PATCH] imporvement: simpler style --- public/css/index.css | 301 +++++++++++-------------------------------- 1 file changed, 75 insertions(+), 226 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 95da072..1e76d16 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -30,19 +30,9 @@ } :root { - --color-gray-20: #e0e0e0; - --color-gray-50: #C0C0C0; - --color-gray-90: #2f2f2f; - - /* --text-color is assigned to --color-gray-_ above */ - --text-color-link: #c92a2a; - --text-color-link-active: #c92a2a; - --text-color-link-visited: #c92a2a; - - --background-color: #fafafa; - --background-menu: #495057; - - --text-color: var(--color-gray-90); + --background-color: #212529; + --background-color-alt: #343a40; + --text-color: #e9ecef; --font-family: Inter, -apple-system, @@ -67,256 +57,115 @@ box-sizing: border-box; } -html, -body { - margin: 0 auto; - min-height:100%; - font-family: var(--font-family); - color: var(--text-color); +h1, h2, p, nav, main { + margin-bottom: 1.5rem!important; } -body { - padding: 24px; -} - -.wrapper { - width: 800px; +h1, h2 { + font-family: var(--font-family-title); margin: auto; - position: relative; -} - -html { - overflow-y: scroll; - background-color: var(--background-color); -} - -/* https://www.a11yproject.com/posts/how-to-hide-content/ */ -.visually-hidden { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} - -a[href] { - color: var(--text-color-link); - text-decoration: underline dashed 1px; - border-radius: 0.1rem; - text-decoration: underline dashed 1px; - text-underline-offset: 0.1rem; -} -a[href]:visited { - color: var(--text-color-link-visited); -} -a[href]:hover, -a[href]:active { - color: var(--text-color-link-active); - background-color: rgba(0,0,0,0.1); - text-decoration: none; -} - -blockquote { - opacity: 75%; - border-left: 3px solid currentColor; - padding-left: 12px; -} - -/* Direct Links / Markdown Headers */ -.header-anchor { - text-decoration: none; - font-style: normal; - font-size: 1em; - margin-left: .1em; -} -a[href].header-anchor, -a[href].header-anchor:visited { - color: transparent; -} -a[href].header-anchor:focus, -a[href].header-anchor:hover { - text-decoration: underline; -} -a[href].header-anchor:focus, -:hover > a[href].header-anchor { - color: #aaa; -} - -header { - background-color: var(--text-color-link); - background-image: url("/img/back.png"); - border-radius:3px; - height:240px; - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.8); - display:flex; - align-items: center; - justify-content: center; } h1 { - color: #e03131; - font-family: var(--font-family-title); - font-size: 3rem; -} - -header h1 { + font-size: 4.5rem; + line-height: 4.5rem; text-align: center; } -header h1 a[href] { - font-size:5.5rem; - text-shadow: -2px -2px 0 #000, - 0 -2px 0 #000, - 2px -2px 0 #000, - 2px 0 0 #000, - 2px 2px 0 #000, - 0 2px 0 #000, - -2px 2px 0 #000, - -2px 0 0 #000, - .05em .1em 0 #000; - font-weight: 900; - color:white!important; - text-decoration: none; - text-transform: uppercase; - display: block; - line-height: 1; +h2 { + font-size: 2rem; + line-height: 3rem; +} + +html { + font-family: var(--font-family); + background-color: var(--background-color); + font-size: 16px; + line-height: 1.5rem; +} + +body { + color: var(--text-color); + margin: auto; + max-width: 800px; + padding: 1.5rem; +} + +nav { + border-radius: 999px; + padding: .33rem; +} + +nav ol { + display: flex; + justify-content: space-between; margin: 0; padding: 0; } -.quadrillage { - display:grid; - grid-template-columns : 1fr 1fr; - column-gap: 1rem; +nav li { + list-style-type: none; } -#sidebar { - position: fixed; - top: 0; - left: 0; - border-right: 1px solid black; - background-color: var(--background-menu); - padding:12px; - height:100%; - box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.4); -} - -#sidebar > ul > li { - margin:0; - padding:3px; -} - -main { - background-color: var(--background-color); - line-height:1.5rem; - width: 800px; - margin: auto; -} - -main img { +nav a, a.btn { display: block; - max-width: 100%; - height: auto; margin: auto; + padding: .66rem 1rem; + border-radius: 999px; + width:fit-content; + text-decoration: none; } -.card, -#links ul>li { - background-color: var(--background-menu); +nav, .btn { + background-color: rgba(255 255 255 / 10%); } -#links ul > li { - list-style: none; - font-weight: bold; -} - - -#more-info ol > li, -#more-info ul > li { - list-style: none; -} - -#links ul>li li, -#more-info li { - border-radius:0px; - padding:0px; - margin:0px; - font-weight: normal; - border:0; - box-shadow: none; -} - -ul.nav, -#links ul li ul, -#more-info ol { - padding:0; - margin:0; - list-style: none; -} - -#more-info ol li a { - display:block; - width:100%; - text-decoration:dashed; - color: white; - border-radius:3px; - padding:6px; -} - -#more-info ol li a { +a { color: var(--text-color); -} - -#links ul li > p { + text-decoration: underline dashed 1px; padding: 3px; - margin:0; + border-radius: 4px; } -#more-info h2 { - padding: 3px; - margin: 0; - font-size: 1rem; +a:hover { + background-color: rgba(255 255 255 / 30%); } -#links ul li li a, -#more-info ol li a { - padding-left:18px; +.header-anchor { + font-size: 0.8em; + text-decoration: none; + color: #adb5bd; + opacity: 0; } - -#more-info ol li a:hover, -#more-info ol li a.active { - background-color:rgba(0,0,0,0.1); +h2:hover .header-anchor { + opacity: 1; } -aside { - position: absolute; - top: 1px; - right: -264px; - height: 100%; +table { + width: 100%; } -#more-info { - position: sticky; - top:12px; - border-left: 3px solid #e03131; - padding: 6px; +table td, table th { + background-color: var(--background-color-alt); + padding: 4px 12px; + border: 1px solid var(--background-color); } -#more-info { - min-width: 240px; - width: 240px; +table th:first-child { + border-top-left-radius: 8px; +} + +table th:last-child { + border-top-right-radius: 8px; } footer { - text-align:right; - margin: auto; - width: 800px; -} - -iframe { - border: none; + margin-top: 1rem; + text-align: right; } +footer a { + display: inline-block; + line-height: 0; +} \ No newline at end of file