Improve open-with dropdown

assets/css/layout.css

@@ -1,7 +1,11 @@
 @import url("/assets/css/fonts/merriweather.css");
 
+html {
+  font-size: 16px;
+}
+
 body {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-family: "Merriweather", serif;
 }
 
@@ -10,14 +14,14 @@ img {
 }
 
 img.avatar {
-  height: 48px;
-  width: 48px;
+  height: 3rem;
+  width: 3rem;
   border-radius: 50%;
 }
 
 .profile-page img.avatar {
-  height: 128px;
-  width: 128px;
+  height: 8rem;
+  width: 8rem;
 }
 
 h1 {
@@ -51,7 +55,7 @@ pre code {
 
 main {
   display: block;
-  max-width: 728px;
+  max-width: 44rem;
   margin: 12rem auto 24rem auto;
 }
 
@@ -111,10 +115,11 @@ main article footer {
 .dropdown-content {
   display: none;
   position: absolute;
-  min-width: 160px;
+  min-width: 12rem;
   border-radius: 5px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
+  font-size: 1rem;
 }
 
 .dropdown-content a {
@@ -123,6 +128,36 @@ main article footer {
   display: block;
 }
 
+.dropdown-content h4.title {
+  font-size: 0.875rem;
+  margin: 0;
+  padding: 0.6rem 1rem;
+  border-top: 1px solid;
+}
+
 .dropdown:hover .dropdown-content {
   display: block;
 }
+
+@media (max-width: 768px) {
+  html {
+    font-size: 14px;
+  }
+
+  main {
+    max-width: 100%;
+    margin: 4rem 1rem 8rem 1rem;
+  }
+
+  .dropdown-content {
+    bottom: 100%;
+  }
+
+  .dropdown-content a {
+    padding: 0.8rem 1.2rem;
+  }
+
+  .dropdown-content h4.title {
+    padding: 0.8rem 1.2rem;
+  }
+}

assets/css/themes/default-light.css

@@ -53,6 +53,11 @@ main header .meta .name a {
   background-color: #f1f1f1;
 }
 
+.dropdown-content h4.title {
+  color: #888;
+  border-color: #f1f1f1;
+}
+
 .dropdown:hover .dropdown-button {
   background-color: #fff;
   border-color: #fff;