SIGMA/swedishchamber-granprize
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

* mobile layout changes

Browse Source
This commit is contained in:
Danyi Dávid 2018-05-06 16:40:01 +02:00
parent 3304966c52
commit a78d46645f
2 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
public/styles/main.css
View File

@ -69,7 +69,7 @@ section.error {
@media only screen and (max-width: 779px) {
.app-container {
grid-template-columns: auto;
grid-template-rows: 170px 150px auto 70px;
grid-template-rows: auto auto auto 70px;
grid-template-areas:
"header"
"nav"
@ -99,7 +99,7 @@ section.error {
}
img.embedded-image {
max-width: 30%;
max-width: 50%;
float: right;
margin-left: 10px;
margin-bottom: 10px;
@ -115,11 +115,11 @@ section.error {
a.awardee {
float: left;
margin-right: 20px;
grid-template-columns: 180px auto;
grid-template-columns: 80px auto;
}
section.awardee {
grid-template-columns: 180px auto;
grid-template-columns: 80px auto;
}
a.awardee {
@ -128,6 +128,14 @@ section.error {
padding-right: 20px;
}
section.awardees > .awardee > img.profile,
section.profile> .awardee > img.profile {
width: 80px;
height: 80px;
border-radius: 40px;
align-self: center;
}
header,
footer,
nav {
@ -135,6 +143,10 @@ section.error {
padding-right: 20px;
}
header.main .title img {
width: 55px;
}
section.profile {
grid-template-columns: auto;
grid-template-rows: auto auto;
@ -148,27 +160,6 @@ section.error {
margin-right: 20px;
}
nav > ul {
position: relative;
}
nav > ul > li {
display: inline-block;
width: auto;
padding-right: 30px;
}
nav ul.menu_level_1 {
left: 0;
position: absolute;
}
nav ul.menu_level_1 > li {
position: relative;
display: inline-block;
max-width: 20%;
}
section.error {
margin-left: 20px;
margin-right: 20px;
@ -229,6 +220,7 @@ section.error {
a.awardee {
float: left;
width: 470px;
margin-right: 20px;
margin-left: 20px;
grid-template-columns: 180px 270px;
@ -238,8 +230,11 @@ section.error {
grid-template-columns: 180px 380px;
}
a.awardee {
width: 470px;
section.awardees > .awardee > img.profile,
section.profile> .awardee > img.profile {
width: 180px;
height: 180px;
border-radius: 90px;
}
section.profile {
@ -301,14 +296,18 @@ section.error {
float: left;
margin-right: 20px;
grid-template-columns: 180px 270px;
width: 470px;
}
section.awardee {
grid-template-columns: 180px 380px;
}
a.awardee {
width: 470px;
section.awardees > .awardee > img.profile,
section.profile> .awardee > img.profile {
width: 180px;
height: 180px;
border-radius: 90px;
}
section.profile {
@ -373,6 +372,7 @@ section.judge > img.profile {
section.judge > .title {
font-size: 18pt;
font-weight: bold;
}
section.judge > .description {
@ -386,9 +386,7 @@ section.awardees {
section.awardees > .awardee > img.profile,
section.profile> .awardee > img.profile {
width: 180px;
height: 180px;
border-radius: 90px;
grid-area: image;
}
/* awardee (profile) */
@ -431,12 +429,14 @@ section.awardee {
.awardee .year {
grid-area: year;
font-family: 'Raleway', sans-serif;
font-size: 32pt;
align-self: end;
}
.awardee .name {
grid-area: name;
font-family: 'PT Serif', serif;
font-size: 34pt;
line-height: 32pt;
font-weight: bold;
@ -455,6 +455,7 @@ header.main {
header .title {
margin-top: 30px;
font-size: 40pt;
font-weight: bold;
}
header .description {

2
templates/layout/default.phtml
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"/>
<title><?= $this->e($title) ?> - Swedish Chamber</title>
<link rel="shortcut icon" href="https://framework.zend.com/ico/favicon.ico"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:700|Raleway:500">