add notice about data caching

7Cav · Sep 3, 2023 · c4e39ce · c4e39ce
1 parent 63368bc
commit c4e39ce
Show file tree

Hide file tree

Showing 2 changed files with 239 additions and 209 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -1,78 +1,103 @@
-
 .DepartmentContainer {
     margin: auto;
-    min-width: 30%; max-width: 30%;
+    min-width: 30%;
+    max-width: 30%;
 }
 
 @media only screen and (max-width: 1000px) {
-     .DepartmentContainer { min-width: 50%; max-width: 95%;
-    } 
+    .DepartmentContainer {
+        min-width: 50%;
+        max-width: 95%;
+    }
 }
 
 .p-nav-primary {
     position: sticky;
-    top:0;
+    top: 0;
     z-index: 400;
     background-color: #2e2e2e;
     margin-bottom: 1.2em;
 }
-  
-.p-nav{
+
+.p-nav {
     display: block;
     overflow-wrap: break-word;
 }
-  
+
 .p-nav-logo {
     align-self: center;
     box-sizing: border-box;
     display: block;
     max-width: 220px;
     line-height: 21px;
-    padding:3px
+    padding: 3px
 }
-  
+
 .p-nav-inner {
     margin-left: 25%;
 }
-
-.p-nav-scroller{
-  display: flex;
+
+.p-nav-scroller {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
 }
-  
-.p-nav-png{
-    max-width:220px;
-    max-height:37.7167px;
+
+.p-nav-png {
+    max-width: 220px;
+    max-height: 37.7167px;
     flex: 1 1 auto;
 }
-  
-.p-nav-opposite{
+
+.p-nav-opposite {
     text-align: right;
     flex: 1 1 auto;
     margin: 5px
 }
-  
-.p-nav-opposite-link{
-    color:#f1f1f1;
+
+.p-nav-opposite-link {
+    color: #f1f1f1;
     font-weight: bold;
 }
 
 .p-nav-png {
-    width:220px;
-    height:37.7167px;
+    width: 220px;
+    height: 37.7167px;
+}
+
+.p-nav-info p {
+    color: #ff0000;
+    /* Red text */
+    font-size: 14px;
+    margin: 20px;
+}
+
+/* Mobile layout */
+@media (max-width: 768px) {
+    .p-nav-scroller {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        /* Center-align items vertically */
+    }
+
+    .p-nav-info p {
+        margin-left: 0;
+        margin-top: 10px;
+        /* Add some space between the logo and the text */
+    }
 }
 
 .Title {
-    color:#f1f1f1;
+    color: #f1f1f1;
     font-size: x-large;
     font-weight: bold;
     border-width: 1px;
     border-style: solid;
-    border-image: 
-      linear-gradient(
-        to right, 
-        #ebc729, 
-        transparent
-      ) 1 0%;
+    border-image:
+        linear-gradient(to right,
+            #ebc729,
+            transparent) 1 0%;
     border-top: transparent;
 }
 
@@ -84,6 +109,7 @@
         border-right: transparent;
     }
 }
+
 /* This is a very hack-y way to make the borders look proper on mobile browsers. This is because the border image property does not appear to be properly supported with IOS' Safari */
 
 .Subtitle {
@@ -104,7 +130,7 @@
     display: flex;
 }
 
-.Counter{
+.Counter {
     font-size: smaller;
     padding-top: 20px;
     padding-bottom: 15px;
@@ -135,7 +161,7 @@ a {
 a:hover {
     color: #ebc729;
     text-decoration: underline;
-} 
+}
 
 .Collapsible__trigger {
     display: block;
@@ -163,4 +189,4 @@ a:hover {
 
     /* No idea why i have to do this stupidity. For some reason if I dont do this, this shit becomes off centered */
     transform-origin: 67% 67%;
-}
+}