heimoshuiyu/aether
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Header and next/prev page button styling

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-04-18 14:09:59 -04:00
parent edf4f8d26b
commit ac82f8f497
2 changed files with 49 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
layouts/_default/list.html
View File

@@ -2,20 +2,17 @@
<html lang="{{ .Site.LanguageCode }}" dir="ltr"> <html lang="{{ .Site.LanguageCode }}" dir="ltr">
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body class="list-body"> <body class="list-body">
{{ partial "nav-bar.html" . }}
<main class="card-columns side-gutter"> <main class="card-columns side-gutter">
<header class="list-header"> <header class="list-header">
<h1 class="list-header-title">Sensors + Smarts</h1> <h2 class="list-header-subtext">Code It, Break It, Quick, Rewrite It</h2>
<h2 class="list-header-subtext">There is so much actionable data that goes to waste. Let's put your data to work.</h2> <h1 class="list-header-title">Technologic</h1>
</header> </header>
{{ range .Paginator.Pages }} {{ range .Paginator.Pages }}
{{ .Render "li" }} {{ .Render "li" }}
{{ end }} {{ end }}
</main> </main>
<div class="pagination-nav side-gutter"> <div class="pagination-nav side-gutter">
{{ if .Paginator.HasPrev }}
<a href="#" class="pagination-prev button">Newer Posts</a> <a href="#" class="pagination-prev button">Newer Posts</a>
{{ end }}
<p class="pagination-pagenum muted-text">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</p> <p class="pagination-pagenum muted-text">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</p>
<a href="#" class="pagination-next button">Older Posts</a> <a href="#" class="pagination-next button">Older Posts</a>
</div> </div>

69
static/css/style.css
View File

@@ -7,11 +7,12 @@
body { body {
font-family: 'LatoLatinWeb', Avenir, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-family: 'LatoLatinWeb', Avenir, HelveticaNeue-Light, "Helvetica Neue Light",
"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #3A3B3C; color: #3A3B3C;
font-size: 1.1em; font-size: 1.1em;
margin: 0; margin: 0;
padding: 3em 0 0 0; padding: 0;
} }
p { p {
margin: 1em 0; margin: 1em 0;
@@ -33,9 +34,6 @@ strong {
align-items: center; align-items: center;
} }
.nav-bar { .nav-bar {
position: fixed;
top: 0;
z-index: 999;
width: 100%; width: 100%;
padding: 0.45em 0; padding: 0.45em 0;
text-align: center; text-align: center;
@@ -74,28 +72,26 @@ strong {
padding-right: 0.1em; padding-right: 0.1em;
/* initial-letter: 2; Maybe someday*/ /* initial-letter: 2; Maybe someday*/
} }
img {
width: 100%;
height: auto
}
.content { .content {
max-width: 40em; max-width: 40em;
width: 100%; width: 100%;
} }
.list-header { .list-header {
margin: 2em 0; margin: 7em 0 3.5em 0;
text-align: center; text-align: center;
} }
.list-header-title { .list-header-title {
margin: 0 0 0.2em 0; font-weight: normal;
margin: 0.1em 0 0.2em 0;
font-size: 2.2em;
text-transform: uppercase;
} }
.list-header-subtext { .list-header-subtext {
color: #7A7B7C;
font-size: 1.2em;
line-height: 1.6;
font-weight: normal; font-weight: normal;
margin: 0.5em auto 0 auto; color: #7A7B7C;
width: 12em; font-size: 1em;
line-height: 1.6;
margin: 0;
} }
.card-columns { .card-columns {
display: grid; display: grid;
@@ -113,11 +109,11 @@ img {
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: all 0.3s cubic-bezier(.25,.8,.25,1); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
box-shadow: 0 0.4em 0.8em rgba(0,0,0,0.16), 0 0.3em 0.3em rgba(0,0,0,0.23); box-shadow: 0 0.4em 0.8em 0 rgba(0,0,0,0.16), 0 0.3em 0.3em -0.1em rgba(0,0,0,0.23);
} }
.card-active { .card-active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0.15em 0.3em rgba(0, 0, 0, 0.16), 0 0.15em 0.3em rgba(0, 0, 0, 0.23); box-shadow: 0 0.15em 0.3em 0 rgba(0, 0, 0, 0.16), 0 0.15em 0.3em -0.04em rgba(0, 0, 0, 0.23);
} }
.card-img { .card-img {
border-radius: 0.2em 0.2em 0 0; border-radius: 0.2em 0.2em 0 0;
@@ -143,24 +139,39 @@ img {
font-size: 0.8em; font-size: 0.8em;
} }
.pagination-nav { .pagination-nav {
margin: 4em 0; margin: 3em 0 1em 0;
display: flex; display: grid;
flex-direction: row; grid-template-columns: 1fr 1fr;
justify-content: space-between; grid-template-areas: "prev next";
align-items: center;
width: 100%; width: 100%;
max-width: 42em; max-width: 42em;
} }
.pagination-prev { .pagination-prev {
grid-area: prev;
justify-self: start;
} }
.pagination-next { .pagination-next {
grid-area: next;
justify-self: end;
} }
.pagination-pagenum { .pagination-pagenum {
display: none;
grid-area: pagenum;
justify-self: center;
} }
.button { .button {
padding: 0.5em 0.6em; padding: 0.5em 0.6em;
background-color: #FFF; background-color: #FFF;
border-radius: 0.2em; border-radius: 0.2em;
border: 1px solid #FFF; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.button:active {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
} }
.side-gutter { .side-gutter {
padding-left: 0.7em !important; padding-left: 0.7em !important;
@@ -170,6 +181,10 @@ img {
.muted-text { .muted-text {
color: #7A7B7C; color: #7A7B7C;
} }
img {
width: 100%;
height: auto
}
blockquote { blockquote {
border-left: 0.3em solid #D1D1D1; border-left: 0.3em solid #D1D1D1;
margin: 1.5em 0.8em; margin: 1.5em 0.8em;
@@ -234,7 +249,10 @@ footer {
font-size: 1.125rem; font-size: 1.125rem;
} }
.list-header { .list-header {
margin: 3em 0; margin: 8em 0 4em 0;
}
.list-header-title {
font-size: 4.2em;
} }
.card-columns { .card-columns {
grid-gap: 2em; grid-gap: 2em;
@@ -269,6 +287,9 @@ footer {
.post-title { .post-title {
font-size: 2.5em; font-size: 2.5em;
} }
.pagination-nav {
margin: 4em 0 2em 0;
}
} }
/* Large devices (desktops, ~1025px and up) */ /* Large devices (desktops, ~1025px and up) */