From 13002057f8de89d60432d557d9927cdea677e626 Mon Sep 17 00:00:00 2001 From: supakeen Date: Sat, 5 Mar 2022 17:34:09 +0100 Subject: [PATCH] Initial Review Changes. A bigger border for the logo, some prettier margins. Remove one of the breakpoints for the screen size. Fix the footer again, but this time within the constraints of 'the body'. --- public/css/style.css | 136 ++++++++++--------- src/css/style.css | 40 ++++-- src/frontend/components/datasheet-search.css | 2 +- 3 files changed, 99 insertions(+), 79 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index ddf1085..16abe19 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,109 +1,109 @@ :root { - --color-background: #f9f9f9; - --color-background-attention: #ffffff; - --color-text: #000000; - --color-text-inverted: #ffffff; - --color-text-subdued: #4f4e4e; - --color-text-attention: teal; - --color-text-warning: rgb(218, 13, 13); - --invert: 0; + --color-background: #f9f9f9; + --color-background-attention: #ffffff; + --color-text: #000000; + --color-text-inverted: #ffffff; + --color-text-subdued: #4f4e4e; + --color-text-attention: teal; + --color-text-warning: rgb(218, 13, 13); + --invert: 0; } @media (prefers-color-scheme: dark) { - :root { - --color-background: #222222; - --color-background-attention: #000000; - --color-text: #f9f9f9; - --color-text-inverted: #ffffff; - --color-text-subdued: #f1f1f1; - --color-text-warning: rgb(218, 13, 13); - --invert: 1; - } + :root { + --color-background: #222222; + --color-background-attention: #000000; + --color-text: #f9f9f9; + --color-text-inverted: #ffffff; + --color-text-subdued: #f1f1f1; + --color-text-warning: rgb(218, 13, 13); + --invert: 1; + } } * { - box-sizing: border-box; + box-sizing: border-box; } html, body { - color: var(--color-text); + color: var(--color-text); background: var(--color-background); font-family: sans-serif; - min-height: 100%; - margin: 0; + min-height: 100%; + margin: 0; } html { - height: 100%; + height: 100%; } body { - padding: .5rem; - height: 100%; - display: grid; - grid-template: - "header" 7rem - "content" 1fr - "footer" 2rem; + height: 100%; + display: grid; + grid-template: + "header" 6rem + "content" 1fr; } header { - grid-area: header; - border-bottom: 1px solid var(--color-text-subdued); + grid-area: header; + border-bottom: 2px solid var(--color-text-subdued); } header .logoContainer { - display: inline-block; - position: relative; - margin: 1rem 0; - } + display: inline-block; + position: relative; + } header .logoContainer .logo { - height: 5rem; - filter: invert(var(--invert)); - } + height: 5rem; + filter: invert(var(--invert)); + } header .logoContainer .siteTag { - position: absolute; - right: 0; - bottom: 0; + position: absolute; + right: 0; + bottom: 0; - color: var(--color-text-attention); - font-size: 1.3em; - } + color: var(--color-text-attention); + font-size: 1.3em; + } header .logoContainer .betaTag { - width: 1px; /* Out-of-box alignment hack */ - position: absolute; - right: -.3rem; - bottom: 0; - font-style: italic; + width: 1px; /* Out-of-box alignment hack */ + position: absolute; + right: -.3rem; + bottom: 0; + font-style: italic; - color: var(--color-text-warning); - font-size: 1.3rem; - } + color: var(--color-text-warning); + font-size: 1.3rem; + } main { - grid-area: content; - margin-bottom: 2em; + grid-area: content; + margin: .5rem 0; + padding: 0 0 2rem 0; } main div.search input { width: 100%; } footer { - grid-area: footer; - line-height: 2rem; + position: fixed; + bottom: 0; + line-height: 2rem; border-top: 1px solid var(--color-text-subdued); + background: var(--color-background); } main a, footer a { - color: var(--color-text-attention); - } + color: var(--color-text-attention); + } main a:hover, footer a:hover { text-decoration: none; } article { - line-height: 1.25rem; + line-height: 1.25rem; } .counter { @@ -121,17 +121,27 @@ article { body { width: 100%; } -} -@media only screen and (min-width: 1000px) { - body { - width: 70%; + footer { + width: calc(100% - 1rem); } + + body { + padding: 1rem .5rem 0 .5rem; + } } @media only screen and (min-width: 1400px) { body { width: 60rem; } + + footer { + width: calc(60rem - 4rem); + } + + body { + padding: 1rem 2rem 0 2rem; + } } diff --git a/src/css/style.css b/src/css/style.css index cda8b18..e179b64 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -38,23 +38,20 @@ html { } body { - padding: .5rem; height: 100%; display: grid; grid-template: - "header" 7rem - "content" 1fr - "footer" 2rem; + "header" 6rem + "content" 1fr; } header { grid-area: header; - border-bottom: 1px solid var(--color-text-subdued); + border-bottom: 2px solid var(--color-text-subdued); .logoContainer { display: inline-block; position: relative; - margin: 1rem 0; .logo { height: 5rem; @@ -85,7 +82,8 @@ header { main { grid-area: content; - margin-bottom: 2em; + margin: .5rem 0; + padding: 0 0 2rem 0; div.search { input { width: 100%; } @@ -93,9 +91,11 @@ main { } footer { - grid-area: footer; + position: fixed; + bottom: 0; line-height: 2rem; border-top: 1px solid var(--color-text-subdued); + background: var(--color-background); } main, footer { @@ -122,20 +122,30 @@ article { } @media only screen and (max-width: 1000px) { - body { - width: 100%; - } -} + body { + width: 100%; + } + + footer { + width: calc(100% - 1rem); + } -@media only screen and (min-width: 1000px) { body { - width: 70%; + padding: 1rem .5rem 0 .5rem; } } @media only screen and (min-width: 1400px) { + body { + width: 60rem; + } + + footer { + width: calc(60rem - 4rem); + } + body { - width: 60rem; + padding: 1rem 2rem 0 2rem; } } diff --git a/src/frontend/components/datasheet-search.css b/src/frontend/components/datasheet-search.css index a361111..0b99273 100644 --- a/src/frontend/components/datasheet-search.css +++ b/src/frontend/components/datasheet-search.css @@ -1,6 +1,6 @@ .query { font-size: 1.3rem; - background-color: var(--color-background-autention); + background-color: var(--color-background-attention); color: var(--color-text); border: 1px solid var(--color-text-attention); border-radius: 5px;