Merge pull request #19 from Rayliable/CSS

CSS Starting
Rayliable · Mar 19, 2024 · c673b9f · c673b9f
2 parents bd6b1c1 + db80b27
commit c673b9f
Show file tree

Hide file tree

Showing 53 changed files with 80 additions and 28 deletions.
diff --git a/.idea/portfolio-site-IMD2900.iml b/.idea/portfolio-site-IMD2900.iml
diff --git a/Media/siteImages/portfolioLogo.png b/Media/siteImages/portfolioLogo.png
diff --git a/Media/siteImages/portfolioNameLogo.png b/Media/siteImages/portfolioNameLogo.png
diff --git a/home/__pycache__/__init__.cpython-310.pyc b/home/__pycache__/__init__.cpython-310.pyc
diff --git a/home/__pycache__/__init__.cpython-39.pyc b/home/__pycache__/__init__.cpython-39.pyc
diff --git a/home/__pycache__/admin.cpython-310.pyc b/home/__pycache__/admin.cpython-310.pyc
diff --git a/home/__pycache__/admin.cpython-39.pyc b/home/__pycache__/admin.cpython-39.pyc
diff --git a/home/__pycache__/apps.cpython-310.pyc b/home/__pycache__/apps.cpython-310.pyc
diff --git a/home/__pycache__/apps.cpython-39.pyc b/home/__pycache__/apps.cpython-39.pyc
diff --git a/home/__pycache__/forms.cpython-310.pyc b/home/__pycache__/forms.cpython-310.pyc
diff --git a/home/__pycache__/forms.cpython-39.pyc b/home/__pycache__/forms.cpython-39.pyc
diff --git a/home/__pycache__/models.cpython-310.pyc b/home/__pycache__/models.cpython-310.pyc
diff --git a/home/__pycache__/models.cpython-39.pyc b/home/__pycache__/models.cpython-39.pyc
diff --git a/home/__pycache__/urls.cpython-310.pyc b/home/__pycache__/urls.cpython-310.pyc
diff --git a/home/__pycache__/urls.cpython-39.pyc b/home/__pycache__/urls.cpython-39.pyc
diff --git a/home/__pycache__/views.cpython-310.pyc b/home/__pycache__/views.cpython-310.pyc
diff --git a/home/__pycache__/views.cpython-39.pyc b/home/__pycache__/views.cpython-39.pyc
diff --git a/home/migrations/__pycache__/0001_initial.cpython-310.pyc b/home/migrations/__pycache__/0001_initial.cpython-310.pyc
diff --git a/home/migrations/__pycache__/0001_initial.cpython-39.pyc b/home/migrations/__pycache__/0001_initial.cpython-39.pyc
diff --git a/home/migrations/__pycache__/0002_userupload_tags.cpython-310.pyc b/home/migrations/__pycache__/0002_userupload_tags.cpython-310.pyc
diff --git a/home/migrations/__pycache__/0002_userupload_tags.cpython-39.pyc b/home/migrations/__pycache__/0002_userupload_tags.cpython-39.pyc
diff --git a/home/migrations/__pycache__/__init__.cpython-310.pyc b/home/migrations/__pycache__/__init__.cpython-310.pyc
diff --git a/home/migrations/__pycache__/__init__.cpython-39.pyc b/home/migrations/__pycache__/__init__.cpython-39.pyc
diff --git a/home/static/style/headerStyle.css b/home/static/style/headerStyle.css
diff --git a/home/static/style/homeStyle.css b/home/static/style/homeStyle.css
@@ -0,0 +1,37 @@
+body {
+    background-color: #efffc8;
+
+
+}
+
+.categories {
+
+}
+
+.categoryDisplay {
+    margin: 5%;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: auto auto auto;
+
+    justify-content: space-between;
+}
+
+.categoryimg {
+    width: 90%;
+    padding: 20px;
+    height: auto;
+}
+
+.homeWelcome {
+    background-color: #1c1c1c;
+    padding: 50px;
+    color: #efffc8;
+/*Still in progress*/
+.roboto-slab-<homeWelcome> {
+  font-family: "Roboto Slab", serif;
+  font-optical-sizing: auto;
+  font-weight: 100;
+  font-style: normal;
+}
+}
diff --git a/portfolio_site_IMD2900/__pycache__/__init__.cpython-310.pyc b/portfolio_site_IMD2900/__pycache__/__init__.cpython-310.pyc
diff --git a/portfolio_site_IMD2900/__pycache__/__init__.cpython-39.pyc b/portfolio_site_IMD2900/__pycache__/__init__.cpython-39.pyc
diff --git a/portfolio_site_IMD2900/__pycache__/settings.cpython-310.pyc b/portfolio_site_IMD2900/__pycache__/settings.cpython-310.pyc
diff --git a/portfolio_site_IMD2900/__pycache__/settings.cpython-39.pyc b/portfolio_site_IMD2900/__pycache__/settings.cpython-39.pyc
diff --git a/portfolio_site_IMD2900/__pycache__/urls.cpython-310.pyc b/portfolio_site_IMD2900/__pycache__/urls.cpython-310.pyc
diff --git a/portfolio_site_IMD2900/__pycache__/urls.cpython-39.pyc b/portfolio_site_IMD2900/__pycache__/urls.cpython-39.pyc
diff --git a/portfolio_site_IMD2900/__pycache__/wsgi.cpython-310.pyc b/portfolio_site_IMD2900/__pycache__/wsgi.cpython-310.pyc
diff --git a/portfolio_site_IMD2900/__pycache__/wsgi.cpython-39.pyc b/portfolio_site_IMD2900/__pycache__/wsgi.cpython-39.pyc
diff --git a/register/__pycache__/__init__.cpython-310.pyc b/register/__pycache__/__init__.cpython-310.pyc
diff --git a/register/__pycache__/__init__.cpython-39.pyc b/register/__pycache__/__init__.cpython-39.pyc
diff --git a/register/__pycache__/admin.cpython-310.pyc b/register/__pycache__/admin.cpython-310.pyc
diff --git a/register/__pycache__/admin.cpython-39.pyc b/register/__pycache__/admin.cpython-39.pyc
diff --git a/register/__pycache__/apps.cpython-310.pyc b/register/__pycache__/apps.cpython-310.pyc
diff --git a/register/__pycache__/apps.cpython-39.pyc b/register/__pycache__/apps.cpython-39.pyc
diff --git a/register/__pycache__/forms.cpython-310.pyc b/register/__pycache__/forms.cpython-310.pyc
diff --git a/register/__pycache__/forms.cpython-39.pyc b/register/__pycache__/forms.cpython-39.pyc
diff --git a/register/__pycache__/models.cpython-310.pyc b/register/__pycache__/models.cpython-310.pyc
diff --git a/register/__pycache__/models.cpython-39.pyc b/register/__pycache__/models.cpython-39.pyc
diff --git a/register/__pycache__/views.cpython-310.pyc b/register/__pycache__/views.cpython-310.pyc
diff --git a/register/__pycache__/views.cpython-39.pyc b/register/__pycache__/views.cpython-39.pyc
diff --git a/register/migrations/__pycache__/__init__.cpython-310.pyc b/register/migrations/__pycache__/__init__.cpython-310.pyc
diff --git a/register/migrations/__pycache__/__init__.cpython-39.pyc b/register/migrations/__pycache__/__init__.cpython-39.pyc
diff --git a/register/templates/register/register.html b/register/templates/register/register.html
@@ -1,4 +1,6 @@
 {% extends "nav-bar.html" %}
+{% load static %}
+
 <!-- Used tutorial https://www.youtube.com/watch?v=Ev5xgwndmfc&ab_channel=TechWithTim, minus bootstrapping part -->
 {% block title %}Create an Account - Portfol.io{% endblock %}
 

diff --git a/templates/about.html b/templates/about.html
@@ -1,9 +1,11 @@
 {% extends "nav-bar.html" %}
+{% load static %}
 {% block title %}
     <!-- Title here! -->
     About Us - Portfol.io
 {% endblock %}
 
 {% block content %}
     <!-- Content here! -->
+    <link rel="stylesheet" type="text/css" href="static/style/homeStyle.css">
 {% endblock %}
diff --git a/templates/contact.html b/templates/contact.html
@@ -1,9 +1,11 @@
 {% extends "nav-bar.html" %}
+{% load static %}
 {% block title %}
     <!-- Title here! -->
     Contact Us - Portfol.io
 {% endblock %}
 
 {% block content %}
     <!-- Content here! -->
+    <link rel="stylesheet" type="text/css" href="static/style/homeStyle.css">
 {% endblock %}
diff --git a/templates/home.html b/templates/home.html
@@ -5,37 +5,33 @@
 {% endblock %}
 
 {% block content %}
-    <div class="container">
-           {% if user.is_authenticated %}
-              Signed in!
-           {% else %}
-               <p><a href="/login">Please log in here.</a></p>
-           {% endif %}
-
-    </div>
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" ></script>
-      <h3 style="margin-left: 25px; font-size: 40px; text-align: center"> Categories </h3>
+
+    <div class="homeWelcome">
+        <h3 style="font-size: 45px; text-align: center"> WELCOME! </h3>
+        <h4 style="font-size: 20px; text-align: center"> Browse Categories! </h4>
+    </div>
     <!-- Scroll line for categories -->
-    <div style="margin-left: 20px; display: flex; white-space: nowrap; overflow-x: auto; -ms-overflow-style: none;">
-        <div style="margin-right: 20px">
+    <div class="categories">
+        <div class="categoryDisplay">
             <a href="#"> <!-- links to the page of art -->
-                <img src="{% static 'placeHolderImage.png' %}" alt="img" style="width: 300px; height: auto">
+                <img src="{% static 'placeHolderImage.png' %}" alt="img" class="categoryimg">
             </a>
             <a href="#"> <!-- links to the page of art -->
-                <img src="{% static 'placeHolderImage.png' %}" alt="img" style="width: 300px; height: auto">
+                <img src="{% static 'placeHolderImage.png' %}" alt="img" class="categoryimg">
             </a>
             <a href="#"> <!-- links to the page of art -->
-                <img src="{% static 'placeHolderImage.png' %}" alt="img" style="width: 300px; height: auto">
+                <img src="{% static 'placeHolderImage.png' %}" alt="img" class="categoryimg">
             </a>
             <a href="#"> <!-- links to the page of art -->
-                <img src="{% static 'placeHolderImage.png' %}" alt="img" style="width: 300px; height: auto">
+                <img src="{% static 'placeHolderImage.png' %}" alt="img" class="categoryimg">
             </a>
             <a href="#"> <!-- links to the page of art -->
-                <img src="{% static 'placeHolderImage.png' %}" alt="img" style="width: 300px; height: auto">
+                <img src="{% static 'placeHolderImage.png' %}" alt="img" class="categoryimg">
             </a>
             <a href="#"> <!-- links to the page of art -->
-                <img src="{% static 'placeHolderImage.png' %}" alt="img" style="width: 300px; height: auto">
+                <img src="{% static 'placeHolderImage.png' %}" alt="img" class="categoryimg">
             </a>
         </div>
     </div>
@@ -54,6 +50,8 @@ <h4 style="font-size: 30px"> About Us </h4>
             <button> About Us </button>
         </a>
     </div>
+<link rel="stylesheet" type="text/css" href="static/style/homeStyle.css">
+
 {% endblock %}
 
 

diff --git a/templates/nav-bar.html b/templates/nav-bar.html
@@ -1,9 +1,13 @@
 <!DOCTYPE html>
-
 {%  load static %}
 
 <html lang="en">
   <head>
+  <!--Code to link the RobotoSlab font from Google Fonts-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected]&display=swap" rel="stylesheet">
+
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
@@ -12,17 +16,16 @@
       {% endblock %}
     </title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  rel="stylesheet" />
+  <link rel="stylesheet" type="text/css" href="static/style/headerStyle.css">
   </head>
   <body>
-  {% block navbar %}
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
-      <a class="navbar-brand" href="/">
-          {% block siteName %}
-            Portfol.io
-          {% endblock %}
-      </a>
+    {% block navbar %}
+      <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #2ca6a4;">
+        <a class="navbar-brand ml-1 mr-4" href="/">
+          <img src="Media/siteImages/portfolioNameLogo.png" alt="site logo" style="width:auto; height:75px;">
+    </a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
-      <div class="collapse navbar-collapse" id="navbarNav">
+      <div class="collapse navbar-collapse d-flex justify-content-end" id="navbarNav">
         <ul class="navbar-nav">
           <li class="nav-item active">
             <a class="nav-link" href="/">Home</a>
@@ -36,14 +39,20 @@
           <li class="nav-item">
             <a class="nav-link" href="/upload_view"> Add Image </a>
           </li>
+            <li class="nav-item">
+                {% if user.is_authenticated %}
+                    <a class="nav-link"> Signed in!</a>
+                {% else %}
+                    <a class="nav-link" href="/login">Please log in here.</a>
+                {% endif %}
+            </li>
         </ul>
       </div>
     </nav>
   {% endblock %}
 
   {% block content %}
   {% endblock %}
-
   </body>
 </html>
 

diff --git a/templates/upload.html b/templates/upload.html
@@ -1,4 +1,6 @@
 {% extends "nav-bar.html" %}
+{% load static %}
+
 <!-- Used tutorial https://www.youtube.com/watch?v=Ev5xgwndmfc&ab_channel=TechWithTim, minus bootstrapping part -->
 {% block title %} Upload Images - Portfol.io{% endblock %}