refactor css

src/views/home/boards-list/boards-list.module.css

@@ -0,0 +1,104 @@
+
+.boardsBox {
+  overflow: hidden;
+  min-height: 150px;
+}
+
+.boardsBox table {
+  display: table;
+  margin-bottom: 10px;
+  overflow: hidden;
+  table-layout: fixed;
+  width: calc(100% + 4px);
+  margin-left: -2px;
+  border-collapse: separate;
+  border-spacing: 2px 0;
+}
+
+.boardsBox table thead th {
+  background: #fca;
+  color: #800;
+  border: 1px solid #800;
+  padding: 4px 15px 5px 5px;
+  text-align: left;
+  white-space: nowrap;
+  text-transform: capitalize;
+}
+
+.boardsBox table tbody td {
+  margin: 0;
+  padding: 4px 15px 4px 4px;
+  text-align: left;
+}
+
+.boardsBox table tbody tr:nth-of-type( even ) {
+  background: #ede2d4;
+}
+
+.boardCell {
+  position: static;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.offlineIconContainer {
+  float: right;
+}
+
+.offlineIcon {
+  vertical-align: text-top;
+  width: 13px;
+  height: 13px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  image-rendering: pixelated;
+  display: inline-block;
+  position: relative;
+}
+
+.boardCell a {
+  color: inherit;
+}
+
+.loadingBoardCellValue {
+  color: var(--topbar-separator-color);
+}
+
+.loadMoreButton {
+  text-align: center;
+  margin-bottom: 14px;
+  color: var(--topbar-separator-color);
+}
+
+.displayCount {
+  font-size: 12px;
+  text-align: center;
+  margin-bottom: 10px;
+  text-transform: lowercase;
+}
+
+.loadMoreButton span {
+  color: var(--topbar-desktop-link-text-color);
+  text-transform: capitalize;
+}
+
+.loadMoreButton span:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+  text-decoration: underline;
+}
+
+.nsfw {
+  color: red;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: smaller;
+}
+
+.boardPPH {
+  width: 33px;
+}

src/views/home/home.module.css

@@ -29,11 +29,6 @@
   border: 1px solid black;
 }
 
-.boardsBox {
-  overflow: hidden;
-  min-height: 150px;
-}
-
 .loading {
   display: flex;
   justify-content: center;
@@ -41,90 +36,6 @@
   margin-top: 10px;
 }
 
-.offlineIcon {
-  vertical-align: text-top;
-  width: 13px;
-  height: 13px;
-  background-repeat: no-repeat;
-  background-size: contain;
-  image-rendering: pixelated;
-  display: inline-block;
-  position: relative;
-}
-
-.boardsBox table {
-  display: table;
-  margin-bottom: 10px;
-  overflow: hidden;
-  table-layout: fixed;
-  width: calc(100% + 4px);
-  margin-left: -2px;
-  border-collapse: separate;
-  border-spacing: 2px 0;
-}
-
-.boardsBox table thead th {
-  background: #fca;
-  color: #800;
-  border: 1px solid #800;
-  padding: 4px 15px 5px 5px;
-  text-align: left;
-  white-space: nowrap;
-  text-transform: capitalize;
-}
-
-.boardsBox table tbody td {
-  margin: 0;
-  padding: 4px 15px 4px 4px;
-  text-align: left;
-}
-
-.boardsBox table tbody tr:nth-of-type( even ) {
-  background: #ede2d4;
-}
-
-.boardCell {
-  position: static;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.offlineIconContainer {
-  float: right;
-}
-
-.boardCell a {
-  color: inherit;
-}
-
-.loadMoreButton {
-  text-align: center;
-  margin-bottom: 14px;
-  color: var(--topbar-separator-color);
-}
-
-.displayCount {
-  font-size: 12px;
-  text-align: center;
-  margin-bottom: 10px;
-  text-transform: lowercase;
-}
-
-.loadMoreButton span {
-  color: var(--topbar-desktop-link-text-color);
-  text-transform: capitalize;
-}
-
-.loadMoreButton span:hover {
-  cursor: pointer;
-  color: var(--button-desktop-text-color-hover);
-  text-decoration: underline;
-}
-
 .boxBar, .infoboxBar {
   padding-left: 0.5em;
   line-height: 2em;
@@ -249,13 +160,6 @@
   content: '✔ ';
 }
 
-.nsfw {
-  color: red;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: smaller;
-}
-
 .footer a {
   text-transform: capitalize;
 }
@@ -342,10 +246,6 @@
   text-transform: capitalize;
 }
 
-.boardPPH {
-  width: 33px;
-}
-
 @media (max-width: 640px) {
   .content {
     min-width: 0;