Holiday changes ;)

assets/css/fonts.css

@@ -0,0 +1,41 @@
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 100;
+    src: local('Roboto Thin'), local('Roboto-Thin'), url(/assets/fonts/Roboto/Roboto-Thin.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    src: local('Roboto Light'), local('Roboto-Light'), url(/assets/fonts/Roboto/Roboto-Light.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Roboto'), local('Roboto-Regular'), url(/assets/fonts/Roboto/Roboto-Regular.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    src: local('Roboto Medium'), local('Roboto-Medium'), url(/assets/fonts/Roboto/Roboto-Medium.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Roboto Bold'), local('Roboto-Bold'), url(/assets/fonts/Roboto/Roboto-Bold.ttf) format('truetype');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 900;
+    src: local('Roboto Black'), local('Roboto-Black'), url(/assets/fonts/Roboto/Roboto-Black.ttf) format('truetype');
+}

assets/css/home.css

@@ -65,12 +65,13 @@
     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;
-    margin: 8px 3px;
+    padding: 13px 18px;
 }
 
 #main-slider .active .animation.animated-item-1 {

assets/css/main.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto');
-
 .repeating-background-transparent, .repeating-background-white {
     position: relative;
     width: 100%;
@@ -20,6 +18,30 @@ body > section {
     padding: 50px 0;
 }
 
+.dark {
+    background: #222222;
+    color: #FAFAFA;
+}
+
+.dark h1, .dark h2, .dark h3 {
+    color: #fafafa;
+}
+
+
+.dark .btn.btn-default {
+    background: #222222;
+    color: #FAFAFA;
+    border: 2px solid #FAFAFA;
+}
+
+.dark .btn.btn-default:hover,
+.dark .btn.btn-default:focus,
+.dark .btn.btn-default:active,
+.dark .btn.btn-default.active {
+    background: #FAFAFA;
+    color: #222222;
+}
+
 .primary p, .secondary p, .turquoise p, .green-sea p, .sun-flower p, .section-orange p, .section-green p, .nephrits p, .carrot p, .pumkin p, .peter-river p, .belize-hole p, .section-red p, .pomegranate p, .amethyst p, .wisteria p, .clouds .silver p, .wet-asphalt p, .midnight-blue p, .concrete p, .asbestos p, .primary h2, .secondary h2, .turquoise h2, .green-sea h2, .sun-flower h2, .section-orange h2, .section-green h2, .nephrits h2, .carrot h2, .pumkin h2, .peter-river h2, .belize-hole h2, .section-red h2, .pomegranate h2, .amethyst h2, .wisteria h2, .clouds .silver h2, .wet-asphalt h2, .midnight-blue h2, .concrete h2, .asbestos h2, .primary h3, .secondary h3, .turquoise h3, .green-sea h3, .sun-flower h3, .section-orange h3, .section-green h3, .nephrits h3, .carrot h3, .pumkin h3, .peter-river h3, .belize-hole h3, .section-red h3, .pomegranate h3, .amethyst h3, .wisteria h3, .clouds .silver h3, .wet-asphalt h3, .midnight-blue h3, .concrete h3, .asbestos h3, .primary h4, .secondary h4, .turquoise h4, .green-sea h4, .sun-flower h4, .section-orange h4, .section-green h4, .nephrits h4, .carrot h4, .pumkin h4, .peter-river h4, .belize-hole h4, .section-red h4, .pomegranate h4, .amethyst h4, .wisteria h4, .clouds .silver h4, .wet-asphalt h4, .midnight-blue h4, .concrete h4, .asbestos h4, .primary h5, .secondary h5, .turquoise h5, .green-sea h5, .sun-flower h5, .section-orange h5, .section-green h5, .nephrits h5, .carrot h5, .pumkin h5, .peter-river h5, .belize-hole h5, .section-red h5, .pomegranate h5, .amethyst h5, .wisteria h5, .clouds .silver h5, .wet-asphalt h5, .midnight-blue h5, .concrete h5, .asbestos h5, .primary h6, .secondary h6, .turquoise h6, .green-sea h6, .sun-flower h6, .section-orange h6, .section-green h6, .nephrits h6, .carrot h6, .pumkin h6, .peter-river h6, .belize-hole h6, .section-red h6, .pomegranate h6, .amethyst h6, .wisteria h6, .clouds .silver h6, .wet-asphalt h6, .midnight-blue h6, .concrete h6, .asbestos h6 {
     color: #fff;
 }
@@ -143,30 +165,6 @@ body > section {
     margin: 0;
 }
 
-section.dark {
-    background: #222222;
-    color: #FAFAFA;
-}
-
-section.dark h1, section.dark h2, section.dark h3 {
-    color: #fafafa;
-}
-
-
-section.dark .btn.btn-default {
-    background: #222222;
-    color: #FAFAFA;
-    border: 2px solid #FAFAFA;
-}
-
-section.dark .btn.btn-default:hover,
-section.dark .btn.btn-default:focus,
-section.dark .btn.btn-default:active,
-section.dark .btn.btn-default.active {
-    background: #FAFAFA;
-    color: #222222;
-}
-
 #title h1 {
     margin: 0;
     font-size: 36px;
@@ -1116,7 +1114,8 @@ ul#downloadSlider a.active .overlay {
     border-radius: 50%;
 }
 
-.comment-list .comment-well .post-non-content {
+.comment-list .comment-well .post-non-content,
+.postFullviewModal .post-non-content {
     display: inline-block;
     width: 100px;
     padding: 10px;
@@ -1560,6 +1559,7 @@ ul#downloadSlider a.active .overlay {
     transition: 0.4s ease;
     visibility: hidden;
     opacity: 0;
+    white-space: nowrap;
 }
 
 .btn-floating .btn-floating-shadow {

assets/css/profile_page.css

@@ -26,7 +26,7 @@
     -moz-transition: box-shadow .2s;
     -ms-transition: box-shadow .2s;
     -o-transition: box-shadow .2s;
-    transition: border .1s, box-shadow .2s;
+    transition: border-bottom-width .1s, box-shadow .2s;
 }
 
 .profile-stats .item.active {
@@ -84,7 +84,7 @@
     padding: 0;
     width: 100%;
     box-shadow: 0 1px 3px 0 rgba(0,0,0,.25);
-    z-index: 1;
+    z-index: 2;
 }
 
 #profile-sub-header.fixedTop {

assets/js/custom.js

@@ -204,7 +204,6 @@ $(function () {
     } else {
         defaultDate = new Date();
     }
-    console.log('lteasdf');
     $('#datetimepicker').datetimepicker({
         format: 'DD.MM.YYYY HH:mm',
         stepping: '10',

assets/js/main.js

@@ -343,3 +343,15 @@ function loadNotificationsAsync() {
 }
 
 loadNotificationsAsync();
+
+$('#switchDarkmode').click(function (event) {
+    event.preventDefault();
+    $('body').toggleClass('dark');
+    if($('body').hasClass('dark')) {
+        $(this).find('.fa-moon').removeClass('fa').addClass('far');
+        $(this).attr('data-title', 'Light Theme')
+    } else {
+        $(this).find('.fa-moon').removeClass('far').addClass('fa');
+        $(this).attr('data-title', 'Dark Theme')
+    }
+});

assets/js/profile_edit.js

@@ -28,7 +28,7 @@ $('#birthdate-month').change(function () {
 });
 
 $('#birthdate-year').change(function () {
-    if(parseInt($('#birthdate-year').val()) % 4 === 0 && $('#birthdate-month').val() === 2) {
+    if (parseInt($('#birthdate-year').val()) % 4 === 0 && $('#birthdate-month').val() === 2) {
         updateDaySelection(29);
     }
 });
@@ -53,11 +53,41 @@ function updateDaySelection() {
 
 function updateYearSelection() {
     const curYear = new Date().getFullYear();
-    for(let i = curYear; i >= curYear - 120; i--) {
+    for (let i = curYear; i >= curYear - 120; i--) {
         $('#birthdate-year').append('<option value="' + i + '">' + i + '</option>');
     }
 }
 
 updateMonthSelection();
 updateDaySelection();
-updateYearSelection();
+updateYearSelection();
+
+$(function () {
+    $('#color').colorpicker({
+        inline: true,
+        container: true,
+        format: 'hsl',
+        useAlpha: false,
+        fallbackColor: '#2272ff',
+    })
+        .on('colorpickerChange colorpickerCreate', function (e) {
+            $('#customColor').html(`
+                .text-custom {
+                    color: ${e.value} !important
+                }
+                
+                .bg-custom {
+                    background-color: ${e.value} !important
+                }
+                
+                .bg-custom * {
+                    color: ${e.color.isDark() ? '#fff' : '#333'} !important;
+                    fill: ${e.color.isDark() ? '#fff' : '#333'} !important;
+                }
+                
+                .border-custom {
+                    border-color: ${e.value} !important
+                }
+            `)
+        });
+});

assets/js/profile_page.js

@@ -45,6 +45,7 @@ $(window).scroll(function () {
     if ($(this).scrollTop() + 75 > scrollTrigger.offset().top) {
         parallaxActive = false;
         $('#profile-sub-header').addClass('fixedTop').css('transform', 'translate3d(0,0,0)');
+        $('#profile-content').css('transform', 'translate3d(0, ' + $('#profile-sub-header').height() + 'px, 0)');
     } else {
         parallaxActive = true;
         $('#profile-sub-header').removeClass('fixedTop');