Commit 72ca4598 authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

resolves #8 restrict width of content container

parent 6c807937
Pipeline #2760 passed with stage
in 31 seconds
......@@ -111,16 +111,18 @@
</div>
</section>
<section class="specifications">
<h2 id="specifications">{{ content.specifications.title }}</h2>
{% if content.specifications.subtitle %}
<h3>{{ content.specifications.subtitle }}</h3>
{% endif %}
<div class="content">
{% for content in content.specifications.contents %}
{% if content.type == 'html' %}
{{ content.contents | safe }}
{% endif %}
{% endfor %}
<div class="container">
<h2 id="specifications">{{ content.specifications.title }}</h2>
{% if content.specifications.subtitle %}
<h3>{{ content.specifications.subtitle }}</h3>
{% endif %}
<div class="content">
{% for content in content.specifications.contents %}
{% if content.type == 'html' %}
{{ content.contents | safe }}
{% endif %}
{% endfor %}
</div>
</div>
</section>
<section class="tools">
......
......@@ -152,8 +152,8 @@ body {
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding-right: 3rem;
padding-left: 3rem;
padding-left: 2rem;
padding-right: 2rem;
}
.header .menu a {
......@@ -169,10 +169,15 @@ body {
padding: 0.75rem;
margin-left: auto;
}
}
@media screen and (min-width: 1120px) {
.header > nav {
padding-right: 7rem;
padding-left: 7rem;
max-width: 1120px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
......@@ -191,6 +196,8 @@ header .logo > img {
.main > .hero {
background-color: var(--brand-color);
color: white;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
@media screen and (min-width: 768px) {
......@@ -198,11 +205,34 @@ header .logo > img {
background-image: url("../img/dot-watermark.svg");
background-repeat: repeat-y;
background-origin: border-box;
padding-left: 2rem;
padding-right: 2rem;
}
}
@media screen and (min-width: 920px) {
.main > .hero {
padding-left: 5rem;
padding-right: 5rem;
}
}
@media screen and (min-width: 1024px) {
.main > .hero {
padding-left: 7rem;
padding-right: 7rem;
}
}
@media screen and (min-width: 1216px) {
.main > .hero {
padding-left: 10vw;
padding-right: 10vw;
}
}
.main > .hero .content {
max-width: 1080px;
max-width: 1020px;
margin: auto;
display: flex;
flex-direction: column;
......@@ -252,7 +282,7 @@ header .logo > img {
font-family: var(--brand-font-secondary);
font-size: 2.25rem;
font-weight: 700;
max-width: 1150px;
max-width: 1120px;
padding-top: 5.5rem;
padding-bottom: 2.15rem;
display: flex;
......@@ -263,13 +293,13 @@ header .logo > img {
@media (min-width: 640px) {
.main h1 {
font-size: 2.75rem;
font-size: 2.7rem;
}
}
@media (min-width: 1024px) {
.main h1 {
font-size: 3.25rem;
font-size: 3rem;
}
.main > .hero p {
......@@ -379,14 +409,6 @@ section.about {
padding-bottom: 3rem;
}
@media screen and (min-width: 1024px) {
section.about {
background-image: url("../img/grid-watermark.png");
background-repeat: no-repeat;
background-position: right 2.595rem;
}
}
section.about .columns {
display: flex;
flex-direction: column;
......@@ -395,8 +417,13 @@ section.about .columns {
@media screen and (min-width: 1024px) {
section.about {
background-image: url("../img/grid-watermark.png");
background-repeat: no-repeat;
background-position: right 2.595rem;
max-width: 1120px;
padding-top: 9rem;
padding-bottom: 9rem;
margin: auto;
}
section.about .columns {
......@@ -406,6 +433,13 @@ section.about .columns {
}
}
@media screen and (min-width: 1360px) {
section.about {
max-width: 1360px;
padding-left: 144px;
}
}
@media screen and (min-width: 1216px) {
section.about .columns {
gap: 8rem;
......@@ -419,12 +453,6 @@ section.about .columns {
}
}
@media screen and (min-width: 1100px) {
section.about .columns > .column:first-child {
padding-left: 1rem;
}
}
section.about .columns > .column:first-child {
display: flex;
flex-direction: column;
......@@ -489,8 +517,7 @@ section.try h2 {
section.try {
color: white;
background-color: var(--brand-color);
padding-top: 3rem;
padding-bottom: 3rem;
padding: 3rem 0;
}
@media screen and (min-width: 1024px) {
......@@ -507,6 +534,8 @@ section.try > .container {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
section.try h3 {
......@@ -846,23 +875,27 @@ section.compare .tabset p {
section.specifications {
color: white;
padding-right: 0;
padding-left: 0;
}
section.specifications > .container {
background-color: var(--brand-color);
padding-bottom: 3rem;
padding-top: 3rem;
padding: 3rem 1.5rem;
}
@media screen and (min-width: 640px) {
section.specifications {
section.specifications > .container {
padding-left: 2.625rem;
padding-right: 2.625rem;
border-radius: 1rem;
margin-left: 2rem;
margin-right: 2rem;
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
@media (min-width: 1024px) {
section.specifications {
section.specifications > .container {
padding-left: 7.5rem;
padding-right: 13rem;
}
......@@ -1250,7 +1283,6 @@ section.docs a:hover {
display: grid;
column-gap: 5rem;
row-gap: 2rem;
justify-content: center;
padding-bottom: 3.125rem;
padding-top: 3.375rem;
}
......@@ -1271,7 +1303,6 @@ section.docs a:hover {
position: relative;
background-color: var(--brand-color-900);
display: grid;
justify-content: center;
padding-top: 2rem;
padding-bottom: 3rem;
}
......@@ -1279,6 +1310,7 @@ section.docs a:hover {
.footer .eclipse,
.footer .asciidoc {
grid-template-columns: 250px 250px 250px 250px;
justify-content: start;
padding-right: 2rem;
padding-left: 2rem;
}
......@@ -1385,13 +1417,18 @@ section.docs a:hover {
.footer .asciidoc {
grid-template-columns: 200px 175px 175px 175px;
column-gap: 4rem;
justify-content: center;
}
}
@media screen and (min-width: 1408px) {
.footer .eclipse,
.footer .asciidoc {
grid-template-columns: 250px 250px 250px 250px;
/* must be 1120px
/* columns: 4 * 208px = 832px */
/* gap: 5rem * 3 = 15 * 16px = 240px */
/* padding: 1.5rem * 2 = 3 * 16px = 48px */
grid-template-columns: 208px 208px 208px 208px;
column-gap: 5rem;
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment