Refactoring homepage to be mobile friendly
This commit is contained in:
Andrew Selzer
parent
d4893d692d
commit
6c69c821b3
3 changed files with 147 additions and 15 deletions
|
|
@ -50,6 +50,9 @@
|
|||
|
||||
/* Small devices (landscape phones, less than 48em) */
|
||||
@media (max-width: 768px) {
|
||||
.content {
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
.display-1 {
|
||||
font-size: 400%;
|
||||
}
|
||||
|
|
@ -68,17 +71,58 @@
|
|||
}
|
||||
/* Extra small devices (portrait phones, less than 34em) */
|
||||
@media (max-width: 544px) {
|
||||
|
||||
.beeware-logo {
|
||||
display: block;
|
||||
margin: 15px auto 35px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 7em;
|
||||
}
|
||||
|
||||
.display-1 {
|
||||
font-size: 270%;
|
||||
/* TODO: Once Bootstrap is upgraded, instead use class text-xs-center */
|
||||
text-align: center;
|
||||
}
|
||||
.display-2 {
|
||||
font-size: 125%;
|
||||
font-size: 105%;
|
||||
/* TODO: Once Bootstrap is upgraded, instead use class text-xs-center */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer .copyright {
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-social, .footer-sitemap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.jumbotron .btn-lg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.jumbotron p {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.jumbotron-buttons a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 300px;
|
||||
height: 225px;
|
||||
|
|
@ -101,11 +145,6 @@
|
|||
Main styles
|
||||
--------------------------------------------------- */
|
||||
|
||||
.content {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 5em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Cutive', serif;
|
||||
margin-top: 1em;
|
||||
|
|
@ -177,6 +216,9 @@ h6:first-child {
|
|||
margin-top: 0.8rem;
|
||||
}
|
||||
|
||||
a i {
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
nav {
|
||||
font-family: 'Cutive', serif;
|
||||
}
|
||||
|
|
@ -289,6 +331,10 @@ body {
|
|||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
margin: 0 0.75em;
|
||||
}
|
||||
|
||||
|
||||
/*----------------------------------------------------
|
||||
Carousels in gutter
|
||||
|
|
|
|||
|
|
@ -19,12 +19,14 @@
|
|||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="hidden-xl-down"><img class="float-left" src="{{ '/static/images/brutus-270.png'|asseturl }}"></div>
|
||||
<div class="col-8">
|
||||
<div class="hidden-xl-down col-xl-4">
|
||||
<img class="beeware-logo float-sm-left" src="{{ '/static/images/brutus-270.png'|asseturl }}">
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-8">
|
||||
<h1 class="display-1">BeeWare</h1>
|
||||
<h2 class="display-2">{{ this.title }}</h2>
|
||||
<p>{{ this.description }}</p>
|
||||
<p>
|
||||
<p class="jumbotron-buttons">
|
||||
{% for blk in this.header.blocks %}
|
||||
{{ blk }}
|
||||
{% endfor %}
|
||||
|
|
@ -36,6 +38,8 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<!-- MD and Larger Project List -->
|
||||
<div class="row">
|
||||
<div class="col-sm-7 mr-auto">
|
||||
{% for blk in this.body.blocks %}
|
||||
|
|
@ -54,7 +58,7 @@
|
|||
</div><!-- / main content -->
|
||||
|
||||
|
||||
<div class="col-sm-4">
|
||||
<div class="d-none d-sm-block col-sm-4">
|
||||
<div class="sidebar-module sidebar-module-inset gutter">
|
||||
|
||||
{{ this.gutter_top }}
|
||||
|
|
@ -126,4 +130,76 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SM Project List -->
|
||||
<div class="row" style="background-color: #e9ecef;">
|
||||
<div class="col-sm-12 d-block d-sm-none gutter">
|
||||
{{ this.gutter_top }}
|
||||
<div id="carousel-members" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-members" data-slide-to="0" class="active"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
<div class="carousel-item active">
|
||||
<p><a href="{{ '/community/members/revsys/'|url(alt=this.alt) }}"><img class="img-fluid" src="/community/members/revsys/revsys-large.png"></a></p>
|
||||
<p>{{ t_ad_hoc_sponsor }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h3><a href="{{ '/news/buzz/'|url(alt=this.alt) }}">{{ t_latest_news }}</a></h3>
|
||||
{% set blog = site.query('/news/buzz', alt=this.alt).all() %}
|
||||
<p><a href="{{ blog[0]|url(alt=this.alt) }}">{{ blog[0].pub_date.strftime("%d %b")}}: {{ blog[0].title }}</a></p>
|
||||
|
||||
<hr/>
|
||||
|
||||
{% set events = site.query('/news/events', alt=this.alt).filter(F.upcoming==True) %}
|
||||
{% if events %}
|
||||
<h3><a href="{{ '/news/events/'|url(alt=this.alt) }}">{{ t_meet_team }}</a></h3>
|
||||
|
||||
<div id="carousel-events" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
{% for event in events %}
|
||||
<li data-target="#carousel-events" data-slide-to="{{ loop.index0 }} "{% if loop.index0 == 0 %} class="active"{% endif %}></li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
<div class="carousel-inner" role="listbox">
|
||||
{% for event in events %}
|
||||
<div class="carousel-item{% if loop.index0 == 0 %} active{% endif %}">
|
||||
<h4><a href="{{ event|url(alt=this.alt) }}">{{ event.title }}</a></h4>
|
||||
{% if event.event_type == "keynote" %}
|
||||
{{ event.speaker[0] }} {{ t_keynoting }}
|
||||
{% elif event.event_type == "talk" %}
|
||||
{{ event.speaker[0] }} {{ t_speaking }}
|
||||
{% elif event.event_type == "tutorial" %}
|
||||
{{ event.speaker[0] }} {{ t_tutorial }}
|
||||
{% elif event.event_type == "booth" %}
|
||||
{{ t_come_see_us }}
|
||||
{% elif event.event_type == "sprint" %}
|
||||
{{ t_sprinting }}
|
||||
{% else %} <br>
|
||||
{% endif %}
|
||||
<p>{{ event.date.strftime("%d %B %Y") }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
{% endif %}
|
||||
<h2><a href="{{ '/project/projects/'|url(alt=this.alt) }}">{{ t_projects }}</a></h2>
|
||||
{% set project_types = site.query('/project/projects', alt=this.alt) %}
|
||||
{% for project_type in project_types %}
|
||||
{% for project in site.query(project_type.path, alt=this.alt).filter(F.showcase==True) %}
|
||||
<div>
|
||||
<h4><a href="{{ project|url(alt=this.alt) }}"><img src="{{ site.get(project.path)|url }}{{ project.image }}" height="32px" alt="{{ project.name }}"> {{ project.name }}</h4></a>
|
||||
{{ project.short_description|string|wordwrap(width=40, wrapstring='<br>')|safe }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{{ this.gutter_bottom }}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -180,12 +180,22 @@ ga('send', 'pageview');
|
|||
|
||||
<footer class="footer">
|
||||
<div class="container text-muted">
|
||||
<div class="float-right clearfix">© Russell Keith-Magee 2017</div>
|
||||
<p><a href="https://github.com/pybee/"><i class="fa fa-github fa-lg" aria-hidden="true"></i> GitHub</a> |
|
||||
<div class="d-block d-sm-none copyright">© Russell Keith-Magee 2018</div>
|
||||
<div class="float-right clearfix d-sm-block d-none">© Russell Keith-Magee 2018</div>
|
||||
<p class="d-sm-block d-none">
|
||||
<a href="https://github.com/pybee/"><i class="fa fa-github fa-lg" aria-hidden="true"></i> GitHub</a> |
|
||||
<a href="https://gitter.im/pybee/general/"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i> Gitter</a> |
|
||||
<a href="https://twitter.com/PyBeeWare/"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i> Twitter</a> |
|
||||
<a href="{{ '/sitemap'|url(alt=this.alt) }}"><i class="fa fa-sitemap fa-lg" aria-hidden="true"></i> {{ t_sitemap }}</a>
|
||||
</p>
|
||||
<p class="d-block d-sm-none footer-social">
|
||||
<a href="https://github.com/pybee/"><i class="fa fa-github fa-lg" aria-hidden="true"></i> GitHub</a> |
|
||||
<a href="https://gitter.im/pybee/general/"><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i> Gitter</a> |
|
||||
<a href="https://twitter.com/PyBeeWare/"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i> Twitter</a>
|
||||
</p>
|
||||
<p class="d-block d-sm-none footer-sitemap">
|
||||
<a href="{{ '/sitemap'|url(alt=this.alt) }}"><i class="fa fa-sitemap fa-lg" aria-hidden="true"></i> {{ t_sitemap }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue