@ -18,6 +18,10 @@ $font-lighter-color: #525252;
/** Element Setup **/
/** Element Setup **/
html {
overflow-x : hidden ;
}
html , body {
html , body {
width : 100 % ;
width : 100 % ;
height : 100 % ;
height : 100 % ;
@ -94,18 +98,21 @@ nav {
width : 100 % ;
width : 100 % ;
height : 4 em ;
height : 4 em ;
z-index : 100 ;
z-index : 10 ;
background-color : $neutral1 ;
background-color : $neutral1 ;
box-shadow : 0 0 .25 rem 0 .25 rem rgba ( 0 , 0 , 0 , 0 .5 ) ;
box-shadow : 0 0 .25 rem 0 .25 rem rgba ( 0 , 0 , 0 , 0 .5 ) ;
ul {
ul {
max-width : 70 % ;
width : 98 % ;
margin : 0 auto 0 auto ;
margin : 0 auto 0 auto ;
padding : 0 ;
padding : 0 ;
height : 3 .5 em ;
height : 3 .5 em ;
text-align : right ;
display : flex ;
align-items : center ;
justify-content : space-between ;
overflow-x : auto ;
white-space : nowrap ;
# logo {
# logo {
font-family : $font ;
font-family : $font ;
@ -117,6 +124,10 @@ nav {
float : left ;
float : left ;
}
}
# navItems {
margin-left : 3 em ;
}
li {
li {
width : 10 em ;
width : 10 em ;
height : 100 % ;
height : 100 % ;
@ -215,7 +226,7 @@ nav {
margin : 0 auto 0 auto ;
margin : 0 auto 0 auto ;
text-align : center ;
text-align : center ;
z-index : 10 ;
z-index : 5 ;
animation : slideUp 0 .5 s ;
animation : slideUp 0 .5 s ;
filter : drop-shadow ( 0 .25 em 0 .3 em 0 .4 em rgba ( 0 , 0 , 0 , 0 .8 )) ;
filter : drop-shadow ( 0 .25 em 0 .3 em 0 .4 em rgba ( 0 , 0 , 0 , 0 .8 )) ;
@ -285,6 +296,11 @@ nav {
}
}
# bannerContent > h1 {
padding : 1 em 2 em 0 2 em ;
text-align : center ;
}
# bannerContent {
# bannerContent {
padding-top : 6 em !important ;
padding-top : 6 em !important ;
background-color : rgba ( $blue1 , 0 .1 ) ;
background-color : rgba ( $blue1 , 0 .1 ) ;
@ -295,87 +311,101 @@ nav {
left : 0 ;
left : 0 ;
}
}
h1 {
padding-left : 2 em ;
}
. item {
. item {
width : 100 % ;
width : 100 % ;
height : 20 em ;
min-height : 25 em ;
display : flex ;
padding-top : 5 em ;
padding-bottom : 5 em ;
padding-top : 7 em ;
padding-bottom : 7 em ;
position : relative ;
position : relative ;
flex-direction : row ;
justify-content : space-evenly ;
align-items : center ;
. description {
. itemScroll {
width : 40 % ;
overflow-x : scroll ;
height : 100 % ;
display : flex ;
flex-direction : column ;
justify-content : center ;
text-align : left ;
h2 {
position : relative ;
width : 100 % ;
z-index : 2 ;
margin : 0 ;
}
font-size : 2 em ;
}
p {
. itemScroll . itemInner {
width : 100 % ;
width : 100 % ;
font-size : 1 .2 em ;
min-width : 60 em ;
}
padding : 2 em 0 2 em 0 ;
p : last-child {
position : relative ;
z-index : 50 ;
text-align : right ;
}
a {
margin-right : 1 em ;
padding : 0 .8 em ;
background-color : lighten ( $blue2 , 20 % ) ;
color : $neutral1 ;
border-radius : 13 px ;
transition : background-color ease-in-out 0 .1 s ;
}
a : hover {
display : flex ;
background-color : darken ( lighten ( $blue2 , 20 % ) , 10 % ) ;
flex-direction : row ;
justify-content : space-evenly ;
align-items : center ;
. description {
width : 40 % ;
height : 100 % ;
display : flex ;
flex-direction : column ;
justify-content : center ;
text-align : left ;
white-space : normal ;
h2 {
width : 100 % ;
margin : 0 ;
font-size : 2 em ;
}
p {
width : 100 % ;
font-size : 1 .2 em ;
margin : 0 .5 em 0 0 .5 em 0 ;
}
p : last-child {
text-align : right ;
}
a {
margin-right : 1 em ;
padding : 0 .8 em ;
font-size : 0 .8 em ;
background-color : lighten ( $blue2 , 20 % ) ;
color : $neutral1 ;
border-radius : 13 px ;
transition : background-color ease-in-out 0 .1 s ;
}
a : hover {
background-color : darken ( lighten ( $blue2 , 20 % ) , 10 % ) ;
}
a : active {
background-color : darken ( lighten ( $blue2 , 20 % ) , 15 % ) ;
}
}
}
a : active {
. image {
background-color : darken ( lighten ( $blue2 , 20 % ) , 15 % ) ;
width : 20 em ;
padding-bottom : 20 em ;
position : relative ;
z-index : 20 ;
}
}
}
img {
position : absolute ;
width : 100 % ;
height : 100 % ;
top : 0 ;
bottom : 0 ;
left : 0 ;
right : 0 ;
object-fit : cover ;
border-radius : 50 % ;
border : 5 px solid rgba ( $blue2 , 30 % ) ;
}
. image {
width : 20 em ;
padding-bottom : 20 em ;
position : relative ;
z-index : 20 ;
}
}
img {
position : absolute ;
width : 100 % ;
height : 100 % ;
top : 0 ;
bottom : 0 ;
left : 0 ;
right : 0 ;
object-fit : cover ;
border-radius : 50 % ;
border : 5 px solid rgba ( $blue2 , 30 % ) ;
}
}
}
. item : nth-child ( 2 ) . upAccent {
. item : nth-child ( 2 ) . upAccent {
@ -390,12 +420,8 @@ nav {
padding-bottom : 2 em ;
padding-bottom : 2 em ;
padding-top : 2 em ;
padding-top : 2 em ;
. description {
. itemScroll {
order : 1 ;
direction : rtl ;
}
. image {
order : 0 ;
}
}
}
}
}
}
@ -416,6 +442,11 @@ nav {
padding : 2 em 4 em 4 em 4 em ;
padding : 2 em 4 em 4 em 4 em ;
z-index : 1 ;
z-index : 1 ;
}
}
img {
width : 100 % ;
}
}
}
# afterItems {
# afterItems {
@ -430,6 +461,10 @@ nav {
padding : 0 ;
padding : 0 ;
}
}
img {
width : 100 % ;
}
}
}