restruct: updated sass version and rules

src/styles/_journal-section.scss

@@ -0,0 +1,80 @@
+@use 'responsive';
+@use 'animations';
+
+.journal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+  text-align: left;
+  margin-bottom: 0.5em;
+}
+
+.list_wrapper {
+  overflow-y: auto;
+  height: calc(100vh - 12.5em);
+  min-height: 650px;
+  margin-top: 0.5em;
+  position: relative;
+
+  padding-right: 0.2em;
+}
+
+.journal_wrapper {
+  max-width: var(--max-container-width);
+  width: 100%;
+
+  margin: 0 auto;
+
+  padding: 1em 0;
+}
+
+.journal_refreshed-date {
+  background-color: #333;
+  color: #ddd;
+  text-align: end;
+
+  padding: 0.25em;
+  margin-top: 0.5em;
+}
+
+.journal_warning {
+  text-align: center;
+  font-size: 1.3em;
+
+  &.error {
+    background-color: var(--clr-error);
+  }
+}
+
+.journal_item,
+.journal_warning {
+  background-color: #1a1a1a;
+  padding: 1em;
+}
+
+.journal_top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5em;
+  position: relative;
+}
+
+.btn--load-data {
+  padding: 0.5em 1em;
+  display: flex;
+  margin: 0 auto;
+
+  font-size: 1.2em;
+}
+
+@include responsive.smallScreen{
+  .journal_top-bar {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .journal_refreshed-date {
+    text-align: center;
+  }
+}