tweak mobile migration noti bar

Sangdol · May 27, 2017 · ab2897e · ab2897e
1 parent 0168b46
commit ab2897e
Showing 1 changed file with 23 additions and 23 deletions.
diff --git a/theme.html b/theme.html
@@ -505,26 +505,7 @@
   .mobile-only {
     display: none;
   }
-
-  @media (max-width: 600px) {
-    .desktop-only {
-      display: none;
-    }
-    .mobile-only {
-      display: inline-block;
-    }
-    #migration-noti {
-      left: 100px;
-      width: 600px;
-      font-size: 24px;
-      height: 50px;
-      line-height: 50px;
-    }
-    .migration-noti-url {
-      display: none;
-    }
-  }
-  #migration-noti {
+  .migration-noti {
     position: absolute;
     left: 0px;
     right: 0px;
@@ -536,13 +517,32 @@
     line-height: 30px;
     font-size: 18px;
   }
-  #migration-noti a {
+  .migration-noti a {
     display: inline-block;
     text-decoration: none;
   }
-  #migration-noti a:visited {
+  .migration-noti a:visited {
     color: #fff !important;
   }
+  @media (max-width: 600px) {
+    .desktop-only {
+      display: none;
+    }
+    .mobile-only {
+      display: inline-block;
+    }
+    .migration-noti {
+      top: 20px;
+      right: inherit;
+      font-size: 24px;
+      height: 50px;
+      line-height: 50px;
+      padding: 0 15px;
+    }
+    .migration-noti-url {
+      display: none;
+    }
+  }
   </style>
   <style type="text/css" media="screen">
   {CustomCSS}
@@ -551,7 +551,7 @@
   <script src="http://static.tumblr.com/euguvyd/4Dsl43n9o/jcarousellite.min.js" type="text/javascript"></script>
 </head>
 <body>
-  <div id="migration-noti">
+  <div class="migration-noti">
     <a href="https://sangdol.github.io/blog/">블로그를 이전하였습니다. <span class="migration-noti-url">sangdol.github.io/blog</span></a>
   </div>
   <div id="wrapper">