diff --git a/.gitignore b/.gitignore index 3d0395b..9248c78 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,8 @@ secrets.py static_files .idea/ .vscode/ +static +migrations/ # C extensions *.so diff --git a/pages/admin.py b/pages/admin.py index 8c38f3f..00decb7 100644 --- a/pages/admin.py +++ b/pages/admin.py @@ -1,3 +1,5 @@ from django.contrib import admin +from .models import Story # Register your models here. +admin.site.register(Story) diff --git a/pages/models.py b/pages/models.py index 71a8362..eb76ac9 100644 --- a/pages/models.py +++ b/pages/models.py @@ -1,3 +1,9 @@ from django.db import models + # Create your models here. +class Story(models.Model): + header = models.CharField(max_length=30) + img_name = models.CharField(max_length=50, default=None, null=True) + body = models.TextField(max_length=200) + created = models.DateTimeField(auto_now=True) \ No newline at end of file diff --git a/pages/static/pages/css/img/hero.png b/pages/static/pages/css/img/hero.png index acd2dce..f2c65d8 100644 Binary files a/pages/static/pages/css/img/hero.png and b/pages/static/pages/css/img/hero.png differ diff --git a/pages/static/pages/css/styles.css b/pages/static/pages/css/styles.css index 4d92072..b65b4bc 100644 --- a/pages/static/pages/css/styles.css +++ b/pages/static/pages/css/styles.css @@ -1,3 +1,866 @@ +@import 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500'; +@import 'https://fonts.googleapis.com/css?family=Josefin+Slab:700'; +@import 'https://fonts.googleapis.com/css?family=Arapey:400,600'; +@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300&display=swap'); .jumbotron { background-image: url('img/hero.png'); -} \ No newline at end of file + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +.valign { + display: flex; + flex-direction: row; + align-items: center; +} +.home { + weight: bold; + text-align: center; + background-color: rgb(255, 255, 255, 0.85); +} +body { + font-family: "Montserrat", "Helvetica", "Arial", sans-serif; + margin: 0px; + display: flex; + flex-direction: column; + color: #444; +} + +.navigation { + width: 100vw; + height: 118px; + background-color: #FFF; + z-index: 2; +} +@media only screen and (max-width: 640px) { + .navigation { + height: 56px; + } +} +.navigation .logo { + height: 90px; + margin-right: 50px; + float: left; + text-align: left; +} +@media only screen and (max-width: 800px) { + .navigation .logo { + margin-right: 10px; + } +} +@media only screen and (max-width: 640px) { + .navigation .logo { + display: none; + } +} +.navigation .socials { + display: flex; + width: auto; + float: right; + text-align: right; +} +@media only screen and (max-width: 800px) { + .navigation .socials { + display: none; + } +} + +.seperate { + display: flex; + justify-content: space-between; +} +.seperate i { + margin-left: 10px; + font-size: 22px; + color: #AAA; +} +.seperate i:hover { + color: #444; +} + +nav { + display: flex; + float: left; + text-align: left; + font-size: 12px; + flex-wrap: wrap; + margin: 0px; +} +nav ul { + list-style-image: none; + list-style-type: none; + display: flex; + flex-direction: row; + margin: 0px; + padding: 0px; +} +nav ul li a { + padding: 6px; + text-decoration: none; + color: #444; + font-family: "Montserrat", "Helvetica", "Arial", sans-serif; + text-transform: uppercase; + letter-spacing: 1.2px; + line-height: 14.4px; + font-weight: 400; +} +@media only screen and (max-width: 800px) { + nav ul li a { + margin: 2px; + padding: 0px; + } +} +nav ul li:hover > a { + color: #38A3BD; +} +nav ul li:hover > .submenu { + display: flex; +} +@media only screen and (max-width: 640px) { + nav { + display: none; + } +} + +.submenu { + display: none; + float: left; + text-align: left; + font-size: 12px; + flex-wrap: wrap; + margin: 0px; + margin-top: 5px; + position: absolute; + background-color: #FFF; + box-shadow: 2px 2px 10px #AAA; + -moz-box-shadow: 2px 2px 10px #AAA; + -webkit-box-shadow: 2px 2px 10px #AAA; +} +.submenu ul { + list-style-image: none; + list-style-type: none; + display: flex; + flex-direction: column; + margin: 0px; + padding: 5px; + padding-top: 10px; + padding-bottom: 10px; +} +@media only screen and (max-width: 800px) { + .submenu ul { + padding-top: 5px; + padding-bottom: 5px; + } +} +.submenu ul li { + padding-top: 3px; + padding-bottom: 3px; +} +.submenu ul li a { + padding: 6px; + text-decoration: none; + color: #444; + font-family: "Montserrat", "Helvetica", "Arial", sans-serif; + text-transform: uppercase; + letter-spacing: 1.2px; + line-height: 14.4px; + font-weight: 400; +} +@media only screen and (max-width: 800px) { + .submenu ul li a { + margin: 2px; + padding: 0px; + } +} +.submenu ul li:hover > a { + color: #38A3BD; +} +@media only screen and (max-width: 640px) { + .submenu { + display: none; + } +} + +.hero-image { + height: 480px; + z-index: 1; + background-color: #AAA; + overflow: hidden; + display: flex; + align-items: flex-end; + justify-content: center; +} +@media only screen and (max-width: 640px) { + .hero-image { + height: 280px; + } +} +.hero-image img { + flex-shrink: 0; + min-width: 100%; + min-height: 100%; + position: relative; +} + +.content { + width: 100vw; + display: flex; + flex-wrap: wrap; + padding-top: 43px; + padding-bottom: 43px; +} + +.container-2 { + width: 1200px; + margin-left: calc(50vw - 600px); + margin-right: calc(50vw - 600px); +} +@media only screen and (max-width: 1220px) { + .container-2 { + width: 100%; + padding: 15px; + margin: 0px; + } +} + +hr { + width: 1200px; + margin-left: calc(50vw - 600px); + margin-right: calc(50vw - 600px); +} +@media only screen and (max-width: 1220px) { + hr { + width: auto; + margin-left: 15px; + margin-right: 15px; + } +} + +.overlay { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + top: 118; + left: 0; + position: absolute; + min-width: 100vw; + min-height: 480px; +} +@media only screen and (max-width: 640px) { + .overlay { + min-height: 280px; + } +} +.overlay .title { + text-align: center; + font-size: 60px; + color: #FFF; + margin-top: 80px; + font-family: "Josefin Slab"; + font-style: bold; +} +@media only screen and (max-width: 640px) { + .overlay .title { + margin-top: 40px; + } +} + +.row { + display: flex; + flex-direction: row; +} +@media only screen and (max-width: 640px) { + .row { + flex-direction: column; + } +} + +.col { + display: flex; + flex: 1 1 0; + flex-direction: column; + justify-content: center; + text-align: center; +} +@media only screen and (max-width: 640px) { + .col { + flex: 1; + } +} + +.segment { + padding-left: 17px; + padding-right: 17px; +} + +.segment-title { + color: blue; + font-size: 24px; + padding-bottom: 17px; + font-weight: 500; +} + +.segment-para { + color: #444; + text-align: left; + font-size: 22px; + line-height: 33px; + font-weight: 300; + font-family: 'Hind', sans-serif; +} + +.segment-more-button { + width: 80px; + font-size: 11px; + margin: 0 auto; + padding-left: 23px; + padding-right: 23px; + padding-top: 13px; + padding-bottom: 13px; + border-radius: 3px; + border-width: 2px; + border-style: solid; + border-color: #38A3BD; + color: #38A3BD; + text-transform: uppercase; + letter-spacing: 1.2px; + line-height: 14.4px; + font-weight: 400; +} + +.segment-more-button:hover { + color: #FFF; + background-color: #38A3BD; + font-weight: 500; +} + +.segment-image { + max-width: 100%; + margin-bottom: 10px; +} +.img_cont { + text-align: center; +} + +.banner-img { + width: 100%; + height: 100%; +} + +.banner { + padding-top: 0px; + margin-top: 15px; + padding-bottom: 0px; + margin-bottom: 15px; +} +@media only screen and (max-width: 640px) { + .banner { + margin-top: 0px; + margin-bottom: 0px; + } +} + +.footer-segment { + display: flex; + flex-direction: column; + padding-left: 17px; + padding-right: 17px; + justify-content: flex-start; + align-items: center; +} +.footer-segment b { + font-size: 14px; + margin-bottom: 24px; +} +.footer-segment .socials { + display: flex; + width: auto; +} +.footer-segment .socials a { + margin-right: 20px; + font-size: 28px; + color: #AAA; + margin-bottom: 17px; +} +.footer-segment .socials a:hover { + color: #444; +} +.footer-segment .socials a:last-child { + margin-right: 0px; +} +.footer-segment a { + text-decoration: none; + color: #444; + font-size: 13px; + margin-bottom: 24px; +} +.footer-segment a:hover { + color: #38A3BD; +} +.footer-segment p { + font-size: 13px; +} +.footer-segment .footer-logo { + width: 100px; + margin-top: 17px; +} +@media only screen and (max-width: 640px) { + .footer-segment { + margin-bottom: 48px; + } +} + +.mobile-only { + display: none; +} +@media only screen and (max-width: 640px) { + .mobile-only { + display: flex; + } +} + +.menu i { + color: #444; + font-size: 24px; +} + +.mobile-nav { + flex-direction: row; + width: 100%; + justify-content: space-between; + margin-left: 15px; + margin-right: 15px; +} +.mobile-nav .title { + font-size: 24px; + font-weight: 500; +} + +.desktop-only { + display: flex; +} +@media only screen and (max-width: 640px) { + .desktop-only { + display: none; + } +} + +.fa-gap { + width: 25px; +} + +.mobile-navigation-links { + display: none; + width: 100vw; +} +.mobile-navigation-links ul { + list-style-image: none; + list-style-type: none; + display: flex; + flex-direction: column; + margin: 0px; + padding: 0px; + width: 100vw; + align-items: center; +} +.mobile-navigation-links ul li { + width: 100vw; + text-align: center; + background-color: #EEE; + padding-top: 12px; + padding-bottom: 12px; +} +.mobile-navigation-links ul li a { + text-decoration: none; + color: #444; + text-transform: uppercase; + letter-spacing: 1.2px; + line-height: 14.4px; + font-weight: 400; + padding-top: 12px; + padding-bottom: 12px; +} +.mobile-navigation-links ul li:hover > a { + color: #38A3BD; +} + +.mobile-submenu { + display: none; +} +.mobile-submenu ul { + list-style-image: none; + list-style-type: none; + display: flex; + flex-direction: column; + margin: 0px; + padding: 0px; + width: 100vw; + align-items: center; +} +.mobile-submenu ul li { + width: 100vw; + text-align: center; + background-color: #DDD; + padding-top: 8px; + padding-bottom: 8px; +} +.mobile-submenu ul li a { + text-decoration: none; + color: #444; + text-transform: uppercase; + letter-spacing: 1.2px; + line-height: 14.4px; + font-weight: 400; +} + +.w { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + text-align: center; +} +@media only screen and (max-width: 640px) { + .w { + flex: 1; + align-items: flex-start; + text-align: left; + } +} + +.w66 { + flex: 2; + margin-right: 17px; + align-items: flex-start; +} + +.w33 { + flex: 1; + margin-left: 17px; +} + +.segment-quote { + color: #444; + text-align: left; + font-size: 28px; + line-height: 42px; + font-weight: 300; + font-style: italic; + font-family: "Arapey"; + margin-top: 0px; +} + +.segment-projects-button { + width: auto; + font-size: 11px; + margin: 0 auto; + padding-left: 23px; + padding-right: 23px; + padding-top: 13px; + padding-bottom: 13px; + border-radius: 3px; + border-width: 2px; + border-style: solid; + border-color: #38A3BD; + color: #38A3BD; + text-transform: uppercase; + letter-spacing: 1.2px; + line-height: 14.4px; + font-weight: 400; +} + +.segment-projects-button:hover { + color: #FFF; + background-color: #38A3BD; + font-weight: 500; +} + +.segment-title-outer { + color: #38A3BD; + font-size: 24px; + padding-bottom: 17px; + font-weight: 500; +} +@media only screen and (max-width: 640px) { + .segment-title-outer { + margin-left: 10px; + } +} + +.news-block { + display: flex; + flex-direction: row; + margin-bottom: 20px; +} +.news-block .news-img { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + text-align: left; + width: 25%; + padding-right: 25px; +} +.news-block .news-img img { + width: 100%; +} +.news-block .news-content { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + text-align: left; + width: 60%; +} +.news-block .news-content .news-title { + font-size: 20px; + color: #AAA; +} +.news-block .news-content .news-title:hover { + color: #38A3BD; +} +.news-block .news-content .news-para { + font-size: 14px; + color: #444; +} +.news-block .news-content .news-read-more { + font-size: 13px; + color: #AAA; +} +.news-block .news-content .news-read-more:hover { + color: #38A3BD; +} +.news-block .news-content .news-date { + font-size: 12px; + color: #AAA; +} +@media only screen and (max-width: 640px) { + .news-block { + margin-left: 10px; + } +} + +.news-and-quote { + padding-top: 17px; + padding-bottom: 32px; +} + +.user-image { + align-items: flex-start; + justify-content: flex-start; + margin: 0px; +} +.user-image img { + width: 90%; +} +@media only screen and (max-width: 640px) { + .user-image img { + width: 100%; + } +} + +.user-info { + align-items: flex-start; + justify-content: flex-start; + text-align: left; +} +.user-info p { + font-weight: 300; + font-size: 22px; + line-height: 33px; + margin-top: 12px; + margin-bottom: 12px; +} +.user-info .title { + font-weight: 500; + font-size: 18px; + margin: 0px; +} +@media only screen and (max-width: 640px) { + .user-info .title { + margin-top: 24px; + } +} + +.committee { + align-items: flex-start; + justify-content: flex-start; + text-align: left; +} +.committee .title { + color: #38A3BD; + font-size: 22px; + font-weight: 500; +} +.committee p:last-child { + margin-bottom: 24px; +} + +.committee-list { + padding-bottom: 0px; + padding-top: 0px; +} + +.top-padding { + padding-top: 17px; +} + +.logo-link { + text-decoration: none; + color: #444; +} + +.dark { + color: #000 !important; + font-weight: 500 !important; +} + +.big-news-title { + font-size: 24px; + color: #38A3BD; +} + +.big-news-date { + font-size: 20px; + color: #AAA; +} + +.big-news-para { + font-size: 22px; + line-height: 33px; + color: #444; + margin-top: 0px; +} + +.big-news-read-more { + font-size: 18px; + color: #AAA; +} + +.large-news { + margin-bottom: 0px; +} +@media only screen and (max-width: 640px) { + .large-news { + flex-direction: column; + align-items: center; + } + .large-news .news-img { + width: 75%; + } + .large-news .news-content { + width: 100%; + } +} + +.middle-quote { + display: flex; + flex-direction: column; +} + +.quote-text { + width: 100%; + text-align: center; + justify-content: center; +} +@media only screen and (max-width: 640px) { + .quote-text { + text-align: left; + justify-content: flex-start; + } +} +.quote-text p { + font-family: "Arapey"; + font-style: italic; + font-weight: 600; + font-size: 28px; +} + +.quote-author { + width: 100%; + text-align: right; + justify-content: flex-end; +} +.quote-author p { + margin-right: 200px; + font-size: 22px; +} +@media only screen and (max-width: 800px) { + .quote-author p { + margin-right: 0px; + } +} + +.block-title { + text-align: left; + align-items: flex-start; + justify-content: flex-start; + margin-left: 0px; + margin-right: 17px; +} +.block-title p { + font-size: 21px; +} + +.block-para { + text-align: left; + align-items: flex-start; + justify-content: flex-start; +} +.block-para p { + font-size: 22px; + line-height: 33px; +} + +.block { + padding-top: 7px; + padding-bottom: 7px; +} + +.leadership-button-container { + text-align: cetner; + align-items: center; + justify-content: center; +} + +.leadership-button { + width: auto; + font-size: 14px; + padding-left: 34px; + padding-right: 34px; + padding-top: 21px; + padding-bottom: 21px; + border-radius: 3px; + background-color: #38A3BD; + color: #FFF; + text-transform: uppercase; + font-weight: 500; +} + +.leadership-button:hover { + opacity: 0.7; +} + +.involved { + font-size: 22px; + line-height: 33px; +} +.involved .calTitle { + font-size: 28px; +} + +.colored { + color: #38A3BD; +} + +.thicc { + font-weight: 500; +} + +.maxi-padding { + padding-top: 27px; + padding-bottom: 27px; +} + +/*# sourceMappingURL=css/index.css.map */ \ No newline at end of file diff --git a/pages/templates/pages/index.html b/pages/templates/pages/index.html index 3ee7286..494d289 100644 --- a/pages/templates/pages/index.html +++ b/pages/templates/pages/index.html @@ -5,9 +5,33 @@ {% endblock css %} {% block content %}
-
-

TJHSST Class of 2023

+
+
+

TJHSST Class of 2023

We are the class to beat!

+
+
+

2023 News

+
+
+ + {% for story in stories %} + +
+

{{ story.header }}

+ +
+ +
+

{{ story.body }}

+ {{ story.created.date }} +
+ + {% endfor %} + +
+ +
{% endblock content %} diff --git a/pages/views.py b/pages/views.py index 2fa34e7..ee663b3 100644 --- a/pages/views.py +++ b/pages/views.py @@ -1,9 +1,15 @@ from django.shortcuts import render +from .models import Story # Create your views here. def index(request): - return render(request, 'pages/index.html') + try: + stories = Story.objects.all().order_by('-created') + stories = stories[:3] + except Exception: + stories = [] + return render(request, 'pages/index.html', {'stories': stories}) def council(request):