Skip to content

boxes layout update #498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nijel merged 6 commits into from
Feb 16, 2021
Merged

boxes layout update #498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5475f4f
boxes layout update
muzammalrahim Feb 15, 2021
85db09d
Updated CSS for Weblate team
muzammalrahim Feb 15, 2021
9191ead
Formatted
muzammalrahim Feb 16, 2021
a2b14ef
Formatted updated
muzammalrahim Feb 16, 2021
825d617
Formatted updated
muzammalrahim Feb 16, 2021
2bffc50
Formatted updated
muzammalrahim Feb 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@
/saml/saml.key
/saml/saml.crt
/saml/local_metadata.xml
.idea
venv
112 changes: 104 additions & 8 deletions weblate_web/static/style-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1168,11 +1168,21 @@ section.bottom .box.join {
background-image: url("img/box-join.jpg");
}

section.bottom .box.join a {
position: absolute;
bottom: 40px;
}

section.bottom .box.donate {
background-color: #f6664c;
background-image: url("img/box-donate.jpg");
}

section.bottom .box.donate a {
position: absolute;
bottom: 40px;
}

section.bottom .box .title {
font-size: 40px;
letter-spacing: -1px;
Expand All @@ -1189,7 +1199,7 @@ section.bottom .box p {
font-size: 20px;
letter-spacing: 0.5px;
line-height: 25px;
margin-bottom: 45px;
margin-bottom: 70px;
}

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

.installations .box:nth-child(2) {
min-height: 500px;
}

.installations .box:nth-child(2n + 1) {
margin-right: 0;
}
Expand All @@ -2276,9 +2282,9 @@ input[type="radio"]:checked + .biglabel {
.installations .box ul {
margin: 0 25px 20px 0;
max-width: 380px;
padding: 0;
list-style: none;
clear: right;
padding-bottom: 32px;
}

.installations .box li::before,
Expand Down Expand Up @@ -2668,6 +2674,7 @@ h2.section-title.hp-style {
margin: 0 25px 35px 0;
padding: 0;
list-style: none;
padding-bottom: 40px;
}

.contribution-list .box ul li,
Expand Down Expand Up @@ -2758,6 +2765,13 @@ h2.section-title.hp-style {
.aboutus-list .box.blue {
background-color: #00d2e6;
border-radius: 20px 20px 20px 0;
display: inline-block !important;
min-height: unset;
}

.aboutus-list .box.green {
display: inline-block !important;
min-height: unset;
}

.aboutus-list .box h2 {
Expand Down Expand Up @@ -3075,6 +3089,7 @@ input.button.make-payment {

.form-line:last-child {
border-bottom: none;
border-top: 1px solid #e9eaec;
}

.form-line > div {
Expand Down Expand Up @@ -4032,7 +4047,7 @@ input.fullwidth {
}
}

/* Your Weblate Team - About Us */
/* About Us Weblate Team */

.content-p {
width: 69%;
Expand Down Expand Up @@ -4062,7 +4077,7 @@ input.fullwidth {

.weblate-team {
display: table;
width: 82%;
width: 78%;
margin: 0 auto;
}

Expand Down Expand Up @@ -4100,3 +4115,84 @@ input.fullwidth {
text-align: center;
}
}

/* Flex property for boxes */

.flex {
display: flex;
}

/* Box display flow root property */

.box {
display: flow-root !important;
position: relative;
}

/* Box bottom left and right button custom position */

.bottom-left {
position: absolute;
bottom: 40px;
}

.bottom-right {
position: absolute;
bottom: 40px;
left: 40px;
}

/* Media Queries for responsiveness */

@media screen and (max-width: 891px) {
.flex {
display: unset;
}
}

@media screen and (max-width: 550px) {
.bottom-right {
position: unset;
bottom: unset;
left: unset;
}

.installations .box ul,
.mailing .box ul {
padding-bottom: unset;
}

.bottom-left {
position: unset;
bottom: unset;
}
}

@media screen and (max-width: 650px) {
section.bottom .box p {
margin-bottom: 100px;
}

section.bottom .box.donate a {
bottom: 30px;
}

section.bottom .box.join a {
bottom: 30px;
}
}

@media screen and (max-width: 1030px) and (min-width: 892px) {
.installations .box ul,
.mailing .box ul {
padding-bottom: 50px;
}

.bottom-left {
bottom: 60px;
}

.bottom-right {
bottom: 12px;
}
}
112 changes: 104 additions & 8 deletions weblate_web/static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1168,11 +1168,21 @@ section.bottom .box.join {
background-image: url("img/box-join.jpg");
}

section.bottom .box.join a {
position: absolute;
bottom: 40px;
}

section.bottom .box.donate {
background-color: #f6664c;
background-image: url("img/box-donate.jpg");
}

section.bottom .box.donate a {
position: absolute;
bottom: 40px;
}

section.bottom .box .title {
font-size: 40px;
letter-spacing: -1px;
Expand All @@ -1189,7 +1199,7 @@ section.bottom .box p {
font-size: 20px;
letter-spacing: 0.5px;
line-height: 25px;
margin-bottom: 45px;
margin-bottom: 70px;
}

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

.installations .box:nth-child(2) {
min-height: 500px;
}

.installations .box:nth-child(2n + 1) {
margin-left: 0;
}
Expand All @@ -2276,9 +2282,9 @@ input[type="radio"]:checked + .biglabel {
.installations .box ul {
margin: 0 0 20px 25px;
max-width: 380px;
padding: 0;
list-style: none;
clear: left;
padding-bottom: 32px;
}

.installations .box li::before,
Expand Down Expand Up @@ -2668,6 +2674,7 @@ h2.section-title.hp-style {
margin: 0 0 35px 25px;
padding: 0;
list-style: none;
padding-bottom: 40px;
}

.contribution-list .box ul li,
Expand Down Expand Up @@ -2758,6 +2765,13 @@ h2.section-title.hp-style {
.aboutus-list .box.blue {
background-color: #00d2e6;
border-radius: 20px 20px 0 20px;
display: inline-block !important;
min-height: unset;
}

.aboutus-list .box.green {
display: inline-block !important;
min-height: unset;
}

.aboutus-list .box h2 {
Expand Down Expand Up @@ -3075,6 +3089,7 @@ input.button.make-payment {

.form-line:last-child {
border-bottom: none;
border-top: 1px solid #e9eaec;
}

.form-line > div {
Expand Down Expand Up @@ -4024,7 +4039,7 @@ input.fullwidth {
}
}

/*Your Weblate Team - About us */
/* About Us Weblate Team CSS */

.content-p {
width: 69%;
Expand Down Expand Up @@ -4054,7 +4069,7 @@ input.fullwidth {

.weblate-team {
display: table;
width: 82%;
width: 78%;
margin: 0 auto;
}

Expand Down Expand Up @@ -4092,3 +4107,84 @@ input.fullwidth {
text-align: center;
}
}

/* Flex property for boxes */

.flex {
display: flex;
}

/* Box display flow root property */

.box {
display: flow-root !important;
position: relative;
}

/* Box bottom left and right button custom position */

.bottom-left {
position: absolute;
bottom: 40px;
}

.bottom-right {
position: absolute;
bottom: 40px;
right: 40px;
}

/* Media Queries for responsiveness */

@media screen and (max-width: 891px) {
.flex {
display: unset;
}
}

@media screen and (max-width: 550px) {
.bottom-right {
position: unset;
bottom: unset;
right: unset;
}

.installations .box ul,
.mailing .box ul {
padding-bottom: unset;
}

.bottom-left {
position: unset;
bottom: unset;
}
}

@media screen and (max-width: 650px) {
section.bottom .box p {
margin-bottom: 100px;
}

section.bottom .box.donate a {
bottom: 30px;
}

section.bottom .box.join a {
bottom: 30px;
}
}

@media screen and (max-width: 1030px) and (min-width: 892px) {
.installations .box ul,
.mailing .box ul {
padding-bottom: 50px;
}

.bottom-left {
bottom: 60px;
}

.bottom-right {
bottom: 12px;
}
}
4 changes: 2 additions & 2 deletions weblate_web/templates/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h1 class="section-title min-m">{% block title %}{% trans "The Weblate Way" %}{%
</div>

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