Commit c79a9bca authored by Vitor Lopes's avatar Vitor Lopes

force animations to run GPU, several animation fixes, add clasic news view

parent 3eaaac20
$green:#44883c;
$svg-icon-size: 62px;
@font-face {
font-family: 'Comfortaa';
src: url('/fonts/Comfortaa-Bold.ttf') format('truetype'),
url('/fonts/Comfortaa-Bold.woff') format('woff'),
url('/fonts/Comfortaa-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
.logo-overlay-loader {
width: 100%;
height: 100%;
......@@ -13,6 +22,7 @@ $svg-icon-size: 62px;
height: 96px;
animation: loader 2s infinite linear;
margin-bottom: 5px;
will-change: transform;
}
.logo-container {
position:absolute;
......@@ -36,7 +46,7 @@ $svg-icon-size: 62px;
}
}
@-webkit-keyframes loader {
@keyframes loader {
0% {
transform: rotateY(0deg);
}
......@@ -52,15 +62,6 @@ $svg-icon-size: 62px;
url('/fonts/Comfortaa-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}
@font-face {
font-family: 'Comfortaa';
src: url('/fonts/Comfortaa-Bold.ttf') format('truetype'),
url('/fonts/Comfortaa-Bold.woff') format('woff'),
url('/fonts/Comfortaa-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Comfortaa';
src: url('/fonts/Comfortaa-Light.ttf') format('truetype'),
......@@ -728,16 +729,19 @@ h1.title::first-letter {
.title-container {
animation: bottom-t-top 2s;
position: relative;
animation-iteration-count: 1
animation-iteration-count: 1;
will-change: transform;
}
.navbar {
animation: top-t-bottom 3s;
animation-iteration-count: 1
animation-iteration-count: 1;
will-change: transform;
}
.social-animation a {
animation: right-t-left 1s;
transform: translate(2000%, -0%);
animation-fill-mode: forwards;
will-change: transform;
&:nth-child(1) {
animation-delay: 2s;
}
......@@ -1023,6 +1027,43 @@ h1.title::first-letter {
.news {
.btn-rotate {
will-change: transform;
transition: transform 1s;
transform: rotate(180deg) !important;
}
#btn-layout {
background: transparent;
border: none;
cursor: pointer;
transform: rotate(90deg);
will-change: transform;
transition: transform .4s;
.fas{
font-size: 28px !important;
color: #5d595a;
}
&:active, &:hover, &:focus {
outline: none;
}
}
.btn-group {
margin-bottom: -13px;
margin-top: -26px;
}
.horizontal {
.grid-item {
flex: 0 0 100% !important;
max-width: 100% !important;
}
img, button {
display: none !important;
}
}
.gifffer-play-button {
background: #0d5f4f !important;
background-color: rgba(13, 95, 79, 0.8) !important;
......@@ -1032,6 +1073,11 @@ h1.title::first-letter {
}
}
.grid-item {
transition: background 0.4s, max-width .1s;
will-change: transform;
}
.social-icons-top {
text-align: right;
position: relative;
......@@ -1082,7 +1128,7 @@ h1.title::first-letter {
}
.testing .card-title {
&, &:hover, &:active &:focus {
border-bottom: 3px solid #ffd600;
border-bottom: 3px solid #ffc107;
}
}
.unstable .card-title {
......@@ -1092,16 +1138,19 @@ h1.title::first-letter {
}
.view.overlay:before {
content: "";
width: 0;
height: 0;
position: absolute;
right: 0;
top: 0;
border-bottom: 60px solid transparent;
border-right: 100px solid #e91e63;
z-index: 1;
.view.overlay {
overflow: hidden;
&:before {
content: "";
width: 0;
height: 0;
position: absolute;
right: 0;
top: 0;
border-bottom: 60px solid transparent;
border-right: 100px solid #e91e63;
z-index: 1;
}
}
.container .btn-success{
background-color: $green;
......
......@@ -8,7 +8,8 @@
<img src="/img/logo.svg" alt=""><br>
<span class="">manjaro</span><br>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<div id="dynamic" class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 0%" valuenow="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<span id="current-progress"></span>
</div>
</div>
</div>
......
......@@ -21,7 +21,7 @@
<script src="{{ "js/contact.js" | relURL }}" ></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).ready(function() {
setTimeout(function(){
$(".progress-bar").css("width", "30%");
}, 100);
......@@ -40,7 +40,7 @@
setTimeout(function(){
$(".progress-bar").css("width", "100%");
$(".logo-overlay-loader").fadeOut();
}, 600);
}, 600);
setTimeout(function(){
$(".social-animation").removeClass("social-animation");
}, 5000);
......
function postTypeButtons() {
var postTypeButtons = $(`
<div class="container text-center">
<button id="btn-layout"><i class="fas fa-bars"></i></button>
<div class="btn-group" role="group" aria-label="button group">
<button class="btn-post-type btn-sm btn disabled">Sort:</button>
<button onclick="selectPostType(this, '.updates');" class="btn-post-type btn btn-sm" data-toggle="modal" data-target="#updatesModal">Updates</button>
<button onclick="selectPostType(this, '.release');" class="btn-post-type btn-sm btn">Releases</button>
<button onclick="selectPostType(this, '.post-news');" class="btn-post-type btn-sm btn">News</button>
......@@ -26,7 +26,7 @@ function postTypeButtons() {
</div>
</div>`
)
return postTypeButtons
return postTypeButtons
}
function stopModal(el) {
......@@ -52,14 +52,7 @@ $('#news-grid').isotope({
function selectPostType(button, el) {
$(".btn-post-type").removeClass("btn-success");
$(button).addClass("btn-success");
$(".blog-post").removeClass("zoom").addClass("transitionFix");
function callback() {
setTimeout(function(){
$(".blog-post").removeClass("transitionFix").addClass("zoom");
}, 550);
}
$("#news-grid").isotope({ filter: el }, callback());
$("#news-grid").isotope({ filter: el });
}
var feeds = [
......@@ -145,8 +138,8 @@ function feedreader(url) {
function buildArticleTemplate(el, img, date, title, shortText, link) {
var $article = $(`
<article id='unique` + el + `' class='blog-post zoom grid-item col-md-6 col-xl-4 ml-auto mr-auto ` + detectPostTypeByTitle(title) + `'>
<div class="card">
<article id='unique` + el + `' class='blog-post grid-item col-md-6 col-xl-4 ml-auto mr-auto ` + detectPostTypeByTitle(title) + `'>
<div class="card zoom">
<div data-toggle="modal" data-target='#` + el + `'>
<div class="view overlay">` +
filterImages(img) + `
......@@ -157,6 +150,7 @@ function feedreader(url) {
<div id="date" class="text-right">
<span class="date">` + date + `</date>
</div>
<span>
<h5 class="card-title">` + title + `</h5>
<div class="card-body " data-background-color="black">
<div id="content" class="social-icons-top">
......@@ -166,6 +160,7 @@ function feedreader(url) {
<a onclick="" data-toggle="tooltip" data-placement="top" title="Share" href="https://www.facebook.com/sharer/sharer.php?u=` + link + `" target="_blank" class="btn btn-icon btn-round facebook">
<i class="fab fa-facebook-f"></i>
</a>
</span>
</div>
<p class="card-text">` + shortText + `</p>
</div>
......@@ -218,6 +213,16 @@ function feedreader(url) {
feedreader(feeds[0]);
feedreader(feeds[1]);
$("#news-grid article").imagesLoaded( function(){
$("#btn-layout").click(function(){
$("#btn-layout").toggleClass("btn-rotate");
$("#news-grid").toggleClass("horizontal");
setTimeout(function(){
$("#news-grid").isotope("reloadItems").isotope({ sortBy: 'original-order' });
}, 400);
});
});
setTimeout(function(){
$(".progress-bar").css("width", "10%");
}, 550);
......@@ -251,5 +256,6 @@ setTimeout(function(){
setTimeout(function(){
$(".logo-overlay-loader").fadeOut();
}, 3000);
$("#news-grid").isotope("reloadItems").isotope({ sortBy: 'original-order' });
}, 3000);
\ No newline at end of file
  • News section now also supports the classic view for the purists, as you wanted @philm

    news_layout

Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment