2 files changed, 41 insertions, 32 deletions

diff --git a/static/client.js b/static/client.js
index 549fde29..83c82a29 100644
--- a/static/client.js
+++ b/static/client.js
@@ -167,8 +167,8 @@ fetch(rebase('data.json')).then(data => data.json()).then(data => {
     artistData = data.artistData;
     flashData = data.flashData;
 
-    officialAlbumData = albumData.filter(album => !album.isFanon);
-    fandomAlbumData = albumData.filter(album => album.isFanon);
+    officialAlbumData = albumData.filter(album => album.groups.includes('group:official'));
+    fandomAlbumData = albumData.filter(album => !album.groups.includes('group:official'));
     artistNames = artistData.filter(artist => !artist.alias).map(artist => artist.name);
 
     for (const element of elements1) element.style.display = 'none';
diff --git a/static/site.css b/static/site.css
index 90f8ed3e..e76054ab 100644
--- a/static/site.css
+++ b/static/site.css
@@ -31,7 +31,7 @@ body::before {
     height: 100%;
     z-index: -1;
 
-    background-image: url("https://www.homestuck.com/images/desktops/johnhouse_1920x1080.jpg");
+    background-image: url("bg.jpg");
     background-position: center;
     background-size: cover;
     opacity: 0.5;
@@ -41,7 +41,7 @@ body::before {
     background-color: var(--bg-color);
     color: rgb(var(--fg-shade), var(--fg-shade), var(--fg-shade));
 
-    max-width: 1200px;
+    max-width: 1100px;
     margin: 10px auto 50px;
     padding: 15px;
 
@@ -120,8 +120,12 @@ a:hover {
 }
 
 #header .chronology {
-    display: inline;
-    white-space: nowrap;
+    display: inline-block;
+}
+
+#header .chronology .heading,
+#header .chronology .buttons {
+    display: inline-block;
 }
 
 .nowrap {
@@ -166,32 +170,6 @@ a:hover {
     font-size: 1em;
 }
 
-@media (max-width: 780px) {
-    .sidebar:not(.no-hide) {
-        display: none;
-    }
-
-    .layout-columns.vertical-when-thin {
-        flex-direction: column;
-    }
-
-    .layout-columns.vertical-when-thin > *:not(:last-child) {
-        margin-bottom: 10px;
-    }
-
-    .sidebar.no-hide {
-        max-width: unset !important;
-        flex-basis: unset !important;
-        margin-right: 0;
-    }
-}
-
-@media (max-width: 600px) {
-    .content-columns {
-        columns: 1;
-    }
-}
-
 .sidebar, #content, #header, #skippers {
     background-color: rgba(var(--bg-shade), var(--bg-shade), var(--bg-shade), 0.6);
     border: 1px dotted var(--fg-color);
@@ -729,3 +707,34 @@ li > ul {
         content: '.';
     }
 }
+
+@media (max-width: 900px) {
+    .sidebar-column:not(.no-hide) {
+        display: none;
+    }
+
+    .layout-columns.vertical-when-thin {
+        flex-direction: column;
+    }
+
+    .layout-columns.vertical-when-thin > *:not(:last-child) {
+        margin-bottom: 10px;
+    }
+
+    .sidebar-column.no-hide {
+        max-width: unset !important;
+        flex-basis: unset !important;
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+    }
+
+    .sidebar .news-entry:not(.first-news-entry) {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    .content-columns {
+        columns: 1;
+    }
+}