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

Small thumbnails on home

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-06 04:08:42 +02:00
parent 2450fc6da5
commit 647e333a16
14 changed files with 575 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
_jegyzet.md
View File

@@ -67,8 +67,8 @@ Egyedi esemény oldal van, vagy az csak egy link lista?
Kezdőlap:
egér változzon lapozósra ok
két nagy, utána kicsi rácsban,
~egér változzon lapozósra~
~két nagy, utána kicsi rácsban~
Nincs gradiens
Hover csak a címen
Nyíl, csak az első cikken
@@ -111,9 +111,17 @@ Kategória lap: első csempe kimarad.
Kereső:
- teljes lábléc magasságban, hosszabban fusson ki
- ne legyen hover,
-
# Kérdések
## Kezdőlap
Animációk?
# Post-install teendők:
- function.php
esemény cat-id-t átírni!!
esemény cat-id-t átírni!!
- wp beállítások
settings>reading>Blog pages show at most 6

157
css/base.css
View File

@@ -521,7 +521,7 @@ object {
position: relative; } }
.home main section {
/* --------------------------- home article mobile -------------------------- */
/* --------------------------- home article mobile/default -------------------------- */
/* ------------------------ home article desktop big ------------------------ */
/* ----------------------- home article desktop small ----------------------- */ }
@media (min-width: 769px) {
@@ -538,34 +538,17 @@ object {
margin: 0;
padding: 0;
border: none;
display: inline-block; } }
@media (min-width: 769px) and (min-width: 769px) {
.home main section article .thumbnailwrapper {
height: calc(100% - 4rem); } }
@media (min-width: 769px) {
display: inline-block; }
.home main section article .thumbnailwrapper img.attachment-home-thumbnail {
height: 50vh;
width: 100vw;
object-fit: cover; } }
@media (min-width: 769px) and (min-width: 769px) {
.home main section article .thumbnailwrapper img.attachment-home-thumbnail {
width: 50%;
height: 100%; } }
@media (min-width: 769px) {
object-fit: cover; }
.home main section article h2 {
width: 100%;
height: 50vh;
padding: 2rem;
padding-top: 3rem;
margin: 0; } }
@media (min-width: 769px) and (min-width: 769px) {
.home main section article h2 {
height: unset;
position: absolute;
top: 6rem;
padding: 4rem; } }
@media (min-width: 769px) {
margin: 0; }
.home main section article h2 a {
font: bold 3rem "Westeinde Caption";
color: #000; } }
@@ -586,6 +569,7 @@ object {
margin-left: 10rem;
padding-top: 4rem;
border-right: #000 1px solid;
/* -------------------------------- thumbnail and title ------------------------------- */
/* -------------------------- home article metadata big------------------------- */ }
.home main section .home-wrapper-big article::before {
content: "<hr>";
@@ -593,6 +577,17 @@ object {
height: 1px;
width: 100%;
background: #000; }
.home main section .home-wrapper-big article .thumbnailwrapper {
height: calc(100% - 4rem); }
.home main section .home-wrapper-big article .thumbnailwrapper img.attachment-home-thumbnail {
object-fit: cover;
width: 50%;
height: 100%; }
.home main section .home-wrapper-big article h2 {
height: unset;
position: absolute;
top: 6rem;
padding: 4rem; }
.home main section .home-wrapper-big article .metadata {
bottom: 0;
background: transparent;
@@ -646,16 +641,82 @@ object {
@media (min-width: 769px) {
.home main section .home-wrapper-small {
width: calc(100vw - (10rem * 3));
height: calc((100vw - (10rem * 3)) / 3 * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: 10rem;
margin-top: 4rem; }
margin: auto 0; }
.home main section .home-wrapper-small:nth-child(3) {
margin-left: 10rem; }
.home main section .home-wrapper-small article {
flex: 0 0 33%;
height: 50%; }
flex: 0 0 calc(100% / 3);
height: 50%;
position: relative; }
.home main section .home-wrapper-small article .thumbnailwrapper {
width: 100%;
height: 100%; }
.home main section .home-wrapper-small article .thumbnailwrapper img {
width: 100%;
height: 100%;
object-fit: cover; }
.home main section .home-wrapper-small article .metadata {
display: none; } }
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
right: 0;
background: transparent;
display: flex;
flex-direction: row;
padding: 0;
justify-content: flex-end;
align-items: stretch;
display: none; }
.home main section .home-wrapper-small article .metadata::after {
position: absolute;
top: 0;
border: none;
width: calc(100% - 4rem);
border-top: #000 1px solid;
left: calc(4rem);
background-color: transparent;
margin-left: -0; }
.home main section .home-wrapper-small article .metadata::before {
display: block;
content: "";
position: absolute;
width: calc(4rem);
height: calc(4rem);
top: 0;
left: -0;
border-left: #000 solid 1px;
border-top: #000 1px solid;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
transform-origin: left bottom;
background-color: transparent;
z-index: 9; }
.home main section .home-wrapper-small article .metadata.vis {
display: flex; } }
@media (min-width: 769px) and (min-width: 769px) {
.home main section .home-wrapper-small article h2,
.home main section .home-wrapper-small article h2 a {
font-size: 1.2rem;
-webkit-text-stroke: #000 1px;
color: #fff; } }
@media (min-width: 769px) {
.home main section .home-wrapper-small article h2 {
display: none;
position: absolute;
top: 0;
background-color: #fff;
height: 100%; }
.home main section .home-wrapper-small article h2 a {
top: 50%;
position: absolute; } }
/* -------------------------------------------------------------------------- */
/* single */
@@ -934,8 +995,15 @@ object {
-webkit-text-stroke-color: #00ffb8 !important; }
@media (min-width: 769px) {
.tag-be h2 a {
color: #00ffb8 !important; } }
.tag-be.home-big h2 a {
color: #00ffb8 !important; }
.tag-be.home-small .metadata,
.tag-be.home-small .metadata a {
color: #000 !important; } }
@media (min-width: 769px) {
.tag-be.random .thumbnailwrapper > img {
clip-path: url(../img/clip/be_desktop.svg); } }
.tag-do .metadata {
color: #ff5f5f !important; }
@@ -955,8 +1023,15 @@ object {
-webkit-text-stroke-color: #ff5f5f !important; }
@media (min-width: 769px) {
.tag-do h2 a {
color: #ff5f5f !important; } }
.tag-do.home-big h2 a {
color: #ff5f5f !important; }
.tag-do.home-small .metadata,
.tag-do.home-small .metadata a {
color: #000 !important; } }
@media (min-width: 769px) {
.tag-do.random .thumbnailwrapper > img {
clip-path: url(../img/clip/do_desktop.svg); } }
.tag-think .metadata {
color: #fdff00 !important; }
@@ -976,8 +1051,15 @@ object {
-webkit-text-stroke-color: #fdff00 !important; }
@media (min-width: 769px) {
.tag-think h2 a {
color: #fdff00 !important; } }
.tag-think.home-big h2 a {
color: #fdff00 !important; }
.tag-think.home-small .metadata,
.tag-think.home-small .metadata a {
color: #000 !important; } }
@media (min-width: 769px) {
.tag-think.random .thumbnailwrapper > img {
clip-path: url(../img/clip/think_desktop.svg); } }
.tag-love .metadata {
color: #3c00ff !important; }
@@ -997,8 +1079,15 @@ object {
-webkit-text-stroke-color: #3c00ff !important; }
@media (min-width: 769px) {
.tag-love h2 a {
color: #3c00ff !important; } }
.tag-love.home-big h2 a {
color: #3c00ff !important; }
.tag-love.home-small .metadata,
.tag-love.home-small .metadata a {
color: #000 !important; } }
@media (min-width: 769px) {
.tag-love.random .thumbnailwrapper > img {
clip-path: url(../img/clip/love_desktop.svg); } }
@media (min-width: 769px) {
.single .tag-be .metadata {

70
functions.php
View File

@@ -28,7 +28,8 @@ if (function_exists('add_theme_support')) {
add_image_size('large', 700, '', true); // Large Thumbnail
add_image_size('medium', 250, '', true); // Medium Thumbnail
add_image_size('small', 120, '', true); // Small Thumbnail
add_image_size('home-thumbnail', 1024, 1024, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail');
add_image_size('home-big-thumbnail', 1024, 1024, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail');
add_image_size('home-small-thumbnail', 256, 256, true); // Custom Thumbnail Size call using the_post_thumbnail('home-thumbnail');
// Add Support for Custom Backgrounds - Uncomment below if you're going to use
/*add_theme_support('custom-background', array(
@@ -96,7 +97,7 @@ function dis2019_header_scripts()
wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
wp_enqueue_script('conditionizr'); // Enqueue it!
wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-custom.js', array(), '2.7.1'); // Modernizr
wp_enqueue_script('modernizr'); // Enqueue it!
wp_register_script('simpler-sidebar', get_template_directory_uri() . '/js/lib/jquery.simpler-sidebar.min.js', array('jquery'), '2.2.5'); // Modernizr
@@ -411,39 +412,70 @@ function misha_my_load_more_scripts()
add_action('wp_enqueue_scripts', 'misha_my_load_more_scripts');
function misha_loadmore_ajax_handler()
{
// prepare our arguments for the query
$args = json_decode(stripslashes($_POST['query']), true);
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
$args['posts_per_page'] = 6;
//First, define your desired offset...
$offset = 14;
//Next, determine how many posts per page you want (we'll use WordPress's settings)
$ppp = get_option('posts_per_page');
//Next, detect and handle pagination...
//Manually determine page query offset (offset + current page (minus one) x posts per page)
$args['offset'] = $offset + (($_POST['page'] - 1) * $ppp);
// it is always better to use WP_Query but not here
query_posts($args);
get_template_part('loop');
// if( have_posts() ) :
// run the loop
// while( have_posts() ): the_post();
// look into your theme code how the posts are inserted, but you can use your own HTML of course
// do you remember? - my example is adapted for Twenty Seventeen theme
// get_template_part( 'template-parts/post/content', get_post_format() );
// get_template_part('loop');
// for the test purposes comment the line above and uncomment the below one
// the_title();
// endwhile;
// endif;
die; // here we exit the script and even no wp_reset_query() required!
}
add_action('wp_ajax_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}
/* -------------------- different number of posts on home ------------------- */
add_action('pre_get_posts', 'dis_2019_more_posts_on_home', 1 );
function dis_2019_more_posts_on_home(&$query) {
//Before anything else, make sure this is the right query...
if ( ! $query->is_home() ) {
return;
}
//set post_per_page if it's homepage
if (! $query->is_paged ) {
$query->set('posts_per_page',14);
}
else {
return;
}
}
// add_filter('found_posts', 'myprefix_adjust_offset_pagination', 1, 2 );
// function myprefix_adjust_offset_pagination($found_posts, $query) {
// //Define our offset again...
// $offset = 2;
// //Ensure we're modifying the right query object...
// if ( $query->is_home() ) {
// //Reduce WordPress's found_posts count by the offset...
// return $found_posts - $offset;
// }
// return $found_posts;
// }
/*------------------------------------*\
Actions + Filters + ShortCodes
\*------------------------------------*/

BIN
img/.arrow.png-autosave.kra
View File

Binary file not shown.

50
img/clip/be_desktop.svg Normal file
View File

@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
width="479.621px"
height="491.252px"
viewBox="0 0 479.621 491.252"
enable-background="new 0 0 479.621 491.252"
xml:space="preserve"
sodipodi:docname="be_desktop.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1581"
inkscape:window-height="894"
id="namedview5"
showgrid="false"
inkscape:zoom="0.48040515"
inkscape:cx="-40.161515"
inkscape:cy="245.62601"
inkscape:window-x="876"
inkscape:window-y="342"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<path
d="M371.387,371.718c-110.916,115.679-258.05,154.675-331.099,84.634c-73.05-70.042-44.353-222.598,66.563-338.278 c110.917-115.68,260.051-152.677,333.1-82.635C513,105.479,482.304,256.039,371.387,371.718z"
id="path2"
style="fill:none" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

50
img/clip/do_desktop.svg Normal file
View File

@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
width="480.604px"
height="508.191px"
viewBox="0 0 480.604 508.191"
enable-background="new 0 0 480.604 508.191"
xml:space="preserve"
sodipodi:docname="do_desktop.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2238"
inkscape:window-height="1373"
id="namedview5"
showgrid="false"
inkscape:zoom="0.46439232"
inkscape:cx="240.302"
inkscape:cy="167.96144"
inkscape:window-x="567"
inkscape:window-y="33"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" />
<polygon
points="478.128,19.562 7.534,0 2.318,157.687 328.427,169.875 0,216.942 21.604,353.302 21.604,508.191 480.604,508.191 480.604,352.191 171.944,352.191 477.735,308.178 456.673,175.448 472.91,177.295 "
id="polygon2"
style="fill:none" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

11
img/clip/love_desktop.svg Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="482.14px" height="500.987px" viewBox="0 0 482.14 500.987" enable-background="new 0 0 482.14 500.987"
xml:space="preserve">
<path d="M482.127,146.707c0-80.767-65.475-146.242-146.242-146.242S189.643,65.939,189.643,146.707
c0,27.829,7.773,53.84,21.267,75.985c-19.588-9.74-41.663-15.227-65.024-15.227c-80.768,0-146.242,65.481-146.242,146.249
C-0.357,434.48,65.295,501,146.063,501c0.164,0-0.102,0,0.063,0H146h336V152.578C482.077,150.629,482.127,148.674,482.127,146.707z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 860 B

21
img/clip/think_desktop.svg Normal file
View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="480.604px" height="508.191px" viewBox="0 0 480.604 508.191" enable-background="new 0 0 480.604 508.191"
xml:space="preserve">
<g>
<path d="M157.37,504.649c-21.766,0-40.662-10.704-53.304-30.228c-12.774-19.729-18.128-43.268-15.483-68.074
c4.791-44.932,56.885-110.12,124.885-161.454c-5.11,3.028-58.156,42.543-63.357,44.827c-67.976,29.84-104.094,9.252-123.959-17.361
C5.629,244.871-2.007,211.181,4.647,177.493c9.012-45.631,43.854-87.465,106.52-127.896c40.184-25.926,78.125-42.424,79.721-43.115
c22.336-9.655,46.672,5.25,54.361,33.291c7.689,28.041-4.182,58.598-26.515,68.254c-1.062,0.462-33.673,14.777-67.445,36.43
c-39.336,25.223-56.078,44.983-61.582,54.496c3.782,0.374,14.882-0.415,38.956-14.669c25.422-15.053,58.412-36.367,87.472-57.389
c31.333-22.667,124.667-89.333,150.499-106.565c15.85-10.573,30.441-13.968,43.533-14.576
c22.599-1.048,41.859,10.331,54.311,32.041c10.973,19.134,15.166,41.564,12.127,64.865
c-7.918,60.71-140.398,155.558-205.796,214.436c-16.319,14.691-33.007,29.715-48.003,44.228
c8.253-5.712,16.791-11.771,25.524-17.968c72.62-51.53,141.209-100.202,192.188-59.58c28.341,22.584,40.841,65.422,37.151,127.322
c-1.764,29.574-22.303,51.751-45.84,49.541c-23.555-2.213-41.221-27.981-39.457-57.555c0.759-12.737,0.373-21.103-0.199-26.279
c-5.468,1.152-15.214,4.4-31.129,13.242c-21.514,11.953-46.482,29.67-70.628,46.804c-30.807,21.861-59.905,42.509-86.327,55.148
c-17.346,8.299-32.287,12.433-45.676,12.643C158.065,504.646,157.715,504.649,157.37,504.649z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

3
js/lib/modernizr-custom.js Normal file
View File

File diff suppressed because one or more lines are too long

51
js/myloadmore.js
View File

@@ -1,33 +1,34 @@
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
$('.misha_loadmore').click(function(){
var button = $(this),
data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
'page' : misha_loadmore_params.current_page
};
button.trigger("moreload-start")
jQuery(function ($) { // use jQuery code inside this to avoid "$ is not defined" error
$('.misha_loadmore').click(function () {
var button = $(this),
data = {
'action': 'loadmore',
'query': misha_loadmore_params.posts, // that's how we get params from wp_localize_script() function
'page': misha_loadmore_params.current_page
};
button.trigger("moreload-start")
console.log(misha_loadmore_params)
$.ajax({ // you can also use $.post here
url : misha_loadmore_params.ajaxurl, // AJAX handler
data : data,
type : 'POST',
beforeSend : function ( xhr ) {
url: misha_loadmore_params.ajaxurl, // AJAX handler
data: data,
type: 'POST',
beforeSend: function (xhr) {
button.html('<p>Betöltés...</p>'); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.html( '<a>Tovább</a>' ).before(data); // insert new posts
misha_loadmore_params.current_page++;
button.trigger("moreload-finish")
if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
success: function (data) {
if (data) {
button.html('<a>Tovább</a>').before(data); // insert new posts
misha_loadmore_params.current_page++;
button.trigger("moreload-finish")
if (misha_loadmore_params.current_page -1 == misha_loadmore_params.max_page)
button.remove(); // if last page, remove the button
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
} else {

115
js/scripts.js
View File

@@ -143,29 +143,74 @@
/* ----------------------------------- css ---------------------------------- */
var articleWrapCounter = 0
if (isHome & !isMobile) {
$('html').css({ overflowY: "hidden" })
//wrapping for big-small difference
$('article:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>')
$('article:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>')
$('article:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>').addClass("home-big")
$('article:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>').addClass("home-big")
var wrapArticles = $("article").length - 2
var n = 0
var articleWrapCounter = 0
for (let i = 0; i < wrapArticles; i++) {
var j = i + 3
if (i % 6 == 0) {
n++
articleWrapCounter++
}
$('article:nth-child(' + j + ')').addClass("home-thumbnail-small-" + n)
$('article:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter)
}
for (let i = 0; i < n; i++) {
for (let i = 0; i < articleWrapCounter; i++) {
var j = i + 3
var k = i+1
var k = i + 1
$(".home-thumbnail-small-" + k).wrapAll('<div class="home-wrapper-small home-wrapper-' + j + '"></div>')
}
}
//returns three random numebers 0-5
function randomNumbers() {
// All numbers are equal
var numberOne = 3;
var numberTwo = 3;
var numberThree = 3;
// run this loop until numberOne is different than numberThree
do {
numberOne = Math.floor(Math.random() * 5);
} while (numberOne === numberThree);
// run this loop until numberTwo is different than numberThree and numberOne
do {
numberTwo = Math.floor(Math.random() * 5);
} while (numberTwo === numberThree || numberTwo === numberOne);
var i = [numberOne, numberTwo, numberThree]
return i
}
//jquery function, adds random class to 3 random cihldren
(function ($) {
$.fn.addRandomClasses = function () {
let rn = randomNumbers()
for (let i = 0; i < 3; i++) {
var j = rn[i] + 1
this.children("article:nth-child(" + j + ")").addClass("random")
}
return this
};
})(jQuery);
$(".home-wrapper-small").each(function () {
// var rn = randomNumbers()
// for (let i = 0; i < rn.length; i++) {
// var j = rn[i] +1
// $(this).children("article:nth-child(" + j + ")").addClass("random")
// }
// addRandomClass($(this))
$(this).addRandomClasses()
})
/* ----------------------------- Snap on mobile ----------------------------- */
@@ -199,7 +244,7 @@
// var offset = ($(nextelem).offset().left) - desktophomemargin
var offset = ($(nextelem).position().left)
console.log("scrolling to: " + nextelem.attr("id") + " - offset: " + offset)
console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset)
$('html, body').stop().animate({ scrollLeft: offset }, 800);
return nextelem;
}
@@ -231,8 +276,8 @@
var articleWidth = $(selector + ':first-child')[0].getBoundingClientRect().width
var currscroll = $('html').scrollLeft()
var scrollnr = Math.floor(currscroll / articleWidth) + 1
currElem = $( selector + ':nth-child(' + scrollnr + ')')
// console.log(currElem.attr("id"))
currElem = $(selector + ':nth-child(' + scrollnr + ')')
console.log("start location: " + currElem.attr("class"))
}
var scrolltimer = false;
@@ -270,13 +315,63 @@
$('.misha_loadmore').on("moreload-start", function () {
currElem = $(this).prev()
console.log("currelem: " + currElem.attr("class"))
})
$('.misha_loadmore').on("moreload-finish", function () {
//wrap new elements on load
articleWrapCounter++
var wrapnum = articleWrapCounter + 2
$("#content>article")
.addClass("home-small home-thumbnail-small-" + articleWrapCounter)
.wrapAll('<div class="home-wrapper-small home-wrapper-' + wrapnum + '"></div>')
$(".home-wrapper-" + wrapnum).addRandomClasses()
//Scroll to new element
currElem = homeScroll(currElem, "next")
})
/* ------------------------------ hover on home ----------------------------- */
function showTitle(th) {
$(th).children("h2").show()
$(th).children(".metadata").addClass("vis")
}
function hideTitle(th) {
$(th).children("h2").hide()
$(th).children(".metadata").removeClass("vis")
}
$(document).on({
mouseenter: function () {
if (!Modernizr.touchevents) {
showTitle(this)
}
},
mouseleave: function () {
if (!Modernizr.touchevents) {
hideTitle(this)
}
}
}, '.home-small');
$(document).on({
'touchend': function (e) {
e.preventDefault()
var art = $(this).parents("article")
var metadata = art.children(".metadata")
if (metadata.hasClass("vis")) {
hideTitle(art)
} else {
hideTitle($(".vis").parents("article"))
showTitle(art)
}
}
}, ".home-small a.thumbnailwrapper")
/* -------------------------------------------------------------------------- */
/* CIRCULAR TEXT */

11
loop.php
View File

@@ -1,4 +1,7 @@
<?php if (have_posts()): while (have_posts()): the_post();?>
<?php if (have_posts()): while (have_posts()): the_post();
static $qc = 0;
$qc++;
?>
<article id="post-<?php the_ID();?>" <?php post_class();?>>
@@ -6,7 +9,11 @@
<!-- post thumbnail -->
<?php if (has_post_thumbnail()): // Check if thumbnail exists ?>
<a class="thumbnailwrapper" href="<?php the_permalink();?>" title="<?php the_title();?>">
<?php the_post_thumbnail('home-thumbnail');?>
<?php if(is_home() and $qc < 3): ;
the_post_thumbnail('home-big-thumbnail');
else:
the_post_thumbnail('home-square-thumbnail');
endif;?>
</a>
<?php endif;?>
<!-- /post thumbnail -->

9
sass/_font-mixins.scss
View File

@@ -25,6 +25,15 @@
}
}
@mixin home-title-small {
@media #{$smalldesktop} {
font-size: 1.2rem;
-webkit-text-stroke: #000 1px;
color: #fff;
}
}
@mixin home-metadata {
font: bold 1rem "Westeinde Caption";
color: #000;

128
sass/base.scss
View File

@@ -310,7 +310,7 @@ $desktop-bottom-margin-double: 4rem;
// color: #000;
// fill: currentColor;
filter: invert(100%); //black
@include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;
@include transform(rotate(180deg)) // transform: rotate(180deg);;
}
}
}
@@ -620,7 +620,7 @@ $desktop-bottom-margin-double: 4rem;
width: fit-content;
}
/* --------------------------- home article mobile -------------------------- */
/* --------------------------- home article mobile/default -------------------------- */
article {
height: 100vh;
@@ -633,19 +633,11 @@ $desktop-bottom-margin-double: 4rem;
}
.thumbnailwrapper {
@media #{$smalldesktop} {
// height: 100%;
height: calc(100% - #{$desktop-top-margin});
}
img.attachment-home-thumbnail {
// post thumbnail on home
height: 50vh;
width: 100vw;
object-fit: cover;
@media #{$smalldesktop} {
width: 50%;
height: 100%;
}
}
}
@@ -658,12 +650,6 @@ $desktop-bottom-margin-double: 4rem;
// display: flex;
// flex-direction: row;
// align-items: center;
@media #{$smalldesktop} {
height: unset;
position: absolute;
top: 6rem;
padding: 4rem;
}
a {
@include home-title();
@@ -695,6 +681,24 @@ $desktop-bottom-margin-double: 4rem;
width: 100%;
background: #000;
}
/* -------------------------------- thumbnail and title ------------------------------- */
.thumbnailwrapper {
height: calc(100% - #{$desktop-top-margin});
img.attachment-home-thumbnail {
object-fit: cover;
width: 50%;
height: 100%;
}
}
h2 {
height: unset;
position: absolute;
top: 6rem;
padding: 4rem;
}
/* -------------------------- home article metadata big------------------------- */
.metadata {
bottom: 0;
@@ -725,7 +729,7 @@ $desktop-bottom-margin-double: 4rem;
}
.postedon {
}
}
} //metadata end
}
}
.home-wrapper-1 {
@@ -744,17 +748,67 @@ $desktop-bottom-margin-double: 4rem;
@media #{$smalldesktop} {
.home-wrapper-small {
width: calc(100vw - (#{$desktop-home-margin} * 3));
height: calc((100vw - (#{$desktop-home-margin} * 3)) / 3 * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: $desktop-home-margin;
margin-top: $desktop-top-margin;
margin: auto 0;
&:nth-child(3) {
margin-left: $desktop-home-margin;
}
article {
flex: 0 0 33%;
flex: 0 0 calc(100% / 3);
height: 50%;
.metadata{
position: relative;
.thumbnailwrapper {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.metadata {
width: 100%;
height: 20%;
position: absolute;
bottom: 0;
right: 0;
background: transparent;
display: flex;
flex-direction: row;
padding: 0;
justify-content: flex-end;
align-items: stretch;
@include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
display: none;
&.vis{
display: flex;
}
}
h2,
h2 a {
@include home-title-small();
}
h2 {
display: none;
position: absolute;
top: 0;
background-color: #fff;
height: 100%;
a {
top: 50%;
position: absolute;
}
}
}
}
@@ -1013,8 +1067,24 @@ $desktop-bottom-margin-double: 4rem;
}
@media #{$smalldesktop} {
h2 a {
color: $color !important;
&.home-big {
h2 a {
color: $color !important;
}
}
&.home-small {
.metadata,
.metadata a {
color: #000 !important;
}
}
}
}
@mixin tagclip($tag){
@media #{$smalldesktop} {
.thumbnailwrapper>img{
clip-path: url(../img/clip/#{$tag}_desktop.svg)
}
}
}
@@ -1036,18 +1106,30 @@ $desktop-bottom-margin-double: 4rem;
.tag-be {
@include tagcolors(#00ffb8);
&.random{
@include tagclip(be)
}
}
.tag-do {
@include tagcolors(#ff5f5f);
&.random{
@include tagclip(do)
}
}
.tag-think {
@include tagcolors(#fdff00);
&.random{
@include tagclip(think)
}
}
.tag-love {
@include tagcolors(#3c00ff);
&.random{
@include tagclip(love)
}
}
.single {