Make "Getting started", "Community" and "Resources" pages scalable for various translation text length

This commit is contained in:
Saivann 2013-08-20 11:44:05 -04:00
parent 761fe228c2
commit f870596049
5 changed files with 40 additions and 19 deletions

View file

@ -450,21 +450,27 @@ li p{
.start{
text-align:left;
}
.start div{
position:relative;
}
.start>div:first-child+div{
border-top:1px solid #fad296;
border-top:1px solid #e0e0e0;
}
.start div div{
display:inline-block;
width:380px;
vertical-align:top;
padding-bottom:15px;
padding-bottom:70px;
position:static;
}
.start>div>div:first-child{
padding-right:40px;
border-right:1px solid #e0e0e0;
}
.start>div>div:first-child+div{
padding-left:40px;
border-left:1px solid #fad296;
border-left:1px solid #e0e0e0;
margin-left:-1px;
}
.start div div div a,
.start div div div a:link,
@ -472,7 +478,6 @@ li p{
.start div div div a:visited{
display:inline-block;
padding:6px 12px;
margin-bottom:10px;
font-size:115%;
color:#fff;
border:1px solid #d57700;
@ -502,6 +507,9 @@ li p{
.start div div div{
display:block;
width:auto;
padding-bottom:0px;
position:absolute;
bottom:35px;
}
.introlink{
@ -598,10 +606,12 @@ li p{
}
.resources>div>div:first-child{
padding-right:40px;
border-right:1px solid #e0e0e0;
}
.resources>div>div:first-child+div{
padding-left:40px;
border-left:1px solid #e0e0e0;
margin-left:-1px;
}
.resources div div div{
display:block;
@ -1219,20 +1229,29 @@ h2 .rssicon{
.mainlist>div:first-child,.mainlist>div:first-child+div,.mainlist>div:first-child+div+div{
text-align:left;
}
.start>div{
position:static;
}
.start>div:first-child+div{
border-top:0px;
}
.start div div{
display:block;
width:auto;
padding:0px;
padding:0px 0px 50px 0px;
position:relative;
}
.start>div>div:first-child{
border-right:0px;
padding-right:0px;
}
.start div div div{
bottom:15px;
}
.start>div>div:first-child+div{
border-left:0px;
padding-left:0px;
margin-left:0px;
}
.resources>div:first-child+div{
border-top:0px;
@ -1245,10 +1264,12 @@ h2 .rssicon{
}
.resources>div>div:first-child{
padding-right:0px;
border-right:0px;
}
.resources>div>div:first-child+div{
border-left:0px;
padding-left:0px;
margin-left:0px;
}
}

View file

@ -64,8 +64,7 @@ id: community
<p>{% translate bitcointalk %}</p>
<p><a href="http://www.reddit.com/r/Bitcoin/">{% translate reddit %}</a></p>
<p><a href="http://bitcoin.stackexchange.com/">{% translate stackexchange %}</a></p>
</div>
<div>
</div><div>
<h2><img src="/img/ico_network.svg" class="titleicon" alt="Icon">{% translate social %}</h2>
<p>{% translate linkgoogle %}</p>
<p><a href="http://twitter.com/#!/search/bitcoin">{% translate linktwitter %}</a></p>
@ -79,8 +78,7 @@ id: community
<p><a href="http://bitcoin.meetup.com/">{% translate meetupgroup %}</a></p>
<p><a href="https://bitcointalk.org/index.php?board=86.0">{% translate meetupbitcointalk %}</a></p>
<p><a href="https://en.bitcoin.it/wiki/Meetups">{% translate meetupwiki %}</a></p>
</div>
<div>
</div><div>
<h2><img src="/img/ico_help.svg" class="titleicon" alt="Icon">{% translate irc %}</h2>
<p>{% translate ircjoin %}</p>
<p>#bitcoin {% translate chanbitcoin %}</li>

View file

@ -12,8 +12,7 @@ id: getting-started
<h2><span>1.</span> {% translate inform %}</h2>
<p>{% translate informtxt %}</p>
<div><a href="/{{ page.lang }}/{% translate you-need-to-know url %}">{% translate informbut %}</a></div>
</div>
<div>
</div><div>
<h2><span>2.</span> {% translate choose %}</h2>
<p>{% translate choosetxt %}</p>
<div><a href="/{{ page.lang }}/{% translate choose-your-wallet url %}">{% translate choosebut %}</a></div>
@ -24,8 +23,7 @@ id: getting-started
<h2><span>3.</span> {% translate get %}</h2>
<p>{% translate gettxt %}</p>
<div><a href="http://howtobuybitcoins.info">{% translate getbut %}</a></div>
</div>
<div>
</div><div>
<h2><span>4.</span> {% translate spend %}</h2>
<p>{% translate spendtxt %}</p>
<div><a href="http://usebitcoins.info">{% translate spendbut %}</a></div>

View file

@ -51,8 +51,7 @@ id: resources
<p>{% translate linkwiki %}</p>
<p><a href="https://weusecoins.com/">WeUseCoins.com</a></p>
<p><a href="http://bitcoinmining.com/">BitcoinMining.com</a></p>
</div>
<div>
</div><div>
<h2><img src="/img/ico_invoice.svg" class="titleicon" alt="Icon">{% translate directories %}</h2>
<p><a href="/{{ page.lang }}/{% translate choose-your-wallet url %}">{% translate linkwallets %}</a> - bitcoin.org</p>
<p><a href="http://usebitcoins.info/">{% translate linkmerchants %}</a> - usebitcoins.info</p>
@ -68,8 +67,7 @@ id: resources
<p><a href="http://thegenesisblock.com/">The Genesis Block</a></p>
<p><a href="http://letstalkbitcoin.com/">Let's Talk Bitcoin</a></p>
<p><a href="https://bitcointalk.org/index.php?board=77.0">Bitcoin Forum / Press</a></p>
</div>
<div>
</div><div>
<h2><img src="/img/ico_market.svg" class="titleicon" alt="Icon">{% translate charts %}</h2>
<p><a href="http://blockchain.info/charts">Blockchain.info</a></p>
<p><a href="http://bitcoincharts.com/charts/">Bitcoincharts.com</a></p>

View file

@ -109,16 +109,19 @@ body{
}
.start div{
border-top:expression((this.parentNode.getElementsByTagName('DIV')[5]==this)?'1px solid #fad296':'');
border-top:expression((this.parentNode.getElementsByTagName('DIV')[5]==this)?'1px solid #e0e0e0':'');
}
.start div div{
/*This one is also required for IE7*/
zoom:1;
display:inline;
padding-top:25px;
position:relative;
padding-right:expression(this.parentNode.getElementsByTagName('DIV')[0]==this?'40px':'');
border-right:expression(this.parentNode.getElementsByTagName('DIV')[0]==this?'1px solid #e0e0e0':'');
padding-left:expression(this.parentNode.getElementsByTagName('DIV')[2]==this?'40px':'');
border-left:expression(this.parentNode.getElementsByTagName('DIV')[2]==this?'1px solid #fad296':'');
border-left:expression(this.parentNode.getElementsByTagName('DIV')[2]==this?'1px solid #e0e0e0':'');
margin-left:expression(this.parentNode.getElementsByTagName('DIV')[2]==this?'-1px':'');
}
.start div div div{
padding-top:0px;
@ -136,9 +139,12 @@ body{
zoom:1;
display:inline;
padding-top:25px;
position:relative;
padding-right:expression(this.parentNode.getElementsByTagName('DIV')[0]==this?'40px':'');
border-right:expression(this.parentNode.getElementsByTagName('DIV')[0]==this?'1px solid #e0e0e0':'');
padding-left:expression(this.parentNode.getElementsByTagName('DIV')[1]==this?'40px':'');
border-left:expression(this.parentNode.getElementsByTagName('DIV')[1]==this?'1px solid #e0e0e0':'');
margin-left:expression(this.parentNode.getElementsByTagName('DIV')[1]==this?'-1px':'');
}
.resources>div>div:first-child+div{
/*This one is for IE7 only*/