Skip to content

L
layvillanueva_reading
Commit 05762602 authored by Layla Mikel Villanueva's avatar Layla Mikel Villanueva
Browse files
Options

Added css styling for the pages

parent a5bde947
Show whitespace changes
Inline Side-by-side
Showing with 100 additions and 17 deletions
layvillanueva_reading/bookshelf/static/style.css 0 → 100644
View file @ 05762602
* {
box-sizing: border-box;
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
body {
background-color: teal;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
'header header header header'
'content content content content'
'. booklink authorlink .'
'. addbooklink addauthorlink .';
text-align: center;
color: black;
line-height: 1;
}
.header {
grid-area: header;
color: red;
}
.content {
grid-area: content;
color: orange;
}
.booklink {
grid-area: booklink;
background-color: yellow;
align-self: center;
}
.addbooklink {
grid-area: addbooklink;
background-color: green;
align-self: center;
}
.authorlink {
grid-area: authorlink;
background-color: blue;
align-self: center;
}
.addauthorlink {
grid-area: addauthorlink;
background-color: violet;
align-self: center;
}
a {
color: black;
}
h1 {
border-style:solid;
border-width: 3px;
padding: 3px;
border-color: black;
}
button, input {
background-color: orangered;
}
\ No newline at end of file
layvillanueva_reading/bookshelf/templates/base.html
View file @ 05762602
{% load static %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{% block title %} {% endblock %}</title> <title>{% block title %} {% endblock %}</title>
{% block styles %}{% endblock %} <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
{% block styles %} {% endblock %}
</head> </head>
<body> <body>
<div id="content"> <div id="content">
......
layvillanueva_reading/bookshelf/templates/bookshelf/books.html
View file @ 05762602
...@@ -12,6 +12,6 @@ ...@@ -12,6 +12,6 @@
</li> </li>
</ul> </ul>
<a href="/books">Books</a> <a href="/home">Home</a>
<a href="/authors">Authors</a> <a href="/authors">Authors</a>
{% endblock %} {% endblock %}
\ No newline at end of file
layvillanueva_reading/bookshelf/templates/home.html
View file @ 05762602
{% extends 'base.html' %} {% extends 'base.html' %}
{% load static %} {% load static %}
{% block title %} My Favorite Books & Authors {% endblock %} {% block title %} My Favorite Books & Authors {% endblock %}
{% block content %} {% block content %}
<h1> Welcome to {{ name }}'s Database of Favorite Books and Authors!</h1> <div class="grid">
<br> <div class="header">
<h3> Throughout high school, reading books became one of my hobbies <h1> Welcome to {{ name }}'s Database of Favorite Books and Authors!</h1>
</div>
<div class="content">
<h3> Throughout high school, reading books became one of my hobbies
whenever I was bored. I usually enjoy young adult adventure books whenever I was bored. I usually enjoy young adult adventure books
back then which is why I became obsessed with Rick Riordan's novels. back then which is why I became obsessed with Rick Riordan's novels.
Generally, it adventure or motivational (like Mitch Albom's) books Generally, it adventure or motivational (like Mitch Albom's) books
were my go-to when it comes to genres. Authors comes second in mind, were my go-to when it comes to genres. Authors comes second in mind,
but I won't hesitate to stop patronizing their works the second I but I won't hesitate to stop patronizing their works the second I
find out that they have problematic views as a person. </h3> find out that they have problematic views as a person. </h3> <br>
</div>
<a href="/books">Books</a> <div class="booklink"> <a href="/books">Books</a> </div>
<a href="/authors">Authors</a><br> <div class="authorlink"> <a href="/authors">Authors</a> </div>
<a href="/books/add">Add Book</a> <div class="addbooklink"> <a href="/books/add">Add Book</a> </div>
<a href="/authors/add">Add Author</a> <div class="addauthorlink"> <a href="/authors/add">Add Author</a></div>
</div>
{% endblock %} {% endblock %}
\ No newline at end of file
layvillanueva_reading/layvillanueva_reading/settings.py
View file @ 05762602
...@@ -41,7 +41,7 @@ INSTALLED_APPS = [ ...@@ -41,7 +41,7 @@ INSTALLED_APPS = [
'django.contrib.sessions', 'django.contrib.sessions',
'django.contrib.messages', 'django.contrib.messages',
'django.contrib.staticfiles', 'django.contrib.staticfiles',
'bookshelf' 'bookshelf',
] ]
MIDDLEWARE = [ MIDDLEWARE = [
...@@ -120,7 +120,8 @@ USE_TZ = True ...@@ -120,7 +120,8 @@ USE_TZ = True
# Static files (CSS, JavaScript, Images) # Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/ # https://docs.djangoproject.com/en/4.1/howto/static-files/
STATIC_URL = 'static/' STATIC_URL = 'bookshelf/static/'
# Default primary key field type # Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
......
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