Skip to content
Snippets Groups Projects
Commit a4d27051 authored by Gabriel Copat's avatar Gabriel Copat
Browse files

Styling Updates

parent 73639378
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/css/allTrails.css
+ 64
− 76
View file @ a4d27051
......@@ -2,51 +2,39 @@
box-sizing: border-box;
}
body {
/*background-color: rgb(41, 41, 41);*/
background-color: #40116b;
background-color: rgb(41, 41, 41);
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 {
display: flex;
justify-content: center;
}
#allTrailsBar {
width: 100%;
height: auto;
/*margin: 1svh auto;*/
padding: 0 5svh;
padding:0;
max-width: 80%;
height: 11svh;
margin: 1svh auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
justify-content: space-between;
/*border-bottom: solid grey 2px;*/
/*border-top: solid grey 4px;*/
}
.trailsImages {
margin: 1svh auto;
height: 12svh;
width: auto;
margin: auto;
height: 10svh;
width: 10svh;
border-radius: 20px;
border: solid grey 2px;
transition: 0.5s ease-out 100ms;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.85);
}
}
.trailsImages:hover {
box-shadow: 0 0 20px 10px #bbbb00;
transform: scale(1.2,1.2);
!important; overflow: visible;
}
.selected {
......@@ -56,78 +44,78 @@ main {
0% { opacity: 0; }
100% { opacity: 1; }
}
main {
margin: 0;
}
#trailInfoContainer {
margin: auto;
width: 95svw;
min-height: 40svh;
min-width: 30svw;
}
.trailInfoFrag {
background-color: rgb(84, 33, 128);
border: #000000 solid 2px;
border-radius: 10px;
box-shadow: 0 5px 20px 0 #000000;
margin: 2svh auto;
padding-bottom: 2svw;
width: 70vw;
height: auto;
min-height: 30svh;
margin:0;
padding:0;
animation: fadeIn 3s;
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 30svh;
display: grid;
grid-template-areas:
"header header header"
"image text text";
grid-template-columns: 30% 30% auto;
grid-template-rows: 10% auto;
grid-column-gap: 2vw;
grid-row-gap: 2svh;
& .trailInfoHeader {
& h1 {
color: white;
grid-area: header;
width: 100%;
height: 100%;
margin-top: 1svh;
padding: 0;
& h1 {
color: white;
padding:0;
margin:0 25%;
font-size: 2vw;
text-align: center;
box-shadow: 0 10px 10px -10px black;
}
margin: 10px 25%;
font-size: xx-large;
text-align: center;
border-bottom: #1e1e1e solid 2px;
}
}
#trailFragContent {
margin: 0;
padding: 0;
display: flex;
overflow: hidden;
min-height: 40svh;
max-height: 60svh;
& img {
grid-area: image;
border-radius: 10px;
border: black solid 1px;
margin-left: 2vw;
margin-right: 2vw;
width: 100%;
height: auto;
box-shadow: 0 10px 20px -10px black;
margin: 1%;
flex: 1 1;
min-width: 20%;
max-width: 40%;
min-height: 20svh;
max-height: 90%;
overflow: hidden;
}
& p {
grid-area: text;
color: white;
margin: 0;
padding: 0 2vw;
font-size: 1.3vw;
flex: 1 1;
padding: 5%;
width: 60%;
border-left: solid darkgrey 2px;
font-size: x-large;
text-align: justify;
text-justify: inter-character;
line-height: 1.5;
width: fit-content;
height: fit-content;
}
}
#trailFragContent {
margin: 0;
padding: 0;
display: flex;
min-height: 40svh;
flex-wrap: wrap;
header {
box-shadow: #1e1e1e 0 0 10px 10px;
}
/*header {*/
/* box-shadow: #1e1e1e 0 0 10px 10px;*/
/* font-size: 1vw;*/
/*}*/
footer {
position: relative;
bottom: 0;
}
\ No newline at end of file
src/main/resources/static/css/templatingstyle.css
+ 33
− 85
View file @ a4d27051
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: blueviolet;
}
/* Navbar Links */
.navBar {
display:flex;
flex-direction: column;
margin: 2svh 1vw 2svh auto;
margin-top: 50px;
margin-left: auto;
margin-right:20px;
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: 5vw;
& li {
background-color: #36454F;
border-radius: 1vw;
padding: 0.5vw;
box-shadow: rgba(0, 0, 0, 0.51) 0 0 5px;
}
margin-left: 100px;
}
.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 ul li:hover {
.navBar a:hover {
background-color: rgb(209, 209, 209);
}
.navBar li{
......@@ -85,33 +53,25 @@ main {
margin-left:10px;
padding: 20px;
width: fit-content;
& img {
width: 120px;
margin-left:15px;
box-shadow: rgba(0, 0, 0, 0.51) 0 0 30px;
border-radius: 1vw;
}
}
.Logo img {
width: 120px;
margin-left:15px;
}
/* Footer */
footer {
margin-top:auto;
margin-top:20px;
display: flex;
justify-content: center;
margin: 0 2vw;
/*background-color: rgb(84, 33, 128);*/
/*border-top: 2px rgb(230, 230, 230) solid;*/
font-size: 1vw;
}
.footerBar{
flex: 1 1;
border-top: 2px rgb(230, 230, 230) solid;
text-align: left;
display: flex;
margin: 0;
padding: 0;
background: blueviolet;
color: rgb(255, 255, 255);
padding-left: 30px;
}
.footerBar ul {
list-style: none;
......@@ -123,32 +83,20 @@ footer {
}
.containerFooter{
display: flex;
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);
}
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);
}
/*.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*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment