]> _ Git - fluidbook-toolbox.git/commitdiff
wip #6182 footer, css page intro
authorsoufiane <soufiane@cubedesigners.com>
Fri, 28 Jul 2023 17:14:00 +0000 (19:14 +0200)
committersoufiane <soufiane@cubedesigners.com>
Fri, 28 Jul 2023 17:14:00 +0000 (19:14 +0200)
resources/quizv2/style/004-mixins.sass
resources/quizv2/style/100-global.sass
resources/quizv2/style/101-header-footer.sass
resources/views/quizv2/footer.blade.php
resources/views/quizv2/screens/intro.blade.php

index f353733404e8746563ea0f3f9258c34fd48ea592..3a7bd8220835fd2e5f2479f4201736d2b4b7756f 100644 (file)
@@ -40,3 +40,7 @@
     font-size: #{$size}px
     line-height: map-get($fonts-size,$size)
 
+@mixin padding-container()
+    padding: 16px
+    +breakpoint(md)
+        padding: 24px
index 4dcff0b1cf9fa5a93d23e32b23582706d1cb54cb..7120e1fe6c3fcba619bbb58d90c26d4651e347c1 100644 (file)
@@ -16,21 +16,36 @@ body
     min-height: 680px
     margin: 0 auto
     padding: 0 24px 24px
+    position: relative
 
 .radius
     border-radius: 16px
 
 .btn
-    padding: 12px
+    padding: 12px
     text-align: center
     font-size: 20px
     border: none
     cursor: pointer
     display: inline-block
+    height: 58px
+    +flex-config(center,false,false,center)
     @extend .radius
+    +font-size(20)
     &.primary
-        background: radial-gradient(at 16% 7px, rgba(255,102,186,1) 0%, rgba(208,22,124,1) 91%)
+        background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
+        box-shadow: 0 4px 6px rgba(0,0,0,.2)
     &.secondary
-
+        background-color: #{$texts-color}2f
+        padding-left: 22px
+    &.reset
+        max-width: 144px
+    &.info
+        max-width: 177px
     .access
-        @extend .radius
+        border-radius: 4px
+        padding: 6px 12px
+        +font-size(16)
+        background-color: #{$texts-color}2f
+        text-transform: uppercase
+        margin-left: 16px
index c423942565abd1f4d72f28ab1d6df579a5ac061d..b71c20d1ea75caf2b03f894b658329dcc9eef7b1 100644 (file)
@@ -3,9 +3,20 @@
     +flex-config(space-between,false,row,center)
 #logo
     height: 40px
-
+    filter: brightness(10)
 
 #footer
     position: absolute
-    bottom: 24px
+    bottom: 0
+    left: 0
+    width: 100%
     +flex-config(space-between,false,row,center)
+    +padding-container()
+
+    .btn.primary
+        width: 100%
+        max-width: 400px
+        position: absolute
+        left: 50%
+        bottom: 24px
+        transform: translateX(-50%)
index 57295472f37d3984652915f2eb947eab22342b5c..4c74b1954cac8e592351d145837a372e472b2346 100644 (file)
@@ -1,19 +1,21 @@
 <footer id="footer">
-    @if($reset)
+    @isset($reset)
         <a class="btn secondary">
             Reset
             <span class="access">R</span>
         </a>
-    @endif
+    @endisset
     <a class="btn primary">
         {{$data->intro_button}}
         <span class="access">space</span>
-        <span data-icon="running-man"></span>
+        @isset($time)
+            <span data-icon="running-man"></span>
+        @endisset
     </a>
-    @if($info)
+    @isset($info)
         <a class="btn secondary">
             More infos
             <span class="access">F1</span>
         </a>
-    @endif
+    @endisset
 </footer>
index 37cbf94a0f3bbe2a6df37cab39b30b45d648685e..655ddacf0092cb54fab4b2db3149483a1e27b9a7 100644 (file)
@@ -3,4 +3,4 @@
     <h2>{{$data->intro_title}}</h2>
     <p>{{$data->intro_text}}</p>
 </div>
-@include('quizv2.footer', ['data', $data])
+@include('quizv2.footer', ['data' => $data])