Rework header and landing page completely
This commit is contained in:
Marcel
parent
7f887a99b0
commit
8fd22c9a9a
|
|
@ -49,7 +49,7 @@
|
||||||
hreflang="fr">
|
hreflang="fr">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top <?= isset($_SESSION['user']) ? 'loggedIn' : '' ?>" role="banner">
|
<header class="navbar navbar-expand-lg fixed-top <?= isset($_SESSION['user']) ? 'loggedIn' : '' ?>" role="banner">
|
||||||
<div>
|
<div>
|
||||||
<button class="menu-icon">
|
<button class="menu-icon">
|
||||||
<span></span>
|
<span></span>
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 386.48" class="navbar-logo-svg">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 386.48" class="navbar-logo-svg">
|
||||||
<defs>
|
<defs>
|
||||||
<style>.a {
|
<style>.a {
|
||||||
fill: #fff;
|
fill: #2272FF;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
@ -80,28 +80,7 @@
|
||||||
<input class="form-control" type="search" placeholder="Suchen nach Posts, Projekten, Blog-Einträgen und mehr">
|
<input class="form-control" type="search" placeholder="Suchen nach Posts, Projekten, Blog-Einträgen und mehr">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navbar-action">
|
|
||||||
<a href="#" class="navbar-action-btn" role="button" id="searchButton" data-toggle="tooltip" data-placement="bottom" title="Suchen">
|
|
||||||
<i class="fa fa-search"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php if (isset($_SESSION['user'])): ?>
|
<?php if (isset($_SESSION['user'])): ?>
|
||||||
<div class="navbar-action">
|
|
||||||
<div class="dropdown">
|
|
||||||
<a href="#" role="button" data-toggle="dropdown" data-offset="0,20" id="notificationMenuButton" aria-haspopup="true" aria-expanded="false" class="navbar-action-btn">
|
|
||||||
<i class="fa fa-bell"></i>
|
|
||||||
<div class="badge badge-pill badge-success" id="notificationCount"></div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="notificationMenuButton" id="notificationMenu">
|
|
||||||
<div class="list-group list-group-flush">
|
|
||||||
<div class="loadingSpinner"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="navbar-action">
|
<div class="navbar-action">
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<a href="#" class="navbar-action-btn dropdown-toggle" data-toggle="dropdown" id="userMenuButton" aria-haspopup="true" aria-expanded="false" role="button">
|
<a href="#" class="navbar-action-btn dropdown-toggle" data-toggle="dropdown" id="userMenuButton" aria-haspopup="true" aria-expanded="false" role="button">
|
||||||
|
|
@ -131,13 +110,28 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-action">
|
||||||
|
<div class="dropdown">
|
||||||
|
<a href="#" role="button" data-toggle="dropdown" data-offset="0,20" id="notificationMenuButton" aria-haspopup="true" aria-expanded="false" class="navbar-action-btn">
|
||||||
|
<i class="fa fa-bell"></i>
|
||||||
|
<div class="badge badge-pill badge-success" id="notificationCount"></div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="notificationMenuButton" id="notificationMenu">
|
||||||
|
<div class="list-group list-group-flush">
|
||||||
|
<div class="loadingSpinner"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<div class="navbar-action">
|
<div class="navbar-action">
|
||||||
<a href="<?= base_url('login?r=' . urlencode(base64_encode(uri_string()))) ?>" class="navbar-action-btn" role="button" data-toggle="tooltip" data-placement="bottom" title="<?= lang('header_login') ?>">
|
<a href="<?= base_url('login?r=' . urlencode(base64_encode(uri_string()))) ?>" class="navbar-action-btn" role="button" data-toggle="tooltip" data-placement="bottom" title="<?= lang('header_login') ?>">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 926 534" id="login-icon">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 926 534" id="login-icon">
|
||||||
<defs>
|
<defs>
|
||||||
<style>.z {
|
<style>.z {
|
||||||
fill: #fff;
|
fill: #757575;
|
||||||
}</style>
|
}</style>
|
||||||
</defs>
|
</defs>
|
||||||
<path class="z"
|
<path class="z"
|
||||||
|
|
@ -147,16 +141,11 @@
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="navbar-swipe-open d-block d-md-none"></div>
|
<div id="navbar-swipe-open d-block d-md-none"></div>
|
||||||
<div class="side-navigation">
|
<div class="side-navigation">
|
||||||
<span class="side-title">
|
|
||||||
<img src="<?= base_url('assets/images/logo.png'); ?>" id="headerLogo" alt="logo">
|
|
||||||
</span>
|
|
||||||
<nav class="side-navigation-content">
|
<nav class="side-navigation-content">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -346,7 +335,7 @@
|
||||||
<form id="postForm" enctype="multipart/form-data" method="POST">
|
<form id="postForm" enctype="multipart/form-data" method="POST">
|
||||||
<input type="hidden" value="-1" id="replyTo">
|
<input type="hidden" value="-1" id="replyTo">
|
||||||
<div class="form-group has-feedback-right" id="content">
|
<div class="form-group has-feedback-right" id="content">
|
||||||
<div class="form-control" id="contentField" contenteditable style="min-height:100px"
|
<div class="form-control max-length-input" max-length="1000" id="contentField" contenteditable style="min-height:100px"
|
||||||
required></div>
|
required></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
|
||||||
|
|
@ -110,15 +110,15 @@
|
||||||
<?= lang('home_slider_video_des'); ?>
|
<?= lang('home_slider_video_des'); ?>
|
||||||
</p>
|
</p>
|
||||||
<a class="boxed btn btn-md animation animated-item-3"
|
<a class="boxed btn btn-md animation animated-item-3"
|
||||||
href="<?= $video['post_url'] ?>" target="_blank">
|
href="<?= $video['url'] ?>" target="_blank">
|
||||||
<?= lang('home_slider_video_btn') ?>
|
<?= lang('home_slider_video_btn') ?>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-6 hidden-xs animation animated-item-4">
|
<div class="col-sm-6 hidden-xs animation animated-item-4">
|
||||||
<div class="centered">
|
<div class="centered">
|
||||||
<a href="<?= $video['post_url'] ?>" target="_blank">
|
<a href="<?= $video['url'] ?>" target="_blank">
|
||||||
<img src="<?= $video['post_img_source'] ?>" class="img-fluid">
|
<img src="<?= $video['imageSource'] ?>" class="img-fluid">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -141,56 +141,152 @@
|
||||||
</section>
|
</section>
|
||||||
<!--/#main-slider-->
|
<!--/#main-slider-->
|
||||||
|
|
||||||
<section class="container-fluid p-0">
|
<section class="container">
|
||||||
<div class="container">
|
<div class="row my-2">
|
||||||
<div class="row my-2">
|
<div class="col">
|
||||||
<div class="col">
|
<h1 class="text-center">Wer bin ich eigentlich?</h1>
|
||||||
<h1><?= lang('home_channels_title') ?></h1>
|
<p class="lead">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 -
|
||||||
</div>
|
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.</p>
|
||||||
|
<a href="<?= base_url('about') ?>" class="btn btn-primary">Über mich</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tilted-columns">
|
<div class="row my-2">
|
||||||
<div class="tilted-column">
|
<div class="col-md-4">
|
||||||
<img class="column-image" src="/f/59768b61257e439b593ff2fb112d5079" alt="KingOfDog Logo">
|
<div class="list-group" id="yt-channels-tabs" role="tablist">
|
||||||
<div class="column-caption">
|
<a href="#yt-channel-kingofdog" class="list-group-item list-group-item-action active" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdog" id="yt-channel-kingofdog-tab">KingOfDog</a>
|
||||||
<h1 class="column-title">KingOfDog</h1>
|
<a href="#yt-channel-zeybefx" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-zebyefx" id="yt-channel-zeybefx-tab">ZebyeFX</a>
|
||||||
<h3 class="column-desc"><?= lang('home_kingofdog_des') ?></h3>
|
<a href="#yt-channel-zeybeofficial" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-zeybeofficial" id="yt-channel-zeybeofficial-tab">ZebyeOfficial</a>
|
||||||
|
<a href="#yt-channel-kingofdogint" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdogint" id="yt-channel-kingofdogint-tab">KingOfDog International</a>
|
||||||
|
<a href="#yt-channel-kingofdogtv" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-kingofdogtv" id="yt-channel-kingofdogtv-tab">KingOfDogTV</a>
|
||||||
|
<a href="#yt-channel-minepoint" class="list-group-item list-group-item-action" data-toggle="list" role="tab" aria-controls="yt-channel-minepoint" id="yt-channel-minepoint-tab">MinePoint</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tilted-column">
|
|
||||||
<img class="column-image" src="/f/3c930821892961aba30c7f91df1e5d4e" alt="ZeybeFX Logo">
|
<div class="col-md-8">
|
||||||
<div class="column-caption">
|
<div class="tab-content" id="nav-yt-channel-content">
|
||||||
<h1 class="column-title">ZeybeFX</h1>
|
<div class="tab-pane fade show active" id="yt-channel-kingofdog" role="tabpanel" aria-labelledby="yt-channel-kingofdog-tab">
|
||||||
<h3 class="column-desc"><?= lang('home_zeybefx_des') ?></h3>
|
<div class="row">
|
||||||
</div>
|
<div class="col-lg-8">
|
||||||
</div>
|
<div class="card">
|
||||||
<div class="tilted-column">
|
<div class="card-body">
|
||||||
<img class="column-image" src="/f/54c5963da3587342cb34336fd15c87aa" alt="ZeybeOfficial Logo">
|
<div class="yt-channel-title">
|
||||||
<div class="column-caption">
|
<img src="<?= base_url('/f/59768b61257e439b593ff2fb112d5079?w=160') ?>" alt="KingOfDog Logo">
|
||||||
<h1 class="column-title">ZeybeOfficial</h1>
|
<h3>KingOfDog</h3>
|
||||||
<h3 class="column-desc"><?= lang('home_zeybeofficial_des') ?></h3>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<p class="yt-channel-desc">
|
||||||
<div class="tilted-column">
|
<?= lang('home_kingofdog_des') ?>
|
||||||
<img class="column-image" src="/f/7b3fd0b5fb3ef9565f396a266db14a64" alt="KingOfDog International Logo">
|
</p>
|
||||||
<div class="column-caption">
|
|
||||||
<h1 class="column-title">KingOfDog International</h1>
|
<a href="https://youtube.com/KingOfDog" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||||
<h3 class="column-desc"><?= lang('home_kingofdogint_des') ?></h3>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tilted-column">
|
</div>
|
||||||
<img class="column-image" src="/f/d904d757da59e2d514d9b12604b9c8b6" alt="KingOfDogTV Logo">
|
</div>
|
||||||
<div class="column-caption">
|
|
||||||
<h1 class="column-title">KingOfDogTV</h1>
|
<div class="tab-pane fade" id="yt-channel-zeybefx" role="tabpanel" aria-labelledby="yt-channel-zeybefx-tab">
|
||||||
<h3 class="column-desc"><?= lang('home_kingofdogtv_des') ?></h3>
|
<div class="row">
|
||||||
</div>
|
<div class="col-lg-8">
|
||||||
</div>
|
<div class="card">
|
||||||
<div class="tilted-column">
|
<div class="card-body">
|
||||||
<img class="column-image" src="/f/1771967ab185e4d62ff5963977032fd8" alt="MinePoint Logo">
|
<div class="yt-channel-title">
|
||||||
<div class="column-caption">
|
<img src="<?= base_url('/f/3c930821892961aba30c7f91df1e5d4e?w=160') ?>" alt="ZeybeFX Logo">
|
||||||
<h1 class="column-title">MinePoint</h1>
|
<h3>ZeybeFX</h3>
|
||||||
<h3 class="column-desc"><?= lang('home_minepoint_des') ?></h3>
|
</div>
|
||||||
|
|
||||||
|
<p class="yt-channel-desc">
|
||||||
|
<?= lang('home_zeybefx_des') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="https://www.youtube.com/channel/UCossYe6KMMhf9HJ9Uaqtu-g" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="yt-channel-zeybeofficial" role="tabpanel" aria-labelledby="yt-channel-zeybeofficial-tab">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="yt-channel-title">
|
||||||
|
<img src="<?= base_url('/f/54c5963da3587342cb34336fd15c87aa?w=160') ?>" alt="ZeybeOfficial Logo">
|
||||||
|
<h3>ZeybeOfficial</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="yt-channel-desc">
|
||||||
|
<?= lang('home_zeybeofficial_des') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="https://www.youtube.com/channel/UCJ1_Tj4SVkU5h9a8Q0VrB4A" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="yt-channel-kingofdogint" role="tabpanel" aria-labelledby="yt-channel-kingofdogint-tab">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="yt-channel-title">
|
||||||
|
<img src="<?= base_url('/f/7b3fd0b5fb3ef9565f396a266db14a64?w=160') ?>" alt="KingOfDog International Logo">
|
||||||
|
<h3>KingOfDog International</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="yt-channel-desc">
|
||||||
|
<?= lang('home_kingofdogint_des') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="https://www.youtube.com/channel/UCthOkS9cpKgnBSj7AdR1rDg" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="yt-channel-kingofdogtv" role="tabpanel" aria-labelledby="yt-channel-kingofdogtv-tab">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="yt-channel-title">
|
||||||
|
<img src="<?= base_url('/f/d904d757da59e2d514d9b12604b9c8b6?w=160') ?>" alt="KingOfDogTV Logo">
|
||||||
|
<h3>KingOfDogTV</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="yt-channel-desc">
|
||||||
|
<?= lang('home_kingofdogtv_des') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="https://www.youtube.com/channel/UCNiPkMSdFR3ERemtlVTdtIQ" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="yt-channel-minepoint" role="tabpanel" aria-labelledby="yt-channel-minepoint-tab">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="yt-channel-title">
|
||||||
|
<img src="<?= base_url('/f/1771967ab185e4d62ff5963977032fd8?w=160') ?>" alt="MinePoint Logo">
|
||||||
|
<h3>MinePoint</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="yt-channel-desc">
|
||||||
|
<?= lang('home_minepoint_des') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="https://www.youtube.com/channel/UC2KTZbfkUo-Afc_JZpTZ0sQ" target="_blank" class="btn btn-primary">Kanal besuchen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -199,7 +295,7 @@
|
||||||
<section class="section-parallax section-green">
|
<section class="section-parallax section-green">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col-md-6 offset-md-3 text-center">
|
||||||
<h1>KOD Network</h1>
|
<h1>KOD Network</h1>
|
||||||
<p class="lead">
|
<p class="lead">
|
||||||
Jeder kennt die etablierten Netzwerke wie YouTube, Twitter, Instagram etc. Aber warum sollte man nicht einfach mal aus Spaß und um den Algorithmus-Giganten entgegenzuwirken sein eigenes soziales Netzwerk entwickeln? <br>
|
Jeder kennt die etablierten Netzwerke wie YouTube, Twitter, Instagram etc. Aber warum sollte man nicht einfach mal aus Spaß und um den Algorithmus-Giganten entgegenzuwirken sein eigenes soziales Netzwerk entwickeln? <br>
|
||||||
|
|
@ -207,9 +303,6 @@
|
||||||
</p>
|
</p>
|
||||||
<a href="<?= base_url('posts/popular') ?>" class="btn btn-default round">Beliebte Posts</a>
|
<a href="<?= base_url('posts/popular') ?>" class="btn btn-default round">Beliebte Posts</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -227,7 +320,7 @@
|
||||||
<h2><?= $activeUser['displayname'] ?></h2>
|
<h2><?= $activeUser['displayname'] ?></h2>
|
||||||
</a>
|
</a>
|
||||||
<small><?= $activeUser['follower_count'] ?> Followers | online
|
<small><?= $activeUser['follower_count'] ?> Followers | online
|
||||||
seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$loginTime"), $_SESSION['site_lang'])) ?></small>
|
seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new DateTime(), new DateTime("@$loginTime"), $_SESSION['site_lang'])) ?></small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
|
|
@ -245,7 +338,7 @@
|
||||||
</a>
|
</a>
|
||||||
<small><?= $newestUser['follower_count'] ?> Followers |
|
<small><?= $newestUser['follower_count'] ?> Followers |
|
||||||
registriert
|
registriert
|
||||||
seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new \DateTime(), new \DateTime("@$registeredDate"), $_SESSION['site_lang'])) ?></small>
|
seit <?= str_replace(['vor ', ' ago', 'il y a '], ['', '', ''], DateTimeHumanizer::difference(new DateTime(), new DateTime("@$registeredDate"), $_SESSION['site_lang'])) ?></small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
|
|
@ -264,7 +357,7 @@
|
||||||
<section class="section-parallax section-orange">
|
<section class="section-parallax section-orange">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6 offset-md-3 text-center">
|
||||||
<h1>Portfolio</h1>
|
<h1>Portfolio</h1>
|
||||||
<p class="lead">
|
<p class="lead">
|
||||||
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,
|
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 @@
|
||||||
<section class="section-parallax section-red">
|
<section class="section-parallax section-red">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6 offset-md-3 text-center">
|
||||||
<h1>Blog</h1>
|
<h1>Blog</h1>
|
||||||
<p class="lead">
|
<p class="lead">
|
||||||
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
|
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
|
||||||
|
|
|
||||||
|
|
@ -79,8 +79,8 @@ section.midnight-blue a::after {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(.btn):hover, a:not(.btn):focus {
|
a:not(.btn):not(.list-group-item):hover, a:not(.btn):not(.list-group-item):focus {
|
||||||
color: #3b7ae3 !important;
|
color: #3b7ae3;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,28 @@
|
||||||
.navbar {
|
.navbar {
|
||||||
|
display: grid;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
background-color: #fff;
|
||||||
justify-content: normal;
|
justify-content: normal;
|
||||||
display: grid;
|
grid-template-columns: 50px 240px auto 185px 50px 50px;
|
||||||
grid-template-columns: 50px 50px auto 50px 50px;
|
grid-template-areas: "menuButton logo center . secondAction firstAction";
|
||||||
grid-template-areas: "menuButton . center firstAction secondAction";
|
|
||||||
grid-gap: 5px;
|
grid-gap: 5px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar.loggedIn {
|
.navbar.loggedIn {
|
||||||
grid-template-columns: 180px 50px 50px auto 50px 50px 180px;
|
grid-template-columns: 50px 240px auto 5px 50px 180px;
|
||||||
grid-template-areas: "menuButton . . center firstAction secondAction thirdAction";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-logo-container {
|
.navbar .navbar-logo-container {
|
||||||
grid-area: center;
|
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
grid-area: logo;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-logo-container .navbar-logo {
|
.navbar .navbar-logo-container .navbar-logo {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 240px;
|
width: 240px;
|
||||||
width: 50%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
transition: opacity .25s;
|
transition: opacity .25s;
|
||||||
|
|
@ -35,39 +34,38 @@
|
||||||
|
|
||||||
.navbar .navbar-logo-container .navbar-logo-svg {
|
.navbar .navbar-logo-container .navbar-logo-svg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
-webkit-transform: translateX(-50%);
|
-moz-transform: translate(calc(-50% - 55px), -50%);
|
||||||
-moz-transform: translateX(-50%);
|
-ms-transform: translate(calc(-50% - 55px), -50%);
|
||||||
-ms-transform: translateX(-50%);
|
-o-transform: translate(calc(-50% - 55px), -50%);
|
||||||
-o-transform: translateX(-50%);
|
-webkit-transform: translate(calc(-50% - 55px), -50%);
|
||||||
transform: translateX(-50%);
|
transform: translate(calc(-50% - 55px), -50%);
|
||||||
height: 45px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-logo-container .navbar-logo-title {
|
.navbar .navbar-logo-container .navbar-logo-title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
height: 50%;
|
transform: translate(calc(-50% + 35px), -50%);
|
||||||
transform: translate(calc(-50% + 100px), -50%);
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
opacity: 0;
|
color: #757575;
|
||||||
visibility: hidden;
|
font-size: 22px;
|
||||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
font-weight: 400;
|
||||||
-moz-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);
|
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||||
-o-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);
|
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||||
font-size: 24px;
|
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-action {
|
.navbar .navbar-action {
|
||||||
height: auto;
|
height: auto;
|
||||||
font-size: 30px;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
font-size: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -79,42 +77,30 @@
|
||||||
grid-area: secondAction;
|
grid-area: secondAction;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-action:nth-child(6) {
|
|
||||||
grid-area: thirdAction;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar .navbar-action-btn {
|
.navbar .navbar-action-btn {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
color: #757575;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-action-btn:active,
|
.navbar .navbar-action-btn:active,
|
||||||
.navbar .navbar-action-btn:focus {
|
.navbar .navbar-action-btn:focus {
|
||||||
color: #fff !important;
|
color: #555555 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-action-btn:hover {
|
.navbar .navbar-action-btn:hover {
|
||||||
color: #ddd !important;
|
color: #6d6d6d !important;
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-action-btn #login-icon .z {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-action-btn:hover #logo-icon .z {
|
|
||||||
fill: #ddd;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-action-btn:hover #login-icon .y {
|
.navbar-action-btn:hover #login-icon .y {
|
||||||
-webkit-transition: all .2s;
|
transform: translate(0, 0);
|
||||||
-moz-transition: all .2s;
|
-moz-transition: all .2s;
|
||||||
-ms-transition: all .2s;
|
-ms-transition: all .2s;
|
||||||
-o-transition: all .2s;
|
-o-transition: all .2s;
|
||||||
|
-webkit-transition: all .2s;
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
transform: translate(0, 0);
|
|
||||||
animation: arrow-pointing 1.5s infinite;
|
animation: arrow-pointing 1.5s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -133,26 +119,26 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.navbar-logo svg, .navbar-logo svg .a {
|
.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);
|
-moz-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||||
-ms-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);
|
-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);
|
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-logo:hover .b {
|
.navbar-logo:hover .b {
|
||||||
-webkit-transform: translateX(-100px);
|
|
||||||
-moz-transform: translateX(-100px);
|
-moz-transform: translateX(-100px);
|
||||||
-ms-transform: translateX(-100px);
|
-ms-transform: translateX(-100px);
|
||||||
-o-transform: translateX(-100px);
|
-o-transform: translateX(-100px);
|
||||||
|
-webkit-transform: translateX(-100px);
|
||||||
transform: translateX(-100px);
|
transform: translateX(-100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-logo:hover .c {
|
.navbar-logo:hover .c {
|
||||||
-webkit-transform: translateX(100px);
|
|
||||||
-moz-transform: translateX(100px);
|
-moz-transform: translateX(100px);
|
||||||
-ms-transform: translateX(100px);
|
-ms-transform: translateX(100px);
|
||||||
-o-transform: translateX(100px);
|
-o-transform: translateX(100px);
|
||||||
|
-webkit-transform: translateX(100px);
|
||||||
transform: translateX(100px);
|
transform: translateX(100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -182,62 +168,49 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-logo:hover .navbar-logo-title {
|
.navbar-logo:hover .navbar-logo-title {
|
||||||
visibility: visible;
|
transform: translate(calc(-50% + 45px), -50%);
|
||||||
opacity: 1;
|
|
||||||
transform: translate(calc(-50% + 55px), -50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-logo:hover .navbar-logo-svg {
|
.navbar-logo:hover .navbar-logo-svg {
|
||||||
transform: translateX(calc(-50% - 55px));
|
transform: translate(calc(-50% - 55px), -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchButton > i.fa {
|
#searchButton > i.fa {
|
||||||
transform-origin: 25% 25%;
|
|
||||||
transition: transform .5s;
|
transition: transform .5s;
|
||||||
|
transform-origin: 25% 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchButton:hover i.fa {
|
#searchButton:hover i.fa {
|
||||||
-webkit-transform: rotateZ(360deg);
|
|
||||||
-moz-transform: rotateZ(360deg);
|
-moz-transform: rotateZ(360deg);
|
||||||
-ms-transform: rotateZ(360deg);
|
-ms-transform: rotateZ(360deg);
|
||||||
-o-transform: rotateZ(360deg);
|
-o-transform: rotateZ(360deg);
|
||||||
|
-webkit-transform: rotateZ(360deg);
|
||||||
transform: rotateZ(360deg);
|
transform: rotateZ(360deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-search {
|
.navbar .navbar-search {
|
||||||
pointer-events: none;
|
|
||||||
grid-area: center;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
grid-area: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar-search input.form-control {
|
.navbar .navbar-search input.form-control {
|
||||||
width: 0;
|
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
background: rgba(0, 0, 0, .04);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: none;
|
outline: 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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#userMenuButton {
|
#userMenuButton {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
font-size: 18px;
|
|
||||||
background: white;
|
|
||||||
color: #444 !important;
|
|
||||||
border-radius: 25px;
|
|
||||||
padding: 4px 25px 4px 4px;
|
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 {
|
#userMenuButton img {
|
||||||
|
|
@ -249,11 +222,6 @@
|
||||||
grid-template-columns: 50px 50px 50px auto 50px 50px 50px;
|
grid-template-columns: 50px 50px 50px auto 50px 50px 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*.navbar-content {*/
|
|
||||||
/*transform: scale(.75) translateX(25px);*/
|
|
||||||
/*margin-top: -8px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
#userMenuButton {
|
#userMenuButton {
|
||||||
padding: 4px;
|
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 {
|
.menu-icon span, .menu-icon:before, .menu-icon:after, .menu-icon span:before, .menu-icon span:after {
|
||||||
display: block;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 0.125em;
|
left: 0.255em;
|
||||||
background-color: #fff;
|
display: block;
|
||||||
width: 0.75em;
|
width: 0.45em;
|
||||||
height: 0.05em;
|
height: 0.04em;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
background-color: #757575;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
font-size: 3.75rem;
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 25px;
|
||||||
|
transform: scale(.8);
|
||||||
|
z-index: 1041;
|
||||||
|
display: inline-block;
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
display: inline-block;
|
|
||||||
background-color: transparent;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background-color: transparent;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
font-size: 3.75rem;
|
||||||
|
cursor: pointer;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
|
|
@ -303,12 +268,6 @@
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-ms-touch-action: manipulation;
|
-ms-touch-action: manipulation;
|
||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
cursor: pointer;
|
|
||||||
transform: scale(.8);
|
|
||||||
position: fixed;
|
|
||||||
left: 25px;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1041;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon span {
|
.menu-icon span {
|
||||||
|
|
@ -316,13 +275,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon:before {
|
.menu-icon:before {
|
||||||
content: "";
|
|
||||||
margin-top: -0.275em;
|
margin-top: -0.275em;
|
||||||
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon:after {
|
.menu-icon:after {
|
||||||
content: "";
|
|
||||||
margin-top: 0.225em;
|
margin-top: 0.225em;
|
||||||
|
content: "";
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon:before, .menu-icon:after {
|
.menu-icon:before, .menu-icon:after {
|
||||||
|
|
@ -335,21 +294,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon span:before, .menu-icon span:after {
|
.menu-icon span:before, .menu-icon span:after {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
content: "";
|
content: "";
|
||||||
-webkit-transition: 0.25s ease;
|
-webkit-transition: 0.25s ease;
|
||||||
transition: 0.25s ease;
|
transition: 0.25s ease;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon span:before {
|
.menu-icon span:before {
|
||||||
-webkit-transform: translateY(-0.25em);
|
-webkit-transform: translateY(-0.15em);
|
||||||
transform: translateY(-0.25em);
|
transform: translateY(-0.15em);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-icon span:after {
|
.menu-icon span:after {
|
||||||
-webkit-transform: translateY(0.25em);
|
-webkit-transform: translateY(0.15em);
|
||||||
transform: translateY(0.25em);
|
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 {
|
.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);
|
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 {
|
#notificationMenu {
|
||||||
width: 360px;
|
width: 360px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#notificationMenu .list-group {
|
#notificationMenu .list-group {
|
||||||
max-height: 500px;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
max-height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#notificationMenu a:not(.disabled) {
|
#notificationMenu a:not(.disabled) {
|
||||||
color: #333 !important;
|
|
||||||
background-color: #2272ff1a;
|
background-color: #2272ff1a;
|
||||||
|
color: #333 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#notificationMenu a:hover,
|
#notificationMenu a:hover,
|
||||||
#notificationMenu a:active,
|
#notificationMenu a:active,
|
||||||
#notificationMenu a:focus {
|
#notificationMenu a:focus {
|
||||||
color: #fff !important;
|
|
||||||
background-color: #2272ff;
|
background-color: #2272ff;
|
||||||
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#logo-container {
|
#logo-container {
|
||||||
top: 8px;
|
top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo-container, #logo-container * {
|
#logo-container, #logo-container * {
|
||||||
-webkit-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
|
||||||
-moz-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);
|
-ms-transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||||
-o-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);
|
transition: all .2s cubic-bezier(0, 0, 1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container:hover .b {
|
.logo-container:hover .b {
|
||||||
-webkit-transform: translateX(-100px);
|
|
||||||
-moz-transform: translateX(-100px);
|
-moz-transform: translateX(-100px);
|
||||||
-ms-transform: translateX(-100px);
|
-ms-transform: translateX(-100px);
|
||||||
-o-transform: translateX(-100px);
|
-o-transform: translateX(-100px);
|
||||||
|
-webkit-transform: translateX(-100px);
|
||||||
transform: translateX(-100px);
|
transform: translateX(-100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container:hover .c {
|
.logo-container:hover .c {
|
||||||
-webkit-transform: translateX(100px);
|
|
||||||
-moz-transform: translateX(100px);
|
-moz-transform: translateX(100px);
|
||||||
-ms-transform: translateX(100px);
|
-ms-transform: translateX(100px);
|
||||||
-o-transform: translateX(100px);
|
-o-transform: translateX(100px);
|
||||||
|
-webkit-transform: translateX(100px);
|
||||||
transform: translateX(100px);
|
transform: translateX(100px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -512,57 +400,27 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-container {
|
.logo-container {
|
||||||
width: 500px;
|
|
||||||
height: 60px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
width: 500px;
|
||||||
|
height: 60px;
|
||||||
#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));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#login-icon {
|
#login-icon {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.navbar-link svg, .navbar-link i {
|
.navbar-link svg, .navbar-link i {
|
||||||
display: block;
|
display: block;
|
||||||
transition: color .5s;
|
transition: color .5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-link span {
|
.navbar-link span {
|
||||||
font-size: 12px;
|
|
||||||
color: #fff;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,35 +2,35 @@
|
||||||
#main-slider .carousel-item {
|
#main-slider .carousel-item {
|
||||||
height: calc(100vh - 60px);
|
height: calc(100vh - 60px);
|
||||||
background: no-repeat center;
|
background: no-repeat center;
|
||||||
-webkit-background-size: cover;
|
|
||||||
-moz-background-size: cover;
|
-moz-background-size: cover;
|
||||||
-o-background-size: cover;
|
-o-background-size: cover;
|
||||||
|
-webkit-background-size: cover;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-slider .carousel-item .carousel-caption {
|
#main-slider .carousel-item .carousel-caption {
|
||||||
top: 0;
|
|
||||||
height: 600px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
|
height: 600px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transition: opacity ease-in-out 500ms;
|
|
||||||
-moz-transition: opacity ease-in-out 500ms;
|
-moz-transition: opacity ease-in-out 500ms;
|
||||||
-o-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;
|
transition: opacity ease-in-out 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-slider .carousel-item.active .carousel-caption {
|
#main-slider .carousel-item.active .carousel-caption {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transition: opacity ease-in-out 500ms;
|
|
||||||
-moz-transition: opacity ease-in-out 500ms;
|
-moz-transition: opacity ease-in-out 500ms;
|
||||||
-o-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;
|
transition: opacity ease-in-out 500ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-slider .carousel-item .carousel-caption .container {
|
#main-slider .carousel-item .carousel-caption .container {
|
||||||
top: auto;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-slider .carousel-item .carousel-content {
|
#main-slider .carousel-item .carousel-content {
|
||||||
|
|
@ -39,13 +39,13 @@
|
||||||
|
|
||||||
#main-slider .carousel-item .boxed {
|
#main-slider .carousel-item .boxed {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
cursor: default;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: default;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-slider .carousel-item a.boxed {
|
#main-slider .carousel-item a.boxed {
|
||||||
|
|
@ -62,16 +62,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-slider .carousel-item .btn {
|
#main-slider .carousel-item .btn {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 5px;
|
||||||
border: 3px solid rgba(255, 255, 255, 0.5);
|
border: 3px solid rgba(255, 255, 255, 0.5);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-top: 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: ease-in-out .1s;
|
transition: ease-in-out .1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-slider .carousel-item .btn:hover {
|
#main-slider .carousel-item .btn:hover {
|
||||||
border-width: 0;
|
|
||||||
padding: 13px 18px;
|
padding: 13px 18px;
|
||||||
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-slider .active .animation.animated-item-1 {
|
#main-slider .active .animation.animated-item-1 {
|
||||||
|
|
@ -106,20 +106,35 @@
|
||||||
animation: fadeInUp 300ms linear 1200ms both;
|
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 {
|
.tilted-column {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transform: skewX(-6deg);
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
width: calc((100% / 3) + 6px + (32px / 3));
|
width: calc((100% / 3) + 6px + (32px / 3));
|
||||||
height: 33vw;
|
height: 33vw;
|
||||||
display: inline-block;
|
|
||||||
margin-left: -6px;
|
margin-left: -6px;
|
||||||
overflow: hidden;
|
|
||||||
border-right: 10px solid transparent;
|
border-right: 10px solid transparent;
|
||||||
transform: skewX(-6deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column:nth-child(3n+1) {
|
.tilted-column:nth-child(3n+1) {
|
||||||
margin-left: -24px;
|
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
|
margin-left: -24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column:nth-child(3n+3) {
|
.tilted-column:nth-child(3n+3) {
|
||||||
|
|
@ -128,34 +143,34 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column > .column-image {
|
.tilted-column > .column-image {
|
||||||
width: 100%;
|
|
||||||
transform: skewX(6deg) scale(1.1);
|
transform: skewX(6deg) scale(1.1);
|
||||||
|
width: 100%;
|
||||||
transition: transform .8s;
|
transition: transform .8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column > .column-caption {
|
.tilted-column > .column-caption {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 75%;
|
|
||||||
top: 100%;
|
top: 100%;
|
||||||
left: 56%;
|
left: 56%;
|
||||||
opacity: 0;
|
|
||||||
transform: skewX(6deg) translate(-50%, 0);
|
transform: skewX(6deg) translate(-50%, 0);
|
||||||
|
width: 75%;
|
||||||
|
opacity: 0;
|
||||||
transition: all .8s;
|
transition: all .8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column > .column-caption > .column-title,
|
.tilted-column > .column-caption > .column-title,
|
||||||
.tilted-column > .column-caption > .column-desc {
|
.tilted-column > .column-caption > .column-desc {
|
||||||
color: #fff;
|
|
||||||
background-color: rgba(0, 0, 0, .8);
|
|
||||||
padding: 4px 16px;
|
padding: 4px 16px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
background-color: rgba(0, 0, 0, .8);
|
||||||
|
color: #fff;
|
||||||
font-size: 2.5vw;
|
font-size: 2.5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column > .column-caption > .column-desc {
|
.tilted-column > .column-caption > .column-desc {
|
||||||
|
width: 100%;
|
||||||
font-size: 1.25vw;
|
font-size: 1.25vw;
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column:hover > .column-image {
|
.tilted-column:hover > .column-image {
|
||||||
|
|
@ -185,8 +200,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column:nth-child(2n+1) {
|
.tilted-column:nth-child(2n+1) {
|
||||||
margin-left: -24px;
|
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
|
margin-left: -24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column:nth-child(2n + 2) {
|
.tilted-column:nth-child(2n + 2) {
|
||||||
|
|
@ -205,10 +220,10 @@
|
||||||
|
|
||||||
@media (max-width: 575px) {
|
@media (max-width: 575px) {
|
||||||
.tilted-column {
|
.tilted-column {
|
||||||
|
transform: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vw;
|
height: 100vw;
|
||||||
margin: 10px 0 !important;
|
margin: 10px 0 !important;
|
||||||
transform: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tilted-column > .column-image {
|
.tilted-column > .column-image {
|
||||||
|
|
@ -347,46 +362,46 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item.twitter:hover .icon-md {
|
.social-media-list .social-media-item.twitter:hover .icon-md {
|
||||||
color: #4099FF;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #4099FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item.youtube:hover .icon-md {
|
.social-media-list .social-media-item.youtube:hover .icon-md {
|
||||||
color: #e52d27;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #e52d27;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item.google-plus:hover .icon-md {
|
.social-media-list .social-media-item.google-plus:hover .icon-md {
|
||||||
color: #d34836;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #d34836;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item._500px:hover .icon-md {
|
.social-media-list .social-media-item._500px:hover .icon-md {
|
||||||
color: #0099e5;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #0099e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item.patreon:hover .icon-md {
|
.social-media-list .social-media-item.patreon:hover .icon-md {
|
||||||
color: #E6461A;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #E6461A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item.steam:hover .icon-md {
|
.social-media-list .social-media-item.steam:hover .icon-md {
|
||||||
color: #0A2341;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #0A2341;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item.github:hover .icon-md {
|
.social-media-list .social-media-item.github:hover .icon-md {
|
||||||
color: #000;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item.twitch:hover .icon-md {
|
.social-media-list .social-media-item.twitch:hover .icon-md {
|
||||||
color: #6441A4;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #6441A4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-list .social-media-item.spotify:hover .icon-md {
|
.social-media-list .social-media-item.spotify:hover .icon-md {
|
||||||
color: #1ED760;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
color: #1ED760;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in New Issue
Block a user