updated readme, started new home layout

README.md

@@ -1,73 +1,9 @@
-# [dis-2019](http://dis2019.com)
+# dis-2019
 
-Powerful shell for rapidly deploying your WordPress projects.
+Designisso 2019 theme
 
-* Project: [github.com/toddmotto/dis2019](https://github.com/toddmotto/dis2019)
+Live website: (designisso.com)[http://designisso.com/]
-* Website: [dis2019.com](http://dis2019.com)
-* Twitter: [@dis2019](http://twitter.com/dis2019)
-* Author : [Todd Motto](http://toddmotto.com) // [@toddmotto](http://twitter.com/toddmotto)
 
-## Contributors (in order of pull request)
+Built from HTML5 Blank theme: https://github.com/html5blank/html5blank
-[David Munn](https://github.com/Munnday), [Patrick Zeinert](https://github.com/CoeusCC), [J-Rabe](https://github.com/J-Rabe), [Steve Steiner](https://github.com/ssteinerx), [Kyle Hudson](https://github.com/diskhub), [chrisdl](https://github.com/chrisdl), [Marcel Miranda](https://github.com/reaktivo), [Fx Bénard](https://github.com/fxbenard), Ioan Virag, [Mohamed Elkebir](https://github.com/elkebirmed), [lregla](https://github.com/lregla), Carlos Pinar, [Joshua Lyman](https://github.com/jlyman), [Kevin Plattret](https://github.com/kevinplattret), [Wesllei Henrique](https://github.com/wesllei), [Stacey Cordoni](https://github.com/staceycordoni).
 
-## Getting Started with dis-2019
 
-Download the latest version from [dis2019.com](http://dis2019.com)
-
-## Get involved! Make dis-2019 better
-
-There are a few ways to get involved, submit a Pull Request, or submit a comment on the website - [dis2019.com](http://dis2019.com)
-
-## Features
-
-### HTML5
-* Basic Semantic HTML5 Markup
-* W3C Valid Code Foundations
-* Responsive Ready, ViewPort meta data
-* HTML Class support for IE7, IE8, IE9 Conditionals (HTML5 Boilerplate)
-* Clean, neatly organised code, with PHP annotations
-
-### jQuery + JavaScript
-* Replaced built-in WordPress enqueue with Google CDN
-* Protocol relative jQuery if Google CDN offline (HTML5 Boilerplate)
-* Conditionizr for cross-platform/device detects and enhancements
-* Modernizr feature detection, HTML5 element support for legacy, progressive enhancement (HTML5 Boilerplate)
-* DOM Ready JavaScript file setup (scripts.js) for instant JavaScript development
-* JavaScript files enqueued using WordPress functions into wp_head
-
-### CSS3
-* HTML5 Boilerplate reset
-* Media Queries framework for instant development using @media
-* @font-face empty framework with Fonts folder setup ready for new custom fonts
-* CSS3 custom selection styles
-* Inline print styles (HTML5 Boilerplate)
-* Body element config, including Optimize Legibility for kerning and font-smoothing
-* Replaced focus styles to avoid blue blur in field elements, replaced with border
-* Stylesheet enqueued using WordPress functions into wp_head
-
-### Preloaded Functions (functions.php)
-* Enqueue Scripts functions setup
-* Enqueue Styles functions setup
-* Dynamic WordPress Menu Navigation Support, preloaded with 3 Dynamic menus
-* Cleaned up dynamic nav output (Remove outer 'div')
-* Remove all injected classes from nav items, ID's, Page ID's
-* Custom Post Type x1 preloaded for demonstration, supporting: Category, Tags, Post Thumbnails, Excerpts
-* Dynamic Sidebar with x2 Widget Areas, and sidebar.php setup
-* WordPress Thumbnail Support, no Plugin image cropping, custom Arrays and Thumbnail settings
-* Custom Excerpt callbacks, with changeable callback numbers
-* Replaced 'Read More' button for custom Excerpt callbacks
-* Demo Shortcodes included, with Nested Shortcode capability
-* Add Slug to body class (Starkers Theme credit)
-* wp_head functions stripped right down, remove excess injected junk
-* All functions annotated, categorised into sections, filters, actions, shortcodes etc.
-* Space for development, neatly organised code with Modules/External files
-
-### Theme Files and Functionality
-* Built in Pagination, no plugins (strips out prev + next post and gives page numbers)
-* Optimised Google Analytics in footer (HTML5 Boilerplate)
-* Widget Area Sidebar support, functions in place to get developing
-* Custom Search Form included (searchform.php) - fully editable
-* Tags support for showing Post Tags
-* Category support for showing the Category of post
-* Author support showing the author
-* Demo Custom Page Template for expansion

_jegyzet.md

@@ -67,7 +67,7 @@ Egyedi esemény oldal van, vagy az csak egy link lista?
 
 Kezdőlap:
 
-egér változzon lapozósra
+egér változzon lapozósra ok
 két nagy, utána kicsi rácsban, 
 Nincs gradiens
 Hover csak a címen

css/base.css

@@ -11,7 +11,7 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility; }
 
 /* html element 62.5% font-size for REM use */
@@ -521,51 +521,79 @@ object {
     position: relative; } }
 
 .home main section {
-  /* ------------------------------ home article ------------------------------ */ }
+  /* --------------------------- home article mobile -------------------------- */
+  /* ------------------------ home article desktop big ------------------------ */
+  /* ----------------------- home article desktop small ----------------------- */ }
   @media (min-width: 769px) {
     .home main section {
       display: flex;
       flex-direction: row;
-      margin: 0 10rem 0 10rem;
+      margin: 0;
       height: 100vh;
       width: fit-content; } }
   .home main section article {
-    height: 100vh;
+    height: 100vh; }
-    /* -------------------------- home article metadata ------------------------- */ }
     @media (min-width: 769px) {
-      .home main section article {
-        width: calc(100vw - (10rem * 3));
-        flex: 0 0 auto;
-        margin: 0;
-        padding: 0;
-        padding-top: 4rem;
-        border-left: #000 1px solid; }
-        .home main section article:first-child {
-          border-left-color: transparent; }
-        .home main section article::before {
-          content: "<hr>";
-          display: block;
-          height: 1px;
-          width: 100%;
-          background: #000; } }
       .home main section article > a {
         margin: 0;
         padding: 0;
         border: none;
-      display: inline-block; }
+        display: inline-block; } }
-    @media (min-width: 769px) {
+
+@media (min-width: 769px) and (min-width: 769px) {
   .home main section article .thumbnailwrapper {
     height: calc(100% - 4rem); } }
+    @media (min-width: 769px) {
       .home main section article .thumbnailwrapper img.attachment-home-thumbnail {
         height: 50vh;
         width: 100vw;
-      object-fit: cover; }
+        object-fit: cover; } }
-      @media (min-width: 769px) {
+  @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) {
-      .home main section article .metadata {
+      .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) {
+        .home main section article h2 a {
+          font: bold 3rem "Westeinde Caption";
+          color: #000; } }
+    @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
+      .home main section article h2 a {
+        font-size: 2.5rem !important; } }
+    @media (min-width: 769px) and (min-width: 769px) {
+      .home main section article h2 a {
+        font-size: 5rem; } }
+  @media (min-width: 769px) {
+    .home main section .home-wrapper-big {
+      flex: 0 0 auto; }
+      .home main section .home-wrapper-big article {
+        position: relative;
+        width: calc(100vw - (10rem * 3));
+        margin: 0;
+        padding: 0;
+        margin-left: 10rem;
+        padding-top: 4rem;
+        border-right: #000 1px solid;
+        /* -------------------------- home article metadata big------------------------- */ }
+        .home main section .home-wrapper-big article::before {
+          content: "<hr>";
+          display: block;
+          height: 1px;
+          width: 100%;
+          background: #000; }
+        .home main section .home-wrapper-big article .metadata {
           bottom: 0;
           background: transparent;
           width: 100%;
@@ -575,7 +603,7 @@ object {
           padding: 0;
           justify-content: flex-start;
           align-items: stretch; }
-        .home main section article .metadata::after {
+          .home main section .home-wrapper-big article .metadata::after {
             position: absolute;
             top: 0;
             border: none;
@@ -584,7 +612,7 @@ object {
             left: calc(4rem);
             background-color: transparent;
             margin-left: -0; }
-        .home main section article .metadata::before {
+          .home main section .home-wrapper-big article .metadata::before {
             display: block;
             content: "";
             position: absolute;
@@ -602,39 +630,32 @@ object {
             transform-origin: left bottom;
             background-color: transparent;
             z-index: 9; }
-        .home main section article .metadata > div {
+          .home main section .home-wrapper-big article .metadata > div {
             width: 30%;
             padding-top: 2rem; } }
-    @media (-webkit-min-device-pixel-ratio: 2.1) {
+      @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
-      .home main section article .metadata {
+        .home main section .home-wrapper-big article .metadata {
           height: calc(10rem / 2); } }
-    .home main section article .metadata .categories {
-      display: none; }
   @media (min-width: 769px) {
-        .home main section article .metadata .categories {
+          .home main section .home-wrapper-big article .metadata .categories {
+            display: none;
             display: block;
-          border-right: #000 solid 1px; } }
+            border-right: #000 solid 1px; }
-    .home main section article h2 {
+    .home main section .home-wrapper-2 article {
-      width: 100%;
+      border-left: #000 1px solid; } }
-      height: 50vh;
-      padding: 2rem;
-      padding-top: 3rem;
-      margin: 0; }
   @media (min-width: 769px) {
-        .home main section article h2 {
+    .home main section .home-wrapper-small {
-          height: unset;
+      width: calc(100vw - (10rem * 3));
-          position: absolute;
+      display: flex;
-          top: 6rem;
+      flex-direction: row;
-          padding: 4rem; } }
+      flex-wrap: wrap;
-      .home main section article h2 a {
+      margin-left: 10rem;
-        font: bold 3rem "Westeinde Caption";
+      margin-top: 4rem; }
-        color: #000; }
+      .home main section .home-wrapper-small article {
-        @media (-webkit-min-device-pixel-ratio: 2.1) {
+        flex: 0 0 33%;
-          .home main section article h2 a {
+        height: 50%; }
-            font-size: 2.5rem !important; } }
+        .home main section .home-wrapper-small article .metadata {
-        @media (min-width: 769px) {
+          display: none; } }
-          .home main section article h2 a {
-            font-size: 5rem; } }
 
 /* -------------------------------------------------------------------------- */
 /*                                   single                                   */

js/scripts.js

@@ -146,7 +146,26 @@
 		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>')
+			var wrapArticles = $("article").length - 2
+			var n = 0
+			for (let i = 0; i < wrapArticles; i++) {
+				var j = i + 3
+				if (i % 6 == 0) {
+					n++
 				}
+				$('article:nth-child(' + j + ')').addClass("home-thumbnail-small-" + n)
+			}
+			for (let i = 0; i < n; i++) {
+				var j = i + 3
+				var k = i+1
+				$(".home-thumbnail-small-" + k).wrapAll('<div class="home-wrapper-small home-wrapper-' + j + '"></div>')
+			}
+		}
+
+
 
 		/* ----------------------------- Snap on mobile ----------------------------- */
 
@@ -179,7 +198,7 @@
 			}
 
 			// var offset = ($(nextelem).offset().left) - desktophomemargin
-			var offset = ($(nextelem).position().left) - desktophomemargin
+			var offset = ($(nextelem).position().left)
 			console.log("scrolling to: " + nextelem.attr("id") + " - offset: " + offset)
 			$('html, body').stop().animate({ scrollLeft: offset }, 800);
 			return nextelem;
@@ -208,11 +227,12 @@
 
 		//checking the current scroll location for refresh:
 		if (isHome & !isMobile) {
-			var articleWidth = $('article:first-child')[0].getBoundingClientRect().width
+			var selector = 'main>#content>div'
+			var articleWidth = $(selector + ':first-child')[0].getBoundingClientRect().width
 			var currscroll = $('html').scrollLeft()
 			var scrollnr = Math.floor(currscroll / articleWidth) + 1
-			currElem = $('article:nth-child(' + scrollnr + ')')
+			currElem = $( selector + ':nth-child(' + scrollnr + ')')
-			console.log(currElem.attr("id"))
+			// console.log(currElem.attr("id"))
 		}
 
 		var scrolltimer = false;

sass/base.scss

@@ -11,7 +11,7 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }
 /* html element 62.5% font-size for REM use */
@@ -214,11 +214,6 @@ $desktop-bottom-margin-double: 4rem;
 /*                                  STRUCTURE                                 */
 /* -------------------------------------------------------------------------- */
 
-html {
-  // height: fit-content;
-  //overflow-y: hidden;
-}
-
 /* wrapper */
 .wrapper {
   margin: 0 auto;
@@ -315,14 +310,7 @@ html {
           // color: #000;
           // fill: currentColor;
           filter: invert(100%); //black
-          @include transform(rotate(180deg)) // transform: rotate(180deg);
+          @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;;
-            //red: #ff0000
-            //filter: brightness(0) saturate(100%) invert(14%) sepia(95%) saturate(6167%) hue-rotate(5deg) brightness(108%) contrast(122%);
-            //yellow: rgb(255,236,0) #ffec00
-            // filter: brightness(0) saturate(100%) invert(78%) sepia(83%) saturate(545%) hue-rotate(358deg) brightness(104%) contrast(102%);
-            //blue rgb(33,105,250) #2169fa
-            // filter: brightness(0) saturate(100%) invert(35%) sepia(50%) saturate(7310%) hue-rotate(218deg)
-            // brightness(106%) contrast(96%);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
         }
       }
     }
@@ -627,44 +615,23 @@ html {
         //horizontal scrolling on desktop:
         display: flex;
         flex-direction: row;
-        margin: 0 $desktop-home-margin 0 $desktop-home-margin;
+        margin: 0;
         height: 100vh;
         width: fit-content;
       }
 
-      /* ------------------------------ home article ------------------------------ */
+      /* --------------------------- home article mobile -------------------------- */
 
       article {
         height: 100vh;
         @media #{$smalldesktop} {
-          // height: calc(100vh - #{$desktop-top-margin});
-          width: calc(100vw - (#{$desktop-home-margin} * 3));
-          flex: 0 0 auto;
-          margin: 0;
-          padding: 0;
-          padding-top: $desktop-top-margin;
-          // margin-bottom: #{$desktop-bottom-margin};
-          border-left: #000 1px solid;
-
-          &:first-child {
-            border-left-color: transparent;
-          }
-
-          &::before {
-            content: "<hr>";
-            display: block;
-            height: 1px;
-            width: 100%;
-            background: #000;
-          }
-        }
-
           & > a {
             margin: 0;
             padding: 0;
             border: none;
             display: inline-block;
           }
+
           .thumbnailwrapper {
             @media #{$smalldesktop} {
               // height: 100%;
@@ -682,46 +649,6 @@ html {
             }
           }
 
-        /* -------------------------- home article metadata ------------------------- */
-
-        .metadata {
-          @media #{$smalldesktop} {
-            bottom: 0;
-            //border-top: #000 solid 3px;
-
-            // border-left: #000 solid 1px;
-            background: transparent;
-            width: 100%;
-            height: #{$desktop-home-margin};
-
-            display: flex;
-            flex-direction: row;
-            padding: 0;
-            justify-content: flex-start;
-            align-items: stretch;
-            @include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
-
-            & > div {
-              width: 30%;
-              padding-top: #{$desktop-bottom-margin};
-            }
-          }
-          @media #{$mobile-landscape} {
-            height: calc(#{$desktop-home-margin} / 2);
-          }
-          .categories {
-            display: none;
-            @media #{$smalldesktop} {
-              display: block;
-              border-right: #000 solid 1px;
-            }
-          }
-          .postedon {
-            @media #{$smalldesktop} {
-            }
-          }
-        }
-
           h2 {
             width: 100%;
             height: 50vh;
@@ -743,8 +670,97 @@ html {
             }
           }
         } //article end
-    } //section end
       }
+
+      /* ------------------------ home article desktop big ------------------------ */
+
+      @media #{$smalldesktop} {
+        //big: first 2 articles
+        .home-wrapper-big {
+          flex: 0 0 auto;
+
+          article {
+            position: relative;
+            width: calc(100vw - (#{$desktop-home-margin} * 3));
+            margin: 0;
+            padding: 0;
+            margin-left: $desktop-home-margin;
+            padding-top: $desktop-top-margin;
+            border-right: #000 1px solid;
+            &::before {
+              //this is the border on top
+              content: "<hr>";
+              display: block;
+              height: 1px;
+              width: 100%;
+              background: #000;
+            }
+            /* -------------------------- home article metadata big------------------------- */
+            .metadata {
+              bottom: 0;
+              background: transparent;
+              width: 100%;
+              height: #{$desktop-home-margin};
+
+              display: flex;
+              flex-direction: row;
+              padding: 0;
+              justify-content: flex-start;
+              align-items: stretch;
+              @include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
+
+              & > div {
+                width: 30%;
+                padding-top: #{$desktop-bottom-margin};
+              }
+
+              @media #{$mobile-landscape} {
+                height: calc(#{$desktop-home-margin} / 2);
+              }
+              .categories {
+                display: none;
+
+                display: block;
+                border-right: #000 solid 1px;
+              }
+              .postedon {
+              }
+            }
+          }
+        }
+        .home-wrapper-1 {
+          article {
+          }
+        }
+        .home-wrapper-2 {
+          article {
+            border-left: #000 1px solid;
+          }
+        }
+      } //smalldesktop end
+
+      /* ----------------------- home article desktop small ----------------------- */
+
+      @media #{$smalldesktop} {
+        .home-wrapper-small {
+          width: calc(100vw - (#{$desktop-home-margin} * 3));
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          margin-left: $desktop-home-margin;
+          margin-top: $desktop-top-margin;
+
+          article {
+            flex: 0 0 33%;
+            height: 50%;
+            .metadata{
+              display: none;
+            }
+          }
+        }
+      }
+    } //section end
+  } //main end
 } //home end
 
 /* -------------------------------------------------------------------------- */