From f4f8d89c6150b8a5f8c9d20f345ecc706aec35e4 Mon Sep 17 00:00:00 2001 From: sovanna Date: Wed, 3 Jul 2019 12:55:58 +0200 Subject: [PATCH] feat(homepage): Adds responsiveness --- sass/css/_base.scss | 8 +++++ sass/css/_layout.scss | 75 +++++++++++++++++++++++++++++-------------- templates/index.html | 22 ++++++------- 3 files changed, 70 insertions(+), 35 deletions(-) diff --git a/sass/css/_base.scss b/sass/css/_base.scss index 37e6b7f..2598a84 100644 --- a/sass/css/_base.scss +++ b/sass/css/_base.scss @@ -115,4 +115,12 @@ a { .btn-lg { font-size: 1rem; padding: 1rem 1.25rem; +} +.navbar-toggler { + outline: none; + + &:focus, + &:hover { + outline: none; + } } \ No newline at end of file diff --git a/sass/css/_layout.scss b/sass/css/_layout.scss index fdf4bfb..3601780 100644 --- a/sass/css/_layout.scss +++ b/sass/css/_layout.scss @@ -1,28 +1,6 @@ .hero { - height: 692px; - background: url("../images/hero@2x.png") repeat-x top center; - -webkit-background-size: contain; - -moz-background-size: contain; - -o-background-size: contain; - background-size: contain; - - h1 { - color: $background-color; - margin-bottom: 30px; - margin-top: -100px; - } -} - -main { - margin-top: -150px; -} - -.card-artiq { - background: #fff url("../images/artiq@2x.png") no-repeat top right; -} - -.card-gateware { - background: #fff url("../images/gateware@2x.png") no-repeat top right; + height: 230px; + background: none; } .card h5, @@ -36,4 +14,53 @@ h3 { .shadow.sticky-top { background: #fff; +} + + +// Small devices (landscape phones, 576px and up) +@media (min-width: 576px) { + +} + +// Medium devices (tablets, 768px and up) +@media (min-width: 768px) { +} + +// Large devices (desktops, 992px and up) +@media (min-width: 992px) { + .hero { + // height: 692px; + height: calc(100vh - 300px); + background: url("../images/hero@2x.png") repeat-x top center; + -webkit-background-size: contain; + -moz-background-size: contain; + -o-background-size: contain; + background-size: contain; + + h1 { + color: $background-color; + margin-bottom: 30px; + margin-top: -100px; + } + } + + main { + margin-top: -150px; + } + + .shadow-lg { + box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; + } + + .card-artiq { + background: #fff url("../images/artiq@2x.png") no-repeat top right; + } + + .card-gateware { + background: #fff url("../images/gateware@2x.png") no-repeat top right; + } +} + +// Extra large devices (large desktops, 1200px and up) +@media (min-width: 1200px) { } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 34994c2..30caa9d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -39,7 +39,7 @@
-