From 4446b80dc309622cede32d337b621db07aca612d Mon Sep 17 00:00:00 2001
From: Liam Driscoll <driscolll4@cardiff.ac.uk>
Date: Fri, 9 Dec 2022 14:13:24 +0000
Subject: [PATCH] Separating CSS.
---
static/CSS/ListLocations.css | 243 +++++++++++++++++++++++++
static/CSS/Manage_Coworking_Spaces.css | 83 ---------
templates/ListLocations.html | 1 +
templates/Manage_Coworking_Spaces.html | 1 +
templates/base_template.html | 1 -
5 files changed, 245 insertions(+), 84 deletions(-)
create mode 100644 static/CSS/ListLocations.css
diff --git a/static/CSS/ListLocations.css b/static/CSS/ListLocations.css
new file mode 100644
index 0000000..7388f16
--- /dev/null
+++ b/static/CSS/ListLocations.css
@@ -0,0 +1,243 @@
+/* #iD and .Class
+
+font, color, text
+padding, background, border, margin
+width, height,
+position, top/right/bottom/left
+overflow, float, display
+
+
+.my-class {
+ width: calc(100% - 20px);
+ height: calc(50% + 10px);
+} */
+
+* {
+ font-family: Helvetica, Verdana, Arial, sans-serif;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+
+ /* Below styling used for footer position. */
+ display: flex;
+ min-height: 100vh;
+ flex-direction: column;
+}
+
+ul, li {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ text-decoration: none;
+}
+
+.Left {
+ margin-right: auto;
+}
+
+.Center {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.Right {
+ margin-left: auto;
+}
+
+/* [#1] Page header styling. Uses [#2].
+
+header #pageHeader
+ div #headerDiv
+ a #headerText #headerImg
+ nav #headerNav .navBar
+ ul .Right, ul .Left
+ li a
+
+*/
+
+#headerDiv {
+ text-align: center;
+ background-color: white;
+ padding: 20px 0px;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+}
+
+#headerDiv a {
+ font-size: 30px;
+ font-weight: bold;
+ color: black;
+}
+
+#headerText {
+ width: 100%;
+ margin-left: -240px;
+}
+
+#headerImg {
+ width: 200px;
+ height: 65px;
+ margin-top: -10px;
+ margin-right: 20px;
+ margin-bottom: -17.5px;
+ margin-left: 20px;
+}
+
+#headerNav {
+ width: 100%;
+ position: absolute;
+}
+
+#headerNav a {
+ font-size: 20px;
+ padding: 7.5px 10px;
+}
+
+/* [#2] Page navigation styling. Used in [#1] and [#4]. */
+
+.navBar {
+ background-color: #282A35;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.navBar ul, .navBar li {
+ display: flex;
+ align-items: center;
+}
+
+.navBar a {
+ color: white;
+}
+
+.navBar a:hover {
+ background-color: #0B0C0F;
+}
+
+/* [#3] Page main styling.
+
+main #pageMain
+ form #recordForm
+ label
+ input .formTextInput
+ button #addButton
+
+ */
+
+#pageMain {
+ /* Below styling used for footer position. */
+ flex: 1;
+}
+
+#recordForm {
+ margin-left: 5px;
+}
+
+#recordForm .formTextInput {
+ margin-top: 5px;
+ width: 50%;
+}
+
+/* [#4] Page footer styling. Uses [#2].
+
+footer #pageFooter
+ nav #footerNav .navBar
+ ul .Center
+ li a
+
+*/
+
+#footerNav a {
+ font-size: 15px;
+ padding: 5px 10px;
+}
+div.contain {
+text-align: center;
+}
+
+ul.list {
+display: inline-block;
+list-style-type: none;
+margin: 0;
+}
+.container {
+display: flex;
+position: relative;
+padding: 5px 660px 5px 5px;
+width: 40%;
+height: 50%;
+background-color: white;
+box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+margin-bottom: 25px;
+border-radius: 10px;
+margin-left: 20px;
+
+}
+
+
+.image {
+opacity: 1;
+display: block;
+transition: .5s ease;
+backface-visibility: hidden;
+border-radius: 10px 10px 10px 10px;
+ float: left;
+ width: 300px;
+ height: 250px;
+ object-fit: cover;
+}
+
+h2 {
+position: absolute;
+margin-left: 320px;
+margin-top: 30px;
+ }
+
+p{
+ margin-top: 80px;
+ margin-left: 50px;
+}
+
+.checked{
+ color: orange;
+}
+
+.star{
+ position: absolute;
+ top: 50%;
+ left: 40%;
+ transform: translate(-50%, -50%);
+ margin-top: 80px;
+}
+.middle {
+transition: .5s ease;
+opacity: 0;
+position: absolute;
+top: 45%;
+left: 10.5%;
+transform: translate(-25%, -25%);
+-ms-transform: translate(-25%, -25%)
+
+}
+
+.container:hover .image {
+opacity: 0.3;
+}
+
+.container:hover .middle {
+opacity: 1;
+}
+
+.text {
+background-color: black;
+color: white;
+font-size: 16px;
+padding: 16px 32px;
+}
diff --git a/static/CSS/Manage_Coworking_Spaces.css b/static/CSS/Manage_Coworking_Spaces.css
index 7388f16..ec63a92 100644
--- a/static/CSS/Manage_Coworking_Spaces.css
+++ b/static/CSS/Manage_Coworking_Spaces.css
@@ -158,86 +158,3 @@ footer #pageFooter
font-size: 15px;
padding: 5px 10px;
}
-div.contain {
-text-align: center;
-}
-
-ul.list {
-display: inline-block;
-list-style-type: none;
-margin: 0;
-}
-.container {
-display: flex;
-position: relative;
-padding: 5px 660px 5px 5px;
-width: 40%;
-height: 50%;
-background-color: white;
-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-margin-bottom: 25px;
-border-radius: 10px;
-margin-left: 20px;
-
-}
-
-
-.image {
-opacity: 1;
-display: block;
-transition: .5s ease;
-backface-visibility: hidden;
-border-radius: 10px 10px 10px 10px;
- float: left;
- width: 300px;
- height: 250px;
- object-fit: cover;
-}
-
-h2 {
-position: absolute;
-margin-left: 320px;
-margin-top: 30px;
- }
-
-p{
- margin-top: 80px;
- margin-left: 50px;
-}
-
-.checked{
- color: orange;
-}
-
-.star{
- position: absolute;
- top: 50%;
- left: 40%;
- transform: translate(-50%, -50%);
- margin-top: 80px;
-}
-.middle {
-transition: .5s ease;
-opacity: 0;
-position: absolute;
-top: 45%;
-left: 10.5%;
-transform: translate(-25%, -25%);
--ms-transform: translate(-25%, -25%)
-
-}
-
-.container:hover .image {
-opacity: 0.3;
-}
-
-.container:hover .middle {
-opacity: 1;
-}
-
-.text {
-background-color: black;
-color: white;
-font-size: 16px;
-padding: 16px 32px;
-}
diff --git a/templates/ListLocations.html b/templates/ListLocations.html
index 3503048..1710c96 100644
--- a/templates/ListLocations.html
+++ b/templates/ListLocations.html
@@ -2,6 +2,7 @@
{%block headblock%}
<title> Locations </title>
+ <link rel="stylesheet" href="/static/CSS/ListLocations.css">
{%endblock%}
{%block headerblock%}
<a id="headerText"
diff --git a/templates/Manage_Coworking_Spaces.html b/templates/Manage_Coworking_Spaces.html
index 3992267..9c3cd6b 100644
--- a/templates/Manage_Coworking_Spaces.html
+++ b/templates/Manage_Coworking_Spaces.html
@@ -2,6 +2,7 @@
{%block headblock%}
<title> Manage Coworking Spaces </title>
+ <link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
{%endblock%}
{%block headerblock%}
diff --git a/templates/base_template.html b/templates/base_template.html
index d71ce27..480dbb7 100644
--- a/templates/base_template.html
+++ b/templates/base_template.html
@@ -2,7 +2,6 @@
<html lang="EN" dir="ltr">
<head>
<meta charSet="UTF-8">
- <link rel="stylesheet" href="/static/CSS/Manage_Coworking_Spaces.css">
{%block headblock%}
{%endblock%}
</head>
--
GitLab