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

* IE11 layout added

Browse Source 
* grid css code moved to @supports tag
This commit is contained in:
Danyi Dávid 2018-05-17 20:19:47 +02:00
parent 39063737aa
commit e8115ae0f9
1 changed files with 472 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
public/styles/main.css
View File

@ -35,35 +35,18 @@ section {
/* app main grid container */
.app-container {
margin: auto;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0;
min-height: 100%;
}
section.home {
padding-left: 20px;
border-left: 1px solid #003b70;
grid-area: content;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 20px;
align-self: start;
}
section.article {
padding-left: 20px;
padding-right: 20px;
border-left: 1px solid #003b70;
grid-area: content;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 20px;
align-self: start;
}
section.error {
grid-area: content;
}
footer {
@ -73,7 +56,6 @@ footer {
}
footer.main-footer {
grid-area: footer;
line-height: 70px;
}
@ -92,6 +74,150 @@ footer .ericsson-logo {
margin-left: 50px;
}
/* IE 10-11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.app-container {
width: 1180px;
margin: auto;
overflow: hidden;
}
nav.main {
float: left;
width: 160px;
}
section.home,
section.article,
section.awardees,
section.profile {
width: 960px;
float: right;
}
section.awardees > section.judges {
clear: both;
overflow: hidden;
}
section.awardees section.judge {
width: 440px;
height: 120px;
float: left;
}
a.awardee {
width: 460px;
float: left;
margin-right: 20px;
}
.awardee img.profile {
float: left;
width: 180px;
height: 180px;
border-radius: 90px;
margin-right: 20px;
margin-bottom: 20px;
}
.awardee .description {
clear: both;
}
section.home > img.bimg {
float: left;
margin-right: 20px;
}
section.home > img.simg1,
section.home > img.simg2 {
float: left;
margin-bottom: 20px;
}
section.home > article {
clear: left;
float: left;
width: 480px;
}
section.home section.download {
float: right;
width: 460px;
}
section.article img.embedded-image {
display: none;
}
section.article > article {
float: left;
width: 560px;
}
section.article > section.sidebar {
float: right;
width: 380px;
}
section.profile > section.awardee {
float: left;
width: 560px;
}
section.profile > aside.sidebar {
float: right;
width: 380px;
padding-top: 300px;
}
section.profile > section.sidebar > img {
}
footer.main-footer {
clear: both;
width: 100%;
padding-left: 20px;
}
}
@supports (display: grid) {
.app-container {
margin: auto;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 0;
min-height: 100%;
}
section.home {
display: grid;
grid-area: content;
grid-column-gap: 20px;
grid-row-gap: 20px;
align-self: start;
}
section.article {
display: grid;
grid-area: content;
grid-column-gap: 20px;
grid-row-gap: 20px;
align-self: start;
}
section.error {
grid-area: content;
}
footer.main-footer {
grid-area: footer;
}
/* mobile */
@media only screen and (max-width: 779px) {
.app-container {
@ -404,6 +530,78 @@ section.home > section.download {
grid-area: download;
}
/* the prize (article) */
section.article > article {
grid-area: article;
}
section.article > .sidebar {
grid-area: sidebar;
}
/* judges */
section.judges {
grid-area: content;
}
/* awardees */
section.awardees {
grid-area: content;
}
section.awardees > .awardee > img.profile,
section.profile> .awardee > img.profile {
grid-area: image;
}
/* awardee (profile) */
section.profile {
display: grid;
grid-area: content;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
a.awardee,
section.awardee {
display: grid;
grid-column-gap: 20px;
grid-template-rows: 60px 120px auto;
grid-template-areas:
"image year"
"image name"
"content content";
}
.awardee .year {
grid-area: year;
font-family: 'PT Serif', 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;
}
.awardee > .description {
grid-area: content;
}
header.main {
grid-area: header;
}
nav.main {
grid-area: nav;
}
}
section.download > img.poster-logo{
float: left;
margin-top: 16px;
@ -426,24 +624,10 @@ section.download a.download > img{
margin-right: 5px;
}
/* the prize (article) */
section.article > article {
grid-area: article;
}
section.article > .sidebar {
grid-area: sidebar;
}
section.article > .sidebar > img {
max-width: 100%;
}
/* judges */
section.judges {
grid-area: content;
}
section.judges > h1 {
clear: both;
padding-top: 40px;
@ -468,22 +652,9 @@ section.judge > .description {
font-size: 12pt;
}
/* awardees */
section.awardees {
grid-area: content;
}
section.awardees > .awardee > img.profile,
section.profile> .awardee > img.profile {
grid-area: image;
}
/* awardee (profile) */
section.profile {
grid-area: content;
display: grid;
grid-column-gap: 20px;
grid-row-gap: 20px;
border-left: 1px solid #003b70;
padding-left: 20px;
}
@ -502,16 +673,6 @@ section.profile > aside.sidebar > .image-label {
font-weight: bold;
}
a.awardee,
section.awardee {
display: grid;
grid-column-gap: 20px;
grid-template-rows: 60px 120px auto;
grid-template-areas:
"image year"
"image name"
"content content";
}
section.awardee ol,
section.awardee ul {
@ -524,24 +685,17 @@ section.awardee ul > li {
}
.awardee .year {
grid-area: year;
font-family: 'PT Serif', 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;
}
.awardee > .description {
grid-area: content;
}
a.awardee > .description {
border-left: 1px solid #003b70;
padding-left: 10px;
@ -551,10 +705,6 @@ a.awardee > .description {
/* common parts */
header.main {
grid-area: header;
}
header .title {
margin-top: 30px;
font-size: 40pt;
@ -571,10 +721,6 @@ header .description .granprize-logo {
float: right;
}
nav.main {
grid-area: nav;
}
nav ul {
list-style: none;
padding-left: 0;