formatted bios + merge monsterpit markdown styles directly into glitch-soc scss

3 files changed, 186 insertions, 69 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index ddcce1218..25393f88a 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -450,20 +450,141 @@
   word-break: normal;
   word-wrap: break-word;
 
-  p {
+	.emojione {
+    width: 20px;
+    height: 20px;
+    margin: -3px 0 0;
+  }
+
+  .hoverplay:hover { padding-left: 20px }
+
+  p, pre, blockquote {
     margin-bottom: 20px;
+    white-space: pre-wrap;
 
     &:last-child {
       margin-bottom: 0;
     }
   }
 
+	h1, h2, h3, h4, h5, h6 {
+		margin-top: 20px;
+		margin-bottom: 20px;
+	}
+
+	h1, h2 {
+		font-weight: 700;
+		font-size: 18px;
+	}
+
+	h2 {
+		font-size: 16px;
+	}
+
+	h3, h4, h5, h6 {
+		font-weight: 500;
+	}
+
+	blockquote {
+		padding-left: 10px;
+		border-left: 3px solid $darker-text-color;
+		color: $darker-text-color;
+		white-space: normal;
+		font-style: italic;
+
+		p:last-child {
+			margin-bottom: 20px;
+		}
+	}
+
+	b, strong {
+		font-weight: 700;
+	}
+
+	em, i {
+		font-style: italic;
+	}
+
+	sub {
+		font-size: smaller;
+		text-align: sub;
+	}
+
+	sup {
+		vertical-align: super;
+		font-size: smaller;
+	}
+
+	ul, ol {
+		margin-left: 1em;
+
+		p {
+			margin: 0;
+		}
+
+		li:last-child {
+			margin-bottom: 20px;
+		}
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	s, del {
+		text-decoration: line-through;
+	}
+
+	hr {
+		border-color: lighten($dark-text-color, 10%);
+	}
+
+	pre, code {
+		color: lighten($dark-text-color, 33%);
+	}
+
+	mark {
+		background-color: #ccff15;
+		color: black;
+	}
+
   a {
-    color: inherit;
-    text-decoration: underline;
+    background-color: lighten($ui-base-color, 7%);
+    color: darken($secondary-text-color, 10%);
+    text-decoration: none;
+    padding: 2px;
+    border: 1px solid lighten($ui-base-color, 20%);
+    border-radius: 8px;
 
     &:hover {
-      text-decoration: none;
+      border: 1px solid darken($secondary-text-color, 20%);
+      color: lighten($dark-text-color, 10%);
+    }
+
+    &.mention {
+      &:hover {
+        text-decoration: none;
+
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .fa {
+      color: $dark-text-color;
+    }
+  }
+
+  p {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 1b9fbc905..59bafbb6a 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -58,6 +58,7 @@
       border-left: 3px solid $darker-text-color;
       color: $darker-text-color;
       white-space: normal;
+      font-style: italic;
 
       p:last-child {
         margin-bottom: 20px;
@@ -77,6 +78,11 @@
       text-align: sub;
     }
 
+    sup {
+      vertical-align: super;
+      font-size: smaller;
+    }
+
     ul, ol {
       margin-left: 1em;
 
@@ -96,18 +102,43 @@
     ol {
       list-style-type: decimal;
     }
+
+    s, del {
+      text-decoration: line-through;
+    }
+
+    hr {
+      border-color: lighten($dark-text-color, 10%);
+    }
+
+    pre, code {
+      color: lighten($dark-text-color, 33%);
+    }
+
+    mark {
+      background-color: #ccff15;
+      color: black;
+    }
+
+    p.signature {
+      color: lighten($dark-text-color, 20%);
+      font-style: italic;
+      font-size: 12px;
+      text-align: right;
+    }
   }
 
   a {
-    color: $secondary-text-color;
+    background-color: lighten($ui-base-color, 7%);
+    color: darken($secondary-text-color, 10%);
     text-decoration: none;
+    padding: 2px;
+    border: 1px solid lighten($ui-base-color, 20%);
+    border-radius: 8px;
 
     &:hover {
-      text-decoration: underline;
-
-      .fa {
-        color: lighten($dark-text-color, 7%);
-      }
+      border: 1px solid darken($secondary-text-color, 20%);
+      color: lighten($dark-text-color, 10%);
     }
 
     &.mention {
@@ -331,7 +362,7 @@
         background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1));
         pointer-events: none;
       }
-      
+
       a:hover {
         text-decoration: none;
       }
diff --git a/app/javascript/flavours/glitch/styles/monsterpit.scss b/app/javascript/flavours/glitch/styles/monsterpit.scss
index f4e2632ba..649ae1e20 100644
--- a/app/javascript/flavours/glitch/styles/monsterpit.scss
+++ b/app/javascript/flavours/glitch/styles/monsterpit.scss
@@ -1,42 +1,6 @@
 .status__content__text,
-.reply-indicator__content,
-.composer--reply > .content,
-.account__header__content,
 .e-content
 {
-  s { text-decoration: line-through; }
-  del { text-decoration: line-through; }
-  h6 { font-size: 8px; font-weight: bold; }
-  hr { border-color: lighten($dark-text-color, 10%); }
-  sub {
-    vertical-align: sub;
-    font-size: smaller;
-  }
-  sup {
-    vertical-align: super;
-    font-size: smaller;
-  }
-  pre, code {
-    color: lighten($dark-text-color, 33%);
-  }
-  mark {
-    background-color: #ccff15;
-    color: black;
-  }
-  blockquote {
-    font-style: italic;
-  }
-  .caption {
-    display: block;
-    margin: auto;
-    font-size: 12px !important;
-    padding-top: 0;
-    text-align: center;
-    max-width: 80%;
-  }
-  .caption-hidden {
-    display: none;
-  }
   p.signature {
     color: lighten($dark-text-color, 20%);
     font-style: italic;
@@ -51,31 +15,32 @@ div.media-caption {
     margin-bottom: 0;
     text-align: center;
   }
-  a {
-		color: $secondary-text-color;
-		text-decoration: none;
-		font-weight: bold;
 
-		&:hover {
-			text-decoration: underline;
+  a {
+    background-color: lighten($ui-base-color, 7%);
+    color: darken($secondary-text-color, 10%);
+    text-decoration: none;
+    padding: 2px;
+    border: 1px solid lighten($ui-base-color, 20%);
+    border-radius: 8px;
 
-			.fa {
-				color: lighten($dark-text-color, 7%);
-			}
-		}
+    &:hover {
+      border: 1px solid darken($secondary-text-color, 20%);
+      color: lighten($dark-text-color, 10%);
+    }
 
-		&.mention {
-			&:hover {
-				text-decoration: none;
+    &.mention {
+      &:hover {
+        text-decoration: none;
 
-				span {
-					text-decoration: underline;
-				}
-			}
-		}
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
 
-		.fa {
-			color: $dark-text-color;
-		}
-	}
+    .fa {
+      color: $dark-text-color;
+    }
+  }
 }