.site--footer { font-size: 14px; padding: 20px 80px; border-top: 1px dotted var(--farallon-border-color); color: var(--farallon-text-light); &__content { display: flex; align-items: center; } &__info { display: none; text-align: center; color: var(--farallon-text-light); a { text-decoration: underline; &:hover { color: var(--farallon-hover-color); } } &.active { display: block; } } .copyright { margin-left: auto; display: flex; align-items: center; svg { fill: var(--farallon-text-light); margin-left: 8px; cursor: pointer; &:hover { fill: var(--farallon-hover-color); } } // &::after { // content: 'a bigfa theme'; // margin-left: 3px; // } } nav { ul { display: flex; align-items: center; li { margin-right: 10px; a { &:hover { text-decoration: underline; } } } } } } @media (max-width: 768px) { .site--footer__content { flex-direction: column; justify-content: center; align-items: center; padding-right: 3.5%; padding-left: 3.5%; .copyright { margin-left: 0; } nav { margin-bottom: 10px; } } } .fixed--theme { position: fixed; right: 10px; top: 40%; display: flex; flex-direction: column; height: max-content; box-shadow: 0 0 0 1px var(--farallon-border-color); background-color: var(--farallon-background-white); border-radius: 999rem; width: max-content; padding: 3px; span { width: 32px; height: 32px; cursor: pointer; border-radius: 100%; display: flex; align-items: center; justify-content: center; svg { //fill: rgba(0, 0, 0, 0.67); } color: var(--farallon-text-gray-lightest); &:hover { color: var(--farallon-text-color); svg { // fill: rgba(0, 0, 0, 0.87); } } &.is-active { color: var(--farallon-text-color); background-color: var(--farallon-background-gray); } margin-bottom: 5px; &:last-child { margin-bottom: 0; } } } @keyframes toTop { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } .backToTop { .svgIcon { width: 17px; height: 17px; fill: var(--farallon-main-color); animation: toTop 1s ease-in infinite alternate; } &:hover { .svgIcon { fill: var(--farallon-hover-color); animation-play-state: paused; } } position: fixed; bottom: 25px; right: -25px; cursor: pointer; &.is-active { right: 25px; } background-color: var(--border-color); z-index: 10; transition: all 0.3s ease; }