diff --git a/static/css/list.css b/static/css/list.css
index af39daeeed37134be7ad748db317e5b3bc8b15f5..735e745998eb3dd3ed1a16e7003d314cdbe1c831 100644
--- a/static/css/list.css
+++ b/static/css/list.css
@@ -1,23 +1,16 @@
 .year {
-  width: 100%;
-  margin-left: 45px;
+  width: 70%;
+  margin-left: 8%;
+  margin-right: 0px;
   text-align: left;
 }
-
-/*
-.year h1 {
-  position: relative;
-  display: inline-block;
-  padding: 0 21px;
-}
-*/
 .year h1 {
   position: relative;
   padding-left: 25px;
 }
 
 .year h1:before {
-  position: absolute;
+  position: absolute; 
   content: '';
   bottom: -3px;
   left: 0;
@@ -28,29 +21,10 @@
   border-bottom: solid 15px rgb(47, 79,79);
 }
 .year h1:after {
-  position: absolute;
+  position: absolute; 
   content: '';
   bottom: -3px;
   left: 10px;
-  width: 70%;
+  width: 100%;
   border-bottom: solid 3px rgb(47, 79,79);
 }
-
-/*
-.year h1:before, .year h1:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  display: inline-block;
-  width: 45px;
-  height: 1px;
-  background-color: black;
-}
-
-.year h1:before {
-  left:0;
-}
-.year h1:after {
-  right: 0;
-}
-*/
diff --git a/static/css/main.css b/static/css/main.css
index cd885ad8ec8c6f769056f6de540de5f04957adbf..596787217ee096408e4e581def51816dc731e785 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -13,11 +13,15 @@ main {
 
 .main-list {
   display: block;
-  width: 100%;
+  width: 94%;
+  margin-left: 3%;
+  margin-right: 3%;
 }
 
 
 .main-terms {
   display: block;
-  width: 100%;
+  width: 94%;
+  margin-left: 3%;
+  margin-right: 3%;
 }
diff --git a/static/css/postcard.css b/static/css/postcard.css
index 002eede17acfeccb9c5c1b97543c9dce2f76e1e4..84cec40df71a66f878b363c8a105e54bbd526603 100644
--- a/static/css/postcard.css
+++ b/static/css/postcard.css
@@ -230,3 +230,12 @@
   background: #67c5ff;
   color: white;
 }
+
+.postcard .katex-display {
+  overflow: hidden;
+  width: 100%;
+}
+.postcard pre {
+  overflow: hidden;
+  width: 100%;
+}
diff --git a/static/css/sidebar.css b/static/css/sidebar.css
index b3949c91567ec110544a394a21921930428a7571..8e6a718fb2bf8b493f3b8b8dbf9405562ca39424 100644
--- a/static/css/sidebar.css
+++ b/static/css/sidebar.css
@@ -88,6 +88,7 @@
 }
 
 .topic_list-narrow {
+  display: box;
   align: center;
   margin: 0 auto;
   width: 100vw;
@@ -102,7 +103,7 @@
 }
 
 .slick-initialized .slick-slide{
-  opacity: 0.55;
+  opacity: 0.4;
 }
 
 .slick-initialized .slick-slide.slick-active{
diff --git a/static/css/single.css b/static/css/single.css
index 11f418442cb737f23931a050dd114fe9ef77ff51..e769d2d8e9f712cf3f153618d388ef664741c675 100644
--- a/static/css/single.css
+++ b/static/css/single.css
@@ -1,9 +1,10 @@
 .single_page {
   display: block;
   grid-area: areaA;
-  width: 95%;
+  width: 94%;
   text-align: left;
   margin-left: 3%;
+  margin-right: 3%;
 
   /*border: solid 5px green;
     */
@@ -13,6 +14,23 @@
   font-size: 23px;
   margin-left: 3px;
 }
+
+.single_page pre {
+  width:100%;
+  overflow-x:auto;
+}
+
+.single_page .katex{
+  overflow-x:auto;
+  overflow-y:hidden;
+  padding: 4px;
+}
+.single_page .katex-display {
+  display:block;
+  width:100%;
+  height:auto;
+}
+
 .single_page h2 {
   display: inline-block;
   text-align: center;
@@ -46,9 +64,10 @@
 .single-title{
     margin-top: 0px;
     margin-bottom: 9px;
-    padding-left: 15px;
-    width: 96%;
-    height: 50px;
+    padding-left: 6%;
+    padding-right: 6%;
+    width: 88%;
+    height: auto;
     line-height:50px;
     
     font-size: 25px;
diff --git a/static/css/slick.css b/static/css/slick.css
index 57477e848b989426ab54c7b9ebff5eaf2318c1c6..8b2d5edf00f2e500de1fdd73fc491e43143eddb7 100755
--- a/static/css/slick.css
+++ b/static/css/slick.css
@@ -98,6 +98,10 @@
 {
     pointer-events: none;
 }
+.slick-initialized 
+{
+    opacity: 1;
+}
 .slick-initialized .slick-slide
 {
     display: block;
diff --git a/static/css/split_container.css b/static/css/split_container.css
index ba5938d4bf71d45516cc4ad3fa1b35e3d95509dd..26d58bf29a0d486bbd7da56bb15658045977eee8 100644
--- a/static/css/split_container.css
+++ b/static/css/split_container.css
@@ -1,9 +1,10 @@
 .container {
   /* main + topics + link */
   display: grid;
-  width: 100%; gap: 10px;
-  grid-template-columns: 3fr 1fr;
+  width: 100%;
+  gap: 2vw;
   grid-template-rows: minmax(450px, auto);
+  grid-template-columns: 68vw 1fr;
   grid-template-areas:
     "areaA areaB"
     "areaA areaC";
@@ -14,6 +15,7 @@
   display: grid;
   width: 100%;
   grid-template-rows: 260px auto 100px;
+  grid-auto-columns: 100%;
   grid-template-areas:
     "areaB"
     "areaA"
diff --git a/static/js/container.js b/static/js/container.js
index c5c50558afa4276c59e5cf517d6ca28b64260f6c..d5887022aef313ef2d7f9523d2e4f6a38157fc5b 100644
--- a/static/js/container.js
+++ b/static/js/container.js
@@ -12,8 +12,8 @@ $(function(){
       value = 700, /* Size for Narrow version, Change here!*/
       oldBrowserWidth = value+1;
  
- console.log("start logging");
- console.log($win.width());
+// console.log("start logging");
+// console.log($win.width());
  function wideCSS(){
 /*     $container.className=wideClass;
     $sidebar.className="sidebar";
@@ -29,12 +29,17 @@ $(function(){
  function narrowCSS(){
     $container.className=narrowClass;
     $sidebar.className="sidebar-narrow";
-    $topicList.className="topic_list-narrow";
     $links.className="links-narrow";
     $sitemap.className="sitemap-narrow";
     $address.className="address-narrow";
-    console.log("width changed: narrow");
+    $topicList.className="topic_list-narrow";
+    //console.log("width changed: narrow");
     $(function(){
+
+      $('.topic_list-narrow').css({
+          "opacity" : "0"
+      });
+
       $('.topic_list-narrow').not('.slick-initialized').slick({
         dots: true,
         respondTo: 'window',
@@ -44,25 +49,39 @@ $(function(){
         arrows: false,
         slidesToShow: 1,
         autoplay: true,
-        autoplaySpeed: 4000,
+        autoplaySpeed: 5000,
         swipe: true,
         variableWidth: true
       });
-      console.log("slick loaded");
+      //console.log("slick loaded");
+       //$('.slider').slick('slickGoTo', 0);
 
       $(".imgsize").css({
         "width" : "240px", //width cannot control by here
         "height" : "180px",
         //"border": "solid 5px orange"
-        });
+      });
 
       $(".bannersize").css({
         "width": "240px",
         "height": "180px",
         "padding-bottom": "0",
         //"border": "solid 5px green"
-          });
       });
+
+//      console.log($('.topic_list-narrow').slick('slickGetOption','autoplay'));
+
+      $('.topic_list-narrow').css({
+          "opacity" : 1,
+          "transition": "opacity 2s ease-in",
+          "-moz-transition": "opacity 2s ease-in",
+          "-webkit-transition": "opacity 2s ease-in",
+          "-o-transition": "opacity 2s ease-in"
+      });
+      $('.topic_list-narrow').slick('slickGoTo', 0);
+
+    });
+
  }
 
  var browserWidth = $win.width();