dotfiles

  1@import "variables";
  2
  3.footer {
  4  flex-direction: column;
  5  flex-grow: 0;
  6  opacity: 0.5;
  7  padding: 20px 0 10px 0;
  8
  9  &__inner {
 10    align-items: center;
 11    display: flex;
 12    justify-content: center;
 13    margin-top: 20px;
 14    width: 100%;
 15  }
 16
 17  .copyright {
 18    align-items: center;
 19    color: var(--accent-alpha-70);
 20    display: flex;
 21    flex-direction: column;
 22    font-size: 1rem;
 23    text-align: center;
 24  }
 25
 26  .socials-bar {
 27    display: flex;
 28    flex-direction: row;
 29    justify-content: center;
 30    margin: 5px;
 31
 32    a {
 33      background: unset;
 34    }
 35
 36    img {
 37      filter: var(--image-filter);
 38      margin: 5px;
 39      -webkit-filter: var(--image-filter);
 40      transition: all 0.2s ease;
 41
 42      &:hover {
 43        transform: scale(1.1);
 44      }
 45    }
 46  }
 47
 48  .theme {
 49    &-container {
 50      display: flex;
 51      justify-content: center;
 52    }
 53
 54    &_before {
 55      transition: flex 0.5s;
 56      flex-grow: 0;
 57      @media (max-width: $tablet-max-width) {
 58        flex-grow: 1;
 59      }
 60    }
 61
 62    &-content {
 63      display: flex;
 64      align-items: center;
 65    }
 66
 67    &_after {
 68      flex-grow: 1;
 69    }
 70  }
 71
 72  #theme-select {
 73    background-color: var(--background);
 74    border: 2px solid var(--accent-secondary-alpha-70);
 75    color: var(--color);
 76    cursor: pointer;
 77    font-size: 0.95rem;
 78    text-align: center;
 79    margin: 5px;
 80    transition: background-color 0.2s ease-in;
 81
 82    &:hover {
 83      background-color: var(--accent-alpha-20);
 84    }
 85
 86    &:active {
 87      background-color: var(--accent-alpha-70);
 88    }
 89  }
 90
 91  .webring {
 92    font-size: 0.8rem;
 93    text-align: center;
 94    margin: 5px;
 95
 96    a {
 97      text-decoration: none;
 98    }
 99  }
100}
101
102a.backlink {
103  margin-left: 10px;
104  font-size: 1.3rem;
105}
106
107.footnote {
108  &-definition {
109    color: var(--accent);
110    margin-right: 10px;
111
112    p {
113      display: inline;
114      color: rgba(255, 255, 255, 0.7);
115
116      &:first-of-type {
117        margin-inline-start: 1ch;
118      }
119    }
120
121    &-label {
122      font-style: italic;
123      font-weight: bold;
124      margin-left: 3px;
125    }
126  }
127}