Merge branch 'main' into separateNonFeaturedArticlesOnQuadrantView

# Conflicts:
#	.lintstagedrc
#	dist_scripts/src/model.js
#	src/animation.ts
#	src/components/Item/Item.tsx
#	src/components/ItemList/ItemList.tsx
#	src/components/PageItem/PageItem.tsx
#	src/index.scss
#	src/model.js
#	src/model.ts

src/styles/components/content.scss

@@ -1,15 +1,13 @@
 .fullpage-content {
+  font-size: 16px;
+  color: var(--color-white);
 
-    font-size: 16px;
+  & p,
+  & ul {
+    font-weight: lighter;
+  }
+
+  & a {
     color: var(--color-white);
-
-    & p,
-    & ul {
-        font-weight: lighter
-    }
-
-    & a {
-        color: var(--color-white);
-    }
-
-}
+  }
+}

src/styles/components/filter.scss

@@ -1,4 +1,4 @@
-@import '../../styles/sccs-vars.scss';
+@import "../../styles/sccs-vars.scss";
 
 .filter {
   margin-bottom: 40px;
@@ -7,4 +7,4 @@
   @media (max-width: $until-sm) {
     display: none;
   }
-}
+}

src/styles/components/footnote.scss

@@ -1,4 +1,4 @@
 .footnote {
   font-size: 12px;
   color: var(--color-gray-normal);
-}
+}

src/styles/components/hljs.scss

@@ -1,2 +1,61 @@
 /* copied from here: http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/darcula.min.css*/
-.hljs{display:block;overflow-x:auto;padding:0.5em;background:#2b2b2b}.hljs{color:#bababa}.hljs-strong,.hljs-emphasis{color:#a8a8a2}.hljs-bullet,.hljs-quote,.hljs-link,.hljs-number,.hljs-regexp,.hljs-literal{color:#6896ba}.hljs-code,.hljs-selector-class{color:#a6e22e}.hljs-emphasis{font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-attribute,.hljs-name,.hljs-variable{color:#cb7832}.hljs-params{color:#b9b9b9}.hljs-string{color:#6a8759}.hljs-subst,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-symbol,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-template-tag,.hljs-template-variable,.hljs-addition{color:#e0c46c}.hljs-comment,.hljs-deletion,.hljs-meta{color:#7f7f7f}
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #2b2b2b;
+}
+.hljs {
+  color: #bababa;
+}
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+.hljs-bullet,
+.hljs-quote,
+.hljs-link,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal {
+  color: #6896ba;
+}
+.hljs-code,
+.hljs-selector-class {
+  color: #a6e22e;
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-attribute,
+.hljs-name,
+.hljs-variable {
+  color: #cb7832;
+}
+.hljs-params {
+  color: #b9b9b9;
+}
+.hljs-string {
+  color: #6a8759;
+}
+.hljs-subst,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-symbol,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: #e0c46c;
+}
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+  color: #7f7f7f;
+}

src/styles/components/icon-link.scss

@@ -25,7 +25,7 @@
 
   &:hover {
     &:after {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       bottom: -8px;
@@ -33,4 +33,4 @@
       border-bottom: 2px solid var(--color-gray-normal);
     }
   }
-}
+}

src/styles/components/icon.scss

@@ -8,26 +8,26 @@
   vertical-align: middle;
 
   &--pie {
-    background-image: url('../../icons/pie.svg');
+    background-image: url("../../icons/pie.svg");
   }
 
   &--question {
-    background-image: url('../../icons/question.svg');
+    background-image: url("../../icons/question.svg");
   }
 
   &--overview {
-    background-image: url('../../icons/overview.svg');
+    background-image: url("../../icons/overview.svg");
   }
 
   &--search {
-    background-image: url('../../icons/search.svg');
+    background-image: url("../../icons/search.svg");
   }
 
   &--back {
-    background-image: url('../../icons/back.svg');
+    background-image: url("../../icons/back.svg");
   }
 
   &--close {
-    background-image: url('../../icons/close.svg');
+    background-image: url("../../icons/close.svg");
   }
-}
+}

src/styles/components/letter-index.scss

@@ -1,4 +1,4 @@
-@import '../../styles/sccs-vars.scss';
+@import "../../styles/sccs-vars.scss";
 
 .letter-index {
   margin-bottom: 60px;
@@ -26,4 +26,4 @@
       left: 0;
     }
   }
-}
+}

src/styles/components/nav.scss

@@ -1,4 +1,4 @@
-@import '../../styles/sccs-vars.scss';
+@import "../../styles/sccs-vars.scss";
 
 .nav {
   white-space: nowrap;
@@ -7,7 +7,7 @@
     display: inline-flex;
     position: relative;
 
-    &+.nav__item {
+    & + .nav__item {
       margin-left: 20px;
     }
   }
@@ -21,10 +21,8 @@
     width: 0;
     margin-top: -25px;
     opacity: 0.8;
-    transition:
-      width 400ms cubic-bezier(0.24, 1.12, 0.71, 0.98) 100ms,
-      visibility 0s linear 500ms,
-      opacity 200ms linear;
+    transition: width 400ms cubic-bezier(0.24, 1.12, 0.71, 0.98) 100ms,
+      visibility 0s linear 500ms, opacity 200ms linear;
 
     &.is-open {
       opacity: 1;
@@ -42,4 +40,4 @@
       }
     }
   }
-}
+}

src/styles/components/page.scss

@@ -1,4 +1,4 @@
-@import '../../styles/sccs-vars.scss';
+@import "../../styles/sccs-vars.scss";
 
 .page {
   max-width: 1200px;
@@ -16,7 +16,7 @@
     z-index: 100;
 
     @media (max-width: $until-sm) {
-      margin: 0
+      margin: 0;
     }
 
     @media (max-width: $until-lg) {
@@ -34,4 +34,4 @@
     margin-top: 5px;
     flex: 0 0 auto;
   }
-}
+}

src/styles/components/publish-date.scss

@@ -1,4 +1,4 @@
-@import '../../styles/sccs-vars.scss';
+@import "../../styles/sccs-vars.scss";
 
 .publish-date {
   color: var(--color-gray-normal);
@@ -7,4 +7,4 @@
   @media (max-width: $until-sm) {
     text-align: center;
   }
-}
+}

src/styles/components/social-icon.scss

@@ -1,8 +1,7 @@
-
 .social-icon {
   font-weight: normal;
   font-style: normal;
-  font-size: 16px;  /* Preferred icon size */
+  font-size: 16px; /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;
@@ -24,6 +23,5 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* Support for IE. */
-  font-feature-settings: 'liga';
-
-}
+  font-feature-settings: "liga";
+}

src/styles/components/split.scss

@@ -1,4 +1,4 @@
-@import '../../styles/sccs-vars.scss';
+@import "../../styles/sccs-vars.scss";
 
 .split {
   display: flex;
@@ -24,4 +24,4 @@
   @media (max-width: $until-sm) {
     display: block;
   }
-}
+}

src/styles/main.scss

@@ -13,4 +13,4 @@
 @import "./components/publish-date";
 @import "./components/ring-list";
 @import "./components/social-icon";
-@import "./components/split";
+@import "./components/split";

src/styles/sccs-vars.scss

@@ -1,4 +1,4 @@
 $until-sm: 30em;
 $until-md: 48em;
 $until-lg: 61.875em;
-$until-xl: 75em;
+$until-xl: 75em;