Tim/timstallard.me.uk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Changed contact page styles

Browse Source
This commit is contained in:
Tim Stallard 2016-04-08 20:35:37 +01:00
parent 9284695fd3
commit f78d7edd70
1 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/documents/styles.css.scss
View File

@ -289,12 +289,31 @@ body{
} }
#content[data-slug="contact"]{ #content[data-slug="contact"]{
font-size: 1.2em;
>div{ //page container >div{ //page container
flex-grow: 1; flex-grow: 1;
margin-left: 10px;
margin-right: 10px;
display: flex; display: flex;
>div{ //contact panels >div{ //contact panels
text-align: center; text-align: center;
display: flex; display: flex;
&:nth-child(1){
@at-root .animations#{&}{
animation-delay: 0ms;
}
}
&:nth-child(2){
@at-root .animations#{&}{
animation-delay: 200ms;
}
}
&:nth-child(3){
@at-root .animations#{&}{
animation-delay: 400ms;
}
}
>div{ //centered sections >div{ //centered sections
margin: auto; margin: auto;
>.icon{ >.icon{
@ -325,57 +344,46 @@ body{
} }
} }
} }
@media(min-width: 800px){ @media(min-width: 800px) and (max-height: 120vw){
>div{ //page container >div{ //page container
flex-direction: row; flex-direction: row;
>div{ //contact panels >div{ //contact panels
width: 33%; width: 33%;
flex-grow: 1; flex-grow: 1;
padding-left: 15px;
padding-right: 15px;
text-align: center; text-align: center;
display: flex; display: flex;
&:nth-child(1n+2){ &:nth-child(1n+2){
border-left: solid 2px white; border-left: solid 2px white;
} }
.icon{
font-size: 12vw;
}
@at-root .animations#{&}{ @at-root .animations#{&}{
animation-name: slideInUp; animation-name: slideInUp;
} }
&:nth-child(1){ .icon{
@at-root .animations#{&}{ font-size: 12vw;
animation-delay: 0ms; @media(min-width: 1800px){
} font-size: 216px;
}
&:nth-child(2){
@at-root .animations#{&}{
animation-delay: 200ms;
}
}
&:nth-child(3){
@at-root .animations#{&}{
animation-delay: 400ms;
} }
} }
} }
} }
} }
@media(max-width: 799px){ @media(max-width: 799px), (min-height: 120vw){
>div{ >div{
flex-direction: column; flex-direction: column;
@at-root .animations#{&}{
animation-name: fadeInUp;
}
>div{ >div{
border-bottom: 2px solid white; border-bottom: 2px solid white;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
@at-root .animations#{&}{
animation-name: fadeInUp;
}
&:last-child{ &:last-child{
border-bottom: none; border-bottom: none;
} }
>.icon{ .icon{
font-size: 15vw; font-size: 20vw;
} }
} }
} }