Skip to content

Commit

Permalink
Narrow home page (#1191)
Browse files Browse the repository at this point in the history
* Narrow home page
#574

* The contributors uses full width grid template area.
This is redundant now.

* Fix the grid columns rendering.

* Optimize the contributors block rendering on different displays.
Ordered MQs in logical order.
Removed redundant CSS code.

* CSS Linting

* Fix off-centered .intro on mobile displays.

* Add block container, revert adding .container to other HTMLs

* Revert changes.

* Fix cut content issue.

* Remove extras due to #870

* Fix potential horizontal scroll in some scenario.
Minimize the HTML changes

* Reindenting.
  • Loading branch information
catalinred authored Aug 10, 2020
1 parent d691bac commit ac599b6
Show file tree
Hide file tree
Showing 6 changed files with 73 additions and 95 deletions.
112 changes: 52 additions & 60 deletions src/static/css/index.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/* Related to #maincontent's vw unit width */
body {
overflow-x: hidden;
}

header.alt-bg {
background: #5c687d;
background: transparent linear-gradient(#5c687d 70%, transparent 30%);
Expand All @@ -17,33 +12,16 @@ header.alt-bg {
margin-bottom: -52.94em;
}

header .container,
footer .container {
max-width: none;
padding-left: 60px;
padding-right: 60px;
}

#maincontent {
overflow: hidden;
display: -ms-grid;
display: grid;
grid-template-areas:
'intro'
'chapter'
'contributors'
'methodology';

/* Overcome the .container parent wrapper */
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
}

#maincontent section {
max-width: 100vw;
position: relative;
'. intro .'
'. chapter .'
'contributors contributors contributors'
'. methodology .';
/* 1280 is same as the .container width */
grid-template-columns: 1fr minmax(auto, 1280px) 1fr;
}

.featured-chapter,
Expand Down Expand Up @@ -77,14 +55,15 @@ p {
grid-template-areas: 'intro image';
grid-gap: 2rem;
justify-content: space-between;
padding: 0 60px;
}

.intro {
-ms-grid-column: 1;
grid-area: intro;
width: 100%;
max-width: 420px;
max-width: 440px;
/* match the .container side padding */
padding-left: 20px;
}

.intro-year {
Expand Down Expand Up @@ -183,13 +162,15 @@ p {
.contributors-container {
-ms-grid-row: 3;
grid-area: contributors;
display: flex;
align-items: center;
justify-content: space-between;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDIiIGhlaWdodD0iMzMwIiB2aWV3Qm94PSIwIDAgMzAyIDMzMCI+CiAgPHBhdGggb3BhY2l0eT0iLjMiIGZpbGw9IiNmN2Y3NzkiIGQ9Ik0tMTcxMiAyNTdIMjI1djczaC0xOTM3eiIvPgogIDxwYXRoIG9wYWNpdHk9Ii45IiBmaWxsPSIjYThjYWJhIiBkPSJNLTE2NDAgMTM2SDI5N3Y3M2gtMTkzN3oiLz4KICA8cGF0aCBvcGFjaXR5PSIuOSIgZmlsbD0iI2Y3Zjc3OSIgZD0iTS0xNjc3IDE2NkgyNjB2NzNoLTE5Mzd6Ii8+CiAgPHBhdGggb3BhY2l0eT0iLjkiIGZpbGw9IiM0YTMyNDQiIGQ9Ik0tMTc3MiAzSDE2NXY3M2gtMTkzN3oiLz4KPC9zdmc+);
background-position: -150px center;
background-repeat: no-repeat;
padding-left: 180px;
}

.contributors-container .container {
display: flex;
align-items: center;
justify-content: space-between;
}

.contributors .btn {
Expand Down Expand Up @@ -308,6 +289,10 @@ p {
}

@media (max-width: 1400px) and (min-width: 901px) {
.contributors-container {
padding-left: 180px;
}

.people {
height: auto;
}
Expand All @@ -318,7 +303,6 @@ p {
line-height: 400px;
top: 50px;
position: relative;
left: 50px;
}

.people .character {
Expand Down Expand Up @@ -382,8 +366,6 @@ p {
}

.contributors-container {
background-image: none;
flex-direction: column;
padding: 40px 60px;
}

Expand Down Expand Up @@ -464,7 +446,39 @@ p {
}
}

/* Mobile View */
@media (max-width: 900px) {
.intro-year {
display: block;
color: #f7f779;
font-size: 190px;
font-size: min(190px, 40vw);
line-height: 1;
font-weight: 700;
}

.intro-image-wrapper {
margin: 3rem 0;
max-width: 100vw;
}

.intro-image-wrapper svg {
display: none;
}

.intro {
/* reset the .container side padding */
padding-left: 0;
}

.contributors-container {
background-image: none;
}

.contributors-container .container {
flex-direction: column;
}
}

@media (max-width: 600px) {
header.alt-bg {
background-size: cover;
Expand Down Expand Up @@ -542,8 +556,6 @@ p {

/* Contributors */
.contributors-container {
flex-direction: column;
background-image: none;
padding: 0 60px 300px;
}

Expand Down Expand Up @@ -619,23 +631,3 @@ p {
margin: 0;
}
}

@media (max-width: 900px) {
.intro-year {
display: block;
color: #f7f779;
font-size: 190px;
font-size: min(190px, 40vw);
line-height: 1;
font-weight: 700;
}

.intro-image-wrapper {
margin: 3rem 0;
max-width: 100vw;
}

.intro-image-wrapper svg {
display: none;
}
}
8 changes: 5 additions & 3 deletions src/templates/base/2019/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -177,9 +177,11 @@
</header>
{% endblock %}

<div class="container">
{% block main %}{% endblock %}
</div>
{% block container %}
<div class="container">
{% block main %}{% endblock %}
</div>
{% endblock %}

{% block footer %}
<footer id="footer" class="alt-bg">
Expand Down
8 changes: 0 additions & 8 deletions src/templates/base/2019/contributors.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@
{% block styles %}
{{ super() }}
<style nonce="{{ csp_nonce() }}">
.main {
padding-left: 10px;
padding-right: 10px;
}
.team {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -167,10 +163,6 @@
{% endfor %}

@media (max-width: 600px) {
.main {
padding-left: 0;
padding-right: 0;
}
.team {
height: 100px;
}
Expand Down
28 changes: 15 additions & 13 deletions src/templates/base/2019/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<link rel="stylesheet" href="/static/css/index.css?v=20200728001611">
{% endblock %}

{% block main %}
{% block container %}
<main id="maincontent">
<section id="intro" class="intro-container">
<div class="intro">
Expand All @@ -45,18 +45,20 @@ <h2>{{ self.intro_sub_title() }}</h2>
</section>
{% include "%s/2019/featured_chapters.html" % lang %}
<section id="contributors" class="contributors-container alt-bg">
<div class="contributors">
<h2 class="title title-alt">{{ self.contributors_title() }}</h2>
<p>{{ self.contributors_description() }}</p>
<a href="{{ url_for('contributors', year=year, lang=lang) }}" class="alt btn">
{{ self.contributors_link() }}
</a>
</div>
<div class="people" aria-hidden="true">
<div class="people-number">{{ self.contributors() }}</div>
<img id="character-markup" class="character" src="/static/images/character-markup.png" alt="" width="154" height="252" loading="lazy" />
<img id="character-star" class="character" src="/static/images/character-star.png" alt="" width="245" height="254" loading="lazy" />
<img id="character-hat" class="character" src="/static/images/character-hat.png" alt="" width="186" height="207" loading="lazy" />
<div class="container">
<div class="contributors">
<h2 class="title title-alt">{{ self.contributors_title() }}</h2>
<p>{{ self.contributors_description() }}</p>
<a href="{{ url_for('contributors', year=year, lang=lang) }}" class="alt btn">
{{ self.contributors_link() }}
</a>
</div>
<div class="people" aria-hidden="true">
<div class="people-number">{{ self.contributors() }}</div>
<img id="character-markup" class="character" src="/static/images/character-markup.png" alt="" width="154" height="252" loading="lazy" />
<img id="character-star" class="character" src="/static/images/character-star.png" alt="" width="245" height="254" loading="lazy" />
<img id="character-hat" class="character" src="/static/images/character-hat.png" alt="" width="186" height="207" loading="lazy" />
</div>
</div>
</section>
<section id="methodology" class="methodology-container">
Expand Down
10 changes: 0 additions & 10 deletions src/templates/base/2019/table_of_contents.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,6 @@
{% block styles %}
{{ super() }}
<style nonce="{{ csp_nonce() }}">
.main {
margin-bottom: 100px;
padding-left: 10px;
padding-right: 10px;
}

.contents-wrapper {
display: grid;
grid-template-areas: 'parts characters';
Expand Down Expand Up @@ -82,10 +76,6 @@
.contents-wrapper {
display: block;
}
.main {
padding-left: 0;
padding-right: 0;
}
.parts {
max-width: 100%;
}
Expand Down
2 changes: 1 addition & 1 deletion src/templates/base/2020/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
<li><a href="{{ url_for('contributors', year=year, lang=lang) }}">{{ self.contributors_title() }}</a></li>
{% endblock %}

{% block main %}
{% block container %}
<main id="maincontent">
<section id="intro" class="intro-container">
<div class="intro">
Expand Down

0 comments on commit ac599b6

Please sign in to comment.