Originally Posted by Akane Tendo:
“CSS is piss easy.”
to who?? this is easy!?? wtf
<style>
.customHeader {
background-color: transparent;
display: -webkit-box;
height: 50px;
line-height: 60px;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
}
.customHeader .editionName {
color: #333;
font-family: 'Currents-Regular-Sans';
font-weight: normal;
margin: 0 10px 0 0;
max-width: 50%;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}
.customHeader .sectionName {
color: #a3a3a3;
font-family: 'Currents-Light-Sans';
font-weight: 300;
margin: 0 0 0 10px;
max-width: 40%;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}
.customHeader .divider {
border-left: solid 1px #a3a3a3;
}
</style>
<g:if device='tablet'>
<style>
.customHeader { font-size: 20px; -webkit-box-align: end; }
.customHeader .divider { height: 30px; margin-bottom: 15px; }
</style>
</g:if>
<g:if device='phone'>
<style>
.customHeader { font-size: 22px; -webkit-box-align: center; }
.customHeader .divider { height: 22px; margin-top: 5px; }
</style>
</g:if>
<div class='customHeader'>
<div class='editionName'>
<g:text textid='editionName'></g:text>
</div>
<div class='divider'></div>
<div class='sectionName'>
<g:text textid='sectionName'></g:text>
</div>
</div>