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.
supakeen 2 years ago
parent 08b3ce9177
commit 9b8425b094
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 {
/* background-color: rgb(248, 249, 236); */
background-color: #f9f9f9ff;
font-family: sans-serif;
margin: 0;
padding: 0;
min-height: 100%;
}
.wrapper {
max-width: 900px;
margin-left: 1em;
margin-right: 1em;
html {
margin: 0;
height: 100%;
}
.header {
margin-top: 1em;
margin-left: 0.5em;
margin-right: 0.5em;
padding-bottom: .7em;
body {
height: 100%;
margin: 0 auto;
display: grid;
grid-template:
"header" 7rem
"content" 1fr
"footer" 50px;
}
header {
grid-area: header;
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;
padding: .7em 0;
}
.footer {
position: fixed;
bottom: 0;
left: 0.5em;
right: 0.5em;
main div.search input { width: 100%; }
box-sizing: border-box;
footer {
grid-area: footer;
border-top: 1px solid black;
height: 2em;
padding: 0.2em;
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 {
margin-bottom: .5em;
font-style: italic;

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

@ -1,77 +1,84 @@
$pagePadding: 0.5em;
/*$background: #f9f9f9ff;*/
$background: #f9f9f9ff;
* {
box-sizing: border-box;
}
html, body {
/* background-color: rgb(248, 249, 236); */
background-color: $background;
font-family: sans-serif;
margin: 0;
padding: 0;
min-height: 100%;
}
.wrapper {
max-width: 900px;
margin-left: 1em;
margin-right: 1em;
html {
margin: 0;
height: 100%;
}
.header {
margin-top: 1em;
margin-left: $pagePadding;
margin-right: $pagePadding;
padding-bottom: .7em;
body {
height: 100%;
margin: 0 auto;
display: grid;
grid-template:
"header" 7rem
"content" 1fr
"footer" 50px;
}
header {
grid-area: header;
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;
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;
height: 2em;
padding: 0.2em;
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 {

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>

Write Preview
Loading…
Cancel
Save