Working on front page looks

2025-04-09 14:40:16 -04:00 · 2020-08-11 00:14:17 -04:00 · 2020-08-11 00:14:17 -04:00 · 07ae1011bc
commit 07ae1011bc
parent 8929f78e21
10 changed files with 285 additions and 28 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,120 @@
 *.css.map
 *.sass.map
 *.scss.map
+
+# Django #
+*.log
+*.pot
+*.pyc
+__pycache__
+db.sqlite3
+media
+
+# Backup files #
+*.bak
+
+# If you are using PyCharm #
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/dictionaries
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.xml
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/gradle.xml
+.idea/**/libraries
+*.iws /out/
+
+# Python #
+*.py[cod]
+*$py.class
+
+# Distribution / packaging
+.Python build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+.pytest_cache/
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pyenv
+.python-version
+
+# celery
+celerybeat-schedule.*
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+
+# Sublime Text #
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+*.sublime-project
+
+# sftp configuration file
+sftp-config.json
+
+# Package control specific files Package
+Control.last-run
+Control.ca-list
+Control.ca-bundle
+Control.system-ca-bundle
+GitHub.sublime-settings
+
+# Visual Studio Code #
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history
--- a/config/settings.py
+++ b/config/settings.py
@ -31,6 +31,7 @@ ALLOWED_HOSTS = []
 # Application definition

 INSTALLED_APPS = [
+    'homepage.apps.HomepageConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
@ -118,3 +119,6 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/3.0/howto/static-files/

 STATIC_URL = '/static/'
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "static"),
+]
--- a/config/urls.py
+++ b/config/urls.py
@ -14,8 +14,9 @@ Including another URLconf
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, include

 urlpatterns = [
+    path ('', include('homepage.urls')),
    path('admin/', admin.site.urls),
 ]
--- a/homepage/templates/homepage/index.html
+++ b/homepage/templates/homepage/index.html
@ -1,29 +1,63 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
-    <link rel="stylesheet" href="css/styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

-    <title>TrailTruths</title>
+    <title>What's Your Story?</title>
  </head>
  <body>
    <section>
-      <div class="jumbotron hero jumbotron-fluid">
+      <div class="jumbotron hero jumbotron-fluid m-0">
        <div class="container">
            <div class="arrow" id="arrow"></div>
        </div>
-      </div>    
+      </div>
    </section>

-    <section id="info-section" class="jumbotron">
-      <h1>oh wow some more section!</h1>
+    <div id="info-section"class="row vh-50">
+      <div class="col-lg banner"></div>
+      <div class="col-lg info-col">
+        <h1 class="info-header">WHAT IS THIS?<br/>
+            AND WHATS YOUR STORY?</h1>
+        <span class="align-middle info" style="text-align: center;">
+          we’re “what’s your story” (hence #WYS) and we want to hear yours! what
+           kinds of things make you special? what are some of your favorite snacks
+           or movies? what is a special talent you mighthave that you don't tell
+           people about in person? this is the beginning of us (fellow riders,
+           walkers, etc.) getting to know one another throughout our communities
+           across the US while encouraging people to get out on the trails and
+           exercise. it revolves around the idea that every stranger has a story
+           to share and we can unify communities using these diverse stories and
+           connect just like trails and maps do. if you are here right now you
+           scanned a QR code that was hung up on a nearby trail. we are happy to
+           have you here! so, go ahead and share your story and enjoy being
+           outside. YOU ARE UGLY!
+         </span>
+      </div>
+    </div>
+    <section style="container">
+      <div id="insta-section"class="row vh-50">
+        <span class="text-light insta-info text-center align-middle">these responses are not being used in any negative way
+          , just to hear stories and see how cool people are all over! you do not
+          have to share your name or where you live, it just makes your
+          responses more identifiable if you see them on the instagram.
+          every two weeks or so there will be a new question put out via
+          QR, and if you follow the instagram handle, you will know when it
+          has been posted. so, please hit the trails and head out into
+          your community and share a new tidbit about yourself.
+          i hope to publish some stories via instagram and share
+          the journeys taking place all over our country! </span>
+      </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
-    <script src="js/main.js" type="text/javascript">
+    <script src="{% static 'js/main.js' %}" type="text/javascript">

    </script>
  </body>
--- a/homepage/urls.py
+++ b/homepage/urls.py
@ -0,0 +1,6 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path ('', views.homepage, name="homepage")
+]
--- a/homepage/views.py
+++ b/homepage/views.py
@ -1,3 +1,6 @@
 from django.shortcuts import render

 # Create your views here.
+
+def homepage (request):
+    return render(request, 'homepage/index.html')
--- a/static/css/fonts/Hanson-Bold.ttf
+++ b/static/css/fonts/Hanson-Bold.ttf
--- a/static/css/res/banner.png
+++ b/static/css/res/banner.png
--- a/static/css/styles.css
+++ b/static/css/styles.css
@ -1,26 +1,32 @@
@charset "UTF-8";
+@font-face {
+  src: url("./fonts/Hanson-Bold.ttf");
+  font-family: "Hanson-Bold"; }
+html {
+  background-color: #333; }
+
 body {
  overflow-y: scroll;
  /* Keep scroll functionality */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
-  /* Firefox */
-}
+  /* Firefox */ }

 body::-webkit-scrollbar {
-  display: none;
-}
+  display: none; }

 .hero {
-  color: white;
+  color: #333 !important;
+  background-color: #333 !important;
  background-image: url("res/hero.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
-  background-attachment: fixed;
-  height: 100vh;
-}
+  background-attachment: fixed; }
+  @media (max-width: 768px) {
+    .hero {
+      background-image: url("res/hero-mobile.png"); } }

 .arrow {
  vertical-align: bottom;
@ -29,8 +35,7 @@ body::-webkit-scrollbar {
  width: 70px;
  margin: 0 auto;
  margin-top: 70vh;
-  height: 100px;
-}
+  height: 100px; }

 .arrow:after {
  content: "";
@ -43,15 +48,39 @@ body::-webkit-scrollbar {
  background-repeat: no-repeat;
  -webkit-animation: 3s infinite ease;
  animation: 3s infinite ease;
-  animation-name: การเคลื่อนไหวที่-1;
-}
+  animation-name: การเคลื่อนไหวที่-1; }
@keyframes การเคลื่อนไหวที่-1 {
-  0%, 100% {
-    top: 50px;
-  }
+  0%,
+       100% {
+    top: 50px; }
  50% {
-    top: 80px;
-  }
-}
+    top: 80px; } }
+.vh-50 {
+  height: 50vh; }
+
+.banner {
+  color: white;
+  background-image: url("res/banner.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed; }
+
+.info-col {
+  background-color: #fff; }
+
+.info-header {
+  font-family: 'Hanson-Bold','Arial',sans-serif;
+  color: white;
+  text-stroke: 3px #305899;
+  -webkit-text-stroke: 3px #305899; }
+
+.info {
+  font-family: 'Hanson-Bold','Arial',sans-serif;
+  font-size: .8em;
+  color: #2b5291; }
+
+#insta-section {
+  background-color: #333; }

 /*# sourceMappingURL=styles.css.map */
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@ -1,3 +1,4 @@
+// mixins
@mixin animation-keyframes {
  $animation-number: 0 !default !global;
  $animation-number: $animation-number + 1 !global;
@ -10,6 +11,26 @@
  }
 }

+@mixin mobile {
+  @media (max-width: 768px) { @content }
+}
+
+//fonts
+@font-face {
+    src: url("./fonts/Hanson-Bold.ttf");
+    font-family: "Hanson-Bold";
+}
+
+
+// colors
+$dark-grey: #333;
+$text: #2b5291;
+$header-stroke: #305899;
+
+
+html {
+  background-color: $dark-grey;
+}

 body {
  overflow-y: scroll;  /* Keep scroll functionality */
@ -22,14 +43,17 @@ body::-webkit-scrollbar {
 }

 .hero {
-  color: white;
+  color: $dark-grey !important;
+  background-color: $dark-grey !important;
  background-image: url("res/hero.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

-  height: 100vh;
+  @include mobile {
+    background-image: url("res/hero-mobile.png");
+  };
 }

 .container .arrow {
@ -69,3 +93,42 @@ body::-webkit-scrollbar {
       }
    }
 }
+
+
+.vh-50 {
+  height: 50vh;
+}
+
+.banner {
+  color: white;
+  background-image: url("res/banner.png");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+}
+
+.info-col{
+  background-color: #fff;
+}
+
+.info-header {
+    font-family: 'Hanson-Bold','Arial',sans-serif;
+      color: white;
+      text-stroke: 3px $header-stroke;
+      -webkit-text-stroke: 3px $header-stroke;
+}
+
+.info {
+  font-family: 'Hanson-Bold','Arial',sans-serif;
+  font-size: .8em;
+  color: $text;
+}
+
+#insta-section {
+  background-color: $dark-grey;
+}
+
+.insta-info {
+
+}