From e2c2fefc36cfa906034152289fe4c916e9a8d46b Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 27 Dec 2016 23:30:11 +0100
Subject: Add illustration to getting started column

---
 .../javascripts/components/features/getting_started/index.jsx |  2 ++
 app/assets/stylesheets/components.scss                        | 11 +++++++++++
 2 files changed, 13 insertions(+)

(limited to 'app')

diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
index fdd594621..157bdf8f2 100644
--- a/app/assets/javascripts/components/features/getting_started/index.jsx
+++ b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -48,6 +48,8 @@ const GettingStarted = ({ intl, me }) => {
         <p><FormattedMessage id='getting_started.about_shortcuts' defaultMessage='If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.' /></p>
         <p><FormattedMessage id='getting_started.about_developer' defaultMessage='The developer of this project can be followed as Gargron@mastodon.social' /></p>
       </div>
+
+      <div className='getting-started__illustration' />
     </Column>
   );
 };
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 9f2d1217f..88808b085 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -332,6 +332,7 @@
 
 .column {
   width: 330px;
+  position: relative;
 }
 
 .drawer {
@@ -575,3 +576,13 @@
     color: #fff;
   }
 }
+
+.getting-started__illustration {
+  width: 330px;
+  height: 235px;
+  background: image-url('mastodon-getting-started.png') no-repeat 0 0;
+  position: absolute;
+  pointer-events: none;
+  bottom: 0;
+  left: 0;
+}
\ No newline at end of file
-- 
cgit