From 7dae98557cef8ab1b87efe9703167c1cea2b4827 Mon Sep 17 00:00:00 2001
From: chr <chr@chronal.net>
Date: Sat, 21 Jul 2018 15:47:19 -0700
Subject: [PATCH 1/2] Base SCSS for cybrespace themes

Performs some baseline tweaks to the mastodon application scss that are
shared between all the cybrespace themes
---
 app/javascript/styles/cybre-base.scss      | 63 ++++++++++++++++++++++
 app/javascript/styles/fullwidth-media.scss | 48 +++++++++++++++++
 2 files changed, 111 insertions(+)
 create mode 100644 app/javascript/styles/cybre-base.scss
 create mode 100644 app/javascript/styles/fullwidth-media.scss

diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss
new file mode 100644
index 000000000..98b68b997
--- /dev/null
+++ b/app/javascript/styles/cybre-base.scss
@@ -0,0 +1,63 @@
+
+@import 'application';
+
+/* Allow columns to grow wider as the screen gets 
+ * wider, but don't ever let them get more than
+ * 400px (some people have a bunch of columns!) */
+@media screen and (min-width: 1300px) {
+  .column {
+    flex-grow: 1 !important;
+    max-width: 400px;
+  }
+
+  .drawer {
+    width: 17%; /* Not part of the flex fun */
+    max-width: 400px;
+    min-width: 330px;
+  }
+}
+
+/* Cap the column height at 100vh (fixed an old
+ * bug someone encountered in safari, but which
+ * I've seen resurface from time to time) */
+.column {
+  max-height:100vh;
+}
+
+/* Don't show outline around statuses if we're in 
+ * mouse or touch mode (rather than keyboard) */
+[data-whatinput="mouse"], [data-whatinput="touch"] {
+  .status__content:focus, .status:focus,
+  .status__wrapper:focus, .status__content__text:focus {
+    outline: none;
+  }
+}
+
+/* Show a little arrowey thing after the time in a
+ * status to signal that you can click it to see
+ * a detailed view */
+.status time:after,
+.detailed-status__datetime span:after {
+  font: normal normal normal 14px/1 FontAwesome;
+  content: "\00a0\00a0\f08e";
+}
+
+/* Don't display the elephant mascot (we have our
+ * own, thanks) */
+.drawer__inner__mastodon {
+  display: none;
+}
+
+/* Let the compose area/drawer be short, but
+ * expand if necessary */
+.drawer .drawer__inner {
+  overflow: visible;
+  height:inherit;
+  background-image: none;
+}
+.drawer__pager {
+  overflow-y:auto;
+}
+
+@import 'fullwidth-media';
+
diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss
new file mode 100644
index 000000000..a8420694c
--- /dev/null
+++ b/app/javascript/styles/fullwidth-media.scss
@@ -0,0 +1,48 @@
+
+/* So we can position things absolute to it*/
+.status__content {
+  position:relative;
+}
+
+/* Use 30% of the viewport height always*/
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.status .video-player,
+.media-gallery {
+  max-height:30vh;
+  height:30vh !important;
+  position:relative;
+  margin-top:20px;
+  margin-left:-68px;
+  width: calc(100% + 80px);
+}
+
+/* Unset max-width for spoilers and the video
+ * player */
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.video-player {
+  max-width: none;
+}
+
+
+.detailed-status .media-spoiler,
+.status .media-spoiler {
+  height:30vh !important;
+  vertical-align:middle;
+}
+
+
+.status__video-player-video {
+  transform:unset;
+  top:unset;
+}
+
+
+/* Adjust offset and width for detail view */
+.detailed-status .media-gallery {
+  margin-left:-10px;
+  width: calc(100% + 22px);
+}
+
+

From a0bce3a23fc483988df41d9f684cb478288808f5 Mon Sep 17 00:00:00 2001
From: chr <chr@cybre.space>
Date: Sat, 17 Nov 2018 12:55:42 -0800
Subject: [PATCH 2/2] Fix media height weirdness, handle new status cards

---
 app/javascript/styles/fullwidth-media.scss | 43 ++++++++++++----------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss
index a8420694c..a681a3535 100644
--- a/app/javascript/styles/fullwidth-media.scss
+++ b/app/javascript/styles/fullwidth-media.scss
@@ -1,38 +1,31 @@
 
-/* So we can position things absolute to it*/
-.status__content {
-  position:relative;
-}
-
-/* Use 30% of the viewport height always*/
+/* Use 100% of the viewport width always*/
 .detailed-status > .media-spoiler,
 .status > .media-spoiler,
 .status .video-player,
-.media-gallery {
-  max-height:30vh;
-  height:30vh !important;
-  position:relative;
+.media-gallery,
+.status .status-card {
   margin-top:20px;
   margin-left:-68px;
   width: calc(100% + 80px);
 }
 
-/* Unset max-width for spoilers and the video
- * player */
+/* Unset max-width for spoilers and the video player */
 .detailed-status > .media-spoiler,
 .status > .media-spoiler,
 .video-player {
   max-width: none;
 }
 
-
-.detailed-status .media-spoiler,
-.status .media-spoiler {
-  height:30vh !important;
-  vertical-align:middle;
+/* If there's no status text, add an extra margin on top */
+.status .status__info + .media-gallery,
+.status .status__info + .media-spoiler,
+.status .status__info + .video-player,
+.status .status__info + .status-card {
+  margin-top: 40px;
 }
 
-
+/* Undo transforms on videos inside the video player */
 .status__video-player-video {
   transform:unset;
   top:unset;
@@ -45,4 +38,16 @@
   width: calc(100% + 22px);
 }
 
-
+.public-layout .status {
+  .status__content {
+    min-height: 15px;
+  }
+  & > .media-spoiler,
+  .video-player,
+  .media-gallery,
+  .status-card {
+    margin-top:20px;
+    width: calc(100% + 94px);
+    margin-left: -78px;
+  }
+}