Added SaSS style and CORS policy.

Scylidose · Mar 13, 2023 · 99f1e7e · 99f1e7e
1 parent 6643d36
commit 99f1e7e
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 9 deletions.
diff --git a/website/atlasfind/settings.py b/website/atlasfind/settings.py
@@ -12,6 +12,7 @@
 
 from pathlib import Path
 from decouple import config
+import os 
 
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
@@ -32,6 +33,8 @@
 # Application definition
 
 INSTALLED_APPS = [
+    'compressor',
+    'corsheaders',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -40,7 +43,23 @@
     'django.contrib.staticfiles',
 ]
 
+STATIC_URL = '/atlasfind/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'atlasfind/static/')
+
+STATICFILES_FINDERS = ( 
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'compressor.finders.CompressorFinder',
+)
+
+COMPRESS_PRECOMPILERS = (
+    ('text/x-scss', 'django_libsass.SassCompiler'),
+)
+
+CORS_ORIGIN_ALLOW_ALL = True
+
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -55,7 +74,7 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'atlasfind/templates')],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [

diff --git a/website/atlasfind/static/css/style.css b/website/atlasfind/static/css/style.css
diff --git a/website/atlasfind/static/main/style.sass b/website/atlasfind/static/main/style.sass
@@ -0,0 +1,95 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
+
+$primary-color: #1e528e
+$secondary-color: #fbe300
+$background-color: #111111
+$text-color: #ffffff
+
+*
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+html 
+  font-size: 62.5%;
+
+
+body 
+  font-family: 'Montserrat', sans-serif;
+  font-size: 1.6rem;
+  color: $text-color;
+  background-color: $background-color;
+
+
+.container 
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 3rem 1.5rem;
+  text-align: center;
+
+
+h1 
+  margin-bottom: 2rem;
+  font-size: 4rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5rem;
+  color: $secondary-color;
+
+
+.search-form 
+  margin-bottom: 3rem;
+
+.search-btn 
+  width: 80px;
+  height: 40px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  background-color: #4a90e2;
+  color: #fff;
+  cursor: pointer;
+
+
+.search-btn:hover 
+  background-color: darken($primary-color, 10%);
+
+
+.search-results 
+  display: none;
+  animation: typing 1s steps(20) forwards;
+
+
+@keyframes typing
+    from
+      width: 0;
+
+    to 
+      width: 100%;
+
+
+.search-results h2 
+  margin-bottom: 1
+
+.search-container 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+
+
+.search-box 
+  width: 400px;
+  margin-right: 20px;
+  padding: 10px;
+  border: none;
+  border-radius: 20px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  font-size: 16px;
+  color: $primary-color;
+  background-color: #fff;
+
+.search-box:focus 
+  border: 2px solid #00b0ff;
+  outline: none;
+  box-shadow: 0 0 5px #00b0ff;
diff --git a/website/atlasfind/templates/base.html b/website/atlasfind/templates/base.html
@@ -1,15 +1,26 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>{% block title %}{% endblock %}</title>
-    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AtlasFind</title>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+
+    <!-- jQuery library -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
+
+    <!-- Latest compiled JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap">
+    {% load static %}
+    {% load compress %}
+    {% compress css %}
+        <link rel="stylesheet" type="text/x-scss"  href="{% static 'main/style.sass' %}" media="screen">
+    {% endcompress %}
 </head>
 <body>
-    <nav>
-        <ul>
-            <li><a href="{% url 'search_results' %}">Search</a></li>
-        </ul>
-    </nav>
-    {% block content %}{% endblock %}
+    {% block content %}
+    {% endblock %}
 </body>
 </html>