docs: Make image clickable to zoom in

[ipfire.org.git] / src / sass / main.sass

diff --git a/src/sass/main.sass b/src/sass/main.sass
index b1c7bc949654ccab681bf8a4f6229aac83a68650..9a78cbf2a3e49833870959ccf0caad0ce13e8f67 100644 (file)
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -6,33 +6,62 @@
 // Global Settings
 $family-sans-serif:                            Prompt, sans-serif
 
+$size-1:                                               3rem
+$size-2:                                               2.5rem
+$size-3:                                               2rem
+$size-4:                                               1.5rem
+$size-5:                                               1.25rem
+$size-6:                                               1rem
+$size-7:                                               0.75rem
+
+// Make titles slightly larger
+$title-size:                                   $size-2
+
 // Colour Palette
 $primary:                                              #ff2e52
 $primary-invert:                               #ffffff
-$green:                                                        #3adb76
-$yellow:                                               #e7e247
-$red:                                                  #cc4b47
-$black:                         #000000
+$secondary:                                            #46ffc0
+$secondary-invert:                             #000000
+$success:                                              #1ae210
+$success-invert:                #ffffff
+$danger:                                               #ac001a
+$warning:                                              #f3ff50
+
+// Pride Colours
+$pride-red:                                            #e40303
+$pride-orange:                                 #ff8c00
+$pride-yellow:                                 #ffed00
+$pride-green:                                  #008026
+$pride-blue:                                   #24408e
+$pride-purple:                                 #732982
 
 // Custom Colours
-$lwl:                                                   #6534C8
+$lwl:                                                  #6534C8
 
-$custom-colors: ("lwl" : ($lwl, $white))
+$custom-colors: ("secondary" : ($secondary, $secondary-invert), "lwl" : ($lwl, $white), "pride-red" : ($pride-red, $white), "pride-orange" : ($pride-orange, $black), "pride-yellow" : ($pride-yellow, $black), "pride-green" : ($pride-green, $white), "pride-blue" : ($pride-blue, $white), "pride-purple" : ($pride-purple, $white))
 
 // Use the primary colour for links
-$link:                                                 #000000
+$link:                                                 $primary
 
 // Use black for titles
-$title-color:                   $black
+$title-color:                   $grey-darker
 
 // Use dark grey for text
-$text:                          #4f4f4f
+$text:                          $grey-darker
+
+// Use the primary color for code
+$code:                                                 $primary
 
 @import "../third-party/bulma/sass/utilities/derived-variables.sass"
 
 // Controls
 $control-border-width:                                  4px
 
+// Notifications
+$notification-padding:          1.25rem 1.5rem
+$notification-padding-ltr:      $notification-padding
+$notification-padding-rtl:      $notification-padding
+
 // Breadcrumbs
 $breadcrumb-item-color:         $primary
 $breadcrumb-item-hover-color:   $primary-dark
@@ -42,6 +71,9 @@ $breadcrumb-item-active-color:  $primary
 $section-padding:               3rem 1.5rem
 $section-padding-desktop:       3rem 0.5rem
 
+// Footer
+$footer-padding:                               3rem 1.5rem 3rem
+
 // Import Bulma
 @import "../third-party/bulma/sass/utilities/_all.sass"
 @import "../third-party/bulma/sass/base/_all.sass"
@@ -59,3 +91,38 @@ $section-padding-desktop:       3rem 0.5rem
 @import "_icons"
 
 // Custom CSS
+
+html, body
+       min-height: 100vh;
+
+#hero-index
+       position: relative
+       video
+               width: 100%;
+               height: 100%;
+               position: absolute;
+               object-fit: cover;
+               z-index: 0;
+
+.footer
+       a
+               color: $grey
+               &:hover
+                       color: $black
+
+.modal
+       &.is-large
+               .modal-content
+                       +from($modal-breakpoint)
+                               width: $widescreen
+                               max-height: 100%
+
+// Used to wrap text on buttons
+.wrap-text
+    height: max-content;
+    white-space: inherit;
+
+.map
+       width: 100%;
+       height: 100%;
+       min-height: 24rem;