Tweak design and AP tag supports

app/scss/main.scss

@@ -1,20 +1,92 @@
+$font-stack: Helvetica, sans-serif;
+$background: #002B36;  // solarized background color    
+// font-family: Inconsolata, monospace;
+$primary-color: #e14eea;
+$secondary-color: #32cd32;
+$muted-color: #586e75; // solarized comment text
+// #93a1a1; solarized body text
+
+
 body {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    min-height: 100vh;
-    flex-direction: column;
+  font-family: $font-stack;
+  font-size: 20px;
+  line-height: 32px;
+  background: $background;
+  color: #ccc;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+a {
+  text-decoration: none;
+}
+
+.activity-main {
+  a {
+    color: #ddd;
+  }
+}
+.activity-wrap {
+}
+code, pre {
+  color: #859900; // #cb4b16; // #268bd2; // #2aa198;
+  font-family: 'Inconsolata, monospace';
+}
+header {
+  .title {
+    font-size: 1.3em;
+    text-decoration: none;
+    .handle {
+      font-size: 0.85em;
+      color: #93a1a1;
+    }
+  }
+  .counter {
+    color: #93a1a1;
+  }
+}
+.purple {
+  color: #e14eea;
+}
+a {
+  color: #e14eea;
+}
+
+.green, a:hover {
+  color: #32cd32;
 }
 #main {
     flex: 1; 
 }
 main {
-    max-width: 800px;
-    margin: 20px auto;
+    width: 100%;
+    max-width: 960px;
+    margin: 30px auto;
 }
 footer {
-    max-width: 800px;
+    width: 100%;
+    max-width: 960px;
     margin: 20px auto;
+    color: #93a1a1;
+}
+.actor-box {
+  display: flex;
+  column-gap: 20px;
+  margin:20px 0 10px 0;
+  .icon-box {
+    flex: 0 0 50px;
+  }
+  .actor-handle {
+    font-size: 0.85em;
+    line-height: 1em;
+    color: #93a1a1;
+  }
+  .actor-icon {
+    margin-top: 5px;
+    max-width: 50px;
+  }
 }
 #notifications, #followers, #following {
     ul {
@@ -26,47 +98,47 @@ footer {
         display: inline-block;
     }
 }
-.actor-box {
-    a {
-        text-decoration: none;
+
+#admin {
+}
+
+.activity-bar {
+input[type=submit], button {
+  font-size: 20px;
+  line-height: 32px;
+  font-family: "Inconsolata, monospace";
+  background: none!important;
+  border: none;
+  padding: 0!important;
+  cursor: pointer;
+  color: #e14eea;
+    }
+    input[type=submit]:hover, button:hover {
+      color: #32cd32;
+
     }
 }
 
-#admin {
-.navbar {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 1fr;
-  grid-auto-flow: dense;
-  justify-items: stretch;
-  align-items: stretch;
-  column-gap: 20px;
-}
-
-.logo {
-  grid-column:-3;
-  padding: 5px;
-}
-
-.menus {
-  display: flex;
-  flex-direction: row;
-  justify-content: start;
-  grid-column: 1;
-}
-
-.menus * {
-  padding: 5px;
-}
-}
-
 nav.flexbox {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+
+    input[type=submit] {
+  font-size: 20px;
+  line-height: 32px;
+  font-family: "Inconsolata, monospace";
+  background: none!important;
+  border: none;
+  padding: 0!important;
+  cursor: pointer;
+  color: #e14eea;
+    }
+    input[type=submit]:hover {
+      color: #32cd32;
+
+    }
 
     ul {        
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         list-style-type: none;
         margin: 0;
@@ -81,12 +153,13 @@ nav.flexbox {
             margin-right: 0px;
         }
     }
-}
-#admin {
-    a.active {
-        font-weight: bold;
+    a {
         text-decoration: none;
     }
+    a.active {
+        color: #32cd32;
+        font-weight: bold;
+    }
 }
 
 
@@ -94,12 +167,11 @@ nav.flexbox {
   margin: 0 auto;
   padding: 30px 0;
   .actor-icon {
-    width:48px;
+    width: 50px;
     margin-right: 15px;
-    img {
-      max-width: 48px;
-    }
+    margin-top: 5px;
   }
+
   .activity-content {
     display: flex;
     align-items:flex-start;
@@ -112,6 +184,9 @@ nav.flexbox {
         font-weight:normal;
         margin-left: 5px;
       }
+      .actor-handle {
+        color: #93a1a1;
+      }
       .activity-date { float:right; }
     }
   }