forked from M-Labs/web2019
feat(homepage): Adds responsiveness
This commit is contained in:
parent
973f6945dd
commit
f4f8d89c61
|
|
@ -116,3 +116,11 @@ a {
|
|||
font-size: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
.navbar-toggler {
|
||||
outline: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
@ -37,3 +15,52 @@ 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) {
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
<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="/">
|
||||
<img src="{{ get_url(path='images/logo@2x.png') }}" height="25" alt="logo">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
<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') %}
|
||||
{% for section in section.subsections %}
|
||||
|
|
@ -60,11 +60,11 @@
|
|||
|
||||
{% 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">
|
||||
{{ subsection.title }}
|
||||
</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 %}
|
||||
<a class="dropdown-item pt-3 pb-3" href="{{ page.permalink }}">{{ page.title }}</a>
|
||||
{% endfor %}
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
|
||||
{% 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>
|
||||
</li>
|
||||
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
@ -206,15 +206,15 @@
|
|||
|
||||
<!-- FOOTER -->
|
||||
|
||||
<footer class="container">
|
||||
<footer class="container text-center text-md-left">
|
||||
|
||||
<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>
|
||||
|
||||
<table class="w-50">
|
||||
<table class="w-100 col-12 col-lg-8">
|
||||
|
||||
<tbody>
|
||||
|
||||
|
|
@ -260,7 +260,7 @@
|
|||
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue