wip #6182 @0:20 + mixins, css page intro

diff --git a/app/Elearning/QuizCompiler.php b/app/Elearning/QuizCompiler.php
index e65f1391c90ec0aab15022964a0420ea0fe41058..909cccf8c81bfe81699f2b4acffe727633e35ca2 100644 (file)
--- a/app/Elearning/QuizCompiler.php
+++ b/app/Elearning/QuizCompiler.php
@@ -112,6 +112,8 @@ class QuizCompiler extends Base
         $this->sassVariables['neutral-color'] = $this->theme->neutralColor;
         // Breakpoints
         $this->sassVariables['breakpoints'] = "(sm: (min: '576px',max: '575.98px') , md: (min: '768px',max: '767.98px'), lg: (min: '1024px',max: '1023.98px' ), xl: (min: '1200px', max: '1199.98px'))";
+        // Fonts size
+        $this->sassVariables['fonts-size'] = "(14: 20px, 16: 22px, 20: 28px, 24: 35px)";
 
         $this->writeSass();
     }

diff --git a/resources/quizv2/style/004-mixins.sass b/resources/quizv2/style/004-mixins.sass
index 30b5ed25720f50157e7efbfb8e8c415bee00294a..f353733404e8746563ea0f3f9258c34fd48ea592 100644 (file)
--- a/resources/quizv2/style/004-mixins.sass
+++ b/resources/quizv2/style/004-mixins.sass
@@ -2,16 +2,15 @@
     @media (min-width: $min-width)
         @content
 
+
 @mixin below($max-width)
     @media (max-width: $max-width)
         @content
 
+
 @mixin breakpoint($breakpoint, $direction: min)
-    //check if the supplied breakpoint exists in our breakpoits map
     $breakpoint-values: map-get($breakpoints, $breakpoint)
     $breakpoint: map-get($breakpoint-values, $direction)
-    //check if we are writing styles for larger or smaller screens
-
     @media (#{$direction}-width: $breakpoint)
         @content
 
@@ -35,3 +34,9 @@
 
     @if $align-items != false
         align-items: $align-items
+
+
+@mixin font-size($size)
+    font-size: #{$size}px
+    line-height: map-get($fonts-size,$size)
+

diff --git a/resources/quizv2/style/100-global.sass b/resources/quizv2/style/100-global.sass
index 45056aaf883a37c604e6f73368173bea725a6f58..376432f9578e4e401e8ec36841a5ea37d8b63dda 100644 (file)
--- a/resources/quizv2/style/100-global.sass
+++ b/resources/quizv2/style/100-global.sass
@@ -9,3 +9,18 @@ body
 #quiz
     max-width: 1200px
     margin: 0 auto
+
+.radius
+    border-radius: 16px
+
+.btn
+    padding: 12px
+    text-align: center
+    font-size: 20px
+    border: none
+    cursor: pointer
+    display: inline-block
+    &.primary
+        background: radial-gradient(at 16% 7px, rgba(255,102,186,1) 0%, rgba(208,22,124,1) 91%)
+    //&.secondary
+

diff --git a/resources/quizv2/style/101-header.sass b/resources/quizv2/style/101-header.sass
index 4a393db3a5b6760e72837afea22c61060ac3eade..ed22c309ae4ca40777b417a263bc4a32d97045a5 100644 (file)
--- a/resources/quizv2/style/101-header.sass
+++ b/resources/quizv2/style/101-header.sass
@@ -1,4 +1,5 @@
 #title
     height: 80px
+    +flex-config(space-between,false,row,center)
 #logo
     height: 40px

diff --git a/resources/quizv2/style/102-intro.sass b/resources/quizv2/style/102-intro.sass
new file mode 100644 (file)
index 0000000..4478eb9
--- /dev/null
+++ b/resources/quizv2/style/102-intro.sass
@@ -0,0 +1,8 @@
+#welcome
+    max-width: 590px
+    margin: 0 auto
+    h2
+        margin: 0 0 12px
+        +font-size(20)
+    p
+        +font-size(16)

diff --git a/resources/quizv2/style/style.sass b/resources/quizv2/style/style.sass
index 0f1327e959120c06cc0dff54a6aeabd440a2982a..b621654e9ddbe1a60c7cb7f98a116d328fc41974 100644 (file)
--- a/resources/quizv2/style/style.sass
+++ b/resources/quizv2/style/style.sass
@@ -5,3 +5,4 @@
 
 @import 100-global
 @import 101-header
+@import 102-intro

diff --git a/resources/views/quizv2/index.blade.php b/resources/views/quizv2/index.blade.php
index 26d8380626c59802adbbd4e3470e4cb50cc33e36..bfcfe6e87cf7e9a6f976eb69684085214a59a984 100644 (file)
--- a/resources/views/quizv2/index.blade.php
+++ b/resources/views/quizv2/index.blade.php
@@ -21,7 +21,7 @@
         <div class="screen" id="welcome">
             <h2>{{$data->intro_title}}</h2>
             <p>{{$data->intro_text}}</p>
-            <a class="btn">{{$data->intro_button}} <span data-icon="running-man"></span></a>
+            <a class="btn primary radius">{{$data->intro_button}} <span data-icon="running-man"></span></a>
         </div>
     @endif
 </div>