diff --git a/application/views/header.php b/application/views/header.php index 49ae8ef..2e33091 100644 --- a/application/views/header.php +++ b/application/views/header.php @@ -49,7 +49,7 @@ hreflang="fr">
-Mein Name ist Marcel und seit einigen Jahren programmiere ich leidenschaftlich. In dieser Zeit habe ich alle möglichen Sprachen und Frameworks mir selbst beigebracht und die unterschiedlichsten Projekte auf die Beine gestellt - + unter anderem auch diese Website. Weitere Hobbies von mir sind Design, Schreiben, Animation, Fotografie und Videoschnitt. All das zusammen verpacke ich in meinen YouTube-Videos, die ich mittlerweile seit 2013 produziere. Dazu habe + ich verschiedene Kanäle erstellt, die ich im Nachfolgenden erläutern werde. Falls ihr noch mehr über mich erfahren wollt, könnt ihr dies sehr einfach auf der Über mich-Seite.
+ Über mich
Seit ich angefangen habe YouTube-Videos hochzuladen, bin ich auch langsam in Richtung Design, Programmieren, Fotografie, Videoschnitt, Animation etc. hineingeraten. Mit der Zeit haben sich einige mehr oder weniger gute Projekte angehäuft,
@@ -396,7 +489,7 @@
Seid ihr an Programmierung, Design, Technik, Internet, Aktuellem, Gaming, zufälligem Kram und mehr interessiert? Dann ist mein Blog zwar nicht die erste Anlaufstelle, dennoch könnte man ihn eventuell ein-zwei Mal berücksichtigen. Schaut
diff --git a/assets/css/fix-bootstrap-4.css b/assets/css/fix-bootstrap-4.css
index c3d638c..90f5fce 100644
--- a/assets/css/fix-bootstrap-4.css
+++ b/assets/css/fix-bootstrap-4.css
@@ -79,8 +79,8 @@ section.midnight-blue a::after {
background: white;
}
-a:not(.btn):hover, a:not(.btn):focus {
- color: #3b7ae3 !important;
+a:not(.btn):not(.list-group-item):hover, a:not(.btn):not(.list-group-item):focus {
+ color: #3b7ae3;
text-decoration: none;
outline: none;
}
diff --git a/assets/css/header.css b/assets/css/header.css
index 1fe4ddc..3e1463a 100644
--- a/assets/css/header.css
+++ b/assets/css/header.css
@@ -1,29 +1,28 @@
.navbar {
+ display: grid;
width: 100%;
height: 60px;
+ background-color: #fff;
justify-content: normal;
- display: grid;
- grid-template-columns: 50px 50px auto 50px 50px;
- grid-template-areas: "menuButton . center firstAction secondAction";
+ grid-template-columns: 50px 240px auto 185px 50px 50px;
+ grid-template-areas: "menuButton logo center . secondAction firstAction";
grid-gap: 5px;
align-items: center;
}
.navbar.loggedIn {
- grid-template-columns: 180px 50px 50px auto 50px 50px 180px;
- grid-template-areas: "menuButton . . center firstAction secondAction thirdAction";
+ grid-template-columns: 50px 240px auto 5px 50px 180px;
}
.navbar .navbar-logo-container {
- grid-area: center;
display: block;
height: 100%;
+ grid-area: logo;
}
.navbar .navbar-logo-container .navbar-logo {
position: relative;
- min-width: 240px;
- width: 50%;
+ width: 240px;
height: 100%;
margin: 0 auto;
transition: opacity .25s;
@@ -35,39 +34,38 @@
.navbar .navbar-logo-container .navbar-logo-svg {
position: absolute;
+ top: 50%;
left: 50%;
- -webkit-transform: translateX(-50%);
- -moz-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- -o-transform: translateX(-50%);
- transform: translateX(-50%);
- height: 45px;
+ -moz-transform: translate(calc(-50% - 55px), -50%);
+ -ms-transform: translate(calc(-50% - 55px), -50%);
+ -o-transform: translate(calc(-50% - 55px), -50%);
+ -webkit-transform: translate(calc(-50% - 55px), -50%);
+ transform: translate(calc(-50% - 55px), -50%);
+ height: 40px;
}
.navbar .navbar-logo-container .navbar-logo-title {
position: absolute;
top: 50%;
left: 50%;
- height: 50%;
- transform: translate(calc(-50% + 100px), -50%);
+ transform: translate(calc(-50% + 35px), -50%);
margin: 0;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
+ color: #757575;
+ font-size: 22px;
+ font-weight: 400;
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
+ -webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
transition: all .2s cubic-bezier(0, 0, 1, 1);
- font-size: 24px;
text-transform: none;
- color: #fff;
}
.navbar .navbar-action {
height: auto;
- font-size: 30px;
margin: 0;
padding: 0;
+ font-size: 30px;
text-align: center;
}
@@ -79,42 +77,30 @@
grid-area: secondAction;
}
-.navbar .navbar-action:nth-child(6) {
- grid-area: thirdAction;
-}
-
.navbar .navbar-action-btn {
display: block;
margin: 0;
padding: 0;
+ color: #757575;
line-height: 1;
- color: #fff;
}
.navbar .navbar-action-btn:active,
.navbar .navbar-action-btn:focus {
- color: #fff !important;
+ color: #555555 !important;
}
.navbar .navbar-action-btn:hover {
- color: #ddd !important;
-}
-
-.navbar-action-btn #login-icon .z {
- fill: #fff;
-}
-
-.navbar-action-btn:hover #logo-icon .z {
- fill: #ddd;
+ color: #6d6d6d !important;
}
.navbar-action-btn:hover #login-icon .y {
- -webkit-transition: all .2s;
+ transform: translate(0, 0);
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
+ -webkit-transition: all .2s;
transition: all .2s;
- transform: translate(0, 0);
animation: arrow-pointing 1.5s infinite;
}
@@ -133,26 +119,26 @@
*/
.navbar-logo svg, .navbar-logo svg .a {
- -webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
+ -webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
transition: all .2s cubic-bezier(0, 0, 1, 1);
}
.navbar-logo:hover .b {
- -webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
+ -webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
.navbar-logo:hover .c {
- -webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
+ -webkit-transform: translateX(100px);
transform: translateX(100px);
}
@@ -182,62 +168,49 @@
}
.navbar-logo:hover .navbar-logo-title {
- visibility: visible;
- opacity: 1;
- transform: translate(calc(-50% + 55px), -50%);
+ transform: translate(calc(-50% + 45px), -50%);
}
.navbar-logo:hover .navbar-logo-svg {
- transform: translateX(calc(-50% - 55px));
+ transform: translate(calc(-50% - 55px), -50%);
}
#searchButton > i.fa {
- transform-origin: 25% 25%;
transition: transform .5s;
+ transform-origin: 25% 25%;
}
#searchButton:hover i.fa {
- -webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
+ -webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.navbar .navbar-search {
- pointer-events: none;
- grid-area: center;
z-index: 1;
+ grid-area: center;
}
.navbar .navbar-search input.form-control {
- width: 0;
border: none;
- outline: none;
+ background: rgba(0, 0, 0, .04);
box-shadow: none;
- background: none;
- transition: all .25s;
- opacity: 0;
- float: right;
-}
-
-.navbar.search-open .navbar-search {
- pointer-events: all;
-}
-
-.navbar.search-open .navbar-search input.form-control {
- width: 100%;
- background: #fff;
- opacity: 1;
+ outline: none;
}
#userMenuButton {
height: 48px;
- font-size: 18px;
- background: white;
- color: #444 !important;
- border-radius: 25px;
padding: 4px 25px 4px 4px;
+ border-radius: 25px;
+ background: rgba(0, 0, 0, .04);
+ color: #444 !important;
+ font-size: 18px;
+}
+
+#userMenuButton:hover {
+ background: rgba(0, 0, 0, .08);
}
#userMenuButton img {
@@ -249,11 +222,6 @@
grid-template-columns: 50px 50px 50px auto 50px 50px 50px;
}
- /*.navbar-content {*/
- /*transform: scale(.75) translateX(25px);*/
- /*margin-top: -8px;*/
- /*}*/
-
#userMenuButton {
padding: 4px;
}
@@ -267,35 +235,32 @@
}
}
-/*.navbar {*/
-/*height: 60px;*/
-/*}*/
-
-/*.navbar-content {*/
-/*margin-left: auto;*/
-/*margin-top: 17px;*/
-/*}*/
-
.menu-icon span, .menu-icon:before, .menu-icon:after, .menu-icon span:before, .menu-icon span:after {
- display: block;
position: absolute;
top: 50%;
- left: 0.125em;
- background-color: #fff;
- width: 0.75em;
- height: 0.05em;
+ left: 0.255em;
+ display: block;
+ width: 0.45em;
+ height: 0.04em;
border-radius: 0;
+ background-color: #757575;
}
.menu-icon {
- font-size: 3.75rem;
+ position: fixed;
+ top: 0;
+ left: 25px;
+ transform: scale(.8);
+ z-index: 1041;
+ display: inline-block;
width: 1em;
height: 1em;
- display: inline-block;
- background-color: transparent;
- border: 0;
padding: 0;
+ border: 0;
+ background-color: transparent;
outline: none;
+ font-size: 3.75rem;
+ cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -303,12 +268,6 @@
-webkit-touch-callout: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
- cursor: pointer;
- transform: scale(.8);
- position: fixed;
- left: 25px;
- top: 0;
- z-index: 1041;
}
.menu-icon span {
@@ -316,13 +275,13 @@
}
.menu-icon:before {
- content: "";
margin-top: -0.275em;
+ content: "";
}
.menu-icon:after {
- content: "";
margin-top: 0.225em;
+ content: "";
}
.menu-icon:before, .menu-icon:after {
@@ -335,21 +294,21 @@
}
.menu-icon span:before, .menu-icon span:after {
+ top: 0;
+ left: 0;
content: "";
-webkit-transition: 0.25s ease;
transition: 0.25s ease;
- top: 0;
- left: 0;
}
.menu-icon span:before {
- -webkit-transform: translateY(-0.25em);
- transform: translateY(-0.25em);
+ -webkit-transform: translateY(-0.15em);
+ transform: translateY(-0.15em);
}
.menu-icon span:after {
- -webkit-transform: translateY(0.25em);
- transform: translateY(0.25em);
+ -webkit-transform: translateY(0.15em);
+ transform: translateY(0.15em);
}
.menu-icon.is-open span, .menu-icon.is-open:before, .menu-icon.is-open:after, .menu-icon.is-open span:before, .menu-icon.is-open span:after {
@@ -366,123 +325,52 @@
transform: rotate(90deg);
}
-/* Navbar brand svg */
-/*.navbar-brand {*/
-/*padding: 7px;*/
-/*transition: padding 0.3s;*/
-/*}*/
-
-/*.navbar-brand svg {*/
-/*position: absolute;*/
-/*left: 50%;*/
-/*transform: translateX(-50%);*/
-/*height: 45px;*/
-/*}*/
-
-/*.navbar-content {*/
-/*height: 60px;*/
-/*margin-top: 0;*/
-/*}*/
-
-/*.navbar-content ul {*/
-/*display: grid;*/
-/*grid-template-columns: 1fr 2fr auto;*/
-/*align-items: center;*/
-/*grid-gap: 10px;*/
-/*list-style: none;*/
-/*cursor: default;*/
-/*height: 60px;*/
-/*margin: 0;*/
-/*}*/
-
-/*.navbar-content ul li {*/
-/*display: block;*/
-/*height: auto;*/
-/*font-size: 30px;*/
-/*}*/
-
-/*.navbar-content ul li a.navbar-link {*/
-/*display: block;*/
-/*height: auto;*/
-/*color: #fff !important;*/
-/*}*/
-
-/*.navbar-content ul li #notificationMenuButton {*/
-/*height: 30px;*/
-/*}*/
-
-/*.navbar-content ul li #notificationMenuButton .fa {*/
-/*display: block;*/
-/*margin: 0 auto;*/
-/*}*/
-
-
-/*.navbar-content ul li:hover a.navbar-link,*/
-/*.navbar-content ul li:active a.navbar-link,*/
-/*.navbar-content ul li:focus a.navbar-link {*/
-/*color: #ddd !important;*/
-/*}*/
-
-/*.navbar-content ul li .badge {*/
-/*position: absolute;*/
-/*top: 0;*/
-/*right: 0;*/
-/*font-size: 14px;*/
-/*transform: translate(25%, -50%);*/
-/*}*/
-
-/*.navbar-content ul li .badge:empty {*/
-/*opacity: 0;*/
-/*}*/
-
#notificationMenu {
width: 360px;
}
#notificationMenu .list-group {
- max-height: 500px;
overflow: auto;
+ max-height: 500px;
}
#notificationMenu a:not(.disabled) {
- color: #333 !important;
background-color: #2272ff1a;
+ color: #333 !important;
}
#notificationMenu a:hover,
#notificationMenu a:active,
#notificationMenu a:focus {
- color: #fff !important;
background-color: #2272ff;
+ color: #fff !important;
}
-
-
#logo-container {
top: 8px;
}
#logo-container, #logo-container * {
- -webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
-o-transition: all .2s cubic-bezier(0, 0, 1, 1);
+ -webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
transition: all .2s cubic-bezier(0, 0, 1, 1);
}
.logo-container:hover .b {
- -webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
+ -webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
.logo-container:hover .c {
- -webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
+ -webkit-transform: translateX(100px);
transform: translateX(100px);
}
@@ -512,57 +400,27 @@
}
.logo-container {
- width: 500px;
- height: 60px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
-}
-
-#logo-text {
- position: absolute;
- left: 50%;
- top: 18px;
- transform: translateX(calc(-50% + 100px));
- margin: 0;
- opacity: 0;
- visibility: hidden;
- -webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
- -moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
- -ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
- -o-transition: all .2s cubic-bezier(0, 0, 1, 1);
- transition: all .2s cubic-bezier(0, 0, 1, 1);
- font-size: 24px;
- text-transform: none;
- color: #fff;
-}
-
-.logo-container:hover #logo-text {
- visibility: visible;
- opacity: 1;
- transform: translateX(calc(-50% + 55px));
-}
-
-.logo-container:hover #logo-container {
- transform: translateX(calc(-50% - 55px));
+ width: 500px;
+ height: 60px;
}
#login-icon {
height: 30px;
}
-
-
.navbar-link svg, .navbar-link i {
display: block;
transition: color .5s;
}
.navbar-link span {
- font-size: 12px;
- color: #fff;
display: block;
+ color: #fff;
+ font-size: 12px;
text-align: center;
}
diff --git a/assets/css/home.css b/assets/css/home.css
index acdfb64..b7976a4 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -2,35 +2,35 @@
#main-slider .carousel-item {
height: calc(100vh - 60px);
background: no-repeat center;
- -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
+ -webkit-background-size: cover;
background-size: cover;
}
#main-slider .carousel-item .carousel-caption {
- top: 0;
- height: 600px;
position: absolute;
+ top: 0;
display: block !important;
+ height: 600px;
opacity: 0;
- -webkit-transition: opacity ease-in-out 500ms;
-moz-transition: opacity ease-in-out 500ms;
-o-transition: opacity ease-in-out 500ms;
+ -webkit-transition: opacity ease-in-out 500ms;
transition: opacity ease-in-out 500ms;
}
#main-slider .carousel-item.active .carousel-caption {
opacity: 1;
- -webkit-transition: opacity ease-in-out 500ms;
-moz-transition: opacity ease-in-out 500ms;
-o-transition: opacity ease-in-out 500ms;
+ -webkit-transition: opacity ease-in-out 500ms;
transition: opacity ease-in-out 500ms;
}
#main-slider .carousel-item .carousel-caption .container {
- top: auto;
position: relative;
+ top: auto;
}
#main-slider .carousel-item .carousel-content {
@@ -39,13 +39,13 @@
#main-slider .carousel-item .boxed {
padding: 10px 15px;
- background-color: rgba(0, 0, 0, 0.8);
border-radius: 10px;
+ background-color: rgba(0, 0, 0, 0.8);
+ cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- cursor: default;
}
#main-slider .carousel-item a.boxed {
@@ -62,16 +62,16 @@
}
#main-slider .carousel-item .btn {
+ box-sizing: border-box;
+ margin-top: 5px;
border: 3px solid rgba(255, 255, 255, 0.5);
color: #fff;
- margin-top: 5px;
- box-sizing: border-box;
transition: ease-in-out .1s;
}
#main-slider .carousel-item .btn:hover {
- border-width: 0;
padding: 13px 18px;
+ border-width: 0;
}
#main-slider .active .animation.animated-item-1 {
@@ -106,20 +106,35 @@
animation: fadeInUp 300ms linear 1200ms both;
}
+.yt-channel-title {
+ margin-bottom: 12px;
+}
+
+.yt-channel-title img {
+ display: inline-block;
+ width: 80px;
+ border-radius: 100%;
+}
+
+.yt-channel-title h3 {
+ display: inline-block;
+ margin: 0 14px;
+}
+
.tilted-column {
position: relative;
+ transform: skewX(-6deg);
+ display: inline-block;
+ overflow: hidden;
width: calc((100% / 3) + 6px + (32px / 3));
height: 33vw;
- display: inline-block;
margin-left: -6px;
- overflow: hidden;
border-right: 10px solid transparent;
- transform: skewX(-6deg);
}
.tilted-column:nth-child(3n+1) {
- margin-left: -24px;
margin-right: 0 !important;
+ margin-left: -24px;
}
.tilted-column:nth-child(3n+3) {
@@ -128,34 +143,34 @@
}
.tilted-column > .column-image {
- width: 100%;
transform: skewX(6deg) scale(1.1);
+ width: 100%;
transition: transform .8s;
}
.tilted-column > .column-caption {
position: absolute;
- width: 75%;
top: 100%;
left: 56%;
- opacity: 0;
transform: skewX(6deg) translate(-50%, 0);
+ width: 75%;
+ opacity: 0;
transition: all .8s;
}
.tilted-column > .column-caption > .column-title,
.tilted-column > .column-caption > .column-desc {
- color: #fff;
- background-color: rgba(0, 0, 0, .8);
padding: 4px 16px;
border-radius: 10px;
+ background-color: rgba(0, 0, 0, .8);
+ color: #fff;
font-size: 2.5vw;
}
.tilted-column > .column-caption > .column-desc {
+ width: 100%;
font-size: 1.25vw;
font-weight: bolder;
- width: 100%;
}
.tilted-column:hover > .column-image {
@@ -185,8 +200,8 @@
}
.tilted-column:nth-child(2n+1) {
- margin-left: -24px;
margin-right: 0 !important;
+ margin-left: -24px;
}
.tilted-column:nth-child(2n + 2) {
@@ -205,10 +220,10 @@
@media (max-width: 575px) {
.tilted-column {
+ transform: none;
width: 100%;
height: 100vw;
margin: 10px 0 !important;
- transform: none;
}
.tilted-column > .column-image {
@@ -347,46 +362,46 @@
}
.social-media-list .social-media-item.twitter:hover .icon-md {
- color: #4099FF;
background-color: white;
+ color: #4099FF;
}
.social-media-list .social-media-item.youtube:hover .icon-md {
- color: #e52d27;
background-color: white;
+ color: #e52d27;
}
.social-media-list .social-media-item.google-plus:hover .icon-md {
- color: #d34836;
background-color: white;
+ color: #d34836;
}
.social-media-list .social-media-item._500px:hover .icon-md {
- color: #0099e5;
background-color: white;
+ color: #0099e5;
}
.social-media-list .social-media-item.patreon:hover .icon-md {
- color: #E6461A;
background-color: white;
+ color: #E6461A;
}
.social-media-list .social-media-item.steam:hover .icon-md {
- color: #0A2341;
background-color: white;
+ color: #0A2341;
}
.social-media-list .social-media-item.github:hover .icon-md {
- color: #000;
background-color: white;
+ color: #000;
}
.social-media-list .social-media-item.twitch:hover .icon-md {
- color: #6441A4;
background-color: white;
+ color: #6441A4;
}
.social-media-list .social-media-item.spotify:hover .icon-md {
- color: #1ED760;
background-color: white;
+ color: #1ED760;
}
Blog