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

Button styling and added border on click for all buttons/cards

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-04-18 16:47:11 -04:00
parent e09efa9bd7
commit 5a6838cb13
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
layouts/_default/list.html
View File

@@ -13,8 +13,9 @@
</main> </main>
<div class="pagination-nav side-gutter"> <div class="pagination-nav side-gutter">
<a href="#" class="pagination-prev button">Newer Posts</a> <a href="#" class="pagination-prev button">Newer Posts</a>
{{ if .Paginator.HasPrev }}<a href="{{ .Paginator.Prev.URL }}" 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> {{ if .Paginator.HasNext }}<a href="{{ .Paginator.Next.URL }}" class="pagination-next button">Older Posts</a>{{ end }}
</div> </div>
{{ partial "scripts.html" . }} {{ partial "scripts.html" . }}
</body> </body>

18
static/css/style.css
View File

@@ -107,9 +107,13 @@ strong {
border-radius: 0.2em; border-radius: 0.2em;
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: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
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); 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 {
border: 0.06em solid #7A7B7C;
margin: -0.06em;
}
.card-active { .card-active {
transform: scale(0.95); transform: scale(0.95);
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); 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);
@@ -163,14 +167,14 @@ strong {
padding: 0.5em 0.6em; padding: 0.5em 0.6em;
background-color: #FFF; background-color: #FFF;
border-radius: 0.2em; border-radius: 0.2em;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), box-shadow: 0 0.04em 0.12em rgba(0,0,0,0.12), 0 0.04em 0.08em rgba(0,0,0,0.24);
0px 2px 2px 0px rgba(0, 0, 0, 0.14), }
0px 1px 5px 0px rgba(0, 0, 0, 0.12); .button:hover {
transform: scale(0.97);
} }
.button:active { .button:active {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), border: 0.06em solid #7A7B7C;
0px 2px 2px 0px rgba(0, 0, 0, 0.14), padding: 0.44em 0.6em 0.5em 0.54em;
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
} }
.side-gutter { .side-gutter {
padding-left: 0.7em !important; padding-left: 0.7em !important;