diff --git a/gulpfile.js b/gulpfile.js index e774ed1..a1d6e0c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -27,7 +27,7 @@ var packageFilesWhitelist = [ 'src/index.html', 'src/app-icons/*.png', 'src/media/css/include.css', - 'src/media/fonts/FiraSans/firasansot-regular-webfont.*', + 'src/media/fonts/FiraSans/*', 'src/tutorial/*', 'src/tutorial/css/*', 'src/tutorial/img/*', diff --git a/locale/en_US/LC_MESSAGES/messages.po b/locale/en_US/LC_MESSAGES/messages.po index 9591336..a38af57 100644 --- a/locale/en_US/LC_MESSAGES/messages.po +++ b/locale/en_US/LC_MESSAGES/messages.po @@ -26,6 +26,10 @@ msgstr "by {author}" msgid "URL" msgstr "URL" +#: /templates/tutorial.html +msgid "Learn how to use" +msgstr "Learn how to use" + #: /templates/tutorial.html msgid "Press OK to open and use an app" msgstr "Press OK to open and use an app" diff --git a/src/media/css/lib/typography.styl b/src/media/css/lib/typography.styl index 12e2194..b3c25c6 100644 --- a/src/media/css/lib/typography.styl +++ b/src/media/css/lib/typography.styl @@ -1,2 +1,3 @@ // Font Stacks $primary-font-family = "Fira Sans OT", "Fira Sans", FiraSansWeb, sans-serif; +$light-font-family = "Fira Sans OT Light", "Fira Sans Light", FiraSansLightWeb, sans-serif; diff --git a/src/media/css/tutorial.styl b/src/media/css/tutorial.styl index 4b85ee5..2b42850 100644 --- a/src/media/css/tutorial.styl +++ b/src/media/css/tutorial.styl @@ -61,7 +61,7 @@ height: 200px; margin: -100px 0 0 -100px; - background-image: url('../img/pinner_sprite.png'); + background-image: url('../img/spinner_sprite.png'); animation: spinner 1.133s steps(33) infinite; } @@ -75,20 +75,30 @@ } .slide-section-top { - top: 8%; - width: 150rem; - height: 8rem; - margin-top: -5rem; - font-size: 3.8rem; font-style: italic; - line-height: 8rem; text-align: center; text-shadow: 0 0 5px rgba(0, 0, 0, .5); color: $greyscale-white; + .title { + height: 5.5rem; + margin: 7.5rem 0 6.5rem; + + font-family: $light-font-family; + font-size: 5.5rem; + line-height: 5.5rem; + } + + .description { + height: 8rem; + + font-size: 3.8rem; + line-height: 8rem; + } + b { display: inline-block; margin: 0 .5rem; @@ -96,7 +106,7 @@ border-radius: 4rem; box-shadow: 0 0 5px rgba(0, 0, 0, .5); - font-size: 4.5rem; + font-size: 3.8rem; font-weight: normal; text-indent: -.8rem; text-align: center; @@ -111,55 +121,38 @@ .circle { position: absolute; - top: 50%; + top: (53.1 / 108) * 100%; left: 50%; - width: 21.8rem; - height: 21.8rem; - margin: -10.9rem 0 0 -10.9rem; - padding: 4.5rem 0; + width: 17.5rem; + height: 17.5rem; + margin-left: -8.75rem; border-radius: 50%; - font-size: 1.9rem; + font-size: 1.5rem; font-style: italic; - line-height: 2.5rem; + line-height: 1.5rem; text-align: center; - color: $greyscale-black; + color: $greyscale-white; background-color: $greyscale-white; &::before { content: ''; display: block; - width: 9rem; - height: 9rem; - margin: 0 auto 1.3rem; + width: 7.2rem; + height: 7.2rem; + margin: 5.15rem auto 6.65rem; background-image: url('../img/tutorial_install.png'); + background-size: 100% 100%; } } - - .text { - position: absolute; - top: 2.5%; - left: 50%; - - width: 50rem; - margin: 16.875rem 0 0 -25rem; - - font-size: 4.2rem; - font-style: italic; - line-height: 4.2rem; - text-align: center; - - color: $greyscale-white; - } } .slide-section-bottom { - bottom: 7.5%; - margin-bottom: -2.625rem; + bottom: 6rem;; } .slide-image { diff --git a/src/media/css/typography.styl b/src/media/css/typography.styl index 5dbf8e0..3ca3aa6 100644 --- a/src/media/css/typography.styl +++ b/src/media/css/typography.styl @@ -9,3 +9,15 @@ font-family: FiraSansWeb; font-weight: 400; } + +@font-face { + src: local('FiraSansOTLight'), + local('FiraSansLight'), + local('Fira Sans OT Light'), + local('Fira Sans Light'), + url('../fonts/FiraSans/firasansot-light-webfont.woff') format('woff'), + url('../fonts/FiraSans/firasansot-light-webfont.ttf') format('truetype'), + url('../fonts/FiraSans/firasansot-light-webfont.svg#fira_sans_otlight') format('svg'); + font-family: FiraSansLightWeb; + font-weight: 300; +} diff --git a/src/media/fonts/FiraSans/firasansot-light-webfont.eot b/src/media/fonts/FiraSans/firasansot-light-webfont.eot new file mode 100755 index 0000000..02ba84d Binary files /dev/null and b/src/media/fonts/FiraSans/firasansot-light-webfont.eot differ diff --git a/src/media/fonts/FiraSans/firasansot-light-webfont.svg b/src/media/fonts/FiraSans/firasansot-light-webfont.svg new file mode 100755 index 0000000..a21f209 --- /dev/null +++ b/src/media/fonts/FiraSans/firasansot-light-webfont.svg @@ -0,0 +1,953 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/media/fonts/FiraSans/firasansot-light-webfont.ttf b/src/media/fonts/FiraSans/firasansot-light-webfont.ttf new file mode 100755 index 0000000..035e915 Binary files /dev/null and b/src/media/fonts/FiraSans/firasansot-light-webfont.ttf differ diff --git a/src/media/fonts/FiraSans/firasansot-light-webfont.woff b/src/media/fonts/FiraSans/firasansot-light-webfont.woff new file mode 100755 index 0000000..b2e5149 Binary files /dev/null and b/src/media/fonts/FiraSans/firasansot-light-webfont.woff differ diff --git a/src/media/img/pinner_sprite.png b/src/media/img/spinner_sprite.png similarity index 100% rename from src/media/img/pinner_sprite.png rename to src/media/img/spinner_sprite.png diff --git a/src/media/img/tutorial_1.png b/src/media/img/tutorial_1.png index 2c7c444..70a80cf 100755 Binary files a/src/media/img/tutorial_1.png and b/src/media/img/tutorial_1.png differ diff --git a/src/media/img/tutorial_2.png b/src/media/img/tutorial_2.png index ca955d8..dca1c9e 100755 Binary files a/src/media/img/tutorial_2.png and b/src/media/img/tutorial_2.png differ diff --git a/src/media/img/tutorial_3.png b/src/media/img/tutorial_3.png index 3db8eb8..f5a9196 100755 Binary files a/src/media/img/tutorial_3.png and b/src/media/img/tutorial_3.png differ diff --git a/src/templates/tutorial.html b/src/templates/tutorial.html index c9667cf..73c7979 100644 --- a/src/templates/tutorial.html +++ b/src/templates/tutorial.html @@ -2,12 +2,13 @@ {% for i in range(1, 4) %}