various improvements

- removed gallery (didn't like it)
- added "more news" button
- reworked navigation between posts
- updated font-awesome
- some things i already forgot
This commit is contained in:
Hendrik Blöß committed 2017-08-03 20:47:50 +02:00
1 parent a8afe3ee8a
commit a9da333599
25 files changed
+2779 -911

No files matched your search

+4
View File
@@ -0,0 +1,4 @@
/*!
* Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f03Line truncated
-312
View File
@@ -1,312 +0,0 @@
.gallery .control-operator:target ~ .controls .control-button {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
.gallery .control-button:first-of-type, .gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1), .gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2), .gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3), .gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4), .gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) {
color: white;
color: rgba(255, 255, 255, 0.8);
}
.gallery .item:first-of-type {
position: static;
pointer-events: auto;
opacity: 1;
}
.gallery .item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity .5s;
}
.gallery .control-operator {
display: none;
}
.gallery .control-operator:target ~ .item {
pointer-events: none;
opacity: 0;
animation: none;
}
.gallery .control-operator:target ~ .controls .control-button {
animation: none;
}
@keyframes controlAnimation-2 {
0% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
14.3%,
50% {
color: white;
color: rgba(255, 255, 255, 0.8);
}
64.3%,
100% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
}
@keyframes galleryAnimation-2 {
0% {
opacity: 0;
}
14.3%,
50% {
opacity: 1;
}
64.3%,
100% {
opacity: 0;
}
}
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
pointer-events: auto;
opacity: 1;
}
.items-2.autoplay .control-button {
animation: controlAnimation-2 14s infinite;
}
.items-2.autoplay .item {
animation: galleryAnimation-2 14s infinite;
}
.items-2 .control-button:nth-of-type(1),
.items-2 .item:nth-of-type(1) {
animation-delay: -2s;
}
.items-2 .control-button:nth-of-type(2),
.items-2 .item:nth-of-type(2) {
animation-delay: 5s;
}
@keyframes controlAnimation-3 {
0% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
9.5%,
33.3% {
color: white;
color: rgba(255, 255, 255, 0.8);
}
42.9%,
100% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
}
@keyframes galleryAnimation-3 {
0% {
opacity: 0;
}
9.5%,
33.3% {
opacity: 1;
}
42.9%,
100% {
opacity: 0;
}
}
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
pointer-events: auto;
opacity: 1;
}
.items-3.autoplay .control-button {
animation: controlAnimation-3 21s infinite;
}
.items-3.autoplay .item {
animation: galleryAnimation-3 21s infinite;
}
.items-3 .control-button:nth-of-type(1),
.items-3 .item:nth-of-type(1) {
animation-delay: -2s;
}
.items-3 .control-button:nth-of-type(2),
.items-3 .item:nth-of-type(2) {
animation-delay: 5s;
}
.items-3 .control-button:nth-of-type(3),
.items-3 .item:nth-of-type(3) {
animation-delay: 12s;
}
@keyframes controlAnimation-4 {
0% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
7.1%,
25% {
color: white;
color: rgba(255, 255, 255, 0.8);
}
32.1%,
100% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
}
@keyframes galleryAnimation-4 {
0% {
opacity: 0;
}
7.1%,
25% {
opacity: 1;
}
32.1%,
100% {
opacity: 0;
}
}
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
pointer-events: auto;
opacity: 1;
}
.items-4.autoplay .control-button {
animation: controlAnimation-4 28s infinite;
}
.items-4.autoplay .item {
animation: galleryAnimation-4 28s infinite;
}
.items-4 .control-button:nth-of-type(1),
.items-4 .item:nth-of-type(1) {
animation-delay: -2s;
}
.items-4 .control-button:nth-of-type(2),
.items-4 .item:nth-of-type(2) {
animation-delay: 5s;
}
.items-4 .control-button:nth-of-type(3),
.items-4 .item:nth-of-type(3) {
animation-delay: 12s;
}
.items-4 .control-button:nth-of-type(4),
.items-4 .item:nth-of-type(4) {
animation-delay: 19s;
}
@keyframes controlAnimation-5 {
0% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
5.7%,
20% {
color: white;
color: rgba(255, 255, 255, 0.8);
}
25.7%,
100% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
}
@keyframes galleryAnimation-5 {
0% {
opacity: 0;
}
5.7%,
20% {
opacity: 1;
}
25.7%,
100% {
opacity: 0;
}
}
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {
pointer-events: auto;
opacity: 1;
}
.items-5.autoplay .control-button {
animation: controlAnimation-5 35s infinite;
}
.items-5.autoplay .item {
animation: galleryAnimation-5 35s infinite;
}
.items-5 .control-button:nth-of-type(1),
.items-5 .item:nth-of-type(1) {
animation-delay: -2s;
}
.items-5 .control-button:nth-of-type(2),
.items-5 .item:nth-of-type(2) {
animation-delay: 5s;
}
.items-5 .control-button:nth-of-type(3),
.items-5 .item:nth-of-type(3) {
animation-delay: 12s;
}
.items-5 .control-button:nth-of-type(4),
.items-5 .item:nth-of-type(4) {
animation-delay: 19s;
}
.items-5 .control-button:nth-of-type(5),
.items-5 .item:nth-of-type(5) {
animation-delay: 26s;
}
-36
View File
@@ -1,36 +0,0 @@
.gallery .control-button {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
.gallery .control-button:hover {
color: white;
color: rgba(255, 255, 255, 0.8);
}
/*
Theme controls how everything looks in Gallery CSS.
*/
.gallery {
position: relative;
}
.gallery .item {
height: 400px;
overflow: hidden;
text-align: center;
background: #4d87e2;
}
.gallery .controls {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.gallery .control-button {
display: inline-block;
margin: 0 .02em;
font-size: 3em;
text-align: center;
text-decoration: none;
transition: color .1s;
}
+5
View File
@@ -0,0 +1,5 @@
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
#hero-area {
background-image: none;
}
}
+47 -55
View File
@@ -3,7 +3,7 @@
/****Colors****/
.blue-text {
color: #428bca;
color: #428bca !important;
}
.blue-bg {
@@ -11,11 +11,11 @@
}
.red-text {
color: #E74C3C;
color: #E74C3C !important;
}
.red-bg {
background-color: #E74C3C;
background-color: #E74C3C !important;
}
.dark-text {
@@ -23,7 +23,7 @@
}
.dark-bg {
background-color: #2C3E50;
background-color: #2C3E50 !important;
}
@@ -150,13 +150,13 @@ a:hover {
margin-top: 0px;
}
.subtitle {
/*.subtitle {
text-align: center;
font-weight: 100;
padding-bottom: 25px;
position: relative;
color: #fff;
}
}*/
.content-section {
text-align: center;
@@ -169,8 +169,8 @@ a:hover {
}
#news,
#help,
#about {
#about,
#contribute {
background: #EEEEEE;
}
@@ -193,6 +193,7 @@ a:hover {
border: none;
border-radius: 0;
background: transparent;
padding-top: 30px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
@@ -221,7 +222,7 @@ a:hover {
.navbar-default .navbar-brand {
color: #fff;
font-size: 16pt;
font-size: 24pt;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
@@ -229,9 +230,9 @@ a:hover {
}
.navbar-default .faviconPng {
height: 16pt;
width: 16pt;
vertical-align: text-bottom;
height: 25pt;
width: 25pt;
vertical-align: sub;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
@@ -279,21 +280,28 @@ a:hover {
transition: all 0.2s linear;
}
@media (min-width: 767px) {
@media (max-width: 767px) {
.navbar-default {
padding-top: 30px;
background: #2C3E50;
padding-top: 0px;
}
.navbar-default .navbar-nav>.active,
.navbar-default .navbar-nav li:hover,
.navbar-default .navbar-nav li:focus {
border-bottom: none;
border-left: 4px solid #428bca;
font-weight: bold;
}
.navbar-default .navbar-brand {
font-size: 24pt;
font-size: 16pt;
}
.navbar-default .faviconPng {
height: 25pt;
width: 25pt;
vertical-align: sub;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
height: 16pt;
width: 16pt;
vertical-align: text-bottom;
}
}
@@ -380,12 +388,28 @@ a:hover {
font-size: 12pt;
}
#news .more {
margin: 24px 0 0 0;
}
#news .more .btn {
border: 1px solid #428bca;
color: #428bca;
}
#news .more .btn:hover {
background: transparent;
color: #E74C3C;
border: 1px solid #E74C3C;
}
.news-card {
padding: 0;
margin: 10px 0px;
border: 1px solid #2C3E50;
border-radius: 8px;
overflow: hidden;
text-align: left;
}
.news-card-text {
@@ -545,33 +569,6 @@ a:hover {
/**************/
/***Gallery****/
.gallery {
height: 550px;
/*margin: 0 100px !important;*/
}
.control-button {
font-size: 1.7em !important;
}
.item {
/*max-height: 500px !important;*/
height: 500px !important;
background-color: transparent !important;
}
.item img {
display: inline !important;
/*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
/*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/
}
/**************/
/*****Help*****/
#help .card,
@@ -696,7 +693,7 @@ a:hover {
margin: 1em 0;
}
.post-nav .post-next {
.post-nav .post-prev {
text-align: right;
float: right;
}
@@ -746,10 +743,5 @@ a:hover {
padding: 0;
}
.footer hr {
border-color: rgba(255, 255, 255, 0.2);
border-width: 1px;
}
/**************/