Projects/nettsiden
Projects
/
nettsiden
8
0
Fork 0
Code Issues 5 Pull Requests 2 Activity

Redesign navbar and landing page

This commit is contained in:
halworsen 2017-11-13 13:21:51 +01:00
parent 518ee8baf2
commit c6cd02486d
4 changed files with 229 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
inc/navbar.php
View File

@ -1,22 +1,20 @@
<?php <?php
function navbar($depth, $active = NULL) { function navbar($depth, $active = NULL) {
$result = "\n\t<ul>\n"; $result = "<ul>\n";
$menuItems = [ $menuItems = [
'hjem' => '', 'hjem' => '',
'kalender' => 'kalender', 'kalender' => 'kalender',
'aktiviteter' => 'aktiviteter', 'aktiviteter' => 'aktiviteter',
'prosjekter' => 'prosjekt', 'prosjekter' => 'prosjekt',
'kontakt' => 'kontakt', 'kontakt' => 'kontakt',
'wiki' => 'pvv', 'wiki' => 'pvv'
]; ];
foreach($menuItems as $caption => $link) { foreach($menuItems as $caption => $link) {
$result .= "\t\t<li" . ($active === $link ? ' class="active"' : '') . '>' $result .= "\t\t\t<a href=\"" . rtrim(str_repeat('../', $depth) . $link, '/') . "/\"" . ($active === $link ? ' class="active"' : '') . ">"
. '<a href="' . rtrim(str_repeat('../', $depth) . $link, '/') . '/">' . "<li>" . $caption . "</li></a>\n"
. $caption
. "</a></li>\n"
; ;
} }
return $result . "\t</ul>\n"; return $result . "\t\t</ul>\n";
} }
function loginBar($sp = 'default-sp') { function loginBar($sp = 'default-sp') {
@ -27,9 +25,9 @@ function loginBar($sp = 'default-sp') {
$attr = $as->getAttributes(); $attr = $as->getAttributes();
if($attr) { if($attr) {
$uname = $attr['uid'][0]; $uname = $attr['uid'][0];
$result .= "\t<p class=\"login\">logget inn som: " . htmlspecialchars($uname) . "</p>\n"; $result .= "\t\t<p class=\"login\">logget inn som: " . htmlspecialchars($uname) . "</p>\n";
} else { } else {
$result .= "\t<a class=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">logg inn</a>\n"; $result .= "\t\t<a class=\"login\" href=\"" . htmlspecialchars($as->getLoginURL()) . "\">logg inn</a>\n";
} }
return $result; return $result;

49
www/css/landing.css Normal file
View File

@ -0,0 +1,49 @@
header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 50px;
padding: 2em 0;
width: 100vw;
height: 40vh;
background-color: #002244;
color: #fff;
}
header img {
width: 30vh;
height: 30vh;
}
main {
margin-top: 0;
}
.intro {
text-align: center;
}
.essentials {
margin: 1.8em 0;
padding: .2em 0;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.essentials li {
display: inline-block;
}
.essentials a {
margin: 0 2em;
height: 100%;
}
.essentials .join {
padding: 1em;
font-size: 1.2em;
}

281
www/css/style.css
View File

@ -1,216 +1,119 @@
nav ul { body {
overflow-y: scroll;
overflow-x: hidden;
}
* {
font-style: -apple-system, 'avenir next', avenir, roboto, noto, ubuntu, 'helvetica neue', helvetica, arial, sans-serif;
}
nav {
position: fixed; position: fixed;
z-index: 99;
top: 0; top: 0;
left: 0; width: 100vw;
right: 0; height: 50px;
margin: .1em auto 0 auto; background-color: #002244;
text-align: center;
background: rgba(255,255,255,.8);
margin: 0;
z-index: 3;
}
nav li {
display: inline-block;
line-height: 3em;
margin: auto 1em;
}
nav a {
display: inline-block;
margin: auto;
color: gray;
text-decoration: none;
}
nav li.active a {
color: #048;
}
nav .login{
position: fixed;
top: .8em;
right: .8em;
margin: auto;
z-index: 3;
color: gray;
}
header {
margin-top: 3rem;
height: 16rem;
overflow: hidden; overflow: hidden;
text-align: right;
color: #fff; box-shadow: 0 0 5px #000;
font-family: monospace;
padding: 1rem;
font-size: 4em;
background: url('pvv-background.png') no-repeat 1% 50% #024;
background-size: contain;
} }
main {
max-width: 60rem; nav * {
margin: -7rem auto 0 auto; background-color: #002244;
color: #fff;
margin: 0;
padding: 0; padding: 0;
} }
article {
padding: .1rem 1rem 1rem 1rem;
margin: 0 1rem 0 1rem;
background: white;
z-index: 2; nav h2 {
position: relative; display: inline-block;
} position: fixed;
article p { top: 0;
text-align: justify; margin-left: .65em;
hyphens: auto;
} line-height: 5vh;
article:first-child {
border-radius: .5rem .5rem 0 0; color: #002244;
}
main:before {
content: " ";
display: block;
position: absolute;
top: 16rem;
left: 1rem;
right: 1rem;
margin: 0 auto;
height: 8em;
z-index: 1;
max-width: 58rem;
box-shadow: 0 -.2rem .15rem rgba(0,0,0,.3);
border-radius: 0 0 .3em .3em;
background: white;
} }
.split { nav img{
width: 50px;
height: 50px;
}
nav ul {
display: table; display: table;
width: 100%;
table-layout: fixed; table-layout: fixed;
border-spacing: 1em; position: fixed;
top: 0;
left: 15vw;
right: 15vw;
width: 70vw;
height: 50px;
list-style: none;
} }
.split > * {
nav a {
display: table-cell; display: table-cell;
} height: 100%;
margin: 0;
.subtitle {
font-weight: bold;
}
.ruler {
border: none;
border-bottom: 1px dotted rgba(0,0,0,.5);
}
a.btn {
text-decoration: none; text-decoration: none;
border: 1px solid #048; font-size: 1.2em;
color: #048;
padding: .2em 1em;
border-radius: .2em;
white-space: nowrap;
display: inline-block;
margin-bottom: .25em;
}
a.btn:hover {
border-color: #084;
background: #eee;
color: #084;
}
a.btn:active {
border-color: #084;
background: #084;
color: white;
}
.boxinput {
text-decoration: none;
border: 1px solid #048;
color: #048;
padding: .2em .4em;
border-radius: .2em;
display: inline-block;
margin-bottom: .25em;
resize: none;
}
.noborder {
border: none !important;
}
.subnote {
margin-top: 0;
color: gray;
font-size: .7em;
font-style: italic;
}
.no-chin {
margin-bottom: 0;
}
.icon.subscribe {
color: white;
background: #082;
border-radius: 1em;
width: 1em;
line-height: 1em;
text-align: center; text-align: center;
line-height: 48px;
border-bottom: 2px solid rgba(255, 255, 255, 0);
transition: border-bottom .3s ease;
} }
@media screen and (max-width: 50rem) { nav a:hover {
.split, .split > * { border-bottom: 2px solid rgba(255, 255, 255, 1);
display: block;
transition: border-bottom .3s ease;
} }
img.float-right {
display: none; nav a.active {
border-bottom: 2px solid rgba(255, 255, 255, 1);
transition: none;
} }
nav li {
margin: auto .5em; nav .login {
} position: fixed;
header { top: 0;
font-size: 2em; right: 0;
height: 48px;
padding: 0 1em;
} }
main { main {
margin: -13rem auto 0 auto; padding: 1em 15vw;
} height: 100vh;
article { margin-top: 5vh;
margin: 0 .5rem 0 .5rem;
} background-color: #fff;
main:before {
left: .5rem;
right: .5rem;
}
}
@media screen and (max-width: 23rem) {
body {
font-size: 0.8em;
}
header {
margin-top: 2.4rem;
}
main:before {
top: 13rem;
height: 13em;
}
} }
main h2 {
color: #002244;
.collapsable {
display: none;
}
.collapsable:target {
display: block;
} }
.noselect { .btn {
/* iOS Safari */ padding: .5em;
-webkit-touch-callout: none; border-radius: 4px;
/* Safari */ text-decoration: none;
-webkit-user-select: none; color: #fff;
/* Konqueror HTML */ background-color: #002244;
-khtml-user-select: none;
/* Firefox */ transition: background-color .2s ease;
-moz-user-select: none; }
/* Internet Explorer/Edge */
-ms-user-select: none; .btn:hover {
/* Non-prefixed version, currently supported by Chrome and Opera */ background-color: #00407F;
user-select: none;
transition: background-color .2s ease;
} }

49
www/index.php
View File

@ -14,32 +14,41 @@ $agenda = new \pvv\side\Agenda([
new \pvv\side\DBActivity($pdo), new \pvv\side\DBActivity($pdo),
]); ]);
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="no"> <html lang="no">
<head>
<title>Programvareverkstedet</title> <title>Programvareverkstedet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/splash.css"> <link rel="stylesheet" href="css/splash.css">
<link rel="stylesheet" href="css/landing.css">
</head>
<header>Program&shy;vare&shy;verk&shy;stedet</header> <body>
<nav>
<?php echo navbar(0, ''); ?>
<?php echo loginbar(); ?>
</nav>
<header>
<img src="css/pvv-background.png"/>
<h2>Velkommen til Programvareverkstedet</h2>
</header>
<main> <main>
<div class="intro">
<article class="threed">
<img src="pvv-logo.png" class="float-right">
<h2>Velkommen til Program&shy;vare&shy;verk&shy;stedet</h2> <h2>Velkommen til Program&shy;vare&shy;verk&shy;stedet</h2>
<p>Programvareverkstedet (PVV) vil skape et miljø for datainteresserte personer tilknyttet universitetet. Nåværende og tidligere studenter ved NTNU, samt ansatte ved NTNU og tilstøtende miljø, kan bli medlemmer. </p> <p>Programvareverkstedet (PVV) er en studentorganisasjon ved NTNU som vil skape et miljø for datainteresserte personer tilknyttet universitetet. Nåværende og tidligere studenter ved NTNU, samt ansatte ved NTNU og tilstøtende miljø, kan bli medlemmer.</p>
<p> <ul class="essentials">
<a class="btn" href="om/">Om PVV</a> <a class="btn" href="om/"><li>Om PVV</li></a>
<a class="btn" href="paamelding/">Bli medlem</a> <a class="btn join" href="paamelding/"><li>Bli medlem</li></a>
<a class="btn" href="https://use.mazemap.com/?v=1&amp;left=10.4032&amp;right=10.4044&amp;top=63.4178&amp;bottom=63.4172&amp;campusid=1&amp;zlevel=2&amp;sharepoitype=point&amp;sharepoi=10.40355%2C63.41755%2C2&amp;utm_medium=longurl">Veibeskrivelse</a> <a class="btn" href="https://use.mazemap.com/?v=1&amp;left=10.4032&amp;right=10.4044&amp;top=63.4178&amp;bottom=63.4172&amp;campusid=1&amp;zlevel=2&amp;sharepoitype=point&amp;sharepoi=10.40355%2C63.41755%2C2&amp;utm_medium=longurl"><li>Veibeskrivelse</li></a>
</p> </ul>
</article> </div>
<div class="split">
<article>
<h2>Kommende arrangement</h2> <h2>Kommende arrangement</h2>
<ul class="calendar-events"> <ul class="calendar-events">
<?php $counter1 = 0; ?> <?php $counter1 = 0; ?>
@ -66,11 +75,11 @@ $agenda = new \pvv\side\Agenda([
</li> </li>
<?php } ?> <?php } ?>
</ul> </ul>
</li>
<?php } ?> <?php } ?>
</ul> </ul>
<p><a class="btn" href="kalender/">Flere aktiviteter</a></p> <p><a class="btn" href="kalender/">Flere aktiviteter</a></p>
</article>
<article>
<h2>Opptak</h2> <h2>Opptak</h2>
<p> <p>
Alle med tilknytning til NTNU kan bli medlem hos oss Alle med tilknytning til NTNU kan bli medlem hos oss
@ -86,12 +95,6 @@ For å bli med i våre prosjekter og komitéer må du søke.
<a class="btn" href="prosjekt/">Søk komité</a> <a class="btn" href="prosjekt/">Søk komité</a>
--> -->
</p> </p>
</article>
</div>
</main> </main>
</body>
<nav> </html>
<?php echo navbar(0, ''); ?>
<?php echo loginbar(); ?>
</nav>