fix layout in chrome

static/css/custom.css

@@ -46,7 +46,10 @@
 .index-wrapper {
     display: grid;
     grid-template-columns: repeat(10, 10% [col-start]);
-    grid-template-rows: repeat(6, 33% [row-start]);
+    grid-template-rows: 50% 50%;
+    grid-template-areas: 
+        "content content content content content content recent recent recent recent"
+        "interests interests interests interests blog blog blog blog social social";
 }
 
 .box {
@@ -61,18 +64,15 @@ li.note-item {
 }
 
 .index-content {
-    grid-row: 1 / 2;
-    grid-column: 1 / span 6;
+    grid-area: content;
 }
 
 .index-social {
-    grid-row: 2 / 3;
-    grid-column: 9 / span 2;
+    grid-area: social;
 }
 
 .index-blog {
-    grid-row: 2 / 3;
-    grid-column: 5 / span 4;
+    grid-area: blog;
 }
 
 .index-banners {
@@ -81,8 +81,7 @@ li.note-item {
 }
 
 .index-recent {
-    grid-row: 1 / 2;
-    grid-column: 7 / span 4;
+    grid-area: recent;
 }
 
 .index-bookmarks {
@@ -90,30 +89,10 @@ li.note-item {
     grid-column: 6 / span 5;
 }
 
-@media only screen and (max-width: 700px) {
-    .box {
-        grid-column: 1 / 6;
-    }
-
-    .index-content {
-        grid-row: 1 / 2;
-    }
-
-
-    .index-recent {
-        grid-row: 2 / 3;
-    }
-
-    .index-banners {
-        grid-row: 3 / 4;
-    }
-
-    .index-social {
-        grid-row: 4 / 5;
-    }
-
-    .index-blog {
-        grid-row: 5 / 6;
+@media only screen and (max-width: 500px) {
+    .index-wrapper {
+        display: flex;
+        flex-flow: row wrap;
     }
 }
 

themes/dreamcast/static/css/main.css

@@ -257,7 +257,8 @@ nav li {
   transition: box-shadow 0.3s;
 }
 
-nav li:hover {
+nav li:hover,
+nav li:active {
   animation: 0.2s ease-in 1 forwards spotlight;
   outline: 1px solid rgba(255, 255, 255, 0.2);
   background-clip: border-box;