feat(homepage): Adds responsiveness

This commit is contained in:
sovanna 2019-07-03 12:55:58 +02:00
parent 973f6945dd
commit f4f8d89c61
3 changed files with 70 additions and 35 deletions

View File

@ -115,4 +115,12 @@ a {
.btn-lg { .btn-lg {
font-size: 1rem; font-size: 1rem;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
}
.navbar-toggler {
outline: none;
&:focus,
&:hover {
outline: none;
}
} }

View File

@ -1,28 +1,6 @@
.hero { .hero {
height: 692px; height: 230px;
background: url("../images/hero@2x.png") repeat-x top center; background: none;
-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;
} }
.card h5, .card h5,
@ -36,4 +14,53 @@ h3 {
.shadow.sticky-top { .shadow.sticky-top {
background: #fff; 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) {
} }

View File

@ -39,7 +39,7 @@
<header class="container"> <header class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-th-1 justify-content-center justify-content-md-between pt-3 pb-3" role="navigation"> <nav class="navbar navbar-expand-lg navbar-light bg-th-1 justify-content-center justify-content-between pt-3 pb-3" role="navigation">
<a class="navbar-brand logo mr-0" href="/"> <a class="navbar-brand logo mr-0" href="/">
<img src="{{ get_url(path='images/logo@2x.png') }}" height="25" alt="logo"> <img src="{{ get_url(path='images/logo@2x.png') }}" height="25" alt="logo">
@ -51,7 +51,7 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-md-auto text-center text-md-left pt-2 pb-2 pt-md-0 pb-md-0"> <ul class="navbar-nav ml-0 ml-md-auto text-right text-lg-left pt-2 pb-2 pt-md-0 pb-md-0">
{% set section = get_section(path='_index.md') %} {% set section = get_section(path='_index.md') %}
{% for section in section.subsections %} {% for section in section.subsections %}
@ -60,11 +60,11 @@
{% if subsection.pages|length > 0 %} {% if subsection.pages|length > 0 %}
<li class="nav-item ml-4 dropdown {% if current_path == subsection.path %}active{% endif %}"> <li class="nav-item ml-0 ml-md-4 dropdown {% if current_path == subsection.path %}active{% endif %}">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ subsection.title }} {{ subsection.title }}
</a> </a>
<div class="dropdown-menu shadow" aria-labelledby="navbarDropdown"> <div class="dropdown-menu shadow-none shadow-lg text-right text-lg-left" aria-labelledby="navbarDropdown">
{% for page in subsection.pages %} {% for page in subsection.pages %}
<a class="dropdown-item pt-3 pb-3" href="{{ page.permalink }}">{{ page.title }}</a> <a class="dropdown-item pt-3 pb-3" href="{{ page.permalink }}">{{ page.title }}</a>
{% endfor %} {% endfor %}
@ -73,7 +73,7 @@
{% else %} {% else %}
<li class="nav-item ml-4 {% if current_path == subsection.path %}active{% endif %}"> <li class="nav-item ml-0 ml-md-4 {% if current_path == subsection.path %}active{% endif %}">
<a class="nav-link" href="{{ subsection.permalink }}">{{ subsection.title }}</a> <a class="nav-link" href="{{ subsection.permalink }}">{{ subsection.title }}</a>
</li> </li>
@ -131,7 +131,7 @@
<div class="card-body p-5 card-artiq"> <div class="card-body p-5 card-artiq">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6 pl-0 pr-0">
<h5 class="card-title">ARTIQ</h5> <h5 class="card-title">ARTIQ</h5>
@ -164,7 +164,7 @@
<div class="card-body p-5 card-gateware"> <div class="card-body p-5 card-gateware">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6 pl-0 pr-0">
<h5 class="card-title">Gateware and system-on-chip design</h5> <h5 class="card-title">Gateware and system-on-chip design</h5>
@ -206,15 +206,15 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer class="container"> <footer class="container text-center text-md-left">
<div class="row pt-5 pb-5"> <div class="row pt-5 pb-5">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6 pb-5 pb-md-0">
<h5 class="pb-3">Sales inquiries</h5> <h5 class="pb-3">Sales inquiries</h5>
<table class="w-50"> <table class="w-100 col-12 col-lg-8">
<tbody> <tbody>
@ -260,7 +260,7 @@
<div class="row pb-5"> <div class="row pb-5">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6 pb-5 pb-md-0">
<h5 class="pb-3">Office</h5> <h5 class="pb-3">Office</h5>