290 lines
4.6 KiB
SCSS
290 lines
4.6 KiB
SCSS
|
.footer {
|
||
|
width: 100%;
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
background-color: #262A39;
|
||
|
position: relative;
|
||
|
margin: 0 0 0 0;
|
||
|
}
|
||
|
|
||
|
.footer-inner {
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
justify-content: space-between;
|
||
|
width: 1200px;
|
||
|
padding: 32px 0;
|
||
|
}
|
||
|
|
||
|
.cards--community.cards--community--dark {
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
.cards--community.cards--community--dark .card-inner {
|
||
|
background-color: transparent;
|
||
|
}
|
||
|
|
||
|
.cards--community.cards--community--dark a h4 {
|
||
|
color: $colorWhite;
|
||
|
}
|
||
|
|
||
|
.cards--community.cards--community--dark a p {
|
||
|
color: $colorGray;
|
||
|
opacity: .7;
|
||
|
}
|
||
|
.cards--community.cards--community--dark a:hover h4 {
|
||
|
opacity: 0.8
|
||
|
}
|
||
|
|
||
|
.cards--community--dark .community-icon--join {
|
||
|
background-image: url(../img/icon-join-dark.svg);
|
||
|
}
|
||
|
|
||
|
.cards--community--dark .community-icon--discussion {
|
||
|
background-image: url(../img/icon-discussion-dark.svg);
|
||
|
}
|
||
|
|
||
|
.cards--community--dark .community-icon--contribute {
|
||
|
background-image: url(../img/icon-contribute-dark.svg);
|
||
|
}
|
||
|
|
||
|
.footer-nav {
|
||
|
width: 100%;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
margin: 32px 0 0 0;
|
||
|
padding: 32px 0;
|
||
|
border-top: 1px solid rgba(255, 255, 255, .1)
|
||
|
}
|
||
|
|
||
|
.footer-nav li a {
|
||
|
padding: 0 12px;
|
||
|
color: $colorWhite
|
||
|
}
|
||
|
.footer-nav li a:hover{
|
||
|
opacity: .8
|
||
|
}
|
||
|
|
||
|
.footer-logo-wrap {
|
||
|
width: 317px;
|
||
|
display: flex;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.footer-logo-wrap__inner {
|
||
|
width: 100%;
|
||
|
display: flex;
|
||
|
flex-direction: column;
|
||
|
justify-content: space-between;
|
||
|
align-items: center;
|
||
|
padding: 16px 0 16px 0;
|
||
|
}
|
||
|
|
||
|
a.footer-logo {
|
||
|
display: block;
|
||
|
width: 52px;
|
||
|
height: 52px;
|
||
|
background-size: 52px;
|
||
|
background-image: url(../img/footer-logo.svg);
|
||
|
}
|
||
|
|
||
|
a.footer-logo:hover {
|
||
|
opacity: .8;
|
||
|
}
|
||
|
|
||
|
.footer-address {
|
||
|
padding: 20px 0 0 0;
|
||
|
opacity: .7;
|
||
|
}
|
||
|
|
||
|
.footer-table {
|
||
|
display: flex;
|
||
|
}
|
||
|
|
||
|
.footer-table__column {
|
||
|
box-sizing: border-box;
|
||
|
padding: 32px 74px 64px
|
||
|
}
|
||
|
|
||
|
.footer-header {
|
||
|
color: white;
|
||
|
opacity: .5;
|
||
|
margin: 0 0 40px 0;
|
||
|
}
|
||
|
|
||
|
.footer-link {
|
||
|
height: 32px;
|
||
|
line-height: 32px;
|
||
|
margin: 0 0 15px 0;
|
||
|
}
|
||
|
|
||
|
.footer-link a {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
}
|
||
|
|
||
|
.footer-icon {
|
||
|
display: inline-block;
|
||
|
width: 32px;
|
||
|
height: 32px;
|
||
|
background-color: rgba(255, 255, 255, 0.1);
|
||
|
border-radius: 50%;
|
||
|
margin: 0 15px 0 0;
|
||
|
background-repeat: no-repeat;
|
||
|
background-size: 24px;
|
||
|
background-position: center;
|
||
|
}
|
||
|
|
||
|
.footer-link--fb .footer-icon {
|
||
|
background-image: url(../img/icon_fb.svg);
|
||
|
}
|
||
|
|
||
|
.footer-link--tw .footer-icon {
|
||
|
background-image: url(../img/icon_tw.svg);
|
||
|
}
|
||
|
|
||
|
|
||
|
.footer-link--ri .footer-icon {
|
||
|
background-image: url(../img/icon_ri.svg);
|
||
|
}
|
||
|
|
||
|
.footer-link--gh .footer-icon {
|
||
|
background-image: url(../img/icon_gh.svg);
|
||
|
}
|
||
|
|
||
|
.footer-link--rd .footer-icon {
|
||
|
background-image: url(../img/icon_rd.svg);
|
||
|
}
|
||
|
|
||
|
.footer-link--yt .footer-icon {
|
||
|
background-image: url(../img/icon_yt.svg);
|
||
|
}
|
||
|
|
||
|
.footer-link a {
|
||
|
color: white;
|
||
|
}
|
||
|
|
||
|
.footer-link a:hover {
|
||
|
opacity: .8;
|
||
|
}
|
||
|
|
||
|
.language-switcher {
|
||
|
color: white;
|
||
|
-webkit-appearance: none;
|
||
|
font-size: 16px;
|
||
|
line-height: 32px;
|
||
|
padding: 0 24px 0 0;
|
||
|
background-image: url(../img/new-site/icon_dropdown-white.svg);
|
||
|
background-size: 24px;
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: right center;
|
||
|
}
|
||
|
|
||
|
.language-switcher:focus {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
|
||
|
@media (max-width: 1248px) {
|
||
|
|
||
|
.footer-inner {
|
||
|
width: 100%;
|
||
|
padding: 32px 24px;
|
||
|
}
|
||
|
|
||
|
.footer-logo-wrap {
|
||
|
//width: 200px;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
@media (max-width: 960px) {
|
||
|
|
||
|
.cards--community.cards--community--dark .card-inner {
|
||
|
height: auto;
|
||
|
min-height: 180px;
|
||
|
}
|
||
|
|
||
|
|
||
|
.footer-inner {
|
||
|
width: 820px;
|
||
|
justify-content: space-around;
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
@media (max-width: 800px) {
|
||
|
|
||
|
.cards--community.cards--community--dark {
|
||
|
margin: 0 auto;
|
||
|
max-width: 375px;
|
||
|
}
|
||
|
|
||
|
.cards--community.cards--community--dark .card-inner {
|
||
|
padding: 0 12px;
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
@media (max-width: 767px) {
|
||
|
|
||
|
.footer {
|
||
|
border-top: 0px;
|
||
|
}
|
||
|
|
||
|
.footer-inner {
|
||
|
padding: 40px 0 0 0;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
|
||
|
.footer-header {
|
||
|
margin: 0 0 16px 0;
|
||
|
}
|
||
|
|
||
|
.footer-table {
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
.footer-table__column {
|
||
|
text-align: center;
|
||
|
padding: 16px 16px;
|
||
|
}
|
||
|
|
||
|
.footer-nav {
|
||
|
margin: 0 0 0 0;
|
||
|
}
|
||
|
|
||
|
.footer-link {
|
||
|
text-align: center;
|
||
|
height: 24px;
|
||
|
line-height: 24px;
|
||
|
margin: 0 0 16px 0;
|
||
|
}
|
||
|
|
||
|
.footer-link a {
|
||
|
justify-content: center;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
.footer-icon {
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
.footer-logo-wrap {
|
||
|
width: auto;
|
||
|
order: 2
|
||
|
}
|
||
|
|
||
|
.footer-logo-wrap__inner {
|
||
|
width: 100%;
|
||
|
padding: 32px 0 40px 0;
|
||
|
align-items: center;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
}
|