adding next and prev in css buttons

This commit is contained in:
manetta 2020-09-18 16:34:23 +02:00
parent 5b97c05d9a
commit 351d854a77
2 changed files with 57 additions and 12 deletions

View File

@ -63,7 +63,7 @@ article{
padding:2em 3em;
}
article:first-of-type:before{
content: "Introduction";
content: "Start of Section";
display: block;
margin:0 auto;
position: relative;
@ -80,6 +80,53 @@ h1.category{
text-align: center;
}
ul.navprevnext{
width: calc(100% + 0em);
margin:3em 0;
}
ul.navprevnext li.prev,
ul.navprevnext li.next,
ul.navprevnext li.done{
width: calc(50% - 9em);
height: 150px;
background-color: lightgrey;
border-radius: 1em;
padding:1em 3em;
font-size: 13pt;
line-height: 1.4;
color:white;
display: inline-block;
vertical-align: top;
}
ul.navprevnext a{
text-decoration: none;
}
ul.navprevnext li.prev:before,
ul.navprevnext li.next:before{
display: block;
font-style:italic;
margin:0 0 1em 0;
}
ul.navprevnext li.prev:before{
content:'← Go to the previous page';
margin-left:-1.25em;
}
ul.navprevnext li.next:before{
content:'Go to the next page →';
margin-right:-1em;
}
ul.navprevnext li.prev{
}
ul.navprevnext li.next,
ul.navprevnext li.done{
text-align: right;
}
ul.navprevnext li.done{
background-color: beige;
color: #ec25ec;
}
footer{
font-style: normal;
font-size: smaller;

View File

@ -48,20 +48,18 @@
{{ article.content }}
</div>
<ul>
<ul class="navprevnext">
{% if article.prev_article_in_category %}
<li>
<a href="{{ SITEURL }}/{{ article.prev_article_in_category.url}}">
{{ article.prev_article_in_category.title }}
</a>
</li>
<a href="{{ SITEURL }}/{{ article.prev_article_in_category.url}}">
<li class="prev">{{ article.prev_article_in_category.title }}</li>
</a>
{% endif %}
{% if article.next_article_in_category %}
<li>
<a href="{{ SITEURL }}/{{ article.next_article_in_category.url}}">
{{ article.next_article_in_category.title }}
</a>
</li>
<a href="{{ SITEURL }}/{{ article.next_article_in_category.url}}">
<li class="next">{{ article.next_article_in_category.title }}</li>
</a>
{% else %}
<li class="done">You finished this section!</li>
{% endif %}
</ul>