Skip to content

Commit

Permalink
Corrige o alinhamento do texto abaixo do logo do scielo.org (#118)
Browse files Browse the repository at this point in the history 
* Alteração do lago da Home. Inclusão de texto abaixo do logo utilizando webfont arapey

* Ajuste de posicionamento do texto do logo Scielo

* Correção de alinhamento de texto e logo na resolução para desktop

* Incluídas as sugestões dadas pelo Jofily com relação ao alinhamento do logo e o display flex. Corrigidos também alguns outros alinhamentos.
  • Loading branch information
@paratiuid
paratiuid authored and Cesar Augusto committed Jul 11, 2019
1 parent d4ddc73 commit edd9655
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 142 deletions.
84 changes: 50 additions & 34 deletions application/views/home.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,42 +11,58 @@
<!-- ./alert -->

<div class="container">
<div class="row">
<header class="header-container">
<div class="menu-lang">
<ul>
<li class="info">
<a href="<?= $about_menu_item['link'] ?>"><?= $about_menu_item['text'] ?></a>
</li>
<?php foreach ($available_languages as $available_language) : ?>
<li>
<a href="<?= $available_language['link'] ?>"><?= $available_language['language'] ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
</header>
</div>

<div class="row">

<!-- capa -->
<section class="cover">

<div class="cover-content">
<h1 class="scielo-logo">
<a href="javascript:;">
<img src="/static/images/logo-scielo-portal-no-label.svg">
<span>Scientific Electronic Library Online</span>
</a>
</h1>

<!-- capa -->
<section class="cover">
<div class="menu-lang">
<ul>
<li class="info">
<a href="<?= $about_menu_item['link'] ?>"><?= $about_menu_item['text'] ?></a>
</li>
<?php foreach ($available_languages as $available_language) : ?>
<li>
<a href="<?= $available_language['link'] ?>"><?= $available_language['language'] ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<h1 class="logo">
<span>Scientific Electronic Library Online</span>
</h1>
<form name="searchForm" id="searchForm" action="<?= SCIELO_SEARCH_URL ?>" method="get">
<input type="hidden" name="lang" id="lang" value="<?= $language ?>">
<input type="hidden" name="count" id="count" value="15">
<input type="hidden" name="from" id="from" value="0">
<input type="hidden" name="output" id="output" value="site">
<input type="hidden" name="sort" id="sort" value="">
<input type="hidden" name="format" id="format" value="summary">
<input type="hidden" name="fb" id="fb" value="">
<input type="hidden" name="page" id="page" value="1">

<div class="search-box">
<input type="text" name="q" placeholder="<?= lang('search_placeholder') ?>" autofocus>
<a href="javascript:$('#searchForm').submit();" class="btn btn-default btn-input"></a>
<a href="<?= SCIELO_ADVANCED_SEARCH_URL ?>"><?= lang('search_link_text') ?></a>
<form name="searchForm" id="searchForm" action="<?= SCIELO_SEARCH_URL ?>" method="get">
<input type="hidden" name="lang" id="lang" value="<?= $language ?>">
<input type="hidden" name="count" id="count" value="15">
<input type="hidden" name="from" id="from" value="0">
<input type="hidden" name="output" id="output" value="site">
<input type="hidden" name="sort" id="sort" value="">
<input type="hidden" name="format" id="format" value="summary">
<input type="hidden" name="fb" id="fb" value="">
<input type="hidden" name="page" id="page" value="1">

<div class="search-box">
<input type="text" name="q" placeholder="<?= lang('search_placeholder') ?>" autofocus>
<a href="javascript:$('#searchForm').submit();" class="btn btn-default btn-input"></a>
<a href="<?= SCIELO_ADVANCED_SEARCH_URL ?>"><?= lang('search_link_text') ?></a>
</div>
</form>
</div>
</form>
</section>
<!-- ./capa -->

</section>
<!-- ./capa -->
</div>


<!-- tabs -->
<?php $this->load->view('partials/tabs'); ?>
Expand Down
161 changes: 53 additions & 108 deletions static/sass/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,6 @@ body{
font-size:1.2rem;
letter-spacing:1px;

//position:relative;

.close{
z-index:99;
display: inline-block;
Expand Down Expand Up @@ -111,7 +109,6 @@ body{
}



section{

.tab-pane{
Expand All @@ -120,8 +117,8 @@ section{
padding: 3.2rem 1.6rem;

@media (min-width: $screen-sm-min) {
margin-top:2rem;
margin-bottom: 0;
margin-top: 2rem;
margin-bottom: 2rem;

&.tab-pane-white{
background: #fff;
Expand Down Expand Up @@ -158,8 +155,14 @@ section{
&:first-child{

margin-bottom:0;
height:70vh;
height: 60vh;
position:relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

@media (min-width: $screen-lg-min) {

Expand All @@ -171,68 +174,56 @@ section{
}
}

.logo{
background: url('../images/logo-scielo-portal-no-label.svg') no-repeat;
background-position: top center;
background-size: auto 83%;
height:200px;
max-height:25vh;
width:100%;
display:block;
margin:0 auto;
position: absolute;
bottom:28vh;
.cover-content{

@media (orientation: landscape) {
max-height:35vh;
bottom:25vh;
}
@media (min-width: $screen-sm-min) {
@media (orientation: landscape) {
bottom:22vh;
}
}
@media (min-width: $screen-md-min) {
margin-top: -5vh;

}
@media (min-width: $screen-lg-min) {
bottom: 34vh;
margin-top: -10vh;
}

.scielo-logo{
align-content: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
height: 200px;
text-align: center;
max-width: 100%;
margin: 0 0 15px 0;
max-height: calc(100vh /3);

@media (orientation: landscape) {
& > a{
display: flex;
flex-wrap: wrap;
height: 100%;
cursor: default;

@media (max-height: 850px) {
bottom: auto;
top:70px;
height:175px;
min-height:175px;
span{
color: #333;
font-size: 16px;
font-family: Arapey, serif;
white-space: nowrap;
width: 100%;
}
}
}

span{
text-align: center;
position: relative;
top: 22vh;
display: block;
font-size: 16px;
font-family: Arapey,serif;
color: #333;
white-space: nowrap;

@media (orientation: landscape) {
top: 118px;
}
@media (min-width: $screen-sm-min) {
top: 175px;
&:link,
&:visited,
&:hover,
&:active{
text-decoration: none;

@media (orientation: landscape) {
top: 30vh
span{
text-decoration: none;
}
}
}
@media (min-width: $screen-md-min) {
top: 175px;

img{
width: 100%;
height: 83%;
max-height: 100%;
}

}
}
}
Expand Down Expand Up @@ -666,18 +657,8 @@ section{
&.discontinued-item{
display: none;
}
/* Verificar qual bandeira usar aqui
&.flag-wid{ //west indians - caribe X
&::before{
background-image: svg-uri('<svg width="49px" height="35px" viewBox="0 0 49 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <rect id="path-1" x="0" y="0" width="49" height="35" rx="2"></rect> </defs> <g id="_Flags/PY" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="PY"> <mask id="mask-2" fill="white"> <use xlink:href="#path-1"></use> </mask> <rect stroke="#F5F5F5" stroke-width="0.5" x="0.25" y="0.25" width="48.5" height="34.5" rx="2"></rect> <rect id="Rectangle-2" fill="#E33F39" mask="url(#mask-2)" x="0" y="0" width="49" height="11.6666667"></rect> <rect id="Rectangle-2" fill="#124BBA" mask="url(#mask-2)" x="0" y="23.3333333" width="49" height="11.6666667"></rect> <circle id="Oval-1" stroke="#398153" stroke-width="0.666666667" mask="url(#mask-2)" cx="24.5" cy="17.5" r="3.83333333"></circle> <circle id="Oval-29" fill="#E5CF58" mask="url(#mask-2)" cx="24.5" cy="17.5" r="1.16666667"></circle> </g> </g> </svg>');
background-size: 29px 22px;
}
}
*/
}
}

}


Expand All @@ -694,7 +675,6 @@ section{
}
}
dd{
//margin-bottom:2rem;
display:inline-block;

> a{
Expand All @@ -710,8 +690,6 @@ section{
position:relative;
display:block;



input[type="text"] {
border: 1px solid #DAE3F4;
border-radius: 2px;
Expand All @@ -734,8 +712,6 @@ section{
border-color: #DAE3F4;
}
}


}
}

Expand Down Expand Up @@ -793,38 +769,14 @@ section{


.search-box{
width: 100%;
width: 97vw;
margin: 0 auto;
position: absolute;
bottom:12vh;
text-align:center;
position: relative;

@media (orientation: landscape) {
bottom:2vh;
}

@media (min-width: $screen-sm-min) {
bottom: 19vh;

@media (orientation: landscape) {
bottom: 2vh;

@media (min-width: 830px) {
bottom: 11vh;
}
}
}
@media (min-width: $screen-lg-min) {
bottom: 24vh;

@media (orientation: landscape) {

@media (max-height: 850px) {
bottom: auto;
top:260px;
height:70px;
}
}
width: 80vw;
max-width: 1100px;
}

input[type="text"] {
Expand Down Expand Up @@ -1027,8 +979,6 @@ section{
}
}



/*abas alinhadas ao centro*/
.nav-center {
text-align: center;
Expand All @@ -1047,14 +997,11 @@ section{
}

.menu-lang{

margin-top: 1.6rem;
text-align:center;

@media (min-width: $screen-md-min) {
position:absolute;
right:1.6rem;
display: inline-block;
text-align: right;
}

ul{
Expand Down Expand Up @@ -1412,8 +1359,6 @@ section{
}




/*
Styles internas
*/
Expand Down

0 comments on commit edd9655

Please sign in to comment.