* mostly complete

public/styles/main.css

@@ -5,34 +5,6 @@ body {
     --header-size: 22pt;
 }
 
-.app-container {
-    margin: auto;
-    display: grid;
-    grid-column-gap: 20px;
-    grid-row-gap: 0;
-    min-height: 100%;
-}
-
-.content-container {
-    grid-area: content;
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: 200px auto;
-    grid-template-areas:
-        "title"
-        "main";
-}
-
-.content-container > article,
-.content-block > section {
-    border-left: 1px solid #003b70;
-    padding: 0 10px 0 10px;
-}
-
-.content-block {
-    grid-area: content;
-}
-
 h1 {
     font-family: 'PT Serif', serif;
     font-size: var(--header-size);
@@ -57,12 +29,135 @@ section {
     font-size: 16pt;
 }
 
+/* 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;
+}
+
+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;
+}
+
 /* mobile */
 @media only screen and (max-width: 779px) {
     .app-container {
         grid-template-columns: auto;
-        grid-template-rows: 170px auto auto auto 70px;
-        grid-template-areas: "header" "nav" "content" "sidebar" "footer";
+        grid-template-rows: 170px 150px auto 70px;
+        grid-template-areas:
+                "header"
+                "nav"
+                "content"
+                "footer";
+    }
+
+    section.home {
+        grid-template-columns: auto auto;
+        grid-template-rows: 370px 175px auto 175px;
+        grid-template-areas:
+                "bigimg bigimg"
+                "article article"
+                "smallimg1 smallimg2";
+    }
+
+    section.article {
+        grid-template-columns: auto;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+                "article"
+                "sidebar";
+    }
+
+    section.article > .sidebar {
+        display: none;
+    }
+
+    img.embedded-image {
+        max-width: 30%;
+        float: right;
+        margin-left: 10px;
+        margin-bottom: 10px;
+    }
+
+    section.judge {
+        width: calc(100% - 40px);
+        margin-left: 20px;
+        margin-right: 20px;
+        float: left;
+    }
+
+    a.awardee {
+        float: left;
+        margin-right: 20px;
+        grid-template-columns: 180px auto;
+    }
+
+    section.awardee {
+        grid-template-columns: 180px auto;
+    }
+
+    a.awardee {
+        width: auto;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    header,
+    footer,
+    nav {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+    section.profile {
+        grid-template-columns: auto;
+        grid-template-rows: auto auto;
+        grid-template-areas:
+                "profile"
+                "sidebar";
+    }
+
+    section.awardee {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    nav > ul {
+        position: relative;
+    }
+
+    nav > ul > li {
+        display: inline-block;
+        width: 30%
+    }
+
+    nav ul.menu_level_1 {
+        left: 0;
+        position: absolute;
+    }
+
+    nav ul.menu_level_1 > li {
+        position: relative;
+        display: inline-block;
+        max-width: 20%;
     }
 }
 
@@ -70,38 +165,271 @@ section {
 @media only screen and (min-width: 780px) and (max-width: 1179px) {
     .app-container {
         grid-template-columns: auto 180px 580px auto;
-        grid-template-rows: 170px auto auto 70px;
+        grid-template-rows: 170px auto 70px;
         grid-template-areas:
                 ". header header ."
                 ". nav content ."
-                ". nav sidebar ."
                 "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";
+    }
+
+    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: 580px;
+    }
+
+    section.judge {
+        width: 440px;
+        margin-right: 20px;
+        float: left;
+    }
+
+    a.awardee {
+        float: left;
+        margin-right: 20px;
+        margin-left: 20px;
+        grid-template-columns: 180px 270px;
+    }
+
+    section.awardee {
+        grid-template-columns: 180px 380px;
+    }
+
+    a.awardee {
+        width: 470px;
+    }
+
+    section.profile {
+        grid-template-columns: 580px;
+        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: 1180px) {
     .app-container {
-        grid-template-columns: auto 180px 580px 380px auto;
+        grid-template-columns: auto 180px 980px auto;
         grid-template-rows: 170px auto 70px;
         grid-template-areas:
-                ". header header  header  ."
-                ". nav    content sidebar ."
-                "footer footer footer footer footer";
+                ". header header  ."
+                ". nav    content ."
+                "footer footer footer footer";
+    }
+
+    section.home {
+        grid-template-columns: 560px 280px;
+        grid-template-rows: 175px 175px auto;
+        grid-template-areas:
+                "bigimg smallimg1"
+                "bigimg smallimg2"
+                "article article";
+    }
+
+    section.article {
+        grid-template-columns: 580px 380px;
+        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;
+    }
+
+    section.awardee {
+        grid-template-columns: 180px 380px;
+    }
+
+    a.awardee {
+        width: 470px;
+    }
+
+    section.profile {
+        grid-template-columns: 580px 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;
+    }
 }
 
-header.main-header {
+/* 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;
+}
+
+/* the prize (article) */
+section.article > article {
+    grid-area: article;
+}
+
+section.article > .sidebar {
+    grid-area: sidebar;
+}
+
+section.article > .sidebar > img {
+    max-width: 380px;
+}
+
+/* judges */
+section.judges {
+    grid-area: content;
+}
+
+section.judge > img.profile {
+    float: left;
+    width: 80px;
+    height: 80px;
+    border-radius: 40px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+}
+
+section.judge > .title {
+    font-size: 18pt;
+}
+
+section.judge > .description {
+    font-size: 12pt;
+}
+
+/* awardees */
+section.awardees {
+    grid-area: content;
+}
+
+section.awardees > .awardee > img.profile,
+section.profile> .awardee > img.profile {
+    width: 180px;
+    height: 180px;
+    border-radius: 90px;
+}
+
+/* awardee (profile) */
+section.profile {
+    grid-area: content;
+    display: grid;
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+}
+
+section.profile > article {
+    border-left: 1px solid #003b70;
+    padding: 0 10px 0 10px;
+}
+
+section.profile > aside.sidebar > img {
+    max-width: 100%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+section.profile > aside.sidebar > .image-label {
+    margin: 20px;
+    font-size: 20pt;
+    font-style: italic;
+    font-weight: bold;
+}
+
+a.awardee,
+section.awardee {
+    display: grid;
+    grid-column-gap: 20px;
+    grid-template-rows: 80px 100px auto;
+    grid-template-areas:
+            "image year"
+            "image name"
+            "content content";
+}
+
+.awardee .year {
+    grid-area: year;
+    font-size: 32pt;
+    align-self: end;
+}
+
+.awardee .name {
+    grid-area: name;
+    font-size: 34pt;
+    line-height: 32pt;
+    font-weight: bold;
+}
+
+.awardee > .description {
+    grid-area: content;
+}
+
+/* common parts */
+
+header.main {
     grid-area: header;
 }
 
@@ -115,28 +443,27 @@ header .description {
     letter-spacing: 1.75pt;
 }
 
-header .logo {
-
-}
-
-nav.main-nav {
+nav.main {
     grid-area: nav;
 }
 
-section.profile-title {
-    grid-area: title;
-}
-
-article.profile {
-    grid-area: main;
-}
-
-aside.profile-image {
-    grid-area: sidebar;
-}
-
 footer.main-footer {
     grid-area: footer;
+    line-height: 70px;
+}
+
+footer .footer-lead {
+    display: inline-block;
+    width: 200px;
+}
+
+footer .sigma-logo {
+    vertical-align: -10px;
+}
+
+footer .ericsson-logo {
+    vertical-align: -4px;
+    margin-left: 50px;
 }
 
 footer {
@@ -182,7 +509,6 @@ nav ul.menu_level_1 {
 nav ul.menu_level_1 > li {
     font-size: 14pt;
     line-height: 18pt;
-    display: block;
     padding-left: 15px;
     margin-bottom: 10px;
 }