[Design] Style Archives page. Make header a link.

This commit is contained in:
Ceda EI 2020-01-29 17:55:22 +05:30
parent 917d3addb6
commit 93bdd1885d
4 changed files with 30 additions and 4 deletions

View File

@ -1,7 +1,6 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block left_content %} {% block left_content %}
<h1>Redacted Life</h1> <ul class="archives">
<ul>
{% for episode in episodes %} {% for episode in episodes %}
<li><a href="{{ episode.slug }}">{{ episode.title }}</a></li> <li><a href="{{ episode.slug }}">{{ episode.title }}</a></li>
{% endfor %} {% endfor %}

View File

@ -50,8 +50,8 @@
<div class="top"> <div class="top">
<div class="wrapper"> <div class="wrapper">
<div class="content"> <div class="content">
<h1><a href=".">Redacted Life</a></h1>
{% block left_content %} {% block left_content %}
<h1>Redacted Life</h1>
{% endblock %} {% endblock %}
</div> </div>
</div> </div>

View File

@ -1,6 +1,5 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block left_content %} {% block left_content %}
<h1>Redacted Life</h1>
<div class="player"> <div class="player">
<video id="player" poster="{{ thumbnail_src }}" controls> <video id="player" poster="{{ thumbnail_src }}" controls>
<source src="{{ video_src }}" type="video/mp4" /> <source src="{{ video_src }}" type="video/mp4" />

View File

@ -73,6 +73,27 @@ body {
margin: auto; margin: auto;
width: 80%; width: 80%;
} }
ul.archives {
list-style-type: none;
width: 100%;
padding: 0;
text-align: center;
li {
a {
text-decoration: none;
color: #000;
transition-duration: 0.2s;
}
a:hover, a:active {
transition-duration: 0.2s;
background-color: #000;
color: #FFF;
padding: 0.3em;
border-radius: 1.6em;
}
margin: 0.5em 1em;
}
}
} }
} }
@ -99,6 +120,7 @@ body {
border-style: solid; border-style: solid;
border-radius: 1.5em; border-radius: 1.5em;
text-decoration: none; text-decoration: none;
transition-duration: 0.4s;
} }
.button:hover, .button:active { .button:hover, .button:active {
transition-duration: 0.4s; transition-duration: 0.4s;
@ -115,11 +137,13 @@ body {
color: #292929; color: #292929;
padding: 0.3em; padding: 0.3em;
border-radius: 1.6em; border-radius: 1.6em;
transition-duration: 0.2s;
} }
a:hover { a:hover {
color: #FFF; color: #FFF;
background-color: #000; background-color: #000;
text-decoration: none; text-decoration: none;
transition-duration: 0.2s;
} }
} }
} }
@ -143,6 +167,10 @@ h1 {
@include title-font; @include title-font;
font-size: 4em; font-size: 4em;
text-align: center; text-align: center;
a {
color: #000;
text-decoration: none;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {