Repository for the Bootcamp 23.1 challenge
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

131 lines
3.1 KiB

@import "../../styles/variables.less";
.ant-layout-footer {
z-index: 3;
width: 100%;
position: relative;
padding: 20px 20px 20px 20px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2),
0 1px 1px 0 rgba(0, 0, 0, .14),
0 2px 1px -1px rgba(0, 0, 0, .12);
background: @footer-background !important;
//color: @footer-color !important;
&__wrapper{
width: 100%;
max-width: @site-max-width;
margin: auto;
color: @primary-color;
}
.logo {
img {
width: 100%;
max-width: 200px;
}
}
@media only screen and (max-width: @header-mobile-width) {
text-align: center;
padding: 20px 0 10px;
> div:last-child {
padding: 0 20px;
}
}
h1 {
font-size: 25px;
padding: 0 10px;
@media only screen and (min-width: @header-desktop-width) {
margin: 0 calc((100% - @header-desktop-width) / 2);
}
@media only screen and (max-width: @header-mobile-width) {
width: 100%;
margin: 0 auto;
font-size: 20px;
}
}
.line {
height: 20px;
opacity: .5;
border: 0;
border-radius: 50%;
border-bottom: 2px solid @primary-color;
width: 100%;
}
.footer {
&__links-bar,
&__copyright {
padding: 0 10px;
display: inline-block;
width: 50%;
font-size: .875em;
a {
color: @footer-color;
text-decoration: underline;
}
@media screen and (min-width: @header-desktop-width) {
width: calc(50% - calc((100% - @header-desktop-width) / 2));
}
@media only screen and (max-width: @header-mobile-width) {
display: block;
width: 100%;
margin: 20px auto !important;
font-size: 12px;
text-align: center;
}
}
&__links-bar {
margin: 20px auto;
@media screen and (min-width: @header-desktop-width) {
margin-left: calc((100% - @header-desktop-width) / 2);
}
}
&__copyright {
color: @footer-color;
text-align: right;
@media screen and (min-width: @header-desktop-width) {
margin-right: calc((100% - @header-desktop-width) / 2);
}
}
&__cellphone {
color: @footer-color;
text-align: left;
@media screen and (min-width: @header-desktop-width) {
margin-right: calc((100% - @header-desktop-width) / 2);
}
}
&__copyright,
&__cellphone {
@media screen and (max-width: @header-mobile-width) {
text-align: center;
}
}
&__address {
padding-top: 10px;
}
&__social-links {
padding-top: 10px;
>a {
margin-right: 10px;
}
}
}
}