seekseek
/
ui
1
0
Fork 1
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

Initial Review Changes.

Browse Source 
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'.
pull/1/head
supakeen 2 years ago
parent 1f0ba04aca
commit 13002057f8
3 changed files with 99 additions and 79 deletions
Show Stats Download Patch File Download Diff File

136
public/css/style.css
Unescape Escape View File

@ -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;
}
}

40
src/css/style.css
Unescape Escape View File

@ -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;
}
}

2
src/frontend/components/datasheet-search.css
Unescape Escape View File

@ -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;

Write Preview
Loading…
Cancel
Save