Add dropdown menu for opening article in other apps

assets/css/layout.css

@@ -52,7 +52,7 @@ pre code {
 main {
   display: block;
   max-width: 728px;
-  margin: 12rem auto;
+  margin: 12rem auto 24rem auto;
 }
 
 main header {
@@ -64,26 +64,65 @@ main header h1 {
   margin-bottom: 1.6rem;
 }
 
-p.meta {
+main header .meta {
   display: flex;
   column-gap: 1rem;
 }
 
-p.meta .content {
+main header .meta .content {
   display: flex;
   flex-direction: column;
   font-size: 0.875rem;
   line-height: 1.6rem;
 }
 
-p.meta .name a {
+main header .meta .name a {
   text-decoration: none;
 }
 
-.article-list .item {
+main .article-list .item {
   margin-bottom: 3rem;
 }
 
-.article-list .item h3 {
+main .article-list .item h3 {
   margin-bottom: 1rem;
 }
+
+main article footer {
+  margin-top: 5rem;
+}
+
+/* Dropdown menu */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-button {
+  font-family: "Merriweather", serif;
+  font-size: 0.875rem;
+  padding: 0.6rem 1rem;
+  border: 1px solid;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  min-width: 160px;
+  border-radius: 5px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  padding: 0.6rem 1rem;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}

assets/css/themes/default-light.css

@@ -25,10 +25,35 @@ pre code {
   color: #ccc;
 }
 
-p.meta .date {
+main header .meta .date {
   color: #888;
 }
 
-p.meta .name a {
+main header .meta .name a {
   color: #3b3a38;
 }
+
+/* Dropdown menu */
+
+.dropdown-button {
+  background-color: #f5f2eb;
+  color: #3b3a38;
+  border-color: #ccc;
+}
+
+.dropdown-content {
+  background-color: #fff;
+}
+
+.dropdown-content a {
+  color: #3b3a38 !important;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-button {
+  background-color: #fff;
+  border-color: #fff;
+}