location: Update layout to Bulma

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

@charset "utf-8"

// Import some basic variables from Bulma
@import "../third-party/bulma/sass/utilities/initial-variables.sass"

// Global Settings
$family-sans-serif:				Prompt, sans-serif

// Colour Palette
$primary:						#ff2e52
$primary-invert:				#ffffff
$secondary:						#46ffc0
$secondary-invert:				#000000
$success:						#1ae210
$success-invert:                #ffffff
$danger:						#ac001a
$warning:						#f3ff50

// Custom Colours
$lwl:                                                   #6534C8

$custom-colors: ("secondary" : ($secondary, $secondary-invert), "lwl" : ($lwl, $white))

// Use the primary colour for links
$link:							$primary

// Use black for titles
$title-color:                   $grey-darker

// Use dark grey for text
$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

// Breadcrumbs
$breadcrumb-item-color:         $primary
$breadcrumb-item-hover-color:   $primary-dark
$breadcrumb-item-active-color:  $primary

// section
$section-padding:               3rem 1.5rem
$section-padding-desktop:       3rem 0.5rem

// Import Bulma
@import "../third-party/bulma/sass/utilities/_all.sass"
@import "../third-party/bulma/sass/base/_all.sass"
@import "../third-party/bulma/sass/components/_all.sass"
@import "../third-party/bulma/sass/elements/_all.sass"
@import "../third-party/bulma/sass/form/_all.sass"
@import "../third-party/bulma/sass/grid/_all.sass"
@import "../third-party/bulma/sass/helpers/_all.sass"
@import "../third-party/bulma/sass/layout/_all.sass"

// Import fonts
@import "_fonts"

// Import icons
@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

// Used to wrap text on buttons
.wrap-text
    height: max-content;
    white-space: inherit;

.map
	width: 100%;
	height: 100%;
	min-height: 24rem;