timeline width fix, post notice styling

timeline width fix, post notice styling

diff --git a/common/common.scss b/common/common.scss
index c2ae067..ea73d67 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,811 +1,841 @@
 //color functions
 @function brightness($color) {
-	@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114));
+  @return (
+    (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114)
+  );
 }
 
-@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
-	@if brightness($adjusted-color) < brightness($comparison-color) {
-		@return scale-color($adjusted-color, $lightness: $lightness);
-	}
-	@else {
-		@return scale-color($adjusted-color, $lightness: $darkness);
-	}
+@function dark-light-diff(
+  $adjusted-color,
+  $comparison-color,
+  $lightness,
+  $darkness
+) {
+  @if brightness($adjusted-color) < brightness($comparison-color) {
+    @return scale-color($adjusted-color, $lightness: $lightness);
+  } @else {
+    @return scale-color($adjusted-color, $lightness: $darkness);
+  }
 }
 
 body {
-	background: dark-light-diff($primary, $secondary, 90%, -95%);
+  background: dark-light-diff($primary, $secondary, 90%, -95%);
 }
 
 //topic
 .topic-body {
-	background: $secondary;
-	border-radius: 5px;
-	margin-bottom: 15px;
-	padding: 0;
-	border-top: none;
-	box-shadow: 2px 2px 8px rgba(0, 0, 0, .12);
-	margin-left: 30px;
-	@media screen and (max-width: 960px) {
-		width: 90%;
-	}
-	@media screen and (max-width: 770px) {
-		width: 85%;
-	}
-	.regular {
-		margin-top: 0;
-	}
-	&:before {
-		content: "";
-		width: 0;
-		height: 0;
-		position: absolute;
-		left: -10px;
-		top: 27px;
-		border-top: 10px solid transparent;
-		border-bottom: 10px solid transparent;
-		border-right: 10px solid $secondary;
-	}
-	.topic-meta-data {
-		padding: 10px;
-	}
-	.cooked {
-		margin-top: 0;
-		padding: 0 10px;
-		img:not(.thumbnail) {
-			max-width: 670px;
-		}
-	}
+  background: $secondary;
+  border-radius: 5px;
+  margin-bottom: 15px;
+  padding: 0;
+  border-top: none;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
+  margin-left: 30px;
+  @media screen and (max-width: 924px) {
+    width: 90%;
+  }
+  @media screen and (max-width: 770px) {
+    width: 85%;
+  }
+  .regular {
+    margin-top: 0;
+  }
+  &:before {
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: -10px;
+    top: 27px;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid $secondary;
+  }
+  .topic-meta-data {
+    padding: 10px;
+  }
+  .cooked {
+    margin-top: 0;
+    padding: 0 10px;
+    img:not(.thumbnail) {
+      max-width: 670px;
+    }
+  }
 }
 
 #topic-footer-buttons .btn {
-	height: auto;
+  height: auto;
 }
 
 .presence-users {
-	background-color: transparent;
-	padding: 0 5px 0 0;
+  background-color: transparent;
+  padding: 0 5px 0 0;
 }
 
 #share-link {
-	border-radius: 5px;
+  border-radius: 5px;
 }
 
 .like-count.highlight-action.btn-text {
-	padding: 13px;
+  padding: 13px;
 }
 
 .moderator .topic-body:before {
-	border-right: 10px solid dark-light-diff($highlight, $secondary, 70%, -80%);
+  border-right: 10px solid dark-light-diff($highlight, $secondary, 70%, -80%);
 }
 
 .deleted .topic-body:before {
-	border-right: 10px solid dark-light-diff($danger, $secondary, 60%, -60%);
+  border-right: 10px solid dark-light-diff($danger, $secondary, 60%, -60%);
 }
 
 .topic-map {
-	margin-top: 0;
-	border-radius: 0 0 10px 10px;
-	border: none;
-	.buttons .btn {
-		background: transparent;
-		border: none !important;
-		&:hover {
-			background: transparent;
-		}
-	}
-	button.widget-button.btn.no-text {
-		box-shadow: none
-	}
+  margin-top: 0;
+  border-radius: 0 0 10px 10px;
+  border: none;
+  .buttons .btn {
+    background: transparent;
+    border: none !important;
+    &:hover {
+      background: transparent;
+    }
+  }
+  button.widget-button.btn.no-text {
+    box-shadow: none;
+  }
 }
 
 .btn .d-icon {
-	color: currentColor;
+  color: currentColor;
 }
 
 .topic-map-expanded {
-	border-top: none;
+  border-top: none;
 }
 
 .topic-avatar {
-	border-top: none;
+  border-top: none;
 }
 
 .post-actions {
-	margin-bottom: 0px;
-	.post-action {
-		margin-right: 10px;
-		padding-bottom: 10px;
-	}
+  margin-bottom: 0px;
+  .post-action {
+    margin-right: 10px;
+    padding-bottom: 10px;
+  }
 }
 
 .post-menu-area {
-	margin-bottom: 0;
-	border-top: 1px solid dark-light-diff($secondary, $primary, 20%, -20%);
-	opacity: .3;
-	transition: opacity .7s;
-	.actions {
-		button {
-			padding: 12px;
-			border-left: 1px solid dark-light-diff($secondary, $primary, 20%, -20%);
-			margin: 0;
-			&.reply {
-				margin-left: 0;
-				background: dark-light-diff($tertiary, $secondary, 85%, -65%);
-				color: $tertiary;
-				border-radius: 0 0 5px 0;
-				.topic-owner & {
-					border-radius: 0;
-				}
-				&:hover {
-					background: dark-light-diff($tertiary, $secondary, 85%, -65%);
-					color: $tertiary;
-				}
-			}
-		}
-		button.widget-button.btn-flat.accepted.fade-out.no-text.btn-icon {
-			border-left: none;
-		}
-	}
-	span.accepted-text {
-		line-height: 42px;
-	}
-	nav.post-controls button.bookmark {
-		padding: 12px;
-	}
-	nav.post-controls .show-replies {
-		margin-left: 0;
-		height: 42px;
-	}
-	.like-count.highlight-action.btn-text,
-	.toggle-like.like.no-text.btn-icon {
-		padding: 12px;
-	}
-	nav.post-controls .like-button .toggle-like {
-		margin-left: 0;
-		padding: 12px 12px 12px 5px;
-	}
-	.toggle-like.has-like {
-		border-left: none;
-	}
-	nav.post-controls .like-button .like-count.my-likes {
-		margin-right: 0;
-	}
-	.regular-likes.btn-text+.toggle-like.like.no-text.btn-icon {
-		border-left: none;
-		padding: 12px 12px 12px 5px;
-	}
+  margin-bottom: 0;
+  border-top: 1px solid dark-light-diff($secondary, $primary, 20%, -20%);
+  opacity: 0.3;
+  transition: opacity 0.7s;
+  .actions {
+    button {
+      padding: 12px;
+      border-left: 1px solid dark-light-diff($secondary, $primary, 20%, -20%);
+      margin: 0;
+      &.reply {
+        margin-left: 0;
+        background: dark-light-diff($tertiary, $secondary, 85%, -65%);
+        color: $tertiary;
+        border-radius: 0 0 5px 0;
+        .topic-owner & {
+          border-radius: 0;
+        }
+        &:hover {
+          background: dark-light-diff($tertiary, $secondary, 85%, -65%);
+          color: $tertiary;
+        }
+      }
+    }
+    button.widget-button.btn-flat.accepted.fade-out.no-text.btn-icon {
+      border-left: none;
+    }
+  }
+  span.accepted-text {
+    line-height: 42px;
+  }
+  nav.post-controls button.bookmark {
+    padding: 12px;
+  }
+  nav.post-controls .show-replies {
+    margin-left: 0;
+    height: 42px;
+  }
+  .like-count.highlight-action.btn-text,
+  .toggle-like.like.no-text.btn-icon {
+    padding: 12px;
+  }
+  nav.post-controls .like-button .toggle-like {
+    margin-left: 0;
+    padding: 12px 12px 12px 5px;
+  }
+  .toggle-like.has-like {
+    border-left: none;
+  }
+  nav.post-controls .like-button .like-count.my-likes {
+    margin-right: 0;
+  }
+  .regular-likes.btn-text + .toggle-like.like.no-text.btn-icon {
+    border-left: none;
+    padding: 12px 12px 12px 5px;
+  }
 }
 
 .embedded-posts {
-	padding: 20px 0;
-	background: darken(dark-light-diff($primary, $secondary, 90%, -95%), 10%);
-	.topic-body {
-		overflow: visible;
-		width: calc(100% - 120px);
-		padding: 5px 25px 0 15px;
-	}
-	&.top {
-		margin-left: 75px;
-		width: 690px;
-		padding-top: 15px !important;
-		padding-bottom: 15px !important;
-		margin-bottom: 0 !important;
-		border-radius: 5px 5px 0 0;
-		.topic-body .cooked img:not(.thumbnail) {
-			max-width: 100%;
-			height: auto;
-		}
-		.row .topic-avatar,
-		.row .topic-body {
-			border-top: none;
-		}
-		@media screen and (max-width: 960px) {
-			width: 90%;
-		}
-		@media screen and (max-width: 770px) {
-			width: 85%;
-		}
-		&:before {
-			display: none;
-		}
-		&.row:before {
-			display: table;
-		}
-	}
-	&.bottom {

[... diff too long, it was truncated ...]

GitHub sha: 6fd04f9ca0d56e189fe5c28acf58f529413c2355