Change subscribe page style. Fix typo. Fix spacing. Change anchor style

This commit is contained in:
Ceda EI 2020-04-04 17:46:13 +05:30
parent bc2ecc1cff
commit 5e369994be
3 changed files with 38 additions and 21 deletions

View File

@ -359,7 +359,7 @@ def main(args):
open(output_dir + "subscribe/index.html", "w") as html: open(output_dir + "subscribe/index.html", "w") as html:
html.write(env.get_template("subscribe.html").render( html.write(env.get_template("subscribe.html").render(
relative="..", relative="..",
subscribtions=json.load(subscribe) subscriptions=json.load(subscribe)
)) ))
if not path.isdir(output_dir + "donate"): if not path.isdir(output_dir + "donate"):

View File

@ -56,7 +56,7 @@ body {
.wrapper { .wrapper {
min-height: $top-height; min-height: $top-height;
align-items: flex-end; align-items: flex-end;
padding-bottom: 2em; padding-bottom: 1em;
.player { .player {
margin: auto; margin: auto;
width: 80%; width: 80%;
@ -69,9 +69,21 @@ body {
} }
} }
.shownotes { .shownotes {
padding: 2em 1em 1em 1em; padding: 2em 1em 0;
margin: auto; margin: auto;
width: 80%; width: 80%;
a {
color: #292929;
padding: 0.3em;
border-radius: 1.6em;
transition-duration: 0.2s;
}
a:hover {
color: #FFF;
background-color: #000;
text-decoration: none;
transition-duration: 0.2s;
}
} }
ul.archives, ul.donate { ul.archives, ul.donate {
list-style-type: none; list-style-type: none;
@ -100,29 +112,30 @@ body {
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
margin: auto; margin: auto;
a { .subscription {
width: 200px;
color: #000; color: #000;
font-size: 100px;
text-align: center; text-align: center;
padding: 50px 50px;
transition-duration: 0.2em; transition-duration: 0.2em;
padding: 1rem 0;
span {
color: inherit;
font-size: 100px;
text-decoration: none; text-decoration: none;
} }
a:hover, a:active { p {
font-size: 0; @include title-font;
width: 100%;
font-size: 1rem;
}
}
.subscription:hover, .subscription:active {
text-decoration: none; text-decoration: none;
transition-duration: 0.2em; transition-duration: 0.2em;
background-color: rgba(0, 0, 0, 0.25); background-color: #000;
color: #FFF;
border-radius: 30px; border-radius: 30px;
} }
a:hover::after {
transition-duration: 0.2em;
content: attr(x-text);
position: relative;
top: 50px;
font-size: 1.1rem;
text-decoration: bold;
}
} }
} }
} }
@ -135,7 +148,7 @@ body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
padding-top: 2em; padding-top: 1em;
height: 100%; height: 100%;
.content { .content {
display: flex; display: flex;
@ -159,6 +172,7 @@ body {
} }
} }
a.donate-link { a.donate-link {
margin: 1em 0;
color: #292929; color: #292929;
padding: 0.3em; padding: 0.3em;
border-radius: 1.6em; border-radius: 1.6em;

View File

@ -5,8 +5,11 @@
{% endblock %} {% endblock %}
{% block left_content %} {% block left_content %}
<div class="subscribe"> <div class="subscribe">
{% for subscribtion in subscribtions %} {% for subscription in subscriptions %}
<a href={{subscribtion.link}} x-text="{{subscribtion.text}}"><span class="fa fa-{{subscribtion.icon}}"></a> <a href={{subscription.link}} class="subscription">
<span class="fa fa-{{subscription.icon}}">
<p>{{subscription.text}}</p>
</a>
{% endfor %} {% endfor %}
</div> </div>
{% endblock %} {% endblock %}