public
/
website
5
0
Fork 0
Code Issues 6 Pull Requests 3 Packages Projects Releases Wiki Activity

new footer

This commit is contained in:
Ksenia Lesko 2025-04-20 17:30:21 -04:00
parent fe027ccba0
commit d342dd07e4
Signed by: xenushka
GPG Key ID: 812A8E51AD475267
2 changed files with 136 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
_includes/footer.html
View File

@ -56,160 +56,4 @@
</div>
</div>
</div>
</footer>
<style>
.footer {
display: flex;
}
.footer-logo img {
float: left;
margin-bottom: 2rem;
width: 450px;
}
.footer-logo img:hover {
filter: brightness(0.8)
}
.footer-divider {
width: 30rem;
}
.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
}
.footer-description {
font-size: 1.3rem;
line-height: 1.5;
text-align: left;
}
.footer-links {
display: flex;
gap: 8rem;
margin-top: 1rem;
padding-right: 2rem;
}
.footer-links div {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-links a {
font-size: 1.3rem;
text-align: left;
transition: opacity 0.2s ease;
}
.footer-links a:hover {
color: var(--purple);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5rem;
font-size: 1rem;
}
.footer-social a {
vertical-align: middle;
}
.footer-social a img {
height: 24px;
margin-left: 0.5rem;
filter: invert(1) grayscale(1) brightness(0.5);
transition: filter 0.2s ease;
width: 22px;
vertical-align: sub;
}
.footer-social a img:hover {
filter: invert(1) grayscale(0) brightness(1);
}
@media (max-width: 1130px) {
footer {
padding: 50px 0px 30px 0px;
}
.footer-divider {
width: 17rem;
}
.footer-description, .footer-links a {
font-size: 1.2rem !important;
}
.footer-links {
gap: 5rem;
padding-right: 0rem;
}
}
@media (max-width: 730) {
footer {
padding: 50px 0px 20px 0px;
}
}
@media (max-width: 500px) {
.footer {
flex-direction: column;
}
footer {
padding: 50px 10px 15px 10px;
}
.footer-logo img {
width: 100%;
padding-right: 2px;
}
.footer-description, .footer-links a {
font-size: 1rem !important;
}
.footer-links {
margin-top: 1.5rem;
gap: 8rem;
}
.footer-links div {
gap: 0.25rem;
}
.footer-links a:hover {
color: var(--pink);
}
.footer-footer {
font-size: 0.75rem;
}
.footer-bottom {
margin-top: 3rem;
}
.footer-social a img {
height: 20px;
margin-left: 0rem;
width: 20px;
}
}
</style>
</footer>

160
_sass/base.scss
View File

@ -160,12 +160,6 @@ a:hover {
border: 1px solid var(--light-purple);
}
.footer-bottom-row {
display: flex;
height: 50px;
justify-content: space-between !important;
}
@mixin capsule {
font-weight: 400;
font-size: 16px;
@ -608,28 +602,83 @@ footer {
font-size: 1rem;
}
.footer-link {
.footer {
display: flex;
flex-direction: row;
}
.footer-link div {
.footer-logo img {
float: left;
margin-bottom: 2rem;
width: 450px;
}
.footer-logo img:hover {
filter: brightness(0.8)
}
.footer-divider {
width: 30rem;
}
.footer-top {
display: flex;
margin-left: 20px;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
}
.footer-link div a {
text-decoration: none;
color: var(--light-grey);
.footer-description {
font-size: 1.3rem;
line-height: 1.5;
text-align: left;
}
.footer-link div a:hover {
color: white;
}
.footer-container {
.footer-links {
display: flex;
justify-content: space-between
gap: 8rem;
margin-top: 1rem;
padding-right: 2rem;
}
.footer-links div {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-links a {
font-size: 1.3rem;
text-align: left;
transition: opacity 0.2s ease;
}
.footer-links a:hover {
color: var(--purple);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5rem;
font-size: 1rem;
}
.footer-social a {
vertical-align: middle;
}
.footer-social a img {
height: 24px;
margin-left: 0.5rem;
filter: invert(1) grayscale(1) brightness(0.5);
transition: filter 0.2s ease;
width: 22px;
vertical-align: sub;
}
.footer-social a img:hover {
filter: invert(1) grayscale(0) brightness(1);
}
@ -1842,6 +1891,23 @@ pre {
.component-links {
max-width: 100%;
}
footer {
padding: 50px 0px 30px 0px;
}
.footer-divider {
width: 17rem;
}
.footer-description, .footer-links a {
font-size: 1.2rem !important;
}
.footer-links {
gap: 5rem;
padding-right: 0rem;
}
}
@media (max-width: 1020px) {
@ -1881,6 +1947,12 @@ pre {
}
}
@media (max-width: 730) {
footer {
padding: 50px 0px 20px 0px;
}
}
@media (max-width: 600px) {
.mini-card {
padding: 20px 20px !important;
@ -1946,16 +2018,54 @@ pre {
padding-left: 10px;
}
.footer-link {
flex-direction: column !important;
//footer//
.footer {
flex-direction: column;
}
.footer-link div {
margin-bottom: 20px;
min-width: 200px;
display: inline;
footer {
padding: 50px 10px 15px 10px;
}
.footer-logo img {
width: 100%;
padding-right: 2px;
}
.footer-description, .footer-links a {
font-size: 1rem !important;
}
.footer-links {
margin-top: 1.5rem;
gap: 8rem;
}
.footer-links div {
gap: 0.25rem;
}
.footer-links a:hover {
color: var(--purple);
}
.footer-footer {
font-size: 0.75rem;
}
.footer-bottom {
margin-top: 3rem;
}
.footer-social a img {
height: 20px;
margin-left: 0rem;
width: 20px;
}
//footer//
.tall-section {
margin: 100px 0px;
}