* IE11 layout added
* grid css code moved to @supports tag
This commit is contained in:
Danyi Dávid
parent
39063737aa
commit
e8115ae0f9
@ -35,35 +35,18 @@ section {
|
|||||||
/* app main grid container */
|
/* app main grid container */
|
||||||
.app-container {
|
.app-container {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: grid;
|
|
||||||
grid-column-gap: 20px;
|
|
||||||
grid-row-gap: 0;
|
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.home {
|
section.home {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
border-left: 1px solid #003b70;
|
border-left: 1px solid #003b70;
|
||||||
grid-area: content;
|
|
||||||
display: grid;
|
|
||||||
grid-column-gap: 20px;
|
|
||||||
grid-row-gap: 20px;
|
|
||||||
align-self: start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section.article {
|
section.article {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
border-left: 1px solid #003b70;
|
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 {
|
footer {
|
||||||
@ -73,7 +56,6 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
footer.main-footer {
|
footer.main-footer {
|
||||||
grid-area: footer;
|
|
||||||
line-height: 70px;
|
line-height: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,8 +74,152 @@ footer .ericsson-logo {
|
|||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* mobile */
|
/* IE 10-11 */
|
||||||
@media only screen and (max-width: 779px) {
|
@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 {
|
.app-container {
|
||||||
grid-template-columns: auto;
|
grid-template-columns: auto;
|
||||||
grid-template-rows: auto auto auto 70px;
|
grid-template-rows: auto auto auto 70px;
|
||||||
@ -217,10 +343,10 @@ footer .ericsson-logo {
|
|||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* tablet */
|
/* tablet */
|
||||||
@media only screen and (min-width: 780px) and (max-width: 1219px) {
|
@media only screen and (min-width: 780px) and (max-width: 1219px) {
|
||||||
.app-container {
|
.app-container {
|
||||||
grid-template-columns: auto 180px 580px auto;
|
grid-template-columns: auto 180px 580px auto;
|
||||||
grid-template-rows: 170px auto 70px;
|
grid-template-rows: 170px auto 70px;
|
||||||
@ -304,10 +430,10 @@ footer .ericsson-logo {
|
|||||||
nav ul.menu_level_1 > li {
|
nav ul.menu_level_1 > li {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* monitor */
|
/* monitor */
|
||||||
@media only screen and (min-width: 1220px) {
|
@media only screen and (min-width: 1220px) {
|
||||||
.app-container {
|
.app-container {
|
||||||
grid-template-columns: auto 180px 980px auto;
|
grid-template-columns: auto 180px 980px auto;
|
||||||
grid-template-rows: 170px auto 70px;
|
grid-template-rows: 170px auto 70px;
|
||||||
@ -381,28 +507,100 @@ footer .ericsson-logo {
|
|||||||
nav ul.menu_level_1 > li {
|
nav ul.menu_level_1 > li {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* home page */
|
/* home page */
|
||||||
section.home > img.bimg {
|
section.home > img.bimg {
|
||||||
grid-area: bigimg;
|
grid-area: bigimg;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.home > img.simg1 {
|
section.home > img.simg1 {
|
||||||
grid-area: smallimg1;
|
grid-area: smallimg1;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.home > img.simg2 {
|
section.home > img.simg2 {
|
||||||
grid-area: smallimg2;
|
grid-area: smallimg2;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.home > article {
|
section.home > article {
|
||||||
grid-area: article;
|
grid-area: article;
|
||||||
|
}
|
||||||
|
|
||||||
|
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.home > section.download {
|
|
||||||
grid-area: download;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.download > img.poster-logo{
|
section.download > img.poster-logo{
|
||||||
float: left;
|
float: left;
|
||||||
@ -426,24 +624,10 @@ section.download a.download > img{
|
|||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* the prize (article) */
|
|
||||||
section.article > article {
|
|
||||||
grid-area: article;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.article > .sidebar {
|
|
||||||
grid-area: sidebar;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.article > .sidebar > img {
|
section.article > .sidebar > img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* judges */
|
|
||||||
section.judges {
|
|
||||||
grid-area: content;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.judges > h1 {
|
section.judges > h1 {
|
||||||
clear: both;
|
clear: both;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
@ -468,22 +652,9 @@ section.judge > .description {
|
|||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* awardees */
|
|
||||||
section.awardees {
|
|
||||||
grid-area: content;
|
|
||||||
}
|
|
||||||
|
|
||||||
section.awardees > .awardee > img.profile,
|
|
||||||
section.profile> .awardee > img.profile {
|
|
||||||
grid-area: image;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* awardee (profile) */
|
/* awardee (profile) */
|
||||||
section.profile {
|
section.profile {
|
||||||
grid-area: content;
|
|
||||||
display: grid;
|
|
||||||
grid-column-gap: 20px;
|
|
||||||
grid-row-gap: 20px;
|
|
||||||
border-left: 1px solid #003b70;
|
border-left: 1px solid #003b70;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
@ -502,16 +673,6 @@ section.profile > aside.sidebar > .image-label {
|
|||||||
font-weight: bold;
|
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 ol,
|
||||||
section.awardee ul {
|
section.awardee ul {
|
||||||
@ -524,24 +685,17 @@ section.awardee ul > li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.awardee .year {
|
.awardee .year {
|
||||||
grid-area: year;
|
|
||||||
font-family: 'PT Serif', serif;
|
font-family: 'PT Serif', serif;
|
||||||
font-size: 32pt;
|
font-size: 32pt;
|
||||||
align-self: end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.awardee .name {
|
.awardee .name {
|
||||||
grid-area: name;
|
|
||||||
font-family: 'PT Serif', serif;
|
font-family: 'PT Serif', serif;
|
||||||
font-size: 34pt;
|
font-size: 34pt;
|
||||||
line-height: 32pt;
|
line-height: 32pt;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.awardee > .description {
|
|
||||||
grid-area: content;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.awardee > .description {
|
a.awardee > .description {
|
||||||
border-left: 1px solid #003b70;
|
border-left: 1px solid #003b70;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
@ -551,10 +705,6 @@ a.awardee > .description {
|
|||||||
|
|
||||||
/* common parts */
|
/* common parts */
|
||||||
|
|
||||||
header.main {
|
|
||||||
grid-area: header;
|
|
||||||
}
|
|
||||||
|
|
||||||
header .title {
|
header .title {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
font-size: 40pt;
|
font-size: 40pt;
|
||||||
@ -571,10 +721,6 @@ header .description .granprize-logo {
|
|||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.main {
|
|
||||||
grid-area: nav;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user