diff --git a/public/styles/main.css b/public/styles/main.css index 1c04ff4..3874250 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -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,317 +74,533 @@ footer .ericsson-logo { margin-left: 50px; } -/* mobile */ -@media only screen and (max-width: 779px) { +/* IE 10-11 */ +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .app-container { - grid-template-columns: auto; - grid-template-rows: auto auto auto 70px; - grid-template-areas: - "header" - "nav" - "content" - "footer"; + width: 1180px; + margin: auto; + overflow: hidden; } - section.home { - max-width: calc(100% - 40px); - grid-template-columns: auto auto; - grid-template-rows: auto auto auto auto; - grid-template-areas: - "bigimg bigimg" - "article article" - "smallimg1 smallimg2" - "download download"; + nav.main { + float: left; + width: 160px; } - section.home > img { - width: 100%; - } - - section.article { - grid-template-columns: auto; - grid-template-rows: auto auto; - grid-template-areas: - "article" - "sidebar"; - } - - section.article > .sidebar { - display: none; - } - - img.embedded-image { - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; - margin-bottom: 10px; - } - - img.embedded-image.keep-small-right { - max-width: 30%; + section.home, + section.article, + section.awardees, + section.profile { + width: 960px; float: right; } - section.judge { - width: calc(100% - 40px); - margin-left: 20px; + 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; - float: left; } - a.awardee { + .awardee .description { + clear: both; + } + + section.home > img.bimg { float: left; margin-right: 20px; - grid-template-columns: 80px auto; } - section.awardee { - grid-template-columns: 80px auto; + section.home > img.simg1, + section.home > img.simg2 { + float: left; + margin-bottom: 20px; } - a.awardee { - width: auto; + 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; - padding-right: 20px; + } +} + +@supports (display: grid) { + + .app-container { + margin: auto; + display: grid; + grid-column-gap: 20px; + grid-row-gap: 0; + min-height: 100%; } - section.awardees > .awardee > img.profile, - section.profile> .awardee > img.profile { - width: 80px; - height: 80px; - border-radius: 40px; - align-self: center; + section.home { + display: grid; + grid-area: content; + grid-column-gap: 20px; + grid-row-gap: 20px; + align-self: start; } - header, - footer, - nav { - padding-left: 20px; - padding-right: 20px; - } - - header.main .title img { - width: 55px; - } - - footer .footer-lead { - width: 140px; - } - - footer .sigma-logo { - width: 78px; - } - - footer .ericsson-logo { - width: 82px; - margin-left: 10px; - } - - section.profile { - grid-template-columns: auto; - grid-template-rows: auto auto; - grid-template-areas: - "profile" - "sidebar"; - } - - section.awardee { - margin-left: 20px; - margin-right: 20px; + section.article { + display: grid; + grid-area: content; + grid-column-gap: 20px; + grid-row-gap: 20px; + align-self: start; } section.error { - margin-left: 20px; - margin-right: 20px; - } -} - -/* tablet */ -@media only screen and (min-width: 780px) and (max-width: 1219px) { - .app-container { - grid-template-columns: auto 180px 580px auto; - grid-template-rows: 170px auto 70px; - grid-template-areas: - ". header header ." - ". nav content ." - "footer footer footer footer"; + grid-area: content; } - section.home { - grid-template-columns: 280px 280px; - grid-template-rows: 370px 175px auto; - grid-template-areas: - "bigimg bigimg" - "smallimg1 smallimg2" - "article article" - "download download"; + footer.main-footer { + grid-area: footer; } - section.article { - grid-template-columns: 580px 380px; - grid-template-rows: auto; - grid-template-areas: - "article" - "sidebar"; + + /* mobile */ + @media only screen and (max-width: 779px) { + .app-container { + grid-template-columns: auto; + grid-template-rows: auto auto auto 70px; + grid-template-areas: + "header" + "nav" + "content" + "footer"; + } + + section.home { + max-width: calc(100% - 40px); + grid-template-columns: auto auto; + grid-template-rows: auto auto auto auto; + grid-template-areas: + "bigimg bigimg" + "article article" + "smallimg1 smallimg2" + "download download"; + } + + section.home > img { + width: 100%; + } + + section.article { + grid-template-columns: auto; + grid-template-rows: auto auto; + grid-template-areas: + "article" + "sidebar"; + } + + section.article > .sidebar { + display: none; + } + + img.embedded-image { + display: block; + max-width: 100%; + margin-left: auto; + margin-right: auto; + margin-bottom: 10px; + } + + img.embedded-image.keep-small-right { + max-width: 30%; + float: right; + } + + section.judge { + width: calc(100% - 40px); + margin-left: 20px; + margin-right: 20px; + margin-bottom: 20px; + float: left; + } + + a.awardee { + float: left; + margin-right: 20px; + grid-template-columns: 80px auto; + } + + section.awardee { + grid-template-columns: 80px auto; + } + + a.awardee { + width: auto; + padding-left: 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, + footer, + nav { + padding-left: 20px; + padding-right: 20px; + } + + header.main .title img { + width: 55px; + } + + footer .footer-lead { + width: 140px; + } + + footer .sigma-logo { + width: 78px; + } + + footer .ericsson-logo { + width: 82px; + margin-left: 10px; + } + + section.profile { + grid-template-columns: auto; + grid-template-rows: auto auto; + grid-template-areas: + "profile" + "sidebar"; + } + + section.awardee { + margin-left: 20px; + margin-right: 20px; + } + + section.error { + margin-left: 20px; + margin-right: 20px; + } + } + + /* tablet */ + @media only screen and (min-width: 780px) and (max-width: 1219px) { + .app-container { + grid-template-columns: auto 180px 580px auto; + grid-template-rows: 170px auto 70px; + grid-template-areas: + ". header header ." + ". nav content ." + "footer footer footer footer"; + } + + section.home { + grid-template-columns: 280px 280px; + grid-template-rows: 370px 175px auto; + grid-template-areas: + "bigimg bigimg" + "smallimg1 smallimg2" + "article article" + "download download"; + } + + section.article { + grid-template-columns: 580px 380px; + grid-template-rows: auto; + grid-template-areas: + "article" + "sidebar"; + } + + section.article > .sidebar { + display: none; + } + + .footer-content { + margin: auto; + width: 780px; + } + + img.embedded-image { + max-width: 50%; + float: right; + margin-left: 20px; + margin-bottom: 20px; + } + + img.embedded-image.keep-small-right { + max-width: 30%; + } + + section.judge { + width: 440px; + margin-right: 20px; + float: left; + } + + a.awardee { + float: left; + width: 470px; + margin-right: 20px; + margin-left: 20px; + grid-template-columns: 180px 270px; + } + + section.awardee { + grid-template-columns: 180px 360px; + } + + section.awardees > .awardee > img.profile, + section.profile> .awardee > img.profile { + width: 180px; + height: 180px; + border-radius: 90px; + } + + section.profile { + grid-template-columns: 560px; + grid-template-rows: auto auto; + grid-template-areas: + "profile" + "sidebar"; + } + + nav ul.menu_level_1 > li { + display: block; + } + } + + /* monitor */ + @media only screen and (min-width: 1220px) { + .app-container { + grid-template-columns: auto 180px 980px auto; + grid-template-rows: 170px auto 70px; + grid-template-areas: + ". header header ." + ". nav content ." + "footer footer footer footer"; + } + + section.home { + /*grid-template-columns: 580px 280px;*/ + grid-template-columns: 430px 130px 280px; + grid-template-rows: 175px 175px auto; + grid-template-areas: + "bigimg bigimg smallimg1" + "bigimg bigimg smallimg2" + "article download download"; + } + + section.article { + grid-template-columns: 580px 360px; + grid-template-rows: auto; + grid-template-areas: + "article sidebar"; + } + + .footer-content { + margin: auto; + width: 1180px; + } + + img.embedded-image { + display: none; + } + + section.judge { + width: 440px; + margin-right: 20px; + float: left; + } + + a.awardee { + float: left; + margin-right: 20px; + grid-template-columns: 180px 270px; + width: 470px; + } + + section.awardee { + grid-template-columns: 180px 360px; + } + + section.awardees > .awardee > img.profile, + section.profile> .awardee > img.profile { + width: 180px; + height: 180px; + border-radius: 90px; + } + + section.profile { + grid-template-columns: 560px 380px; + grid-template-rows: auto; + grid-template-areas: + "profile sidebar" + } + + section.profile > aside.sidebar > img { + margin-top: 340px; + } + + nav ul.menu_level_1 > li { + display: block; + } + } + + /* home page */ + section.home > img.bimg { + grid-area: bigimg; + } + + section.home > img.simg1 { + grid-area: smallimg1; + } + + section.home > img.simg2 { + grid-area: smallimg2; + } + + section.home > article { + grid-area: article; + } + + section.home > section.download { + grid-area: download; + } + + /* the prize (article) */ + section.article > article { + grid-area: article; } section.article > .sidebar { - display: none; + grid-area: sidebar; } - .footer-content { - margin: auto; - width: 780px; + /* judges */ + section.judges { + grid-area: content; } - img.embedded-image { - max-width: 50%; - float: right; - margin-left: 20px; - margin-bottom: 20px; - } - - img.embedded-image.keep-small-right { - max-width: 30%; - } - - section.judge { - width: 440px; - margin-right: 20px; - float: left; - } - - a.awardee { - float: left; - width: 470px; - margin-right: 20px; - margin-left: 20px; - grid-template-columns: 180px 270px; - } - - section.awardee { - grid-template-columns: 180px 360px; + /* awardees */ + section.awardees { + grid-area: content; } section.awardees > .awardee > img.profile, section.profile> .awardee > img.profile { - width: 180px; - height: 180px; - border-radius: 90px; + grid-area: image; } + /* awardee (profile) */ section.profile { - grid-template-columns: 560px; - grid-template-rows: auto auto; - grid-template-areas: - "profile" - "sidebar"; - } - - nav ul.menu_level_1 > li { - display: block; - } -} - -/* monitor */ -@media only screen and (min-width: 1220px) { - .app-container { - grid-template-columns: auto 180px 980px auto; - grid-template-rows: 170px auto 70px; - grid-template-areas: - ". header header ." - ". nav content ." - "footer footer footer footer"; - } - - section.home { - /*grid-template-columns: 580px 280px;*/ - grid-template-columns: 430px 130px 280px; - grid-template-rows: 175px 175px auto; - grid-template-areas: - "bigimg bigimg smallimg1" - "bigimg bigimg smallimg2" - "article download download"; - } - - section.article { - grid-template-columns: 580px 360px; - grid-template-rows: auto; - grid-template-areas: - "article sidebar"; - } - - .footer-content { - margin: auto; - width: 1180px; - } - - img.embedded-image { - display: none; - } - - section.judge { - width: 440px; - margin-right: 20px; - float: left; - } - - a.awardee { - float: left; - margin-right: 20px; - grid-template-columns: 180px 270px; - width: 470px; + display: grid; + grid-area: content; + grid-column-gap: 20px; + grid-row-gap: 20px; } + a.awardee, section.awardee { - grid-template-columns: 180px 360px; - } - - section.awardees > .awardee > img.profile, - section.profile> .awardee > img.profile { - width: 180px; - height: 180px; - border-radius: 90px; - } - - section.profile { - grid-template-columns: 560px 380px; - grid-template-rows: auto; + display: grid; + grid-column-gap: 20px; + grid-template-rows: 60px 120px auto; grid-template-areas: - "profile sidebar" + "image year" + "image name" + "content content"; } - section.profile > aside.sidebar > img { - margin-top: 340px; + .awardee .year { + grid-area: year; + font-family: 'PT Serif', serif; + font-size: 32pt; + align-self: end; } - nav ul.menu_level_1 > li { - display: block; + .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; } } -/* home page */ -section.home > img.bimg { - grid-area: bigimg; -} - -section.home > img.simg1 { - grid-area: smallimg1; -} - -section.home > img.simg2 { - grid-area: smallimg2; -} - -section.home > article { - grid-area: article; -} - -section.home > section.download { - grid-area: download; -} section.download > img.poster-logo{ float: left; @@ -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;