Commit ea6e3fa2 authored by Ysabella Panghulan's avatar Ysabella Panghulan

edited author details style

parent 8d282b65
{%extends 'base.html'%} {%extends 'base.html'%}
{% block stylesheets %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'stylesheets/author_details.css' %}">
{% endblock %}
{% block title %}{{ object }}{% endblock %} {% block title %}{{ object }}{% endblock %}
...@@ -9,23 +13,29 @@ ...@@ -9,23 +13,29 @@
{% block body %} {% block body %}
<div class="author-content"> <div class="author-content">
{% block content %} {% block content %}
<h3>{{ object.age }}</h3> <div class="author-tags">
<h3>{{ object.nationality }}</h3> <div class="author-tag">
<h4>Age: {{ object.age }}</h4>
</div>
<div class="author-tag">
<h4>Nationality: {{ object.nationality }}</h4>
</div>
</div>
<p>{{ object.bio }}</p> <p>{{ object.bio }}</p>
<h3>Books by {{ object }} I love:</h3> <h3>Books by {{ object }} I love:</h3>
<div class="book-list"> <div class="book-list">
<ul> <ol>
{% for book in object.get_books %} {% for book in object.get_books %}
<li><a href="{{ book.get_absolute_url }}">{{ book }}</a></li> <a href="{{ book.get_absolute_url }}">
<li>{{ book }}</li>
</a>
{% endfor %} {% endfor %}
</ul> </ol>
</div> </div>
<div class="links"> <div class="links">
<ul> <a href="/home/" class="btn-primary">Home</a>
<li><a href="/home/">Home</a></li> <a href="/books/" class="btn-secondary">Books</a>
<li><a href="/books/">Books</a></li> <a href="/authors/" class="btn-primary">Authors</a>
<li><a href="/authors/">Authors</a></li>
</ul>
</div> </div>
{% endblock %} {% endblock %}
</div> </div>
......
body {
padding: 3.5rem;
}
header {
text-align: left;
}
h2 {
text-transform: uppercase;
font-size: 30px;
}
.author-tag {
display: inline-block;
margin-right: 10px;
background-color: #f2f2f2;
border-radius: 10px;
}
.author-tag h4 {
margin: 0;
padding: 0.5rem;
color: gray;
}
ol {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 0.5rem;
row-gap: 0.5rem;
padding: 0;
margin-right: auto;
margin-left: auto;
counter-reset: my-counter;
list-style-type: none;
}
ol li::before {
content: counter(my-counter);
counter-increment: my-counter;
content: counter(my-counter, decimal-leading-zero) '\A''\A';
white-space: pre;
font-size: medium;
color:#7448F6;
}
li {
padding: 0.80rem;
cursor: pointer;
transition: all 400ms ease;
text-align: center;
border: 1px solid #7448F6;
border-radius: 5px;
width: 50%;
color: black
}
li:hover {
background-color: #E9E3FE;
color: #7448F6;
border-color: transparent;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
transform: translateY(-5px);
}
\ No newline at end of file
...@@ -46,6 +46,7 @@ a { ...@@ -46,6 +46,7 @@ a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
li:hover { li:hover {
background-color: #E9E3FE; background-color: #E9E3FE;
color: #7448F6; color: #7448F6;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment