torproject/webwml
1
0
Fork 0
mirror of https://github.com/torproject/webwml.git synced 2024-11-23 18:00:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix css and layout for banner

Browse Source
This commit is contained in:
hiro 2018-10-22 19:47:16 +02:00
parent 10e6c8add6
commit 5f24209bb4
3 changed files with 151 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
css/layout.css
View File

@ -1396,25 +1396,39 @@ p.blogDate {
}
.eoy-background {
background-color: #FFFFFF;
background-color: #F8F9FA;
width: 100%;
height: 200px;
padding-left: 10%;
padding-right: 10%;
padding-top: 5%;
height: 300px;
margin-bottom: 35px;
}
.eoy-wrap {
width: 960px;
margin: auto;
padding-top: 20px;
}
.eoy-artwork {
width: 40%;
background: url(../images/artwork@2x.png) left top no-repeat;
background: url(../images/artwork@2x.png) left bottom no-repeat;
background-size: contain;
float: left;
height: 100%;
height: 280px;
}
.eoy-message {
width: 60%;
width: 55%;
float: right;
padding-left: 35px;
}
.advance-universal-hu {
color: #420C5D;
font-family: Source Sans Pro;
font-size: 24px;
font-weight: 600;
line-height: 29px;
text-align: left;
}
.tor-strength-in-num {
@ -1426,7 +1440,16 @@ p.blogDate {
text-align: left;
}
.tor-strength-in-num > p {
.give-today-and-mozi {
color: #420C5D;
font-family: Source Sans Pro;
font-size: 13px;
font-weight: 400;
line-height: 16px;
text-align: left;
}
.tor-strength-in-num > p.title {
text-transform: uppercase;
}
@ -1436,7 +1459,6 @@ p.blogDate {
font-size: 24px;
font-weight: 600;
line-height: 29px;
width: 454px;
text-align: left;
}
@ -1455,6 +1477,8 @@ p.blogDate {
width: 120px;
height: 35px;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}
.count-me-in {
@ -1465,3 +1489,7 @@ p.blogDate {
line-height: 17px;
text-align: center;
}
mark {
background: cyan;
}

101
css/layout.min.css vendored
View File

File diff suppressed because one or more lines are too long

24
en/banner.wmi
View File

@ -1,16 +1,18 @@
<div class="eoy-background">
<div class="eoy-artwork">
</div>
<div class="eoy-message">
<div class="tor-strength-in-num">
<p>Tor: strength in numbers</p>
<div class="eoy-wrap">
<div class="eoy-artwork">
</div>
<div class="keep-tor-strong-giv">
<p>Keep Tor strong.</p>
<span>Give today, and Mozilla will match your donation.</span>
</div>
<div class="eoy-btn-container">
<a class="eoy-btn count-me-in">Count me in</a>
<div class="eoy-message">
<div class="tor-strength-in-num">
<p>Tor: strength in numbers</p>
</div>
<div class="keep-tor-strong-giv">
<p class="advance-universal-hu">Advance universal <mark>human rights.</mark> Protect the <mark>privacy of millions.</mark> Your financial support will allow people around the world to be more <mark>safe online.</mark></p>
<span class="give-today-and-mozi">Give today, and Mozilla will match your donation.</span>
</div>
<div class="eoy-btn-container">
<a class="eoy-btn count-me-in">Count me in</a>
</div>
</div>
</div>
</div>