/** The home page houses a hero-section and a features sections
*/
home
/** The main hero section div * * height: The height of the section beyond 500px (min-height) will * increase based on its contents (for responsive-design) * background-image - Loads the hero background image from the * $home-background(main.sass) which points to an image file in assets folder * background-position - Centers the background image vertically * background-size - Cover makes sures that the image resizes with * the viewport size */ #hero-section width: 100% height: fit-content min-height: 500px background-image: linear-gradient(to top, rgba(0, 0, 10, 0.5) 0%, rgba(0, 0, 10, 0.8) 100%), url($home-background) background-position: center background-size: cover /** The content holds the header-content and its information * * display - Flex allows the content in this widget to be * vertically aligned inside a div at all resolutions * align-content - Aligns the entire content vertically * flex-direction - The default 'row' flex-direction doesn't look good * height: The height of the section beyond 500px (min-height) will * increase based on its contents (for responsive-design) * text-align - Aligns the text inside the hero-content at the center of * the div **/ #hero-content display: flex align-content: center flex-direction: column width: 70% height: fit-content min-height: 500px margin: auto text-align: center /** The site's main header * * height: The height of the header beyond 100px (min-height) will * increase based on its contents (for responsive-design) */ #hero-header height: fit-content min-height: 100px margin: auto margin-bottom: 10px font-size: 4.0rem font-weight: 600 color: $color-custom-primary /** The site header's information * * height: The height of the header beyond 150px (min-height) will * increase based on its contents (for responsive-design) */ #hero-paragraph height: fit-content min-height: 150px margin: auto margin-top: 0px font-size: 2.0rem color: $color-light-grey /** The site's features section */ #features-section margin-top: 50px text-align: center /** Container holding the features * * display - Flexing allows us to choose 'column' as flex direction for * mobile devices * justify-content - Spacing around puts a certain amount of distance * between the feature items and to the left and right of the group * max-width - The container size cannot go beyond 1012px */ #features-container display: flex justify-content: space-around width: 100% max-width: 1012px margin-left: auto margin-right: auto /** The container for the individual feature item */ .feature width: 30% margin-left: 10px margin-right: 10px text-align: center /** The feature's icon div */ .feature-icon width: 90px height: 90px margin: 0px margin-right: auto margin-left: auto /** The feature icon's SVG element that needs colouring */ g fill: $color-custom-primary /** The feature icon's SVG element that needs colouring */ path fill: $color-custom-primary /** The feature's main title */ .feature-heading margin-bottom: 0px .feature-heading font-size: 22px /** The feature's description text */ .feature-text margin: 0 auto 0 auto text-align: center
@media screen and (max-width: 768px)
#home #hero-section /** Changing the width of the hero-content to fill the width of the screen */ #hero-content width: 100% /** The site's main header * * margin-top - Decreases the top margin as the width decreases */ #hero-header margin-top: 15% margin-bottom: 10px font-size: 36px line-height: 1.3 /** The site header's information * * margin-bottom - Decreases the bottom margin as the width decreases */ #hero-paragraph margin-bottom: 20% font-size: 18px #features-section /** Changing the flex-direction to column for mobile devices */ #features-container flex-direction: column /** The container for the individual feature item */ .feature width: 85% margin: auto margin-bottom: 50px /** The feature's icon div */ .feature-icon width: 85px height: 85px .feature-heading font-size: 20px /** The feature's description text */ .feature-text // margin-top: 5px