infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

css cleanup

Browse Source
This commit is contained in:
infeeeee
2019-09-07 01:54:34 +02:00
parent 9393e8be06
commit 609da6ba6a
5 changed files with 1943 additions and 4727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6264
css/base.css
View File

File diff suppressed because it is too large Load Diff

10
functions.php
View File

@@ -225,6 +225,15 @@ function add_slug_to_body_class($classes)
return $classes;
}
function add_masonry_to_body_class( $classes ) {
if(is_home() || is_archive() || is_search() || is_404()){
$classes[] = 'masonrypage';
} else if(is_singular()){
$classes[] = 'singularpage';
}
return $classes;
}
// // If Dynamic Sidebar Exists
// if (function_exists('register_sidebar'))
// {
@@ -605,6 +614,7 @@ remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
// Add Filters
add_filter('avatar_defaults', 'dis2019gravatar'); // Custom Gravatar in Settings > Discussion
add_filter('body_class', 'add_slug_to_body_class'); // Add slug to body class (Starkers build)
add_filter('body_class', 'add_masonry_to_body_class'); // Add masonry to body class
add_filter('widget_text', 'do_shortcode'); // Allow shortcodes in Dynamic Sidebar
add_filter('widget_text', 'shortcode_unautop'); // Remove <p> tags in Dynamic Sidebars (better!)
add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args'); // Remove surrounding <div> from WP Navigation

4
header.php
View File

@@ -44,7 +44,7 @@
<!-- ------------------------------ header-1 ------------------------------- -->
<div class="header-1">
<div class="header-1 header-inner">
<!-- logo -->
<div class="logo">
<a href="<?php echo home_url(); ?>">
@@ -108,7 +108,7 @@
<!-- ----------------------------- header 2 ------------------------------ -->
<div class="header-2">
<div class="header-2 header-inner">
<div class="menubutton">
<button type="button" id="toggle-sidebar">
<div class="menubutton-icon icon menuicon">

4
js/scripts.js
View File

@@ -610,13 +610,13 @@
}
$(window).scroll(function () {
if (isMobile && !isMenuOpen()) {
if (isMobile && !isMenuOpen() && (isHome || isSingle) ) {
$('.dis-logo, .menubutton-icon').addClass('black')
}
})
$(window).scrollStopped(function () {
if (isMobile && !isMenuOpen()) {
if (isMobile && !isMenuOpen() && (isHome || isSingle)) {
$('.dis-logo, .menubutton-icon').removeClass('black')
}
})

388
sass/base.scss
View File

@@ -1,10 +1,10 @@
@import "font-mixins";
/*------------------------------------*\
MAIN
\*------------------------------------*/
//------------------------------------*\
// MAIN
//------------------------------------*/
/* global box-sizing */
// global box-sizing */
*,
*:after,
*:before {
@@ -14,7 +14,7 @@
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
// html element 62.5% font-size for REM use */
html {
font-size: 62.5%;
}
@@ -23,7 +23,7 @@ body {
// font: 300 14px/1.4 "Westeinde Caption", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
}
/* clear */
// clear */
.clear:before,
.clear:after {
content: " ";
@@ -76,16 +76,16 @@ button {
}
}
/* ---------------------------- default selection --------------------------- */
// ---------------------------- default selection --------------------------- */
html *::selection {
color: #000;
background-color: #fdff00;
}
/* -------------------------------------------------------------------------- */
/* MEDIA QUERIES */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// MEDIA QUERIES */
// -------------------------------------------------------------------------- */
$bigmobile: only screen and
(
@@ -132,9 +132,9 @@ $verybigdesktop: only screen and
min-width: 1919px
);
/* -------------------------------------------------------------------------- */
/* GLOBAL VARIABLES */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// GLOBAL VARIABLES */
// -------------------------------------------------------------------------- */
//Horizontal units:
$h-unit-5: 25rem;
@@ -150,9 +150,9 @@ $v-unit-2: 8rem;
$v-unit-4: 16rem;
$v-unit-6: 24rem;
/* -------------------------------------------------------------------------- */
/* other mixins */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// other mixins */
// -------------------------------------------------------------------------- */
@mixin fit-content($wh) {
#{$wh}: -moz-max-content;
@@ -311,9 +311,9 @@ $v-unit-6: 24rem;
}
}
/* -------------------------------------------------------------------------- */
/* COOKIE NOTIFICATION */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// COOKIE NOTIFICATION */
// -------------------------------------------------------------------------- */
.cookie-notice-container {
@include home-metadata();
@@ -374,11 +374,11 @@ $v-unit-6: 24rem;
}
}
/* -------------------------------------------------------------------------- */
/* STRUCTURE */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// STRUCTURE */
// -------------------------------------------------------------------------- */
/* wrapper */
// wrapper */
.wrapper {
margin: 0 auto;
position: relative;
@@ -386,9 +386,9 @@ $v-unit-6: 24rem;
height: 100vh;
z-index: 1;
/* -------------------------------------------------------------------------- */
/* header */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// header */
// -------------------------------------------------------------------------- */
.header {
position: fixed;
@@ -409,8 +409,7 @@ $v-unit-6: 24rem;
}
}
.header-1,
.header-2 {
.header-inner {
display: flex;
flex-direction: row;
align-items: center;
@@ -463,76 +462,9 @@ $v-unit-6: 24rem;
}
}
// .totop {
// position: fixed;
// bottom: 1rem;
// right: 1rem;
// z-index: 2;
// @media #{$tablet} {
// display: none;
// }
// a {
// display: inline-block;
// object {
// height: 2rem;
// // color: #000;
// // fill: currentColor;
// filter: invert(100%); //black
// @include transform(rotate(180deg));
// }
// }
// }
// object {
// height: 3rem;
// // width: 3rem;
// @media #{$tablet} {
// height: 2.5rem;
// // width: 2.5rem;
// }
// @media #{$smalldesktop} {
// height: 3rem;
// // width: 3rem;
// }
// }
/* -------------------------------------------------------------------------- */
/* header elements */
/* -------------------------------------------------------------------------- */
// color of header elements, icons
// .logo,
// .social-link,
// .menubutton,
// .events-link {
// a,
// button,
// * {
// // z-index: 3501;
// // cursor: pointer;
// }
// // .white {
// // display: block;
// // }
// // .black {
// // display: none;
// // }
// // filter: invert(100);
// }
// @media #{$tablet} {
// .logo,
// .social-link,
// .menubutton,
// .events-link {
// // .white {
// // display: none;
// // }
// // .black {
// // display: block;
// // }
// // filter: invert(100);
// }
// }
// -------------------------------------------------------------------------- */
// header elements */
// -------------------------------------------------------------------------- */
//icons:
.dis-logo {
@@ -611,28 +543,10 @@ $v-unit-6: 24rem;
}
@media #{$tablet} {
.header-1 > div,
.header-2 > div {
.header-inner > div {
flex: 0 0 $h-unit-1 !important;
}
}
// dis logo size:
// .logo {
// object {
// height: $h-unit-1;
// // width: $h-unit-1;
// @media #{$tablet} {
// height: 4rem;
// // width: 4rem;
// }
// @media #{$smalldesktop} {
// height: $h-unit-1;
// // width: $h-unit-1;
// }
// }
// }
.menubutton {
$speed: 0.5s;
$degree: 225deg;
@@ -652,12 +566,6 @@ $v-unit-6: 24rem;
@media #{$tablet} {
background-image: url(../img/dis-plus-white.png);
background-image: url(../img/dis-plus-white.svg);
// .white {
// display: block;
// }
// .black {
// display: none;
// }
}
}
}
@@ -678,11 +586,11 @@ $v-unit-6: 24rem;
}
}
/* ========================================================================== */
/* SEARCH */
/* ========================================================================== */
// ========================================================================== */
// SEARCH */
// ========================================================================== */
/* ------------------------------ search mobile ----------------------------- */
// ------------------------------ search mobile ----------------------------- */
.search-box {
display: none;
@@ -706,31 +614,16 @@ $v-unit-6: 24rem;
}
button {
flex: 0 0 auto;
// .white {
// display: block;
// }
// .black {
// display: none;
// }
}
}
} //search-bar end
/* ----------------------------- search desktop ----------------------------- */
// ----------------------------- search desktop ----------------------------- */
@media #{$tablet} {
.search-box {
display: block;
flex: 1 1 0 !important;
// & > button {
// .white {
// display: none;
// }
// .black {
// display: block;
// }
// }
}
.search-bar {
@@ -760,15 +653,15 @@ $v-unit-6: 24rem;
}
}
/* -------------------- header scroll: scroll with click -------------------- */
// -------------------- header scroll: scroll with click -------------------- */
.header-scroll {
display: none;
}
/* ========================================================================== */
/* MENUS */
/* ========================================================================== */
// ========================================================================== */
// MENUS */
// ========================================================================== */
#sidebar {
padding-top: 9rem !important;
@@ -824,9 +717,6 @@ $v-unit-6: 24rem;
@media #{$tablet} {
padding: 0;
}
// @media #{$smalldesktop} {
// padding: 2rem 0;
// }
a {
@include menutext();
}
@@ -835,7 +725,7 @@ $v-unit-6: 24rem;
}
}
/* ------------------------------- bedo circle ------------------------------ */
// ------------------------------- bedo circle ------------------------------ */
#tag-nav {
display: none;
@@ -893,9 +783,9 @@ $v-unit-6: 24rem;
}
} //header end
/* -------------------------------------------------------------------------- */
/* STRUCTURE ALL PAGE */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// STRUCTURE ALL PAGE */
// -------------------------------------------------------------------------- */
main {
// z-index: 2;
section {
@@ -919,7 +809,7 @@ $v-unit-6: 24rem;
}
} //article end
/* -------------------------------- load more ------------------------------- */
// -------------------------------- load more ------------------------------- */
.misha_loadmore {
text-align: center;
padding: 2rem 0;
@@ -966,15 +856,17 @@ $v-unit-6: 24rem;
}
}
/* -------------------------------------------------------------------------- */
/* ARCHIVE AND HOMEPAGE */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// ARCHIVE AND HOMEPAGE */
// -------------------------------------------------------------------------- */
.archive,
.home,
.search-results,
.search-no-results,
.error404 {
// .archive,
// .home,
// .search-results,
// .search-no-results,
// .error404
.masonrypage {
@media #{$tablet} {
// overflow-y: hidden;
}
@@ -986,7 +878,7 @@ $v-unit-6: 24rem;
min-width: 100vw;
}
/* ----------------------------- header on home ----------------------------- */
// ----------------------------- header on home ----------------------------- */
.header {
.header-scroll {
@@ -1025,14 +917,15 @@ $v-unit-6: 24rem;
}
//header not on home
&.archive,
&.search-results,
&.search-no-results,
&.error404 {
.wrapper .header {
background-color: #000;
}
// &.archive,
// &.search-results,
// &.search-no-results,
// &.error404 {
&:not(.home) .wrapper .header {
background-color: #000;
}
// }
main {
@media #{$tablet} {
@@ -1050,12 +943,12 @@ $v-unit-6: 24rem;
@include fit-content(width);
}
/* ------------------------- archivetitle on mobile ------------------------- */
// ------------------------- archivetitle on mobile ------------------------- */
.archivetitle {
padding: 8rem 2rem 0;
}
/* --------------------------- home article mobile/default -------------------------- */
// --------------------------- home article mobile/default -------------------------- */
article {
// height: 100vh;
@@ -1154,20 +1047,8 @@ $v-unit-6: 24rem;
}
}
/* ----------------------- home article mobile cutout ----------------------- */
// &.cut-even {
// .metadata {
// // background-color: transparent;
// &::after {
// display: none;
// }
// }
// }
/* ----------------------- home article mobile first 2 ----------------------- */
&.post_nr_1,
&.post_nr_2 {
// ----------------------- home article mobile first 2 ----------------------- */
&.post_nr {
min-height: 100vh;
.thumbnailwrapper {
img {
@@ -1199,32 +1080,10 @@ $v-unit-6: 24rem;
}
}
}
//border on first elements
// &.post_nr_1 {
// // .metadata {
// // &::after {
// // display: none;
// // }
// // @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
// // z-index: 15;
// // & > * {
// // z-index: 15;
// // }
// // }
// // h2 {
// // height: calc(50vh + 1px);
// // top: -1px;
// // position: relative;
// // border-top: #000 1px solid;
// // z-index: 8;
// // }
// }
} //article end
/* ------------------------ home article desktop big ------------------------ */
/* ------------------------------------ - ----------------------------------- */
// ------------------------ home article desktop big ------------------------ */
// ------------------------------------ - ----------------------------------- */
@media #{$tablet} {
//big: first 2 articles
@@ -1247,7 +1106,7 @@ $v-unit-6: 24rem;
border-top: 1px #000 solid;
/* ------------- home article desktop big - thumbnail and title ------------- */
// ------------- home article desktop big - thumbnail and title ------------- */
.thumbnailwrapper {
width: 60%;
@@ -1283,7 +1142,7 @@ $v-unit-6: 24rem;
}
}
/* -------------------------- home article metadata big------------------------- */
// -------------------------- home article metadata big------------------------- */
.metadata {
bottom: 0;
top: unset;
@@ -1364,7 +1223,7 @@ $v-unit-6: 24rem;
}
} //metadata end
/* --------------------- home article desktop big hover --------------------- */
// --------------------- home article desktop big hover --------------------- */
// &.hovered {
.bevezeto,
.alcim {
@@ -1425,7 +1284,7 @@ $v-unit-6: 24rem;
// }
}
/* ------------------------ home article desktop 1 + 2 ----------------------- */
// ------------------------ home article desktop 1 + 2 ----------------------- */
&.home_wrapper-1 {
article {
@@ -1464,7 +1323,7 @@ $v-unit-6: 24rem;
}
} //smalldesktop end
/* ----------------------- home articles desktop small ----------------------- */
// ----------------------- home articles desktop small ----------------------- */
@media #{$tablet} {
.home_wrapper-small,
@@ -1502,9 +1361,10 @@ $v-unit-6: 24rem;
}
}
article,
.archivetitle,
.archivedescription {
// article,
// .archivetitle,
// .archivedescription
& > * {
flex: 0 0 calc(100% / 3);
height: 50%;
position: relative;
@@ -1699,7 +1559,7 @@ $v-unit-6: 24rem;
} //section end
} //main end
/* -------------------------- no results on mobile -------------------------- */
// -------------------------- no results on mobile -------------------------- */
&.no-result,
&.error404,
@@ -1719,7 +1579,7 @@ $v-unit-6: 24rem;
}
}
/* -------------------------- no results on desktop ------------------------- */
// -------------------------- no results on desktop ------------------------- */
@media #{$tablet} {
main {
width: 100vw;
@@ -1775,9 +1635,9 @@ $v-unit-6: 24rem;
}
} //home, archive, search, 404 end
/* -------------------------------------------------------------------------- */
/* Search results */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// Search results */
// -------------------------------------------------------------------------- */
.search-results {
#content {
@@ -1812,9 +1672,9 @@ $v-unit-6: 24rem;
}
}
/* -------------------------------------------------------------------------- */
/* Events */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// Events */
// -------------------------------------------------------------------------- */
body.category.category-esemeny {
header {
@@ -1907,7 +1767,7 @@ body.category.category-esemeny {
}
}
/* ---------------------------- Events on desktop --------------------------- */
// ---------------------------- Events on desktop --------------------------- */
@media #{$tablet} {
main {
padding-top: 0;
@@ -1981,9 +1841,9 @@ body.category.category-esemeny {
}
} //body.category.category-esemeny end
/* -------------------------------------------------------------------------- */
/* single */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// single */
// -------------------------------------------------------------------------- */
@mixin singleDesktopLayout() {
padding-right: $h-unit-4;
@@ -1994,16 +1854,14 @@ body.category.category-esemeny {
$padd: 2rem;
.single,
.page {
.singularpage {
//no menus on single
@media #{$tablet} {
.wrapper {
height: unset;
width: 100%;
.header {
.header-1,
.header-2 {
.header-inner {
background: transparent;
border: none;
.social-link,
@@ -2016,7 +1874,7 @@ $padd: 2rem;
}
}
/* ---------------------------- single on mobile ---------------------------- */
// ---------------------------- single on mobile ---------------------------- */
article {
padding-bottom: $h-unit-1;
@@ -2098,7 +1956,7 @@ $padd: 2rem;
}
}
/* ---------------------------- single header on desktop --------------------------- */
// ---------------------------- single header on desktop --------------------------- */
@media #{$tablet} {
min-height: calc(100vh - #{$h-unit-2});
@@ -2132,7 +1990,7 @@ $padd: 2rem;
}
}
/* ---------------------- title and metadata on desktop --------------------- */
// ---------------------- title and metadata on desktop --------------------- */
.titlewrapper {
position: relative;
@@ -2167,7 +2025,7 @@ $padd: 2rem;
}
}
/* ---------------------------- single content hr --------------------------- */
// ---------------------------- single content hr --------------------------- */
hr {
height: 1px;
@@ -2206,7 +2064,7 @@ $padd: 2rem;
}
}
/* ----------------------------- single content ----------------------------- */
// ----------------------------- single content ----------------------------- */
.single-content {
position: relative;
@@ -2287,7 +2145,7 @@ $padd: 2rem;
}
}
/* ---------------------------- images on single ---------------------------- */
// ---------------------------- images on single ---------------------------- */
.wp-block-image {
margin: $padd 0;
@@ -2347,9 +2205,10 @@ $padd: 2rem;
}
//figcaptions:
.wp-block-image figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
// .wp-block-image figcaption,
// .wp-block-gallery .blocks-gallery-image figcaption,
// .wp-block-gallery .blocks-gallery-item
figcaption {
background: #fff;
position: absolute;
@@ -2441,7 +2300,7 @@ $padd: 2rem;
}
} //.single-content end
} //article end
/* -------------------------------- lightbox -------------------------------- */
// -------------------------------- lightbox -------------------------------- */
#cboxOverlay {
width: 100%;
@@ -2530,7 +2389,7 @@ $padd: 2rem;
}
} //#colorbox end
} //body.single, page end
/* ------------------------------ related posts ----------------------------- */
// ------------------------------ related posts ----------------------------- */
.toHome,
#related_posts > h3 {
@@ -2629,7 +2488,7 @@ $padd: 2rem;
}
}
/* ------------------------ related posts on desktop ------------------------ */
// ------------------------ related posts on desktop ------------------------ */
@media #{$tablet} {
top: -#{$h-unit-1};
position: relative;
@@ -2774,7 +2633,7 @@ $padd: 2rem;
}
}
/* -------------------------------- page only------------------------------- */
// -------------------------------- page only------------------------------- */
body.page {
@media #{$only-mobile} {
//hide header image on mobile on 'rolunk'
@@ -2816,9 +2675,9 @@ body.page {
}
}
/* -------------------------------------------------------------------------- */
/* TAG COLORS */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// TAG COLORS */
// -------------------------------------------------------------------------- */
@mixin tagcolors($color) {
//metadata on mobile
@@ -2842,14 +2701,6 @@ body.page {
}
}
}
//mobile desktop firat post
// &.post_nr_1:not(.home-big) {
// .metadata {
// &::before,
// &::after {
// border-color: $color !important;
// }
// }
h2 {
@media #{$only-mobile} {
border-top-color: $color !important;
@@ -2903,8 +2754,8 @@ body.page {
&.archive.tag {
background-color: $color !important;
.header-1,
.header-2 {
.header-inner {
background-color: $color !important;
}
article *:not(.vr) {
@@ -2916,12 +2767,6 @@ body.page {
//tagclip: filters on small articale images
@mixin tagclip($tag) {
// -webkit-mask: url(../img/clip/#{$tag}_mobil.svg);
// -webkit-mask-repeat: no-repeat;
// -webkit-mask-size: 100%;
// mask: url(../img/clip/#{$tag}_mobil.svg);
// mask-repeat: no-repeat;
// mask-size: 100%;
@media #{$tablet} {
-webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
-webkit-mask-repeat: no-repeat;
@@ -3074,8 +2919,7 @@ $color-love-dark: #7f2f2f;
//menu colored on big article hover
body,
.header-1,
.header-2 {
.header-inner {
&.hover-tag-be {
background-color: $color-be !important;
}
@@ -3093,9 +2937,9 @@ body,
}
}
/* -------------------------------------------------------------------------- */
/* imports */
/* -------------------------------------------------------------------------- */
// -------------------------------------------------------------------------- */
// imports */
// -------------------------------------------------------------------------- */
@import "fonts";
@import "print";