From e11803f27362aac08f072cbf6724a6bc0944fad9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?D=C3=A1vid=20Danyi?= Date: Wed, 2 May 2018 19:03:32 +0200 Subject: [PATCH] * google fonts added * color changes * grid middle row in tablet resolution is now variable --- public/styles/main.css | 68 ++++++++++++++++++++++---- src/App/Plates/NavigationExtension.php | 6 +-- templates/app/home-page.phtml | 8 +++ templates/layout/default.phtml | 14 +++--- 4 files changed, 77 insertions(+), 19 deletions(-) diff --git a/public/styles/main.css b/public/styles/main.css index 1b4edde..fa9ba94 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -1,6 +1,7 @@ html, body { height: 100%; + color: #003b70; } .app-container { @@ -21,15 +22,37 @@ body { "main"; } -.content-container article, -.content-block section { - border-left: 1px solid #003b71; +.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; +} + +a:link, +a:visited, +a:hover, +a:active { + color: #003b70; +} + +a:hover { + color: #136CBC; + text-decoration: underline; +} + +article, +section { + font-family: 'Raleway', sans-serif; +} + /* mobile */ @media only screen and (max-width: 767px) { .app-container { @@ -42,7 +65,7 @@ body { /* tablet */ @media only screen and (min-width: 768px) and (max-width: 991px) { .app-container { - grid-template-columns: 200px 600px 400px; + grid-template-columns: 200px auto 400px; grid-template-rows: 100px auto 70px; grid-template-areas: "header header header" @@ -72,6 +95,19 @@ header.main-header { grid-area: header; } +header .title { + font-size: 14pt; +} + +header .description { + font-size: 10pt; + letter-spacing: 1.5pt; +} + +header .logo { + +} + nav.main-nav { grid-area: nav; } @@ -93,8 +129,9 @@ footer.main-footer { } footer { + font-family: 'PT Serif', serif; color: #fffffd; - background-color: #003b71; + background-color: #003b70; } nav ul { @@ -102,18 +139,30 @@ nav ul { padding-left: 0; } +nav li { + font-family: 'PT Serif', serif; +} + nav li > ul { display: none; } +nav > ul > li { + padding-left: 5px; +} + +nav > ul > li.current { + border-left: 5px solid #003b70; +} + nav li.current > ul, nav li.current_ancestor > ul { display: block; } nav > ul > li { - font-variant: small-caps; - font-weight: 500; + font-weight: 700; + font-size: 18pt; } nav ul.menu_level_1 { @@ -121,11 +170,12 @@ nav ul.menu_level_1 { } nav ul.menu_level_1 > li { - font-variant: initial; + font-size: 12pt; + line-height: 20pt; display: block; padding-left: 15px; } nav ul.menu_level_1 > li.current { - border-left: 5px solid #003b71; + border-left: 5px solid #003b70; } diff --git a/src/App/Plates/NavigationExtension.php b/src/App/Plates/NavigationExtension.php index aa83436..cc3a64f 100644 --- a/src/App/Plates/NavigationExtension.php +++ b/src/App/Plates/NavigationExtension.php @@ -58,7 +58,7 @@ class NavigationExtension implements ExtensionInterface $factory = new MenuFactory(); $this->menu = $factory->createItem("Main-menu"); - $prizeMenu = $this->menu->addChild("The prize", [ + $prizeMenu = $this->menu->addChild(strtoupper("The Prize"), [ 'uri' => $this->getUriFromRouter('the-prize') ]); $prizeMenu->addChild("Background and Purpose", [ @@ -74,11 +74,11 @@ class NavigationExtension implements ExtensionInterface 'uri' => $this->getUriFromRouter('the-prize.events') ]); - $this->menu->addChild("Judges", [ + $this->menu->addChild(strtoupper("Judges"), [ 'uri' => $this->getUriFromRouter('judges') ]); - $awardeesMenu = $this->menu->addChild("Awardees", [ + $awardeesMenu = $this->menu->addChild(strtoupper("Awardees"), [ 'uri' => $this->getUriFromRouter('awardees') ]); $this->populateAwardeesSubmenu($awardeesMenu); diff --git a/templates/app/home-page.phtml b/templates/app/home-page.phtml index c0735e4..a0a8a1d 100644 --- a/templates/app/home-page.phtml +++ b/templates/app/home-page.phtml @@ -4,9 +4,17 @@
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis ipsum ut turpis mollis commodo et id nisl. Vestibulum sed sem pellentesque, fermentum felis in, sollicitudin mauris. Integer mollis commodo velit, in volutpat nisl sagittis id. Vestibulum porttitor nulla convallis consectetur volutpat. Nam faucibus in felis a aliquet. Ut vitae malesuada ex. Integer eget pulvinar quam, a blandit leo. Nulla a felis sed nulla aliquet molestie. Donec tortor ligula, rhoncus et justo eget, ultrices posuere velit. Morbi finibus purus sed mauris semper tempus. Etiam lobortis magna id orci vestibulum, eu vulputate diam congue. Maecenas consectetur ipsum in mollis porttitor. Nullam vitae eros at massa viverra commodo. Etiam gravida eu turpis ac auctor.

+ +

Cras eget lobortis ex, nec eleifend tellus. Suspendisse potenti. Vivamus auctor diam at fermentum dignissim. Aliquam semper facilisis risus, eu interdum urna ultrices quis. Integer ut cursus lacus. Nunc vel lacus quis erat consequat bibendum ac at mi. Mauris pulvinar commodo semper. Nunc sed accumsan leo. Aliquam rhoncus tellus ut mollis commodo. Aenean euismod nunc vehicula, tincidunt magna at, porta turpis.

+ +

Nullam ut ullamcorper enim, sollicitudin faucibus est. Quisque vestibulum velit nec odio accumsan pharetra. Duis ante sem, bibendum id sodales in, lacinia sed turpis. Sed sagittis diam eu aliquet rutrum. Donec at lobortis lorem. Maecenas non condimentum nunc, sed ullamcorper massa. Aliquam placerat vehicula eros at pharetra. Pellentesque nec convallis eros, vitae scelerisque ligula. Vestibulum cursus, augue id fermentum ultrices, tortor augue eleifend lorem, ut dignissim erat lectus in nisl. Phasellus aliquam nunc nec orci pulvinar tincidunt. Etiam a facilisis turpis, at cursus mauris. Mauris dictum vitae nunc non maximus. Quisque consectetur est justo, nec blandit leo aliquam sit amet. Nullam in ligula mi. Sed sollicitudin velit a eleifend pellentesque.

+

Nunc eu massa non est mollis tempus. Duis posuere pharetra hendrerit. Vivamus egestas dictum interdum. Aliquam quam libero, dignissim at augue nec, laoreet efficitur ex. Aenean sollicitudin nibh placerat, mollis nisi eget, accumsan metus. Praesent in erat vel nisl hendrerit blandit vel eget turpis. Morbi fermentum, neque ac pretium vulputate, lectus arcu vehicula elit, ac consequat nibh tortor nec leo. Aliquam consequat hendrerit tempor. Sed eu viverra lacus. Nulla lacinia purus dapibus lobortis sollicitudin. In eget orci ligula. Nullam aliquet feugiat nunc, et facilisis justo. Duis quis est feugiat, tincidunt diam quis, facilisis neque. Duis tincidunt nisi ac rutrum lobortis. Proin nibh lorem, bibendum id nibh id, malesuada hendrerit diam.

+ +

Ut sodales, nunc varius lacinia iaculis, mi purus facilisis orci, sit amet feugiat lorem massa sit amet sapien. Ut vitae mauris nunc. Vivamus turpis quam, sollicitudin id dictum ac, pretium sed diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean tempus neque tortor, ac vulputate turpis consequat luctus. Nam auctor leo ut convallis euismod. Mauris fringilla eros a dui mollis, vel varius quam convallis. Phasellus erat dolor, sodales a porttitor sed, vestibulum ac orci. Praesent eu massa accumsan, tincidunt lectus sit amet, volutpat velit. Sed maximus, ante nec luctus tincidunt, tortor sapien sagittis lectus, at gravida arcu neque ac ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare nisl eu nunc porta interdum.

diff --git a/templates/layout/default.phtml b/templates/layout/default.phtml index 96fdfbd..d6b1ed1 100644 --- a/templates/layout/default.phtml +++ b/templates/layout/default.phtml @@ -6,6 +6,7 @@ <?= $this->e($title) ?> - zend-expressive + section('stylesheets') ?> @@ -13,19 +14,18 @@
- Gran Prize - - Interdisciplinary - Innovative +
Gran Prize
+
+ Interdisciplinary
+ Innovative
Award - - GP logo +
section('content') ?>