ungleich-public/public-health-ch
6
1
Fork 0
Code Issues Pull requests 1 Projects Releases Wiki Activity

Starting mockup with bootswatch paper

Browse source
This commit is contained in:
Jonathan Hess 2017-01-12 12:15:49 +01:00
parent f95d3b1f8d
commit a9e1d36334
20 changed files with 7210 additions and 3152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
config.codekit3
View file

@ -347,7 +347,7 @@
"oF": 0
},
"\/publichealth\/static\/css\/main.scss": {
"aP": 0,
"aP": 1,
"bl": 0,
"dP": 10,
"dS": 0,
@ -359,6 +359,32 @@
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/css\/modules\/_banner.scss": {
"aP": 0,
"bl": 0,
"dP": 10,
"dS": 0,
"ft": 4,
"ma": 0,
"oA": 1,
"oAP": "\/publichealth\/static\/css\/css\/_banner.css",
"oF": 0,
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/css\/modules\/_modules.scss": {
"aP": 0,
"bl": 0,
"dP": 10,
"dS": 0,
"ft": 4,
"ma": 0,
"oA": 1,
"oAP": "\/publichealth\/static\/css\/css\/_modules.css",
"oF": 0,
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/css\/paper\/_bootswatch.scss": {
"aP": 0,
"bl": 0,
@ -447,6 +473,73 @@
"sM": 0,
"sU": 0
},
"\/publichealth\/static\/css\/slick.scss": {
"aP": 0,
"bl": 0,
"dP": 10,
"dS": 0,
"ft": 4,
"ma": 0,
"oA": 0,
"oAP": "\/publichealth\/static\/mockup\/assets\/css\/slick.css",
"oF": 2,
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/css\/slick\/slick-theme.scss": {
"aP": 0,
"bl": 0,
"dP": 10,
"dS": 0,
"ft": 4,
"ma": 0,
"oA": 1,
"oAP": "\/publichealth\/static\/css\/css\/slick-theme.css",
"oF": 0,
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/css\/slick\/slick.scss": {
"aP": 0,
"bl": 0,
"dP": 10,
"dS": 0,
"ft": 4,
"ma": 0,
"oA": 1,
"oAP": "\/publichealth\/static\/css\/css\/slick.css",
"oF": 0,
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/fonts\/slick.eot": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/static\/fonts\/slick.eot",
"oF": 0
},
"\/publichealth\/static\/fonts\/slick.svg": {
"ft": 2097152,
"miP": 0,
"oA": 2,
"oAP": "\/publichealth\/static\/fonts\/slick.svg",
"oF": 0,
"opt": 0,
"plM": 3758088159,
"prP": 0
},
"\/publichealth\/static\/fonts\/slick.ttf": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/static\/fonts\/slick.ttf",
"oF": 0
},
"\/publichealth\/static\/fonts\/slick.woff": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/static\/fonts\/slick.woff",
"oF": 0
},
"\/publichealth\/static\/js\/main.js": {
"ft": 64,
"mi": 1,
@ -2746,6 +2839,14 @@
"sC": 1,
"tS": 0
},
"\/publichealth\/static\/mockup\/assets\/css\/ajax-loader.gif": {
"ft": 4194304,
"iS": 4178,
"oA": 0,
"oAP": "\/publichealth\/static\/mockup\/assets\/css\/ajax-loader.gif",
"oF": 0,
"opt": 0
},
"\/publichealth\/static\/mockup\/assets\/css\/font-awesome.min.css": {
"aP": 0,
"bl": 0,
@ -2766,6 +2867,16 @@
"oF": 0,
"oS": 0
},
"\/publichealth\/static\/mockup\/assets\/css\/slick.css": {
"aP": 0,
"bl": 0,
"ft": 16,
"ma": 0,
"oA": 2,
"oAP": "\/publichealth\/static\/mockup\/assets\/css\/slick-min.css",
"oF": 0,
"oS": 0
},
"\/publichealth\/static\/mockup\/assets\/fonts\/fontawesome-webfont.eot": {
"ft": 8192,
"oA": 2,
@ -2806,6 +2917,34 @@
"oAP": "\/publichealth\/static\/mockup\/assets\/fonts\/FontAwesome.otf",
"oF": 0
},
"\/publichealth\/static\/mockup\/assets\/fonts\/slick.eot": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/static\/mockup\/assets\/fonts\/slick.eot",
"oF": 0
},
"\/publichealth\/static\/mockup\/assets\/fonts\/slick.svg": {
"ft": 2097152,
"miP": 0,
"oA": 2,
"oAP": "\/publichealth\/static\/mockup\/assets\/fonts\/slick.svg",
"oF": 0,
"opt": 0,
"plM": 3758088159,
"prP": 0
},
"\/publichealth\/static\/mockup\/assets\/fonts\/slick.ttf": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/static\/mockup\/assets\/fonts\/slick.ttf",
"oF": 0
},
"\/publichealth\/static\/mockup\/assets\/fonts\/slick.woff": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/static\/mockup\/assets\/fonts\/slick.woff",
"oF": 0
},
"\/publichealth\/static\/mockup\/assets\/js\/jquery.min.js": {
"ft": 64,
"mi": 1,
@ -2982,12 +3121,6 @@
"oS": 0,
"uL": 1
},
"\/publichealth\/static\/mockup\/generic.html": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/static\/mockup\/generic.html",
"oF": 0
},
"\/publichealth\/static\/mockup\/images\/banner_0.jpg": {
"ft": 16384,
"iS": 56500,
@ -3074,12 +3207,6 @@
"oAP": "\/publichealth\/static\/mockup\/index.html",
"oF": 0
},
"\/publichealth\/static\/mockup\/LICENSE.txt": {
"ft": 8192,
"oA": 2,
"oAP": "\/publichealth\/static\/mockup\/LICENSE.txt",
"oF": 0
},
"\/publichealth\/static\/org\/public-health-bg.png": {
"ft": 32768,
"iS": 42822,
@ -5255,7 +5382,7 @@
}
},
"uglifyReservedNamesString": "$",
"websiteRelativeRoot": ""
"websiteRelativeRoot": "publichealth\/static\/mockup"
},
"settingsFileVersion": "3"
}

14
publichealth/static/css/main.scss
View file

@ -5,18 +5,10 @@
@import 'paper/bootswatch';
/* Page header */
// Modules
@import "modules/modules";
#banner {
background: url(../org/public-health-bg.png) no-repeat top left;
background-size: cover;
font-size: 0px;
display: block;
width: 450px;
height: 140px;
color: transparent;
text-indent: -9999px;
}
/* Responsive image/video classes */
.rich-text img {

80
publichealth/static/css/modules/_banner.scss Normal file
View file

@ -0,0 +1,80 @@
/* Page header */
$banner-height: 700px;
#banner {
// background: url(../org/public-health-bg.png) no-repeat top left;
// background-size: cover;
// font-size: 0px;
// display: block;
// width: 450px;
// height: 140px;
// color: transparent;
// text-indent: -9999px;
.banner .item {
position: relative;
height: $banner-height;
img {
width: 100%;
height: $banner-height;
overflow: hidden;
display: block;
background-size: cover;
background-position: center;
}
.caption {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
background-color: rgba(#f9f9f9, .8);
padding: 30px;
}
}
}
#header .logo {
font-size: 0px;
background: url(images/public-health-logo.png) no-repeat top left;
width: 350px; height: 100px;
background-size: 100% auto;
}
#banner .inner {
padding-top: 1em;
border-top: none;
}
#banner h3, #banner p, #header a, #banner button {
color: #333;
}
.slick-prev::before, .slick-next::before {
color: inherit;
}
.slick-dots li button {
box-shadow: none;
}
#banner:before {
background: #e0e0e0;
}
#banner p {
font-size: 90%;
text-align: left;
color: #777;
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
#banner {
padding-bottom: 4em;
}
#banner footer p {
color: black;
text-align: left;
font-size: 110%;
margin-top: 4em;
}
#three img {
width: 300px; height: 300px;
}

1
publichealth/static/css/modules/_modules.scss Normal file
View file

@ -0,0 +1 @@
@import "banner";

2
publichealth/static/css/paper/_variables.scss
View file

@ -49,7 +49,7 @@ $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
$font-size-base: 13px !default;
$font-size-base: 20px !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px

2
publichealth/static/css/slick.scss Normal file
View file

@ -0,0 +1,2 @@
@import "slick/slick";
@import 'slick/slick-theme';

195
publichealth/static/css/slick/slick-theme.scss Normal file
View file

@ -0,0 +1,195 @@
@charset "UTF-8";
// Default Variables
// Slick icon entity codes outputs the following
// "\2190" outputs ascii character "←"
// "\2192" outputs ascii character "→"
// "\2022" outputs ascii character "•"
$slick-font-path: "../fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "./" !default;
$slick-arrow-color: white !default;
$slick-dot-color: black !default;
$slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\2190" !default;
$slick-next-character: "\2192" !default;
$slick-dot-character: "\2022" !default;
$slick-dot-size: 10px !default;
$slick-opacity-default: 0.75 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0.25 !default;
@function slick-image-url($url) {
@if function-exists(image-url) {
@return image-url($url);
}
@else {
@return url($slick-loader-path + $url);
}
}
@function slick-font-url($url) {
@if function-exists(font-url) {
@return font-url($url);
}
@else {
@return url($slick-font-path + $url);
}
}
/* Slider */
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
/* Icons */
@if $slick-font-family == "slick" {
@font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
/* Arrows */
.slick-prev,
.slick-next {
z-index: 1;
position: absolute;
display: block;
height: 30px;
width: 30px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
&:hover, &:focus {
outline: none;
background: transparent;
color: transparent;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&.slick-disabled:before {
opacity: $slick-opacity-not-active;
}
&:before {
font-family: $slick-font-family;
font-size: 30px;
line-height: 1;
color: $slick-arrow-color;
opacity: $slick-opacity-default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.slick-prev {
left: 25px;
[dir="rtl"] & {
left: auto;
right: -25px;
}
&:before {
content: $slick-prev-character;
[dir="rtl"] & {
content: $slick-next-character;
}
}
}
.slick-next {
right:25px;
[dir="rtl"] & {
left: -25px;
right: auto;
}
&:before {
content: $slick-next-character;
[dir="rtl"] & {
content: $slick-prev-character;
}
}
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
&:hover, &:focus {
outline: none;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
content: $slick-dot-character;
width: 20px;
height: 20px;
font-family: $slick-font-family;
font-size: $slick-dot-size;
line-height: 20px;
text-align: center;
color: $slick-dot-color;
opacity: $slick-opacity-not-active;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
&.slick-active button:before {
color: $slick-dot-color-active;
opacity: $slick-opacity-default;
}
}
}

98
publichealth/static/css/slick/slick.scss Normal file
View file

@ -0,0 +1,98 @@
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}

BIN
publichealth/static/fonts/slick.eot Normal file
View file

Binary file not shown.

14
publichealth/static/fonts/slick.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="slick" horiz-adv-x="512">
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
</font></defs></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
publichealth/static/fonts/slick.ttf Normal file
View file

Binary file not shown.

BIN
publichealth/static/fonts/slick.woff Normal file
View file

Binary file not shown.

BIN
publichealth/static/mockup/assets/css/ajax-loader.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

9448
publichealth/static/mockup/assets/css/main.css
View file

File diff suppressed because it is too large Load diff

204
publichealth/static/mockup/assets/css/slick.css Normal file
View file

@ -0,0 +1,204 @@
@charset "UTF-8";
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0; }
.slick-list:focus {
outline: none; }
.slick-list.dragging {
cursor: pointer;
cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slick-track {
position: relative;
left: 0;
top: 0;
display: block; }
.slick-track:before, .slick-track:after {
content: "";
display: table; }
.slick-track:after {
clear: both; }
.slick-loading .slick-track {
visibility: hidden; }
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none; }
[dir="rtl"] .slick-slide {
float: right; }
.slick-slide img {
display: block; }
.slick-slide.slick-loading img {
display: none; }
.slick-slide.dragging img {
pointer-events: none; }
.slick-initialized .slick-slide {
display: block; }
.slick-loading .slick-slide {
visibility: hidden; }
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent; }
.slick-arrow.slick-hidden {
display: none; }
/* Slider */
.slick-loading .slick-list {
background: #fff url("./ajax-loader.gif") center center no-repeat; }
/* Icons */
@font-face {
font-family: "slick";
src: url("../fonts/slick.eot");
src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal; }
/* Arrows */
.slick-prev,
.slick-next {
z-index: 1;
position: absolute;
display: block;
height: 30px;
width: 30px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none; }
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
background: transparent;
color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1; }
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25; }
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 30px;
line-height: 1;
color: white;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-prev {
left: 25px; }
[dir="rtl"] .slick-prev {
left: auto;
right: -25px; }
.slick-prev:before {
content: "←"; }
[dir="rtl"] .slick-prev:before {
content: "→"; }
.slick-next {
right: 25px; }
[dir="rtl"] .slick-next {
left: -25px;
right: auto; }
.slick-next:before {
content: "→"; }
[dir="rtl"] .slick-next:before {
content: "←"; }
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px; }
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%; }
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer; }
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1; }
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 10px;
line-height: 20px;
text-align: center;
color: black;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before {
color: black;
opacity: 0.75; }

BIN
publichealth/static/mockup/assets/fonts/slick.eot Normal file
View file

Binary file not shown.

14
publichealth/static/mockup/assets/fonts/slick.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="slick" horiz-adv-x="512">
<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />
<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
</font></defs></svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
publichealth/static/mockup/assets/fonts/slick.ttf Normal file
View file

Binary file not shown.

BIN
publichealth/static/mockup/assets/fonts/slick.woff Normal file
View file

Binary file not shown.

135
publichealth/static/mockup/index.html
View file

@ -4,24 +4,35 @@
<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" />
<link rel="stylesheet" href="assets/slick/slick.css" />
<link rel="stylesheet" href="assets/slick/slick-theme.css" />
</head>
<body>
<!-- Header -->
<header id="header">
<div class="inner">
<a href="index.html" class="logo"><strong>Public Health</strong> Schweiz</a>
<nav id="nav">
<a href="index.html">Wilkommen</a>
<a href="#">Agenda</a>
<a href="#footer">Kontakt</a>
</nav>
<a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars"></span></a>
</div>
</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="#"><strong>Public Health</strong> Schweiz</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>
<!-- Banner -->
<section id="banner">
@ -30,29 +41,38 @@
<h1>Welcome to public-health.ch</h1>
</header>-->
<div class="banner fade">
<div class="banner slick">
<div>
<image style="background-image:url(images/banner_1.jpg)"/>
<h3>Swiss Public Health Conference 15. November 2016 in Bern</h3>
<p>Die Swiss Public Health Conference 2016 ist erfolgreich zu Ende gegangen. Wir bedanken uns bei Ihnen an dieser Stelle für Ihre engagierte Teilnahme und die vielen angeregten Gespräche während der Konferenz.</p>
<div class="item">
<image style="background-image:url(images/banner_1.jpg)" />
<div class="caption container">
<h3>Swiss Public Health Conference 15. November 2016 in Bern</h3>
<p>Die Swiss Public Health Conference 2016 ist erfolgreich zu Ende gegangen. Wir bedanken uns bei Ihnen an dieser Stelle für Ihre engagierte Teilnahme und die vielen angeregten Gespräche während der Konferenz.</p>
<p><a class="btn btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
<div>
<image style="background-image:url(images/banner_0.jpg)"/>
<h3>Parlamentarische Gruppe nichtübertragbare Krankheiten NCD gegründet</h3>
<p>Die Ständeräte Hans Stöckli und Joachim Eder sowie die Nationalrätin Ruth Humbel haben die Parlamentarische Gruppe nichtübertragbare Krankheiten NCD gegründet. Ziel ist es, das Thema NCD in der Schweizer Politik nachhaltig zu verankern. </p>
<div class="item">
<image style="background-image:url(images/banner_0.jpg)" />
<div class="caption container">
<h3>Parlamentarische Gruppe nichtübertragbare Krankheiten NCD gegründet</h3>
<p>Die Ständeräte Hans Stöckli und Joachim Eder sowie die Nationalrätin Ruth Humbel haben die Parlamentarische Gruppe nichtübertragbare Krankheiten NCD gegründet. Ziel ist es, das Thema NCD in der Schweizer Politik nachhaltig zu verankern. </p>
<p><a class="btn btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
<div>
<image style="background-image:url(images/banner_2.jpg)"/>
<h3>Wirksamer Schutz der Kinder und Jugendlichen vor Tabakkonsum rückt in weite Ferne </h3>
<p>National- und Ständerat finden, dass die wenigen heute geltenden Einschränkungen für Tabakwerbung genügen. Dabei verkennen sie jedoch, dass die omnipräsente Tabakwerbung insbesondere auf Kinder und Jugendliche einen grossen Einfluss hat – und oft auch auf diese ausgerichtet ist.</p>
<div class="item">
<image style="background-image:url(images/banner_2.jpg)" />
<div class="caption container">
<h3>Wirksamer Schutz der Kinder und Jugendlichen vor Tabakkonsum rückt in weite Ferne </h3>
<p>National- und Ständerat finden, dass die wenigen heute geltenden Einschränkungen für Tabakwerbung genügen. Dabei verkennen sie jedoch, dass die omnipräsente Tabakwerbung insbesondere auf Kinder und Jugendliche einen grossen Einfluss hat – und oft auch auf diese ausgerichtet ist.</p>
<p><a class="btn btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<footer>
<footer class="container">
<p>Public Health Schweiz ist die unabhängige, nationale Organisation, die die Anliegen der Public-Health-Fachleute vertritt, ein themen- und disziplinenübergreifendes gesamtschweizerisches Netzwerk in Public Health bietet, sich für optimale Rahmenbedingungen für die Gesundheit der Bevölkerung in der Schweiz engagiert und Entscheidungsträgerinnen und Entscheidungsträger fachlich unterstützt. Public Health Schweiz stützt ihr Handeln auf wissenschaftlicher Basis ab.</p>
</footer>
</div>
@ -61,7 +81,7 @@
<!-- Three -->
<section id="three" class="wrapper align-center">
<div class="inner">
<div class="container">
<div class="flex flex-2">
<article>
<div class="image round">
@ -119,7 +139,7 @@
<!-- Footer -->
<footer id="footer">
<div class="inner">
<div class="container">
<h3>Kontakt</h3>
@ -157,7 +177,7 @@
<script src="assets/js/main.js"></script>
<script>
$('.banner.fade').slick({
$('.banner.slick').slick({
dots: true,
infinite: true,
speed: 500,
@ -165,61 +185,6 @@
cssEase: 'linear'
});
</script>
<style>
#header .logo {
font-size: 0px;
background: url(images/public-health-logo.png) no-repeat top left;
width: 350px; height: 100px;
background-size: 100% auto;
}
#banner .inner {
padding-top: 1em;
border-top: none;
}
#banner h3, #banner p, #header a, #banner button {
color: #333;
}
.slick-prev::before, .slick-next::before {
color: inherit;
}
.slick-dots li button {
box-shadow: none;
}
#banner:before {
background: #e0e0e0;
}
#banner p, #banner h3 {
margin: 0 10%;
}
#banner p {
font-size: 90%;
text-align: left;
color: #777;
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
.banner.fade img {
margin-bottom: 1em;
width: 100%;
height: 500px;
overflow: hidden;
display: block;
background-size: cover;
}
#banner {
padding-bottom: 4em;
}
#banner footer p {
color: black;
text-align: left;
font-size: 110%;
margin-top: 4em;
}
#three img {
width: 300px; height: 300px;
}
</style>
</body>
</html>