Implemented and added basic CSS styling added as static file

4072dc6d · justin · 215eac48 · 4072dc6d · 4072dc6d · 4072dc6d
Commit 4072dc6d authored Mar 27, 2023 by justin
4 changed files
--- a/justinreyes_reading/bookshelf/templates/bookshelf/home.html
+++ b/justinreyes_reading/bookshelf/templates/bookshelf/home.html
-{% extends 'base.html' %} {% block content %}
+{% extends 'base.html' %} 
+
+{% block content %}
 <h1>Welcome to Justin's Database of Favorite Books and Authors!</h1>
 <p>
  I love all types of books, and most of the ones I read are just

--- a/justinreyes_reading/justinreyes_reading/settings.py
+++ b/justinreyes_reading/justinreyes_reading/settings.py
@@ -118,6 +118,7 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/4.1/howto/static-files/

 STATIC_URL = "static/"
+STATICFILES_DIRS = BASE_DIR, "static"

 # Default primary key field type
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field

--- a/justinreyes_reading/static/css/style.css
+++ b/justinreyes_reading/static/css/style.css
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;1,300&display=swap");
+
+body {
+  background-color: #494d64;
+  color: #f5bde6;
+  font-family: "Nunito", sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4rem;
+  background: #1f2937;
+  display: flex;
+  color: white;
+  justify-content: space-between;
+  padding: 0px 200px;
+  align-items: center;
+  list-style-type: none;
+}
+
+.more-details > li {
+  list-style-type: none;
+}
+
+a {
+  color: #91d7e3;
+  text-decoration: none;
+  transition: font-size 0.25s ease;
+}
+
+a:hover {
+  font-size: 1.2rem;
+}
--- a/justinreyes_reading/templates/base.html
+++ b/justinreyes_reading/templates/base.html
+{% load static %}
 <html lang="en">
  <head>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <title>
      {% block title %} My Favorite Books and Authors {% endblock %}
    </title>