Updates easter egg size & position

Fixes settings sidebar hiding
egfx-notifications · Dec 17, 2020 · da44f99 · da44f99
1 parent fbab0e2
commit da44f99
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 30 deletions.
diff --git a/src/webviews/apps/rebase/rebase.html b/src/webviews/apps/rebase/rebase.html
@@ -12,7 +12,6 @@
 
 	<body class="preload">
 		<canvas class="snow"></canvas>
-		<img class="snow__trigger snow__trigger--right" src="#{root}/images/snowman.png" />
 
 		<div class="container">
 			<header>
@@ -33,6 +32,14 @@ <h4 id="subhead"></h4>
 				<button name="disable" class="button button--flat-subtle" data-action="disable" tabindex="-1">
 					Disable Rebase Editor<span class="shortcut">Will Abort Rebase</span>
 				</button>
+				<div class="snow__trigger-container">
+					<img
+						class="snow__trigger snow__trigger--centered"
+						title="Let it snow — Happy Holidays!"
+						alt="Let it snow — Happy Holidays!"
+						src="#{root}/images/snowman.png"
+					/>
+				</div>
 				<button name="start" class="button button--flat-primary button--right" data-action="start">
 					Start Rebase <span class="shortcut">Ctrl+Enter</span>
 				</button>

diff --git a/src/webviews/apps/scss/settings.scss b/src/webviews/apps/scss/settings.scss
@@ -59,7 +59,7 @@ header {
 	max-width: 1200px;
 	min-width: 450px;
 
-	@media all and (max-width: 768px) {
+	@media all and (max-width: 815px) {
 		grid-gap: 1em 0;
 	}
 }
@@ -80,7 +80,7 @@ header {
 		background-color: var(--color-background);
 	}
 
-	@media all and (max-width: 768px) {
+	@media all and (max-width: 815px) {
 		grid-column: span 1;
 	}
 }
@@ -196,7 +196,7 @@ header {
 		background-color: var(--color-background) !important;
 		margin-right: 0;
 
-		@media all and (max-width: 768px) {
+		@media all and (max-width: 815px) {
 			margin-right: unset;
 		}
 	}
@@ -421,7 +421,11 @@ section {
 }
 
 .section__hint {
-	flex: 0 0 auto;
+	flex: 0 1 auto;
+
+	* {
+		word-break: break-word;
+	}
 
 	color: var(--color-foreground--75);
 	font-weight: 200;
@@ -605,9 +609,9 @@ section {
 	// align-items: baseline;
 	// justify-content: space-between;
 
-	.setting {
-		margin-right: 3em;
-	}
+	// .setting {
+	// 	margin-right: 3em;
+	// }
 }
 
 .settings--fixed {
@@ -620,9 +624,10 @@ section {
 	font-size: 1.3rem;
 	position: sticky;
 	top: 0;
+	margin-right: -10px;
 	z-index: 2;
 
-	@media all and (max-width: 768px) {
+	@media all and (max-width: 815px) {
 		display: none;
 	}
 
@@ -638,7 +643,7 @@ section {
 .is-sidebar-hidden {
 	display: none;
 
-	@media all and (max-width: 768px) {
+	@media all and (max-width: 815px) {
 		display: initial;
 	}
 }
@@ -655,6 +660,10 @@ section {
 		opacity: 0.5;
 		text-align: center;
 	}
+
+	.button {
+		font-size: 0.9rem;
+	}
 }
 
 .sidebar__jump-link {
@@ -679,3 +688,7 @@ section {
 @import 'utils';
 @import 'popup';
 @import 'snow';
+
+.sidebar {
+	top: 12px;
+}
diff --git a/src/webviews/apps/scss/snow.scss b/src/webviews/apps/scss/snow.scss
@@ -7,13 +7,9 @@ canvas.snow {
 
 .snow__trigger {
 	cursor: pointer;
-	position: fixed;
-	left: 7px;
-	top: 7px;
-	transform: rotate(-7deg);
-	width: 36px;
-	z-index: 2147483647;
+	width: 28px; //36px;
 	opacity: 0.6;
+	transform: rotate(-7deg);
 	transition: filter 250ms, opacity 250ms, transform 250ms;
 
 	body:not(.snowing) & {
@@ -28,16 +24,46 @@ canvas.snow {
 	}
 }
 
-.snow__trigger--right {
-	right: 15px;
-	left: unset;
-	top: 3px;
-
+.snow__trigger--flipped {
 	transform: rotate(4deg) scaleX(-1);
 
 	&:hover {
-		filter: unset !important;
-		opacity: 0.9 !important;
 		transform: rotate(1deg) scaleX(-1) scale(1.1);
 	}
 }
+
+.snow__trigger--centered {
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%) rotate(-7deg);
+
+	&:hover {
+		transform: translateY(-50%) rotate(-4deg) scale(1.1);
+	}
+
+	&.snow__trigger--flipped {
+		transform: translateY(-50%) rotate(4deg) scaleX(-1);
+
+		&:hover {
+			transform: translateY(-50%) rotate(1deg) scaleX(-1) scale(1.1);
+		}
+	}
+}
+
+.snow__trigger--fixed-left {
+	position: fixed;
+	left: 3px;
+	top: 3px;
+	z-index: 2147483647;
+}
+
+.snow__trigger--fixed-right {
+	position: fixed;
+	right: 3px;
+	top: 3px;
+	z-index: 2147483647;
+}
+
+.snow__trigger-container {
+	margin: 0 0.5em;
+}
diff --git a/src/webviews/apps/scss/welcome.scss b/src/webviews/apps/scss/welcome.scss
@@ -516,14 +516,26 @@ section {
 .sponsor__image {
 	opacity: 0.8;
 	transition: opacity 250ms;
-	width: 118px;
+	height: 32px;
 	margin: 0;
 
 	&:hover {
 		opacity: 1;
 	}
 }
 
+.sponsor__image-link {
+	margin: 5px;
+
+	&:first-of-type {
+		margin-top: 10px;
+	}
+
+	&:last-of-type {
+		margin-bottom: -5px;
+	}
+}
+
 .sponsor__tag {
 	font-size: 1.1rem;
 	margin: -1em 0.5em 0 0.5em;
@@ -552,3 +564,7 @@ section {
 
 @import 'utils';
 @import 'snow';
+
+.sidebar {
+	margin-right: 14px;
+}
diff --git a/src/webviews/apps/settings/settings.html b/src/webviews/apps/settings/settings.html
@@ -157,7 +157,12 @@ <h3 class="token-popup__title">Available Tokens</h3>
 
 	<body class="preload">
 		<canvas class="snow"></canvas>
-		<img class="snow__trigger" src="#{root}/images/snowman.png" />
+		<img
+			class="snow__trigger snow__trigger--fixed-right snow__trigger--flipped"
+			title="Let it snow — Happy Holidays!"
+			alt="Let it snow — Happy Holidays!"
+			src="#{root}/images/snowman.png"
+		/>
 
 		<div class="container">
 			<header>

diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html
@@ -12,7 +12,12 @@
 
 	<body class="preload">
 		<canvas class="snow"></canvas>
-		<img class="snow__trigger" src="#{root}/images/snowman.png" />
+		<img
+			class="snow__trigger snow__trigger--fixed-right snow__trigger--flipped"
+			title="Let it snow — Happy Holidays!"
+			alt="Let it snow — Happy Holidays!"
+			src="#{root}/images/snowman.png"
+		/>
 
 		<div class="container">
 			<header>
@@ -410,21 +415,22 @@ <h2>
 				<div class="sidebar__group sidebar__group--sponsors">
 					<h2>Sponsors</h2>
 					<a
+						class="sponsor__image-link"
 						title="Try CodeStream &mdash; Pull Requests and Code Reviews in your IDE"
 						href="https://sponsorlink.codestream.com/?utm_source=gitlens_welcome&utm_medium=banner&utm_campaign=gitlens"
 					>
 						<img
 							class="sponsor__image light"
-							src="https://alt-images.codestream.com/codestream_logo_gitlens_welcome_dark.png"
+							src="https://alt-images.codestream.com/codestream_logo_gitlens_web_dark.png"
 							alt="CodeStream Logo &mdash; Pull Requests and Code Reviews in your IDE"
 						/>
 						<img
 							class="sponsor__image dark"
-							src="https://alt-images.codestream.com/codestream_logo_gitlens_welcome_light.png"
+							src="https://alt-images.codestream.com/codestream_logo_gitlens_web_light.png"
 							alt="CodeStream Logo &mdash; Pull Requests and Code Reviews in your IDE"
 						/>
 					</a>
-					<a title="Visit Embark Studios" href="https://embark-studios.com">
+					<a class="sponsor__image-link" title="Visit Embark Studios" href="https://embark-studios.com">
 						<img
 							class="sponsor__image light"
 							src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/sponsors/embark-studios_dark.png"
@@ -436,7 +442,7 @@ <h2>Sponsors</h2>
 							alt="Embark Studios Logo"
 						/>
 					</a>
-					<a title="Visit Localize" href="https://localizejs.com">
+					<a class="sponsor__image-link" title="Visit Localize" href="https://localizejs.com">
 						<img
 							class="sponsor__image light"
 							src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/sponsors/localize_dark.png"