introducing news details page

config.codekit3

@@ -398,6 +398,19 @@
 		"oS": 0,
 		"uL": 1
 		},
+	"\/publichealth\/static\/css\/modules\/_navbar.scss": {
+		"aP": 0,
+		"bl": 0,
+		"dP": 10,
+		"dS": 0,
+		"ft": 4,
+		"ma": 0,
+		"oA": 1,
+		"oAP": "\/publichealth\/static\/css\/css\/_navbar.css",
+		"oF": 0,
+		"oS": 0,
+		"uL": 1
+		},
 	"\/publichealth\/static\/css\/modules\/_news.scss": {
 		"aP": 0,
 		"bl": 0,
@@ -3253,6 +3266,14 @@
 		"oF": 0,
 		"opt": 0
 		},
+	"\/publichealth\/static\/mockup\/images\/public-health-logo-sign.png": {
+		"ft": 32768,
+		"iS": 2615,
+		"oA": 0,
+		"oAP": "\/publichealth\/static\/mockup\/images\/public-health-logo-sign.png",
+		"oF": 0,
+		"opt": 0
+		},
 	"\/publichealth\/static\/mockup\/images\/public-health-logo.png": {
 		"ft": 32768,
 		"iS": 42474,
@@ -3275,6 +3296,12 @@
 		"oAP": "\/publichealth\/static\/mockup\/index.html",
 		"oF": 0
 		},
+	"\/publichealth\/static\/mockup\/news-details.html": {
+		"ft": 8192,
+		"oA": 2,
+		"oAP": "\/publichealth\/static\/mockup\/news-details.html",
+		"oF": 0
+		},
 	"\/publichealth\/static\/org\/public-health-bg.png": {
 		"ft": 32768,
 		"iS": 42822,

publichealth/static/css/main.scss

@@ -18,6 +18,12 @@ section {
   &:nth-child(odd) {
     background-color: $gray-lighter;
   }
+
+  h2 {
+    text-align: center;
+    margin-bottom: 1.5em;
+    text-transform: uppercase;
+  }
 }
 
 /* Responsive image/video classes */

publichealth/static/css/modules/_modules.scss

@@ -1,3 +1,4 @@
+@import "navbar";
 @import "banner";
 @import "footer";
 @import "news";

publichealth/static/css/modules/_navbar.scss

@@ -0,0 +1,14 @@
+.navbar-default {
+  .navbar-header {
+    .navbar-brand {
+      text-transform: uppercase;
+
+      img {
+        display: inline;
+        width: auto;
+        height: 28px;
+        margin-top: -5px;
+      }
+    }
+  }
+}

publichealth/static/css/modules/_news.scss

@@ -1,3 +1,5 @@
+
+// News overview
 #news {
   .panel-default {
     font-size: 90%;
@@ -9,3 +11,34 @@
     }
   }
 }
+
+// News detail article
+#news-details {
+  .category {
+    margin-top: 2em;
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 80%;
+    letter-spacing: 2px;
+    border-bottom: 1px solid $text-color;
+  }
+  .date {
+    color: lighten($text-color, 20%);
+    font-size: 90%;
+    text-transform: uppercase;
+    margin-bottom: .5em;
+  }
+  hr {
+    margin-left: 0;
+    width: 100px;
+  }
+  .author {
+    color: lighten($text-color, 20%);
+    font-size: 90%;
+    text-transform: uppercase;
+    font-style: italic;
+  }
+  .backlink {
+    margin-top: 3em; 
+  }
+}

publichealth/static/mockup/assets/css/main.css

@@ -6436,6 +6436,14 @@ input[type="checkbox"],
 .carousel-caption h1, .carousel-caption h2, .carousel-caption h3, .carousel-caption h4, .carousel-caption h5, .carousel-caption h6 {
   color: inherit; }
 
+.navbar-default .navbar-header .navbar-brand {
+  text-transform: uppercase; }
+  .navbar-default .navbar-header .navbar-brand img {
+    display: inline;
+    width: auto;
+    height: 28px;
+    margin-top: -5px; }
+
 /* Page header */
 #banner {
   padding-top: 0 !important;
@@ -6493,6 +6501,33 @@ footer#footer {
   #news .panel-default a {
     font-size: 80%; }
 
+#news-details .category {
+  margin-top: 2em;
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: 80%;
+  letter-spacing: 2px;
+  border-bottom: 1px solid #666; }
+
+#news-details .date {
+  color: #999999;
+  font-size: 90%;
+  text-transform: uppercase;
+  margin-bottom: .5em; }
+
+#news-details hr {
+  margin-left: 0;
+  width: 100px; }
+
+#news-details .author {
+  color: #999999;
+  font-size: 90%;
+  text-transform: uppercase;
+  font-style: italic; }
+
+#news-details .backlink {
+  margin-top: 3em; }
+
 body {
   margin-top: 64px; }
 
@@ -6500,6 +6535,10 @@ section {
   padding: 6em 0; }
   section:nth-child(odd) {
     background-color: #eeeeee; }
+  section h2 {
+    text-align: center;
+    margin-bottom: 1.5em;
+    text-transform: uppercase; }
 
 /* Responsive image/video classes */
 .rich-text img {

publichealth/static/mockup/index.html

@@ -22,7 +22,7 @@
 		        <span class="icon-bar"></span>
 		        <span class="icon-bar"></span>
 		      </button>
-				<a class="navbar-brand" href="#"><strong>Public Health</strong> Schweiz</a>
+				<a class="navbar-brand" href="#"><img src="images/public-health-logo-sign.png" alt=""> <span class="hidden-xs"><strong>Public Health</strong> Schweiz</span></a>
 			</div>
 
 			<!-- Collect the nav links, forms, and other content for toggling -->
@@ -83,7 +83,7 @@
 	</section>
 	<section id="news">
 		<div class="container">
-			<h3>News</h3>
+			<h2>News</h2>
 			<div class="row">
 				<div class="col-md-4">
 					<div class="panel panel-default">
@@ -92,7 +92,7 @@
 						</div>
 						<div class="panel-body">
 							<p>Ehrenmitgliedschaften</p>
-							<p><a href="#" class="btn btn-primary btn-xs">Mehr erfahren</a></p>
+							<p><a href="/news-details.html" class="btn btn-primary btn-xs">Mehr erfahren</a></p>
 						</div>
 					</div>
 				</div>
@@ -121,7 +121,7 @@
 	<section>
 		<div class="container">
 			<div class="">
-				<h3>Informationen zu Public Health</h3>
+				<h2>Informationen zu Public Health</h2>
 				<p>Hier finden Sie Links zu wichtigen Institutionen und Organisationen aus dem Public Health Bereich. Die Liste erhebt keinen Anspruch auf Vollständigkeit. Gerne nehmen wir Ihre Anregungen und Ergänzungsvorschläge entgegen.</p>
 				<a href="#" class="btn btn-default">Mehr erfahren</a>
 			</div>
@@ -138,7 +138,7 @@
 						<img src="images/ipad.jpg" alt="Pic 01" />
 					</div>
 					<header>
-						<h3>Über uns</h3>
+						<h2>Über uns</h2>
 					</header>
 					<p>Werden Sie jetzt Mitglied von Public Health Schweiz und profitieren Sie von vielen Vorteilen und Vergünstigungen. Als Mitglied tragen Sie zudem dazu bei, dass sich Public Health Schweiz weiterhin für die Anliegen der Public-Health-Fachleute einsetzen
 						kann.</p>
@@ -238,9 +238,11 @@
 
 	<script>
 		$('.carousel-inner.slick').slick({
+			autoplay: true,
+			autoplaySpeed: '10000',
 			dots: true,
 			infinite: true,
-			speed: 500,
+			speed: 1000,
 			fade: true,
 			cssEase: 'linear'
 		});

publichealth/static/mockup/news-details.html

@@ -0,0 +1,142 @@
+<!DOCTYPE HTML>
+<html lang="de-CH">
+
+<head>
+  <title>Public Health Schweiz</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="assets/css/slick.css" />
+  <link rel="stylesheet" href="assets/css/main.css" />
+</head>
+
+<body>
+
+  <!-- Header -->
+  <nav class="navbar navbar-default navbar-fixed-top">
+    <div class="container">
+      <!-- Brand and toggle get grouped for better mobile display -->
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+		        <span class="sr-only">Toggle navigation</span>
+		        <span class="icon-bar"></span>
+		        <span class="icon-bar"></span>
+		        <span class="icon-bar"></span>
+		      </button>
+          <a class="navbar-brand" href="#"><img src="images/public-health-logo-sign.png" alt=""> <span class="hidden-xs"><strong>Public Health</strong> Schweiz</span></a>
+      </div>
+
+      <!-- Collect the nav links, forms, and other content for toggling -->
+      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+        <ul class="nav navbar-nav navbar-right">
+          <li class="active"><a href="#">Willkommen <span class="sr-only">(current)</span></a></li>
+          <li><a href="#">Agenda</a></li>
+          <li><a href="#">Kontakt</a></li>
+        </ul>
+      </div>
+      <!-- /.navbar-collapse -->
+    </div>
+    <!-- /.container -->
+  </nav>
+
+  <section id="news-details">
+    <div class="container">
+      <div class="image">
+        <img class="img-responsive" src="images/news_1.jpg" alt="">
+      </div>
+      <p class="category">Kategorie</p>
+      <h2>Ehrenmitgliedschaften</h2>
+      <p class="lead">
+        Nicole Probst-Hensch, Professorin für Pharmakologie und Epidemiologie am Schweizerischen Tropen- und Public Health Institut der Universität Basel, wurde die Ehrenmitgliedschaft von Public Health Schweiz verliehen.
+      </p>
+      <p class="date">
+        16. Januar 2017
+      </p>
+      <p>
+        Sie war als Präsidentin des wissenschaftlichen Beirats an etlichen unserer Konferenzen verantwortlich für das wissenschaftliche Programm und hat viel zur Erarbeitung der Strategie beigetragen. Wir gratulieren Nicole Probst-Hensch herzlich und danken ihr für das grosse Engagement für unsere Organisation.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit.
+      </p>
+      <h3>Subheading lorem</h3>
+      <p>
+        Consequatur ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.
+      </p>
+      <hr>
+      <p class="author">Name des Autors</p>
+
+      <p class="backlink"><a href="/index.html">◀︎ Zurück</a></p>
+
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer id="footer">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-4">
+          <ul class="list-unstyled">
+            <li><a href="#">Über uns</a></li>
+            <li><a href="#">Mitglied werden</a></li>
+            <li><a href="#">Veranstaltungen</a></li>
+            <li><a href="#">Projekte und Aktivitäten</a></li>
+            <li><a href="#">Information zu Public Health</a></li>
+            <li><a href="#">Agenda</a></li>
+            <li><a href="#">...</a></li>
+          </ul>
+
+        </div>
+        <div class="col-md-4">
+          <address>
+      <p>Public Health Schweiz<br>
+      Effingerstrasse 54<br>
+      Postfach 3420<br>
+      3001 Bern</p>
+      <p>Tel. +41 31 389 92 86<br>
+      <a href="#">info@public-health.ch</a><br>
+      <a href="#">www.public-health.ch</a></p>
+    </address>
+        </div>
+        <div class="col-md-4">
+          <form action="#" method="post">
+
+            <div class="form-group">
+              <input name="name" id="name" type="text" placeholder="Name" class="form-control">
+            </div>
+            <div class="form-group">
+              <input name="email" id="email" type="email" placeholder="E-Mail" class="form-control">
+            </div>
+            <div class="form-group">
+              <textarea name="message" id="message" rows="3" placeholder="Anfrage" class="form-control"></textarea>
+            </div>
+            <button class="btn btn-priamry" type="submit">Senden</button>
+          </form>
+
+        </div>
+
+
+
+      </div>
+    </div>
+  </footer>
+  <div class="copyright">
+    &copy; 2016 Public Health Schweiz
+  </div>
+
+  <!-- Scripts -->
+  <script src="assets/js/jquery.min.js"></script>
+  <script src="assets/js/skel.min.js"></script>
+  <script src="assets/slick/slick.min.js"></script>
+  <script src="assets/js/util.js"></script>
+  <script src="assets/js/main.js"></script>
+
+  <script>
+    $('.carousel-inner.slick').slick({
+      dots: true,
+      infinite: true,
+      speed: 500,
+      fade: true,
+      cssEase: 'linear'
+    });
+  </script>
+
+</body>