* google fonts added

* color changes
* grid middle row in tablet resolution is now variable
This commit is contained in:
Dávid Danyi 2018-05-02 19:03:32 +02:00
parent ff2721f67c
commit e11803f273
4 changed files with 77 additions and 19 deletions

View File

@ -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;
}

View File

@ -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);

View File

@ -4,9 +4,17 @@
</section>
<article class="profile">
<p>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.</p>
<p>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.</p>
<p>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.</p>
<section class="profile-image">
</section>
<p>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.</p>
<p>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.</p>
</article>
</section>

View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title><?= $this->e($title) ?> - zend-expressive</title>
<link rel="shortcut icon" href="https://framework.zend.com/ico/favicon.ico"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:700|Raleway:500">
<link rel="stylesheet" href="<?= $this->serverurl('/styles/normalize.css') ?>"/>
<link rel="stylesheet" href="<?= $this->serverurl('/styles/main.css') ?>"/>
<?= $this->section('stylesheets') ?>
@ -13,19 +14,18 @@
<body>
<div class="app-container">
<header class="main-header">
<span>Gran Prize</span>
<span>
Interdisciplinary
Innovative
<div class="title">Gran Prize</div>
<div class="description">
Interdisciplinary<br>
Innovative<br>
Award
</span>
GP logo
</div>
</header>
<nav class="main-nav"><?=$this->navigation()?></nav>
<?= $this->section('content') ?>
<footer class="main-footer">
<div class="footer-content">
Sponsored by:
SPONSORED BY:
SIGMA
ERICSSON
</div>