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

Simplify layout and templates.

Browse Source 
By removing wrapper elements and switching to a CSS grid layout there
are overall less elements to style while providing the same
possibilities.
pull/1/head
supakeen 2 years ago
parent c21a9fea09
commit 9e680d0882
3 changed files with 139 additions and 131 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,76 +1,81 @@
/*$background: #f9f9f9ff;*/
* {
box-sizing: border-box;
}
html, body { html, body {
/* background-color: rgb(248, 249, 236); */ /* background-color: rgb(248, 249, 236); */
background-color: #f9f9f9ff; background-color: #f9f9f9ff;
font-family: sans-serif; font-family: sans-serif;
margin: 0;
padding: 0; padding: 0;
min-height: 100%;
} }
.wrapper { html {
max-width: 900px; margin: 0;
margin-left: 1em; height: 100%;
margin-right: 1em;
} }
.header { body {
margin-top: 1em; height: 100%;
margin-left: 0.5em; margin: 0 auto;
margin-right: 0.5em; display: grid;
padding-bottom: .7em; grid-template:
"header" 7rem
"content" 1fr
"footer" 50px;
}
header {
grid-area: header;
border-bottom: 2px solid black; border-bottom: 2px solid black;
align-self: center;
} }
.contents { header .logoContainer {
display: inline-block;
position: relative;
}
header .logoContainer .logo {
height: 5rem;
}
header .logoContainer .siteTag {
position: absolute;
right: 0;
bottom: 0;
color: teal;
font-size: 1.3em;
}
header .logoContainer .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;
}
main {
grid-area: content;
margin-bottom: 2em; margin-bottom: 2em;
padding: .7em 0;
} }
.footer { main div.search input { width: 100%; }
position: fixed;
bottom: 0;
left: 0.5em;
right: 0.5em;
box-sizing: border-box; footer {
grid-area: footer;
border-top: 1px solid black; border-top: 1px solid black;
height: 2em; height: 2em;
padding: 0.2em;
background-color: #f9f9f9ff; background-color: #f9f9f9ff;
} }
.footer .wrapper {
margin-left: calc(1em - 0.5em);
}
.logoContainer {
display: inline-block;
position: relative;
}
.logoContainer .logo {
height: 5em;
}
.logoContainer .siteTag {
position: absolute;
right: 0;
bottom: 0;
color: teal;
font-size: 1.3em;
}
.logoContainer .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;
}
.counter { .counter {
margin-bottom: .5em; margin-bottom: .5em;
font-style: italic; font-style: italic;

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

@ -1,77 +1,84 @@
$pagePadding: 0.5em; $pagePadding: 0.5em;
/*$background: #f9f9f9ff;*/
$background: #f9f9f9ff; $background: #f9f9f9ff;
* {
box-sizing: border-box;
}
html, body { html, body {
/* background-color: rgb(248, 249, 236); */ /* background-color: rgb(248, 249, 236); */
background-color: $background; background-color: $background;
font-family: sans-serif; font-family: sans-serif;
margin: 0;
padding: 0; padding: 0;
min-height: 100%;
} }
.wrapper { html {
max-width: 900px; margin: 0;
margin-left: 1em; height: 100%;
margin-right: 1em;
} }
.header { body {
margin-top: 1em; height: 100%;
margin-left: $pagePadding; margin: 0 auto;
margin-right: $pagePadding; display: grid;
padding-bottom: .7em; grid-template:
"header" 7rem
"content" 1fr
"footer" 50px;
}
header {
grid-area: header;
border-bottom: 2px solid black; border-bottom: 2px solid black;
align-self: center;
.logoContainer {
display: inline-block;
position: relative;
.logo {
height: 5rem;
}
.siteTag {
position: absolute;
right: 0;
bottom: 0;
color: teal;
font-size: 1.3em;
}
.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;
}
}
} }
.contents { main {
grid-area: content;
margin-bottom: 2em; margin-bottom: 2em;
padding: .7em 0;
}
.footer {
position: fixed;
bottom: 0;
left: $pagePadding;
right: $pagePadding;
box-sizing: border-box; div.search {
input { width: 100%; }
}
}
footer {
grid-area: footer;
border-top: 1px solid black; border-top: 1px solid black;
height: 2em; height: 2em;
padding: 0.2em;
background-color: $background; background-color: $background;
.wrapper {
margin-left: calc(1em - $pagePadding);
}
}
.logoContainer {
display: inline-block;
position: relative;
.logo {
height: 5em;
}
.siteTag {
position: absolute;
right: 0;
bottom: 0;
color: teal;
font-size: 1.3em;
}
.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;
}
} }
.counter { .counter {

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

Write Preview
Loading…
Cancel
Save