From 7363937868eb8ea56db475b1ea474fc1cae30a59 Mon Sep 17 00:00:00 2001 From: Gabriel Copat <copatg@cardiff.ac.uk> Date: Thu, 30 Nov 2023 14:09:29 +0000 Subject: [PATCH] Styling Updates --- src/main/resources/static/css/allTrails.css | 29 +++-- .../resources/static/css/templatingstyle.css | 113 +++++++++++++----- .../resources/templates/towns/Templating.html | 21 ++-- 3 files changed, 106 insertions(+), 57 deletions(-) diff --git a/src/main/resources/static/css/allTrails.css b/src/main/resources/static/css/allTrails.css index ab706c5b..79ae4354 100644 --- a/src/main/resources/static/css/allTrails.css +++ b/src/main/resources/static/css/allTrails.css @@ -2,13 +2,22 @@ box-sizing: border-box; } body { - background-color: rgb(41, 41, 41); + /*background-color: rgb(41, 41, 41);*/ + background-color: #40116b; margin: 0; display: flex; flex-direction: column; min-height: 100svh; } main { + background-color: rgba(41, 41, 41, 0.84); + width: 95vw; + border-radius: 2vw; + margin: auto; + margin-top: 2svh; + padding-top: 4svh; + padding-bottom: 4svh; + box-shadow: rgba(0, 0, 0, 0.51) 0 0 30px; } .centerFlex { @@ -47,15 +56,6 @@ main { 0% { opacity: 0; } 100% { opacity: 1; } } -main { - margin: 0; -} - -#trailInfoContainer { - - overflow: scroll; -} - .trailInfoFrag { background-color: rgb(84, 33, 128); border: #000000 solid 2px; @@ -114,7 +114,6 @@ main { line-height: 1.5; width: fit-content; height: fit-content; - overflow: scroll; } } @@ -128,7 +127,7 @@ main { } -header { - box-shadow: #1e1e1e 0 0 10px 10px; - font-size: 1vw; -} +/*header {*/ +/* box-shadow: #1e1e1e 0 0 10px 10px;*/ +/* font-size: 1vw;*/ +/*}*/ diff --git a/src/main/resources/static/css/templatingstyle.css b/src/main/resources/static/css/templatingstyle.css index 1ffc84d4..d5f4e12c 100644 --- a/src/main/resources/static/css/templatingstyle.css +++ b/src/main/resources/static/css/templatingstyle.css @@ -1,39 +1,73 @@ +body { + /*background-color: rgb(41, 41, 41);*/ + background-color: #40116b; + margin: 0; + display: flex; + flex-direction: column; + min-height: 100svh; +} +main { + background-color: rgba(41, 41, 41, 0.84); + width: 95vw; + border-radius: 2vw; + margin: 4svh auto; + padding-top: 4svh; + padding-bottom: 4svh; + box-shadow: rgba(0, 0, 0, 0.51) 0 0 30px; +} + /* Header */ .headerBar { - border-bottom: 2px rgb(230, 230, 230) solid; + /*border-bottom: 2px rgb(230, 230, 230) solid;*/ margin-bottom: 20px; display: flex; - background-color: rgb(84, 33, 128); } /* Navbar Links */ .navBar { + display:flex; + flex-direction: column; margin: 2svh 1vw 2svh auto; text-align: right; + align-content: center; + background-color: rgba(41, 41, 41, 0.5); + box-shadow: rgba(0, 0, 0, 0.51) 0 0 30px; + border-radius: 1vw; + padding:0; + + & select { + margin-left: 5vw; + margin-right: 0.5vw; + } } .work{ color: rgb(255, 255, 255); + margin-left: 5vw; + margin-right: 0.5vw; } .navBar ul { list-style: none; display: flex; - margin-left: 100px; + margin-left: 5vw; + + & li { + background-color: #36454F; + border-radius: 1vw; + padding: 0.5vw; + box-shadow: rgba(0, 0, 0, 0.51) 0 0 5px; + } } .navBar a { - - /*border-left: 2px rgb(185, 185, 185) solid;*/ - /*padding: 10px 40px;*/ padding-left:5px ;padding-right: 5px; text-decoration: none; - /*color:rgb(87, 86, 86);*/ -/*// original color*/ color:white; white-space: nowrap; overflow: hidden; float: right; + } -.navBar a:hover { +.navBar ul li:hover { background-color: rgb(209, 209, 209); } .navBar li{ @@ -51,10 +85,14 @@ margin-left:10px; padding: 20px; width: fit-content; -} -.Logo img { - width: 120px; - margin-left:15px; + + & img { + width: 120px; + margin-left:15px; + box-shadow: rgba(0, 0, 0, 0.51) 0 0 30px; + border-radius: 1vw; + + } } /* Footer */ @@ -62,17 +100,18 @@ footer { margin-top:auto; display: flex; justify-content: center; - background-color: rgb(84, 33, 128); - border-top: 2px rgb(230, 230, 230) solid; + margin: 0 2vw; + /*background-color: rgb(84, 33, 128);*/ + /*border-top: 2px rgb(230, 230, 230) solid;*/ font-size: 1vw; } .footerBar{ - + flex: 1 1; text-align: left; display: flex; - + margin: 0; + padding: 0; color: rgb(255, 255, 255); - padding-left: 30px; } .footerBar ul { list-style: none; @@ -84,21 +123,33 @@ footer { } .containerFooter{ display: flex; - flex-direction: row; -} -.leftFooter{ - flex:1; - color: rgb(255, 255,255); -} -.centerFooter{ - flex: 1; - color: rgb(255, 255,255); -} -.rightFooter{ - flex:1; - color: rgb(255, 255, 255); + flex: 1 1; + width: 80%; + justify-content: space-between; + border-radius: 1vw; + background-color: rgba(58, 58, 0, 0.81); + padding-top: 1svh; + padding-bottom: 1svh; + & ul li{ + flex:1; + color: rgb(255, 255,255); + + } } +/*.leftFooter{*/ +/* flex:1;*/ +/* color: rgb(255, 255,255);*/ +/*}*/ +/*.centerFooter{*/ +/* flex: 1;*/ +/* color: rgb(255, 255,255);*/ +/*}*/ +/*.rightFooter{*/ +/* flex:1;*/ +/* color: rgb(255, 255, 255);*/ +/*}*/ + /*CHANGES*/ .headerBar, .footerBar{ diff --git a/src/main/resources/templates/towns/Templating.html b/src/main/resources/templates/towns/Templating.html index 1313b325..02176bdf 100644 --- a/src/main/resources/templates/towns/Templating.html +++ b/src/main/resources/templates/towns/Templating.html @@ -23,22 +23,22 @@ </header> <div class="footerBar" th:fragment="footer"> - <div class="containerFooter"> - <div class="leftFooter"> + <ul class="containerFooter"> + <li class="leftFooter"> <h3>VZTA</h3> Near Me Now LTD <br>Britania House <br>Caerphilly Business Park <br>Caerphilly <br>CF83 3GG - </div> - <div class="rightFooter"> + </li> + <li class="rightFooter"> <h3>Connect with us</h3> <p>Be the first to know about updates by joining out Community page</p> (C) VZTA 2022<br> Policy Terms and Conditions - </div> - <div class="centerFooter"> + </li> + <li class="centerFooter"> <span class="footerText"> <h3>Follow Us</h3> <a href="https://www.facebook.com/VZTAsmarttowns/" class="icon"><img src="/images/Facebook.png" height="25" width="25" alt="Facebook Logo" class="icon"/></a> @@ -46,11 +46,10 @@ <a href="https://www.instagram.com/vztasmarttowns/" class="icon"><img src="/images/Instagram.jpg" height="25" width="25" alt="Instagram Logo" class="icon"/></a> <a href="https://www.linkin.com/company/vztasmarttowns/" class="icon"><img src="/images/Linkedin.png" height="25" width="25" alt="Linkedin Logo" class="icon"/></a><br> </span> - </div> - <div class="copyright" style="text-align: left"> + </li> + <li class="copyright" style="text-align: left"> - </div> - </div> -</div> + </li> + </ul> </div> <!-->>>>>>> main--> -- GitLab