projects
/
styx.blog
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
9422a20
)
Yak shave the design a bit
author
David Kerkeslager
<kerkeslager@gmail.com>
Thu, 13 Aug 2020 17:32:30 +0000
(13:32 -0400)
committer
David Kerkeslager
<kerkeslager@gmail.com>
Thu, 13 Aug 2020 17:32:30 +0000
(13:32 -0400)
core/templates/core/base.html
patch
|
blob
|
history
core/templates/core/post_detail.html
patch
|
blob
|
history
core/templates/core/post_list.html
patch
|
blob
|
history
core/templates/core/style.css
patch
|
blob
|
history
diff --git
a/core/templates/core/base.html
b/core/templates/core/base.html
index
ba5ab1f
..
b98ea1d
100644
(file)
--- a/
core/templates/core/base.html
+++ b/
core/templates/core/base.html
@@
-14,7
+14,7
@@
<body>
<header>
<body>
<header>
- <h1>
S
tyx</h1>
+ <h1>
s
tyx</h1>
</header>
<nav>
</header>
<nav>
diff --git
a/core/templates/core/post_detail.html
b/core/templates/core/post_detail.html
index
a539a14
..
c8bf49a
100644
(file)
--- a/
core/templates/core/post_detail.html
+++ b/
core/templates/core/post_detail.html
@@
-3,13
+3,15
@@
{% block content %}
<article>
{% block content %}
<article>
- <h1>{{ object.title }}</h1>
+ <header>
+ <h1>{{ object.title }}</h1>
- <time>{{ post.publication_utc|date:'Y-m-d H:i' }}</time>
+ <time>{{ post.publication_utc|date:'l, F j, Y' }}</time>
+ </header>
- <
div
class='body'>
+ <
main
class='body'>
{{ object.body_html }}
{{ object.body_html }}
- </
div
>
+ </
main
>
</article>
{% endblock %}
</article>
{% endblock %}
diff --git
a/core/templates/core/post_list.html
b/core/templates/core/post_list.html
index
8d6561c
..
bca4c13
100644
(file)
--- a/
core/templates/core/post_list.html
+++ b/
core/templates/core/post_list.html
@@
-6,19
+6,25
@@
{% for post in page_obj %}
<article>
{% for post in page_obj %}
<article>
- <h1>
- <a href='{% url "post-detail" post.slug %}'>
- {{ post.title }}
- </a>
- </h1>
+ <header>
+ <h1>
+ <a href='{% url "post-detail" post.slug %}'>
+ {{ post.title }}
+ </a>
+ </h1>
+
+ <time>{{ post.publication_utc|date:'l, F j, Y' }}</time>
+ </header>
- <
div
class='teaser'>
+ <
main
class='teaser'>
{{ post.teaser_html }}
{{ post.teaser_html }}
- </
div
>
+ </
main
>
- <a class='read-more' href='{% url "post-detail" post.slug %}'>
- Read more
- </a>
+ <footer>
+ <a href='{% url "post-detail" post.slug %}'>
+ Read more
+ </a>
+ </footer>
</article>
{% endfor %}
</article>
{% endfor %}
diff --git
a/core/templates/core/style.css
b/core/templates/core/style.css
index
d208566
..
a49d1bb
100644
(file)
--- a/
core/templates/core/style.css
+++ b/
core/templates/core/style.css
@@
-1,4
+1,11
@@
-html { height: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+html {
+ height: 100%;
+ font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+}
+
+header, main, footer, p {
+ margin: 0;
+ padding: 0;
}
h1, h2, h3, h4, h5, h6 {
}
h1, h2, h3, h4, h5, h6 {
@@
-33,6
+40,8
@@
body > header {
}
body > header > h1 {
}
body > header > h1 {
+ font-family: Geneva, sans-serif;
+ font-weight: 100;
font-size: 5rem;
}
font-size: 5rem;
}
@@
-77,25
+86,46
@@
article {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
- margin: 2.5rem 0;
+ margin-top: 2.75rem;
+}
+
+article:first-of-type {
+ margin-top: 0;
+}
+
+article:not(:first-of-type) {
+ border-top: 1px solid black;
+ padding-top: 2rem;
}
}
-article h1 a,
-article h1 a:visited {
+article
> header
h1 a,
+article
> header
h1 a:visited {
text-decoration: none;
}
text-decoration: none;
}
-article h1 a:hover,
-article h1 a:active{
+article
> header
h1 a:hover,
+article
> header
h1 a:active{
text-decoration: underline;
}
text-decoration: underline;
}
-article h1 {
+article
> header
h1 {
font-size: 2rem;
}
font-size: 2rem;
}
-article a.read-more {
- margin-top: 1rem;
+article > main {
+ margin: 1.6rem 0;
+}
+
+article > main:last-child {
+ margin-bottom: 0;
+}
+
+nav.pagination:first-child {
+ margin-bottom: 3rem;
+}
+
+nav.pagination:last-child {
+ margin-top: 3rem;
}
@media (prefers-color-scheme: dark) {
}
@media (prefers-color-scheme: dark) {
@@
-108,7
+138,7
@@
article a.read-more {
color: #dfdede;
}
color: #dfdede;
}
- article
.teaser
:not(:first-of-type) {
+ article:not(:first-of-type) {
border-top: 1px solid #dfdddd;
}
}
border-top: 1px solid #dfdddd;
}
}