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

layout changes

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-04-25 15:58:00 -04:00
parent 5532b3f7d4
commit 16edc04678
3 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
layouts/_default/single.html
View File

@@ -23,6 +23,7 @@
{{ with .Next }} {{ with .Next }}
{{ .Render "single-li" }} {{ .Render "single-li" }}
{{ end }} {{ end }}
{{ partial "home-card.html" . }}
{{ partial "scripts.html" . }} {{ partial "scripts.html" . }}
</body> </body>
</html> </html>

2
layouts/partials/nav-bar.html
View File

@@ -1,3 +1,3 @@
<nav class="nav-bar"> <nav class="nav-bar">
<h1 class="nav-header"><a href="/">mdd</a></h1> <h1 class="nav-header"><a href="/" class="nav-text">mdd</a></h1>
</nav> </nav>

62
static/css/style.css
View File

@@ -27,24 +27,26 @@ strong {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.single-body { .single-body {
background-color: #f0f1f2; background-color: #f0f1f2;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2em; margin-bottom: 2em;
} }
.nav-bar { .nav-bar {
grid-column: 2;
width: 100%; width: 100%;
padding: 0.7em 0; padding: 0.7em 0;
text-align: center; text-align: center;
} }
.nav-header { .nav-header {
margin: 0 0; margin: 0;
}
.nav-text {
text-decoration: none;
} }
.post { .post {
margin: 2em 0 3em 0; margin: 0 0 1em 0;
line-height: 1.5; line-height: 1.5;
} }
.post-header { .post-header {
@@ -73,13 +75,14 @@ strong {
/* initial-letter: 2; Maybe someday*/ /* initial-letter: 2; Maybe someday*/
} }
.content { .content {
grid-column: 2;
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.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);
max-width: 42em; max-width: 42em;
width: 100%; margin: 0 0 2em 0;
margin: 0em 0 2em 0; padding: 2em 0;
} }
.list-header { .list-header {
margin: 9em 0 5em 0; margin: 9em 0 5em 0;
@@ -105,28 +108,28 @@ strong {
max-width: 42em; max-width: 42em;
} }
.card { .card {
grid-column: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
background-color: white; background-color: white;
border-radius: 0.3em; border-radius: 0.3rem;
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.4rem 0.8rem 0 rgba(0,0,0,0.16), 0 0.3rem 0.3rem -0.1em rgba(0,0,0,0.23);
max-width: 42em;
} }
.card-img-container { .card-img-container {
position: relative; position: relative;
} }
.card-img { .card-img {
border-radius: 0.3em 0.3em 0 0; border-radius: 0.3rem 0.3rem 0 0;
margin-bottom: -0.28em; margin-bottom: -0.28em;
max-height: 10em; max-height: 10em;
object-fit: cover; object-fit: cover;
} }
.card-img-overlay { .card-img-overlay {
border-top-left-radius: 0.3em; border-radius: 0.3em 0.3em 0 0;
position: absolute; position: absolute;
top: 0; top: 0;
font-size: 1.27em; font-size: 1.27em;
@@ -143,6 +146,7 @@ strong {
padding: 1em; padding: 1em;
} }
.card-title { .card-title {
width: 100%;
margin: 0; margin: 0;
line-height: 1.2; line-height: 1.2;
} }
@@ -159,6 +163,12 @@ strong {
.card-top-spacing { .card-top-spacing {
margin-top: 2em; margin-top: 2em;
} }
.home-card {
font-size: 3em;
font-weight: bold;
text-align: center;
margin: 0.5em 0;
}
.pagination-nav { .pagination-nav {
margin: 3em 0 2em 0; margin: 3em 0 2em 0;
display: grid; display: grid;
@@ -195,18 +205,20 @@ strong {
margin: -0.05em; margin: -0.05em;
} }
.side-gutter { .side-gutter {
margin-left: 0.7em !important; margin-left: 0.7rem !important;
margin-right: 0.7em !important; margin-right: 0.7rem !important;
box-sizing: border-box !important;
} }
.side-padding { .side-padding {
padding-left: 0.7em !important; padding-left: 0.7rem !important;
padding-right: 0.7em !important; padding-right: 0.7rem !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
.muted-text { .muted-text {
color: #7A7B7C; color: #7A7B7C;
} }
h1, h2, h3, h4, h5, h6 {
margin: 1.5em 0 0.7em 0;
}
img { img {
width: 100%; width: 100%;
height: auto height: auto
@@ -240,10 +252,9 @@ code {
hr { hr {
border: 0; border: 0;
border-bottom: thin solid #D1D1D1; border-bottom: thin solid #D1D1D1;
margin-top: 3em 0; margin: 3em 0;
} }
a { a {
text-decoration: none;
color: #3A3B3C; color: #3A3B3C;
} }
table { table {
@@ -271,13 +282,13 @@ footer {
@media screen and (pointer: coarse) { @media screen and (pointer: coarse) {
.card-hover { .card-hover {
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.15rem 0.3rem 0 rgba(0, 0, 0, 0.16), 0 0.15rem 0.3rem -0.04rem rgba(0, 0, 0, 0.23);
} }
} }
@media not screen and (pointer: coarse) { @media not screen and (pointer: coarse) {
.card:hover { .card:hover {
transform: scale(0.97); 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); box-shadow: 0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.16), 0 0.15rem 0.3rem -0.04rem rgba(0, 0, 0, 0.23);
} }
.card:active { .card:active {
transform: scale(1) !important; transform: scale(1) !important;
@@ -286,7 +297,7 @@ footer {
@media not screen and (pointer: coarse) { @media not screen and (pointer: coarse) {
.card:hover { .card:hover {
transform: scale(0.97); 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); box-shadow: 0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.16), 0 0.15rem 0.3rem -0.04rem rgba(0, 0, 0, 0.23);
} }
.card:active { .card:active {
transform: scale(1) !important; transform: scale(1) !important;
@@ -297,6 +308,10 @@ footer {
body { body {
font-size: 1.125rem; font-size: 1.125rem;
} }
.single-body {
display: grid;
grid-template-columns: auto 42em auto;
}
.list-header { .list-header {
margin: 8em 0 4em 0; margin: 8em 0 4em 0;
} }
@@ -319,6 +334,9 @@ footer {
height: 100%; height: 100%;
width: 15em; width: 15em;
} }
.card-img-overlay {
border-radius: 0.2em 0 0 0;
}
.card-body { .card-body {
padding: 1.5em 1.3em; padding: 1.5em 1.3em;
} }