From 44128caa6b0af1fbfe64c77b05274a704a3de2e6 Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 26 Jul 2020 22:23:55 +0200 Subject: [PATCH] Static Folders and CSS --- source/lostplaces/lostplaces/settings.py | 6 + .../lostplaces/lostplaces_app/static/main.css | 209 ++++++++++++++++++ .../lostplaces_app/templates/global.html | 2 +- 3 files changed, 216 insertions(+), 1 deletion(-) create mode 100644 source/lostplaces/lostplaces_app/static/main.css diff --git a/source/lostplaces/lostplaces/settings.py b/source/lostplaces/lostplaces/settings.py index 444b234..bedc8fd 100644 --- a/source/lostplaces/lostplaces/settings.py +++ b/source/lostplaces/lostplaces/settings.py @@ -119,3 +119,9 @@ USE_TZ = True # https://docs.djangoproject.com/en/3.0/howto/static-files/ STATIC_URL = '/static/' +STATICFILES_DIRS = [ + os.path.join(BASE_DIR, "static") +] + +MEDIA_URL = '/uploads/' +MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') diff --git a/source/lostplaces/lostplaces_app/static/main.css b/source/lostplaces/lostplaces_app/static/main.css new file mode 100644 index 0000000..b68a68a --- /dev/null +++ b/source/lostplaces/lostplaces_app/static/main.css @@ -0,0 +1,209 @@ +.LP-Link { + color: #565656; + text-decoration: none; + font-family: Roboto, Arial, sans-serif; } + .LP-Link:hover { + color: #C09F80; } + .LP-Link .LP-Text { + font-family: Roboto, Arial, sans-serif; } + .LP-Link .LP-Text:hover { + color: #C09F80; } + +.LP-Headline { + font-family: "Trebuchet MS", Helvetica, sans-serif; + color: #565656; + font-size: 1.7rem; + padding-top: 0px; + margin-top: 0px; + padding-bottom: 0.2rem; } + .LP-Headline--inline { + display: inline; } + +.LP-Text { + color: black; + font-family: "Times New Roman", Times, serif; + font-size: 1.2rem; } + +.LP-Icon { + height: 20px; + width: 20px; } + +.LP-Icon__List { + list-style-type: none; + display: inline-flex; + justify-content: space-between; + justify-items: stretch; + padding: 0; } + .LP-Icon__List .LP-Icon__Item { + padding: 0 3px; } + +.LP-Logo { + max-width: 100%; + max-height: 100%; + width: auto; + object-fit: contain; } + +.LP-Content { + padding: 15px; } + +.LP-TextSection .LP-Text { + line-height: 1.4rem; } + +.LP-Place .LP-Place__Image { + width: 280px; + height: 165px; + object-fit: fill; } + +.LP-Place .LP-Place__Assets { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 0.8rem; + padding: 0 10px; + padding-bottom: 10px; } + +.LP-Place .LP-Place__Info .LP-Place__Title { + font-family: "Trebuchet MS", Helvetica, sans-serif; + color: #565656; + font-size: 1rem; + padding: 0px; + margin: 0px; } + +.LP-Place .LP-Place__Info .LP-Place__Description { + font-family: Roboto, Arial, sans-serif; + color: #565656; } + +.LP-Place .LP-Place__Info .LP-Place__Detail { + font-family: "Trebuchet MS", Helvetica, sans-serif; + padding: 0; + margin: 0; + margin-top: 5px; + font-size: 0.9rem; } + +.LP-SecurityMeasure__List { + list-style-type: none; + display: flex; + padding: 0; + margin: 0; } + .LP-SecurityMeasure__List .LP-SecurityMeasure__Item { + margin: 0 5px; + padding: 5px 8px; + background-color: #D7CEC7; } + .LP-SecurityMeasure__List .LP-SecurityMeasure__Item .LP-Text { + font-family: "Trebuchet MS", Helvetica, sans-serif; + font-size: 1.2rem; } + +.LP-Header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 70px; } + .LP-Header__Logo { + max-width: 300px; + width: 35%; + object-fit: contain; } + +.LP-Menu__List { + list-style-type: none; + display: inline-flex; + justify-content: space-around; } + +.LP-Menu__Item { + padding: 10px 15px; + margin: 0 15px; + width: 100px; + text-align: center; + background-color: transparent; } + +.LP-Menu .LP-Link__Text { + color: #565656; + font-weight: bold; + text-shadow: 0px 0px 20px white; } + .LP-Menu .LP-Link__Text:hover { + color: #76323F; } + +.LP-Introduction .LP-Headline { + font-size: 2rem; } + +.LP-Introduction .LP-Text { + font-size: 1.3rem; } + +.LP-Place__Grid { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; } + .LP-Place__Grid > .LP-Place__Item { + margin: 0 15px; + margin-bottom: 50px; } + .LP-Place__Grid .LP-Link .LP-Place__Description { + display: none; } + .LP-Place__Grid .LP-Link .LP-Place:hover { + box-shadow: 0 0 8px #565656; } + +.LP-Place__List { + list-style-type: none; } + .LP-Place__List .LP-Link .LP-Place:hover { + color: #565656; + background-color: #f9f9f9; + position: relative; + left: -2px; } + .LP-Place__List .LP-Link .LP-Place:hover > .LP-Place__Image { + border-left: 2px #565656 solid; } + .LP-Place__List .LP-Place__Item { + max-width: 900px; + min-width: 450px; + margin: 18px 0; } + .LP-Place__List .LP-Place__Item .LP-Place { + display: flex; + flex-direction: row; + width: auto; + padding-right: 25px; } + .LP-Place__List .LP-Place__Item .LP-Place .LP-Place__Assets { + margin: 0; + padding: 0; + padding-left: 25px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; } + .LP-Place__List .LP-Place__Item .LP-Place .LP-Place__Assets .LP-Place__Info .LP-Place__Title { + font-size: 28px; } + .LP-Place__List .LP-Place__Item .LP-Place .LP-Place__Assets .LP-Icon__List { + justify-self: flex-end; } + .LP-Place__List .LP-Place__Item .LP-Place > .LP-Place__Image { + height: 168px; + width: 280px; } + +.LP-MainContainer { + margin: 0 auto; + max-width: 1280px; } + +.LP-PlaceOverview .LP-PlaceOverview__Info { + margin-bottom: 40px; } + .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image { + width: 600px; + height: 400px; + box-shadow: 0 0 10px #565656; + object-fit: cover; + float: right; + margin-left: 35px; + margin-bottom: 35px; } + .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description { + padding: 0 25px; + position: relative; + top: -15px; } + +.LP-PlaceOverview .LP-PlaceOverView__ImageList { + list-style-type: none; + display: flex; + flex-wrap: wrap; } + .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem { + padding: 15px; } + .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem img { + box-shadow: 0 0 5px #565656; + height: 200px; + width: 300px; + object-fit: cover; } diff --git a/source/lostplaces/lostplaces_app/templates/global.html b/source/lostplaces/lostplaces_app/templates/global.html index 29a891b..3cc7f34 100644 --- a/source/lostplaces/lostplaces_app/templates/global.html +++ b/source/lostplaces/lostplaces_app/templates/global.html @@ -4,7 +4,7 @@ - + Preview