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

2
templates/layout/default.phtml
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <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> <title><?= $this->e($title) ?> - Swedish Chamber</title>
<link rel="shortcut icon" href="https://framework.zend.com/ico/favicon.ico"/> <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"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:700|Raleway:500">