theme refactoring; footer style refactoring

src/components/Footer/index.tsx

@@ -9,7 +9,7 @@ export interface IFooterProps {
 }
 
 export const Footer: React.FC<IFooterProps> = props => (
-    <footer>
+    <footer className={'opposite'}>
         <Block direction={'vertical'} style={{
             marginBottom: 'var(--single-margin)',
         }}>

src/style.css

@@ -30,9 +30,6 @@
 
     --embed-video-ratio: 56.25%;
 
-    --text-color: #303030;
-    --text-color-second: #ccc;
-
     /* FONTS */
     --font-size-default: 14pt;
     --font-size-second: 0.9rem;
@@ -61,6 +58,14 @@
 
     --schedule-row-color: hsl(210, 55%, 90%);
 
+    /* TEXT COLOR */
+    --color-text: #303030;
+    --color-text-second: #ccc;
+    --color-text-opposite: var(--light-color);
+
+    --color-back-main: white;
+    --color-back-opposite: var(--darker-color);
+
     /* MARGINS */
     --small-margin: 0.2em;
     --half-margin: 0.5em;
@@ -85,11 +90,14 @@ body {
 body {
     min-width: 320px;
 
-    color: var(--text-color);
+    color: var(--color-text);
 }
 
 footer {
     padding: var(--single-margin);
+    color: var(--color-text-opposite);
+    background-color: var(--color-back-opposite);
+    font-size: var(--smaller-font-size);
 }
 
 h1 {
@@ -114,6 +122,38 @@ h3 {
     hyphens: none;
 }
 
+h1,
+h2 {
+    font-family: var(--title-font);
+}
+
+a {
+    color: var(--dark-color);
+
+    text-decoration: none;
+    border-bottom: 1px solid var(--link-color);
+}
+
+a:hover {
+    border-bottom: 2px solid var(--dark-color);
+}
+
+a:active {
+    border-width: 2px;
+}
+
+a:visited {
+    color: #a4059c;
+}
+
+a.invisible {
+    border-bottom: none;
+}
+
+.opposite a {
+    color: var(--color-text-opposite);
+}
+
 .actor {
     border-bottom: 1px dashed black;
 }

src/style/themes/theme-default.scss

@@ -1,74 +1,25 @@
-.theme-default {
-  h1, h2{
-    font-family: var(--title-font);
-  }
-
-  a {
-    color: var(--dark-color);
-
-    text-decoration: none;
-    border-bottom: 1px solid var(--link-color);
-
-    &:hover {
-      border-bottom: 2px solid var(--dark-color);
-    }
-
-    &:active {
-      border-width: 2px;
-    }
-
-    &.invisible {
-      border-bottom: none;
-    }
-
-    &:visited {
-      color: #a4059c;
-    }
-  }
-
-  .accessibility-control {
-    display: none;
-  }
-
-  .schedule-table {
-    a{
-      color: var(--dark-color);
+.schedule-table {
+    a {
+        color: var(--dark-color);
     }
 
     .lesson {
-      font-size: 1.1em;
+        font-size: 1.1em;
     }
 
     .current {
-      border-color: var(--current-week-day-color);
+        border-color: var(--current-week-day-color);
     }
 
-    &__head{
-      .group {
-        color: #666;
-      }
+    &__head {
+        .group {
+            color: #666;
+        }
     }
 
-    &__body-row{
-      &:nth-child(even) {
-        background-color: var(--schedule-row-color);
-      }
+    &__body-row {
+        &:nth-child(even) {
+            background-color: var(--schedule-row-color);
+        }
     }
-  }
-
-  footer {
-    color: var(--light-color);
-    background-color: var(--darker-color);
-
-    font-size: var(--smaller-font-size);
-
-    a {
-      color: var(--light-color);
-      border-bottom-color: var(--light-color);
-
-      &:hover {
-        border-bottom-color: var(--light-color);
-      }
-    }
-  }
 }