Skip to content

Commit 07812ae

Browse files
muzammalrahimmuzammalrahim
authored
Improve boxes layout (#498)
* boxes layout update Fixes #456
1 parent 8729cc3 commit 07812ae

7 files changed

Lines changed: 247 additions & 37 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,5 @@
1111
/saml/saml.key
1212
/saml/saml.crt
1313
/saml/local_metadata.xml
14+
.idea
15+
venv

‎weblate_web/static/style-rtl.css‎

Lines changed: 104 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1168,11 +1168,21 @@ section.bottom .box.join {
11681168
background-image: url("img/box-join.jpg");
11691169
}
11701170

1171+
section.bottom .box.join a {
1172+
position: absolute;
1173+
bottom: 40px;
1174+
}
1175+
11711176
section.bottom .box.donate {
11721177
background-color: #f6664c;
11731178
background-image: url("img/box-donate.jpg");
11741179
}
11751180

1181+
section.bottom .box.donate a {
1182+
position: absolute;
1183+
bottom: 40px;
1184+
}
1185+
11761186
section.bottom .box .title {
11771187
font-size: 40px;
11781188
letter-spacing: -1px;
@@ -1189,7 +1199,7 @@ section.bottom .box p {
11891199
font-size: 20px;
11901200
letter-spacing: 0.5px;
11911201
line-height: 25px;
1192-
margin-bottom: 45px;
1202+
margin-bottom: 70px;
11931203
}
11941204

11951205
body.light .main-menu ul li a {
@@ -2253,10 +2263,6 @@ input[type="radio"]:checked + .biglabel {
22532263
line-height: 26px;
22542264
}
22552265

2256-
.installations .box:nth-child(2) {
2257-
min-height: 500px;
2258-
}
2259-
22602266
.installations .box:nth-child(2n + 1) {
22612267
margin-right: 0;
22622268
}
@@ -2276,9 +2282,9 @@ input[type="radio"]:checked + .biglabel {
22762282
.installations .box ul {
22772283
margin: 0 25px 20px 0;
22782284
max-width: 380px;
2279-
padding: 0;
22802285
list-style: none;
22812286
clear: right;
2287+
padding-bottom: 32px;
22822288
}
22832289

22842290
.installations .box li::before,
@@ -2668,6 +2674,7 @@ h2.section-title.hp-style {
26682674
margin: 0 25px 35px 0;
26692675
padding: 0;
26702676
list-style: none;
2677+
padding-bottom: 40px;
26712678
}
26722679

26732680
.contribution-list .box ul li,
@@ -2758,6 +2765,13 @@ h2.section-title.hp-style {
27582765
.aboutus-list .box.blue {
27592766
background-color: #00d2e6;
27602767
border-radius: 20px 20px 20px 0;
2768+
display: inline-block !important;
2769+
min-height: unset;
2770+
}
2771+
2772+
.aboutus-list .box.green {
2773+
display: inline-block !important;
2774+
min-height: unset;
27612775
}
27622776

27632777
.aboutus-list .box h2 {
@@ -3075,6 +3089,7 @@ input.button.make-payment {
30753089

30763090
.form-line:last-child {
30773091
border-bottom: none;
3092+
border-top: 1px solid #e9eaec;
30783093
}
30793094

30803095
.form-line > div {
@@ -4032,7 +4047,7 @@ input.fullwidth {
40324047
}
40334048
}
40344049

4035-
/* Your Weblate Team - About Us */
4050+
/* About Us Weblate Team */
40364051

40374052
.content-p {
40384053
width: 69%;
@@ -4062,7 +4077,7 @@ input.fullwidth {
40624077

40634078
.weblate-team {
40644079
display: table;
4065-
width: 82%;
4080+
width: 78%;
40664081
margin: 0 auto;
40674082
}
40684083

@@ -4100,3 +4115,84 @@ input.fullwidth {
41004115
text-align: center;
41014116
}
41024117
}
4118+
4119+
/* Flex property for boxes */
4120+
4121+
.flex {
4122+
display: flex;
4123+
}
4124+
4125+
/* Box display flow root property */
4126+
4127+
.box {
4128+
display: flow-root !important;
4129+
position: relative;
4130+
}
4131+
4132+
/* Box bottom left and right button custom position */
4133+
4134+
.bottom-left {
4135+
position: absolute;
4136+
bottom: 40px;
4137+
}
4138+
4139+
.bottom-right {
4140+
position: absolute;
4141+
bottom: 40px;
4142+
left: 40px;
4143+
}
4144+
4145+
/* Media Queries for responsiveness */
4146+
4147+
@media screen and (max-width: 891px) {
4148+
.flex {
4149+
display: unset;
4150+
}
4151+
}
4152+
4153+
@media screen and (max-width: 550px) {
4154+
.bottom-right {
4155+
position: unset;
4156+
bottom: unset;
4157+
left: unset;
4158+
}
4159+
4160+
.installations .box ul,
4161+
.mailing .box ul {
4162+
padding-bottom: unset;
4163+
}
4164+
4165+
.bottom-left {
4166+
position: unset;
4167+
bottom: unset;
4168+
}
4169+
}
4170+
4171+
@media screen and (max-width: 650px) {
4172+
section.bottom .box p {
4173+
margin-bottom: 100px;
4174+
}
4175+
4176+
section.bottom .box.donate a {
4177+
bottom: 30px;
4178+
}
4179+
4180+
section.bottom .box.join a {
4181+
bottom: 30px;
4182+
}
4183+
}
4184+
4185+
@media screen and (max-width: 1030px) and (min-width: 892px) {
4186+
.installations .box ul,
4187+
.mailing .box ul {
4188+
padding-bottom: 50px;
4189+
}
4190+
4191+
.bottom-left {
4192+
bottom: 60px;
4193+
}
4194+
4195+
.bottom-right {
4196+
bottom: 12px;
4197+
}
4198+
}

‎weblate_web/static/style.css‎

Lines changed: 104 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1168,11 +1168,21 @@ section.bottom .box.join {
11681168
background-image: url("img/box-join.jpg");
11691169
}
11701170

1171+
section.bottom .box.join a {
1172+
position: absolute;
1173+
bottom: 40px;
1174+
}
1175+
11711176
section.bottom .box.donate {
11721177
background-color: #f6664c;
11731178
background-image: url("img/box-donate.jpg");
11741179
}
11751180

1181+
section.bottom .box.donate a {
1182+
position: absolute;
1183+
bottom: 40px;
1184+
}
1185+
11761186
section.bottom .box .title {
11771187
font-size: 40px;
11781188
letter-spacing: -1px;
@@ -1189,7 +1199,7 @@ section.bottom .box p {
11891199
font-size: 20px;
11901200
letter-spacing: 0.5px;
11911201
line-height: 25px;
1192-
margin-bottom: 45px;
1202+
margin-bottom: 70px;
11931203
}
11941204

11951205
body.light .main-menu ul li a {
@@ -2253,10 +2263,6 @@ input[type="radio"]:checked + .biglabel {
22532263
line-height: 26px;
22542264
}
22552265

2256-
.installations .box:nth-child(2) {
2257-
min-height: 500px;
2258-
}
2259-
22602266
.installations .box:nth-child(2n + 1) {
22612267
margin-left: 0;
22622268
}
@@ -2276,9 +2282,9 @@ input[type="radio"]:checked + .biglabel {
22762282
.installations .box ul {
22772283
margin: 0 0 20px 25px;
22782284
max-width: 380px;
2279-
padding: 0;
22802285
list-style: none;
22812286
clear: left;
2287+
padding-bottom: 32px;
22822288
}
22832289

22842290
.installations .box li::before,
@@ -2668,6 +2674,7 @@ h2.section-title.hp-style {
26682674
margin: 0 0 35px 25px;
26692675
padding: 0;
26702676
list-style: none;
2677+
padding-bottom: 40px;
26712678
}
26722679

26732680
.contribution-list .box ul li,
@@ -2758,6 +2765,13 @@ h2.section-title.hp-style {
27582765
.aboutus-list .box.blue {
27592766
background-color: #00d2e6;
27602767
border-radius: 20px 20px 0 20px;
2768+
display: inline-block !important;
2769+
min-height: unset;
2770+
}
2771+
2772+
.aboutus-list .box.green {
2773+
display: inline-block !important;
2774+
min-height: unset;
27612775
}
27622776

27632777
.aboutus-list .box h2 {
@@ -3075,6 +3089,7 @@ input.button.make-payment {
30753089

30763090
.form-line:last-child {
30773091
border-bottom: none;
3092+
border-top: 1px solid #e9eaec;
30783093
}
30793094

30803095
.form-line > div {
@@ -4024,7 +4039,7 @@ input.fullwidth {
40244039
}
40254040
}
40264041

4027-
/*Your Weblate Team - About us */
4042+
/* About Us Weblate Team CSS */
40284043

40294044
.content-p {
40304045
width: 69%;
@@ -4054,7 +4069,7 @@ input.fullwidth {
40544069

40554070
.weblate-team {
40564071
display: table;
4057-
width: 82%;
4072+
width: 78%;
40584073
margin: 0 auto;
40594074
}
40604075

@@ -4092,3 +4107,84 @@ input.fullwidth {
40924107
text-align: center;
40934108
}
40944109
}
4110+
4111+
/* Flex property for boxes */
4112+
4113+
.flex {
4114+
display: flex;
4115+
}
4116+
4117+
/* Box display flow root property */
4118+
4119+
.box {
4120+
display: flow-root !important;
4121+
position: relative;
4122+
}
4123+
4124+
/* Box bottom left and right button custom position */
4125+
4126+
.bottom-left {
4127+
position: absolute;
4128+
bottom: 40px;
4129+
}
4130+
4131+
.bottom-right {
4132+
position: absolute;
4133+
bottom: 40px;
4134+
right: 40px;
4135+
}
4136+
4137+
/* Media Queries for responsiveness */
4138+
4139+
@media screen and (max-width: 891px) {
4140+
.flex {
4141+
display: unset;
4142+
}
4143+
}
4144+
4145+
@media screen and (max-width: 550px) {
4146+
.bottom-right {
4147+
position: unset;
4148+
bottom: unset;
4149+
right: unset;
4150+
}
4151+
4152+
.installations .box ul,
4153+
.mailing .box ul {
4154+
padding-bottom: unset;
4155+
}
4156+
4157+
.bottom-left {
4158+
position: unset;
4159+
bottom: unset;
4160+
}
4161+
}
4162+
4163+
@media screen and (max-width: 650px) {
4164+
section.bottom .box p {
4165+
margin-bottom: 100px;
4166+
}
4167+
4168+
section.bottom .box.donate a {
4169+
bottom: 30px;
4170+
}
4171+
4172+
section.bottom .box.join a {
4173+
bottom: 30px;
4174+
}
4175+
}
4176+
4177+
@media screen and (max-width: 1030px) and (min-width: 892px) {
4178+
.installations .box ul,
4179+
.mailing .box ul {
4180+
padding-bottom: 50px;
4181+
}
4182+
4183+
.bottom-left {
4184+
bottom: 60px;
4185+
}
4186+
4187+
.bottom-right {
4188+
bottom: 12px;
4189+
}
4190+
}

‎weblate_web/templates/about.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h1 class="section-title min-m">{% block title %}{% trans "The Weblate Way" %}{%
1414
</div>
1515

1616
<div class="aboutus-list">
17-
<div class="box">
17+
<div class="box green">
1818
<img class="avatar" src="{% static "img/MichalPhoto.png" %}" />
1919
<div class="date">{% trans "February 2012" %}—Michal Čihař</div>
2020
<h2><a href="{% url 'post' slug='looking-pootle-alternative' %}">{% trans "Looking for a Pootle alternative" %}</a></h2>
@@ -38,7 +38,7 @@ <h2><a href="{% url 'post' slug='why-weblate' %}">{% trans "Why Weblate?" %}</a>
3838
◦ {% trans "Consistency checks" %}
3939
</p>
4040
</div>
41-
<div class="box">
41+
<div class="box green">
4242
<div class="date">{% trans "Today" %}—Michal Čihař</div>
4343
<h2>{% trans "Weblate grows and the future is open to new opportunities." %}</h2>
4444
</div>

0 commit comments

Comments
 (0)