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

lots of changes

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-04-22 22:54:22 -04:00
parent d38b731879
commit 5532b3f7d4
6 changed files with 54 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
layouts/_default/li.html
View File

@@ -1,7 +1,7 @@
<a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" <a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)"
onmouseover="cardPressed.call(this)" onmouseout="cardReleased.call(this)" href="{{ .Permalink }}" class="card" rel="bookmark" > href="{{ .Permalink }}" class="card" rel="bookmark" >
{{ if isset .Params "featuredimage" }} {{ if isset .Params "featuredimage" }}
<div> <div class="card-img-container">
<img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img"> <img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
</div> </div>
{{ end }} {{ end }}

4
layouts/_default/single-li.html
View File

@@ -1,9 +1,9 @@
<a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" <a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)"
onmouseover="cardPressed.call(this)" onmouseout="cardReleased.call(this)" href="{{ .Permalink }}" class="card" rel="bookmark" > href="{{ .Permalink }}" class="card card-top-spacing side-gutter" rel="bookmark" >
{{ if isset .Params "featuredimage" }} {{ if isset .Params "featuredimage" }}
<div class="card-img-container"> <div class="card-img-container">
<img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
<p class="card-img-overlay">Next Article</p> <p class="card-img-overlay">Next Article</p>
<img src="{{ .Site.BaseURL }}/{{.Params.featuredimage }}" class="card-img">
</div> </div>
{{ end }} {{ end }}
<article class="card-body"> <article class="card-body">

3
layouts/_default/single.html
View File

@@ -3,7 +3,7 @@
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body class="single-body"> <body class="single-body">
{{ partial "nav-bar.html" . }} {{ partial "nav-bar.html" . }}
<main class="content side-gutter"> <main class="content side-padding">
<article class="post"> <article class="post">
<header class="post-header"> <header class="post-header">
<h1 class="post-title">{{ .Title }}</h1> <h1 class="post-title">{{ .Title }}</h1>
@@ -23,7 +23,6 @@
{{ with .Next }} {{ with .Next }}
{{ .Render "single-li" }} {{ .Render "single-li" }}
{{ end }} {{ end }}
{{ partial "footer.html" . }}
{{ partial "scripts.html" . }} {{ partial "scripts.html" . }}
</body> </body>
</html> </html>

64
static/css/style.css
View File

@@ -33,16 +33,18 @@ strong {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 2em;
} }
.nav-bar { .nav-bar {
width: 100%; width: 100%;
padding: 0.45em 0; padding: 0.7em 0;
text-align: center; text-align: center;
} }
.nav-header { .nav-header {
margin: 0 0; margin: 0 0;
} }
.post { .post {
margin: 2em 0 3em 0;
line-height: 1.5; line-height: 1.5;
} }
.post-header { .post-header {
@@ -74,10 +76,10 @@ strong {
background-color: white; background-color: white;
border-radius: 0.2em; border-radius: 0.2em;
transition: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 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.15em 0.3em 0 rgba(0, 0, 0, 0.16), 0 0.15em 0.3em -0.04em rgba(0, 0, 0, 0.23);
max-width: 42em; max-width: 42em;
width: 100%; width: 100%;
margin: 1em 0 3em 0; margin: 0em 0 2em 0;
} }
.list-header { .list-header {
margin: 9em 0 5em 0; margin: 9em 0 5em 0;
@@ -98,7 +100,7 @@ strong {
.card-columns { .card-columns {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-gap: 1.5em; grid-gap: 2em;
justify-content: center; justify-content: center;
max-width: 42em; max-width: 42em;
} }
@@ -107,26 +109,18 @@ strong {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
background-color: white; background-color: white;
border-radius: 0.2em; border-radius: 0.3em;
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: transform 0.3s cubic-bezier(.25,.8,.25,1), box-shadow 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);
max-width: 42em; max-width: 42em;
} }
.card-active {
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);
}
.card:active {
border: 0.05em solid #7A7B7C;
margin: -0.05em;
}
.card-img-container { .card-img-container {
position: relative; position: relative;
} }
.card-img { .card-img {
border-radius: 0.2em 0.2em 0 0; border-radius: 0.3em 0.3em 0 0;
margin-bottom: -0.28em; margin-bottom: -0.28em;
max-height: 10em; max-height: 10em;
object-fit: cover; object-fit: cover;
@@ -137,7 +131,7 @@ strong {
top: 0; top: 0;
font-size: 1.27em; font-size: 1.27em;
text-align: center; text-align: center;
padding: 1.225em 0 0.5em 0; padding: 1.18em 0 0.5em 0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
@@ -162,6 +156,9 @@ strong {
justify-content: flex-start; justify-content: flex-start;
font-size: 0.8em; font-size: 0.8em;
} }
.card-top-spacing {
margin-top: 2em;
}
.pagination-nav { .pagination-nav {
margin: 3em 0 2em 0; margin: 3em 0 2em 0;
display: grid; display: grid;
@@ -198,6 +195,11 @@ strong {
margin: -0.05em; margin: -0.05em;
} }
.side-gutter { .side-gutter {
margin-left: 0.7em !important;
margin-right: 0.7em !important;
box-sizing: border-box !important;
}
.side-padding {
padding-left: 0.7em !important; padding-left: 0.7em !important;
padding-right: 0.7em !important; padding-right: 0.7em !important;
box-sizing: border-box !important; box-sizing: border-box !important;
@@ -266,7 +268,30 @@ footer {
padding: 2em 0; padding: 2em 0;
margin: 2em 0 0 0; margin: 2em 0 0 0;
} }
@media screen and (pointer: coarse) {
.card-hover {
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);
}
}
@media not screen and (pointer: coarse) {
.card:hover {
transform: scale(0.97);
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:active {
transform: scale(1) !important;
}
}
@media not screen and (pointer: coarse) {
.card:hover {
transform: scale(0.97);
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:active {
transform: scale(1) !important;
}
}
/* Medium devices (tablets, ~641px and up) */ /* Medium devices (tablets, ~641px and up) */
@media only screen and (min-width: 40.063em) { @media only screen and (min-width: 40.063em) {
body { body {
@@ -285,9 +310,7 @@ footer {
.card { .card {
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
} border-radius: 0.2em;
.card-active {
transform: scale(0.97);
} }
.card-img { .card-img {
border-radius: 0.2em 0 0 0.2em; border-radius: 0.2em 0 0 0.2em;
@@ -310,7 +333,7 @@ footer {
font-size: 0.7em; font-size: 0.7em;
} }
.post { .post {
margin: 2em 1em; margin: 3em 1em;
} }
.post-title { .post-title {
font-size: 2.5em; font-size: 2.5em;
@@ -322,6 +345,7 @@ footer {
/* Large devices (desktops, ~1025px and up) */ /* Large devices (desktops, ~1025px and up) */
@media only screen and (min-width: 64.063em) { @media only screen and (min-width: 64.063em) {
} }
/* Extra large devices (large desktops, ~1441px and up) */ /* Extra large devices (large desktops, ~1441px and up) */

4
static/js/core.js
View File

@@ -1,8 +1,8 @@
function cardPressed() { function cardPressed() {
this.classList.add('card-active'); this.classList.add('card-hover');
} }
function cardReleased() { function cardReleased() {
this.classList.remove('card-active'); this.classList.remove('card-hover');
} }