diff --git a/public/css/style.css b/public/css/style.css index da13113..16abe19 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,75 +1,110 @@ +: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; +} + +@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; + } +} + +* { + box-sizing: border-box; +} + html, body { - /* background-color: rgb(248, 249, 236); */ - background-color: #f9f9f9ff; + color: var(--color-text); + background: var(--color-background); font-family: sans-serif; + min-height: 100%; margin: 0; - padding: 0; } -.wrapper { - max-width: 900px; - margin-left: 1em; - margin-right: 1em; +html { + height: 100%; } -.header { - margin-top: 1em; - margin-left: 0.5em; - margin-right: 0.5em; - padding-bottom: .7em; - border-bottom: 2px solid black; +body { + height: 100%; + display: grid; + grid-template: + "header" 6rem + "content" 1fr; } -.contents { - margin-bottom: 2em; - padding: .7em 0; +header { + grid-area: header; + border-bottom: 2px solid var(--color-text-subdued); } -.footer { - position: fixed; - bottom: 0; - left: 0.5em; - right: 0.5em; +header .logoContainer { + display: inline-block; + position: relative; + } - box-sizing: border-box; - border-top: 1px solid black; - height: 2em; - padding: 0.2em; - background-color: #f9f9f9ff; -} +header .logoContainer .logo { + height: 5rem; + filter: invert(var(--invert)); + } -.footer .wrapper { - margin-left: calc(1em - 0.5em); - } +header .logoContainer .siteTag { + position: absolute; + right: 0; + bottom: 0; -.logoContainer { - display: inline-block; - position: relative; + 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; + + color: var(--color-text-warning); + font-size: 1.3rem; + } + +main { + grid-area: content; + margin: .5rem 0; + padding: 0 0 2rem 0; } -.logoContainer .logo { - height: 5em; - } +main div.search input { width: 100%; } -.logoContainer .siteTag { - position: absolute; - right: 0; - bottom: 0; +footer { + position: fixed; + bottom: 0; + line-height: 2rem; + border-top: 1px solid var(--color-text-subdued); + background: var(--color-background); +} - color: teal; - font-size: 1.3em; +main a, footer a { + color: var(--color-text-attention); } -.logoContainer .betaTag { - width: 1px; /* Out-of-box alignment hack */ - position: absolute; - right: -.3em; - bottom: 0; - font-style: italic; +main a:hover, footer a:hover { text-decoration: none; } - color: rgb(218, 13, 13); - font-size: 1.3em; - } +article { + line-height: 1.25rem; +} .counter { margin-bottom: .5em; @@ -78,11 +113,35 @@ html, body { text-align: right; } -.staticContent { - margin: 0 2em; - max-width: 900px; -} - .linkSpacer { margin: 0 .5em; } + +@media only screen and (max-width: 1000px) { + body { + width: 100%; + } + + 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 6ef97ab..e179b64 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,77 +1,113 @@ -$pagePadding: 0.5em; -$background: #f9f9f9ff; +: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; +} + +@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; + } +} + +* { + box-sizing: border-box; +} html, body { - /* background-color: rgb(248, 249, 236); */ - background-color: $background; + color: var(--color-text); + background: var(--color-background); font-family: sans-serif; + min-height: 100%; margin: 0; - padding: 0; } -.wrapper { - max-width: 900px; - margin-left: 1em; - margin-right: 1em; +html { + height: 100%; } -.header { - margin-top: 1em; - margin-left: $pagePadding; - margin-right: $pagePadding; - padding-bottom: .7em; - border-bottom: 2px solid black; +body { + height: 100%; + display: grid; + grid-template: + "header" 6rem + "content" 1fr; } -.contents { - margin-bottom: 2em; - padding: .7em 0; +header { + grid-area: header; + border-bottom: 2px solid var(--color-text-subdued); + + .logoContainer { + display: inline-block; + position: relative; + + .logo { + height: 5rem; + filter: invert(var(--invert)); + } + + .siteTag { + position: absolute; + right: 0; + bottom: 0; + + color: var(--color-text-attention); + font-size: 1.3em; + } + + .betaTag { + 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; + } + } } -.footer { - position: fixed; - bottom: 0; - left: $pagePadding; - right: $pagePadding; +main { + grid-area: content; + margin: .5rem 0; + padding: 0 0 2rem 0; - box-sizing: border-box; - border-top: 1px solid black; - height: 2em; - padding: 0.2em; - background-color: $background; - - .wrapper { - margin-left: calc(1em - $pagePadding); + div.search { + input { width: 100%; } } } -.logoContainer { - display: inline-block; - position: relative; - - .logo { - height: 5em; - } +footer { + position: fixed; + bottom: 0; + line-height: 2rem; + border-top: 1px solid var(--color-text-subdued); + background: var(--color-background); +} - .siteTag { - position: absolute; - right: 0; - bottom: 0; +main, footer { + a { + color: var(--color-text-attention); - color: teal; - font-size: 1.3em; + &:hover { text-decoration: none; } } +} - .betaTag { - width: 1px; /* Out-of-box alignment hack */ - position: absolute; - right: -.3em; - bottom: 0; - font-style: italic; - - color: rgb(218, 13, 13); - font-size: 1.3em; - } +article { + line-height: 1.25rem; } .counter { @@ -81,11 +117,35 @@ html, body { text-align: right; } -.staticContent { - margin: 0 2em; - max-width: 900px; -} - .linkSpacer { margin: 0 .5em; } + +@media only screen and (max-width: 1000px) { + body { + width: 100%; + } + + 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/frontend/components/datasheet-search.css b/src/frontend/components/datasheet-search.css index 60320ae..0b99273 100644 --- a/src/frontend/components/datasheet-search.css +++ b/src/frontend/components/datasheet-search.css @@ -1,39 +1,38 @@ .query { - font-size: 1.3em; - background-color: white; - color: black; - border: 1px solid teal; + font-size: 1.3rem; + background-color: var(--color-background-attention); + color: var(--color-text); + border: 1px solid var(--color-text-attention); border-radius: 5px; - padding: .4em .8em; + padding: .4rem .8rem; width: 100%; box-sizing: border-box; } .noResults { - padding: .6em 1em; + padding: .6rem 1rem; } .results { - border: 1px solid teal; + border: 1px solid var(--color-text-attention); border-radius: 5px; - /* margin-top: 1em; */ .result { - border-top: 1px solid teal; - padding: .6em 1em; - font-size: .8em; + border-top: 1px solid var(--color-text-attention); + padding: .6rem 1rem; + font-size: .8rem; &.first { border-top: 0; - font-size: 1em + font-size: 1rem } .name { - font-size: 1.3em; + font-size: 1.3rem; .manufacturer { - color: #4f4e4e; - margin-right: .3em; + color: var(--color-text-subdued); + margin-right: .3rem; } .model { @@ -42,7 +41,7 @@ } .description { - color: #4f4e4e; + color: var(--color-text-subdued); margin-top: .2em; } @@ -55,9 +54,9 @@ margin-top: -.3em; margin-right: -.7em; - border: 1px solid #006262; - background-color: #039f9f; - color: white; + border: 1px solid var(--color-text); + background-color: var(--color-text-attention); + color: var(--color-text-inverted); } } } diff --git a/src/views/_layout.jsx b/src/views/_layout.jsx index ff6b8bf..f48b265 100644 --- a/src/views/_layout.jsx +++ b/src/views/_layout.jsx @@ -13,33 +13,29 @@ module.exports = function Layout({ children }) { -
-
- - seekseek logo - datasheets - beta - -
-
-
+
+ + seekseek logo + datasheets + beta + +
+
{children} -
-
-
- - Come chat with us! - - • - - Technology - - • - - Contact/Abuse - -
-
+ + diff --git a/src/views/contact.jsx b/src/views/contact.jsx index 89d04db..359f9c4 100644 --- a/src/views/contact.jsx +++ b/src/views/contact.jsx @@ -7,7 +7,7 @@ const Layout = require("./_layout"); module.exports = function Contact() { return ( -
+

Do you have questions about SeekSeek, or do you want to contribute to the project?

Please join us in our Matrix room!

We actively watch the channel, and we're always happy to answer any questions you might have. If you have a criticism, we encourage you to share that too! The only requirement is that you do so constructively and respectfully. SeekSeek is a community project, and your feedback is crucial to its success!

@@ -27,7 +27,7 @@ module.exports = function Contact() {

If you would like to request a copyright takedown: If you are the copyright holder of datasheet(s) listed in our search, you can of course request that we remove these datasheets from the results, and we will do so if your report is valid.

However, we want to ask that you talk with us about it first - we are very open to addressing any practical concerns you may have, and it's not good for anybody to just remove them entirely. Your customers will find it more difficult to find documentation on your products, and that will do no good for your business either!

-
+ ); }; diff --git a/src/views/technology.jsx b/src/views/technology.jsx index 3314843..d42c919 100644 --- a/src/views/technology.jsx +++ b/src/views/technology.jsx @@ -7,7 +7,7 @@ const Layout = require("./_layout"); module.exports = function Technology() { return ( -
+

The technology

So... what makes SeekSeek tick? Let's get the boring bits out of the way first:

@@ -157,14 +157,13 @@ module.exports = function Technology() {

At the time of writing, documentation is still pretty lacking across these repositories, and the code in the srap and UI repositories in particular is pretty rough! This will be improved upon quite soon, as SeekSeek becomes more polished.

- +

Final words

Of course, there are many more details that I haven't covered in this post, but hopefully this gives you an idea of how SeekSeek is put together, and why!

Has this post made you interested in working on SeekSeek, or maybe your own custom srap-based project? Drop by in the chat! We'd be happy to give you pointers :)

- -
+ ); };