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

Compare commits

base: supakeen:15666aa9095a39267028ada7e78d3219ef34b5de
Branches Tags
supakeen:supakeen/ui-improvements
supakeen:master
seekseek:master
...
compare: supakeen:13002057f8de89d60432d557d9927cdea677e626
Branches Tags
supakeen:supakeen/ui-improvements
supakeen:master
seekseek:master

11 Commits
15666aa909 ... 13002057f8

Author SHA1 Message Date
supakeen 13002057f8 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'.
 2 years ago
supakeen 1f0ba04aca Bad editor. Bad. 
Fix mixed indentation and removal of tabs.
 2 years ago
supakeen 3bdbde1c2f Propagate CSS variables. 
CSS variables are used for the prefers-dark, propagate them to component
CSS as well.
 2 years ago
supakeen 0f46a4abc9 Left-align content. 
Aligning the content to the left allows for a more consistent experience
while resizing.
 2 years ago
supakeen 363accb91a Play with the background for prefers-dark. 2 years ago
supakeen 0e97559d27 Cleanup of CSS. 
All units expressed in `rem`, invert logo in prefers-dark, padding
around the footer.
 2 years ago
supakeen 925778b060 Text line-height and link hovers, semantics. 
The general 'good readability' rule is to have a bit larger line-height,
aside from this I've added some interactivity to links by hovering over
them.

I also replaced `staticContent` with `article` for semantics.
 2 years ago
supakeen a351c5d8f1 Dark mode through media query. 
Browsers can prefer a certain color scheme. This commit implements a new
dark color scheme for the website which is supposed to be a placeholder,
better colors could be chosen.
 2 years ago
supakeen 0c6ba5e1e4 Add media queries for larger screens. 
It is hard for people to keep track of very wide pages (and
sentences), with these mediaqueries the width of the site is limited on
screens that are wider than a 1000, or 1400 pixels.
 2 years ago
supakeen 9e680d0882 Simplify layout and templates. 
By removing wrapper elements and switching to a CSS grid layout there
are overall less elements to style while providing the same
possibilities.
 2 years ago
Sven Slootweg c21a9fea09 Upgrade budo-express to fix bundle livereload issue 2 years ago
7 changed files with 710 additions and 788 deletions
Show Stats

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

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

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

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

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

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

48
src/views/_layout.jsx
Unescape Escape View File

@ -13,33 +13,29 @@ module.exports = function Layout({ children }) {
<link rel="stylesheet" href="/css/style.css"/>
</head>
<body>
<div className="header">
<div className="wrapper">
<a className="logoContainer" href="/">
<img src="/images/logo.svg" alt="seekseek logo" className="logo"/>
<span className="siteTag">datasheets</span>
<span className="betaTag">beta</span>
</a>
</div>
</div>
<div className="contents">
<header>
<a className="logoContainer" href="/">
<img src="/images/logo.svg" alt="seekseek logo" className="logo"/>
<span className="siteTag">datasheets</span>
<span className="betaTag">beta</span>
</a>
</header>
<main>
{children}
</div>
<div className="footer">
<div className="wrapper">
<a href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&via=matrix.org&via=librepush.net" className="chat">
Come chat with us!
</a>
<span className="linkSpacer">•</span>
<a href="/technology" className="chat">
Technology
</a>
<span className="linkSpacer">•</span>
<a href="/contact" className="chat">
Contact/Abuse
</a>
</div>
</div>
</main>
<footer>
<a href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&via=matrix.org&via=librepush.net" className="chat">
Come chat with us!
</a>
<span className="linkSpacer">•</span>
<a href="/technology" className="chat">
Technology
</a>
<span className="linkSpacer">•</span>
<a href="/contact" className="chat">
Contact/Abuse
</a>
</footer>
<script src="/js/bundle.js"></script>
</body>
</html>

4
src/views/contact.jsx
Unescape Escape View File

@ -7,7 +7,7 @@ const Layout = require("./_layout");
module.exports = function Contact() {
return (
<Layout>
<div className="staticContent">
<article>
<h2>Do you have questions about SeekSeek, or do you want to contribute to the project?</h2>
<p>Please <a href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&via=matrix.org&via=librepush.net">join us in our Matrix room</a>!</p>
<p>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!</p>
@ -27,7 +27,7 @@ module.exports = function Contact() {
<p><strong>If you would like to request a copyright takedown:</strong> 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.</p>
<p>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 <em>anybody</em> 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!</p>
</div>
</article>
</Layout>
);
};

7
src/views/technology.jsx
Unescape Escape View File

@ -7,7 +7,7 @@ const Layout = require("./_layout");
module.exports = function Technology() {
return (
<Layout>
<div className="staticContent">
<article>
<h1>The technology</h1>
<p>So... what makes SeekSeek tick? Let&#39;s get the boring bits out of the way first:</p>
@ -157,14 +157,13 @@ module.exports = function Technology() {
<p>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.</p>
<h2 id="final-words">Final words</h2>
<p>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!</p>
<p>Has this post made you interested in working on SeekSeek, or maybe your own custom srap-based project? <a
href="https://matrix.to/#/#seekseek:pixie.town?via=pixie.town&amp;via=matrix.org&amp;via=librepush.net">Drop
by in the chat!</a> We&#39;d be happy to give you pointers :)</p>
</div>
</article>
</Layout>
);
};

1053
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save