split up style.css

TealCode/TealCode/settings.py

@@ -9,7 +9,7 @@ https://docs.djangoproject.com/en/3.2/topics/settings/
 For the full list of settings and their values, see
 https://docs.djangoproject.com/en/3.2/ref/settings/
 """
-
+import os
 from pathlib import Path
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
@@ -25,7 +25,10 @@ SECRET_KEY = 'django-insecure-84w$au&)%5rl8ud!82e%&)e&r+c0f9z%zlr4m9(76mebvx-r2@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ['127.0.0.1', 'code.tealfire.de']
+ALLOWED_HOSTS = ['code.tealfire.de']
+
+if DEBUG:
+    ALLOWED_HOSTS.append('127.0.0.1')
 
 
 # Application definition
@@ -74,13 +77,24 @@ WSGI_APPLICATION = 'TealCode.wsgi.application'
 # Database
 # https://docs.djangoproject.com/en/3.2/ref/settings/#databases
 
-DATABASES = {
+if DEBUG:
-    'default': {
+    DATABASES = {
-        'ENGINE': 'django.db.backends.sqlite3',
+        'default': {
-        'NAME': BASE_DIR / 'db.sqlite3',
+            'ENGINE': 'django.db.backends.sqlite3',
+            'NAME': BASE_DIR / 'db.sqlite3',
+        }
+    }
+else:
+    DATABASES = {
+        'default': {
+            'ENGINE': 'django.db.backends.mysql',
+                'NAME': 'tealcode',
+                'HOST': '127.0.0.1',
+                'PORT': '3306',
+                'USER': 'tealcode',
+                'PASSWORD': '^VA2&&wXtWUJhvtaLw%4AY^?^GdvLWXn',
+        }
     }
-}
-
 
 # Password validation
 # https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
@@ -120,6 +134,10 @@ USE_TZ = True
 
 STATIC_URL = '/static/'
 
+if not DEBUG:
+    STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
+    MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
 

TealCode/main/static/main/css/base.css

@@ -0,0 +1,63 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+
+body{
+    background-color: rgba(38, 38, 42, 1);
+}
+
+/* HEADER */
+header{
+    background-color: rgb(34, 102, 71);
+    padding: 10px;
+    padding-left: 150px;
+    box-shadow: 0px 1px 20px 3px #1f1d1d;
+}
+
+header div{
+    float: right;
+    margin-top: -25px;
+    margin-right: 100px;
+}
+
+header div a{
+    letter-spacing: 1.5px;
+    padding-right: 10px;
+    padding-left: 10px; 
+    cursor:pointer;
+    transition: 0.1s;
+    transition-timing-function: linear;    
+    text-decoration: none;
+    font-weight: bold;
+    text-align: center ;
+}
+
+header div .a-current{
+    color:rgb(0, 255, 106);
+    text-decoration: underline;
+}
+
+header div a:hover{
+    color:rgb(0, 255, 106);
+    text-decoration: underline;
+}
+
+/* MAIN */
+main #main-content{
+    background-color: rgb(26, 26, 29);
+    width: 700px;
+    box-shadow: 0px 0px 5px 1px #1f1d1d;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 20px;
+    padding-bottom: 10px;
+    margin-top: 40px;
+}
+main #main-content #main-content-code{
+    width: 600px;
+    margin-left: 50px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}

TealCode/main/static/main/css/category.css

@@ -0,0 +1,60 @@
+/* TOPIC LIST */
+main #main-content #list{
+    width: 700px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+main #main-content #list .list-item{
+    width: 600px;
+    margin-left: 50px;
+    margin-top: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-color: rgb(14, 139, 87);
+    transition-timing-function: linear;
+    transition: 0.1s;
+    text-transform: capitalize;
+    cursor:pointer;
+}
+
+main #main-content #list .list-item:hover{
+    box-shadow: 0px 0px 10px 1px #4b4b4b;
+    background-color: rgb(31, 177, 116);
+}
+
+main #main-content #list .list-item p{
+    letter-spacing: 1px;
+    margin-left: 50px;
+    font-size: 14pt;
+}
+
+main #main-content #list .list-item img{
+    float: left;
+    width: 32px;
+    height: 32px;
+    margin-left: 10px;
+    margin-top: -5px;
+}
+
+/* SEARCH */
+#search{
+    width: 100%;
+    height: 30px;
+}
+
+#search input{
+    width: 80%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.014);
+    border: 3px solid rgb(34, 102, 71);
+    outline: 0;
+    font-size: 13pt;
+    font-weight: bold;
+    padding-left:10px;
+    padding-right: 10px;
+    display: block;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+}

TealCode/main/static/main/css/fonts.css

@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
+
+*{
+    font-family: 'Roboto', sans-serif;
+    color: white;
+}
+
+/* HEADLINES */
+h1{
+    letter-spacing: 5.5px;
+}
+
+h2{
+    text-align: center;
+    letter-spacing: 2.5px;
+    text-transform: capitalize;
+}

TealCode/main/static/main/css/style.css

@@ -1,185 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
-
-*{
-    padding: 0;
-    margin:0;
-    font-family: 'Roboto', sans-serif;
-    color: white;
-}
-
-body{
-    background-color: rgb(38, 38, 42);
-}
-
-body header{
-    background-color: rgb(34, 102, 71);
-    padding: 10px;
-    padding-left: 150px;
-    box-shadow: 0px 1px 20px 3px #1f1d1d;
-}
-
-body header h1{
-    letter-spacing: 5.5px;
-}
-
-body header div{
-    float: right;
-    margin-top: -25px;
-    margin-right: 100px;
-}
-
-
-body header div a{
-    letter-spacing: 1.5px;
-    padding-right: 10px;
-    padding-left: 10px; 
-    cursor:pointer;
-    transition: 0.1s;
-    transition-timing-function: linear;    
-    text-decoration: none;
-    font-weight: bold;
-    text-align: center ;
-}
-
-body header div .a-current{
-    color:rgb(0, 255, 106);
-    text-decoration: underline;
-}
-
-body header div a:hover{
-    color:rgb(0, 255, 106);
-    text-decoration: underline;
-}
-
-body main #main-content{
-    background-color: rgb(26, 26, 29);
-    width: 700px;
-    box-shadow: 0px 0px 5px 1px #1f1d1d;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 20px;
-    padding-bottom: 10px;
-    margin-top: 40px;
-}
-
-body main #main-content #main-headline h2{
-    text-align: center;
-    letter-spacing: 2.5px;
-    text-transform: capitalize;
-}
-
-body main #main-content #main-content-code{
-    width: 600px;
-    margin-left: 50px;
-    margin-top: 50px;
-    margin-bottom: 50px;
-}
-
-
-body main #main-content #list{
-    width: 700px;
-    margin-top: 50px;
-    margin-bottom: 50px;
-}
-
-body main #main-content #list .list-item{
-    width: 600px;
-    margin-left: 50px;
-    margin-top: 10px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    background-color: rgb(14, 139, 87);
-    transition-timing-function: linear;
-    transition: 0.1s;
-    cursor:pointer;
-}
-
-body main #main-content #list .list-item:hover{
-    box-shadow: 0px 0px 10px 1px #4b4b4b;
-    background-color: rgb(31, 177, 116);
-}
-body main #main-content #list .list-item p{
-    letter-spacing: 1px;
-    margin-left: 50px;
-    font-size: 14pt;
-}
-
-body main #main-content #list .list-item img{
-    float: left;
-    width: 32px;
-    height: 32px;
-    margin-left: 10px;
-    margin-top: -5px;
-}
-
-body main #main-content .note{
-    margin-top: 20px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    padding-left: 10px;
-    background-color: rgb(80, 83, 82);
-    
-}
-
-body main #main-content .note p{
-    color: rgb(202, 202, 202);
-    font-size: 10pt;
-}
-
-#button-content{
-    height: 60px;
-    width: 100%;
-    display: block;
-    float:left;
-    margin-bottom: 20px;
-}
-
-#button-content div{
-    height: 60px;
-    width: 150px;
-    margin-left: 60px;
-    display: block;
-    float:left;
-}
-
-#button-content div a{
-    width: 100%;
-    display: block;
-    text-align: center;
-    font-size: 13pt;
-    font-weight: bold;
-    text-decoration: none;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    background-color: rgba(95, 255, 175, 0.1);
-    border: 5px solid rgb(34, 102, 71);
-    transition: 0.1s;
-    transition-timing-function: linear;
-}
-
-#button-content div a:hover{
-    background-color: rgba(137, 250, 194, 0.3);
-    border: 5px solid rgb(107, 255, 181);
-}
-
-#search{
-    width: 100%;
-    height: 30px;
-}
-
-#search input{
-    width: 80%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0.014);
-    border: 3px solid rgb(34, 102, 71);
-    outline: 0;
-    font-size: 13pt;
-    font-weight: bold;
-    padding-left:10px;
-    padding-right: 10px;
-    display: block;
-    margin-top: 10px;
-    margin-left: auto;
-    margin-right: auto;
-}

TealCode/main/static/main/css/topic.css

@@ -0,0 +1,50 @@
+main #main-content .note{
+    margin-top: 20px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+    background-color: rgb(80, 83, 82);
+    
+}
+
+main #main-content .note p{
+    color: rgb(202, 202, 202);
+    font-size: 10pt;
+}
+
+#button-content{
+    height: 60px;
+    width: 100%;
+    display: block;
+    float:left;
+    margin-bottom: 20px;
+}
+
+#button-content div{
+    height: 60px;
+    width: 150px;
+    margin-left: 60px;
+    display: block;
+    float:left;
+}
+
+#button-content div a{
+    width: 100%;
+    display: block;
+    text-align: center;
+    font-size: 13pt;
+    font-weight: bold;
+    text-decoration: none;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-color: rgba(95, 255, 175, 0.1);
+    border: 5px solid rgb(34, 102, 71);
+    transition: 0.1s;
+    transition-timing-function: linear;
+}
+
+#button-content div a:hover{
+    background-color: rgba(137, 250, 194, 0.3);
+    border: 5px solid rgb(107, 255, 181);
+}
+

TealCode/main/templates/main/base.html

@@ -6,7 +6,10 @@
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" href="{% static 'main/css/style.css' %}">
+    <link rel="stylesheet" href="{% static 'main/css/fonts.css' %}">
+    <link rel="stylesheet" href="{% static 'main/css/base.css' %}">
+    <link rel="stylesheet" href="{% static 'main/css/topic.css' %}">
+    <link rel="stylesheet" href="{% static 'main/css/category.css' %}">
     <link rel="stylesheet" href="{% static 'main/highlight/styles/atom-one-dark.min.css' %}">
 
     {% if title %}
@@ -31,7 +34,6 @@
     <main>
         <div id="main-content">            
             {% block content %}{% endblock %}
-            
         </div>
     </main>
 

TealCode/main/templates/main/category.html

@@ -1,7 +1,7 @@
 {% extends "main/base.html" %}
 {% block content %}
     
-    <div id="main-headline">
+    <div id="main-headline-container">
         <h2>{{ category_obj.display_name }}</h2>
     </div>