From 2450fc6da57e790c8f7b3e712c0db15bc1ec509b Mon Sep 17 00:00:00 2001 From: infeeeee Date: Tue, 4 Jun 2019 23:56:52 +0200 Subject: [PATCH] updated readme, started new home layout --- README.md | 72 +-------------- _jegyzet.md | 2 +- css/base.css | 221 ++++++++++++++++++++++++--------------------- js/scripts.js | 28 +++++- sass/base.scss | 238 ++++++++++++++++++++++++++----------------------- 5 files changed, 277 insertions(+), 284 deletions(-) diff --git a/README.md b/README.md index d737058..76da186 100644 --- a/README.md +++ b/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) -* Website: [dis2019.com](http://dis2019.com) -* Twitter: [@dis2019](http://twitter.com/dis2019) -* Author : [Todd Motto](http://toddmotto.com) // [@toddmotto](http://twitter.com/toddmotto) +Live website: (designisso.com)[http://designisso.com/] -## Contributors (in order of pull request) -[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). +Built from HTML5 Blank theme: https://github.com/html5blank/html5blank -## 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 diff --git a/_jegyzet.md b/_jegyzet.md index 1a0b02b..a71344c 100644 --- a/_jegyzet.md +++ b/_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 diff --git a/css/base.css b/css/base.css index 98f85fa..f068c6a 100644 --- a/css/base.css +++ b/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,120 +521,141 @@ 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; - /* -------------------------- home article metadata ------------------------- */ } + height: 100vh; } @media (min-width: 769px) { - .home main section article { - width: calc(100vw - (10rem * 3)); - flex: 0 0 auto; + .home main section article > a { 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) { + .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) { + .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-left: #000 1px solid; } - .home main section article:first-child { - border-left-color: transparent; } - .home main section article::before { + border-right: #000 1px solid; + /* -------------------------- home article metadata big------------------------- */ } + .home main section .home-wrapper-big article::before { content: "
"; display: block; height: 1px; width: 100%; - background: #000; } } - .home main section article > a { - margin: 0; - padding: 0; - border: none; - display: inline-block; } - @media (min-width: 769px) { - .home main section article .thumbnailwrapper { - height: calc(100% - 4rem); } } - .home main section article .thumbnailwrapper img.attachment-home-thumbnail { - height: 50vh; - width: 100vw; - object-fit: cover; } - @media (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 { - bottom: 0; - background: transparent; - width: 100%; - height: 10rem; - display: flex; - flex-direction: row; - padding: 0; - justify-content: flex-start; - align-items: stretch; } - .home main section 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 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 article .metadata > div { - width: 30%; - padding-top: 2rem; } } - @media (-webkit-min-device-pixel-ratio: 2.1) { - .home main section article .metadata { - height: calc(10rem / 2); } } - .home main section article .metadata .categories { - display: none; } - @media (min-width: 769px) { - .home main section article .metadata .categories { - display: block; - border-right: #000 solid 1px; } } - .home main section article h2 { - width: 100%; - height: 50vh; - padding: 2rem; - padding-top: 3rem; - margin: 0; } - @media (min-width: 769px) { - .home main section article h2 { - height: unset; - position: absolute; - top: 6rem; - padding: 4rem; } } - .home main section article h2 a { - font: bold 3rem "Westeinde Caption"; - color: #000; } - @media (-webkit-min-device-pixel-ratio: 2.1) { - .home main section article h2 a { - font-size: 2.5rem !important; } } - @media (min-width: 769px) { - .home main section article h2 a { - font-size: 5rem; } } + background: #000; } + .home main section .home-wrapper-big article .metadata { + bottom: 0; + background: transparent; + width: 100%; + height: 10rem; + display: flex; + flex-direction: row; + padding: 0; + justify-content: flex-start; + align-items: stretch; } + .home main section .home-wrapper-big 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-big 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-big article .metadata > div { + width: 30%; + padding-top: 2rem; } } + @media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) { + .home main section .home-wrapper-big article .metadata { + height: calc(10rem / 2); } } + @media (min-width: 769px) { + .home main section .home-wrapper-big article .metadata .categories { + display: none; + display: block; + border-right: #000 solid 1px; } + .home main section .home-wrapper-2 article { + border-left: #000 1px solid; } } + @media (min-width: 769px) { + .home main section .home-wrapper-small { + width: calc(100vw - (10rem * 3)); + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-left: 10rem; + margin-top: 4rem; } + .home main section .home-wrapper-small article { + flex: 0 0 33%; + height: 50%; } + .home main section .home-wrapper-small article .metadata { + display: none; } } /* -------------------------------------------------------------------------- */ /* single */ diff --git a/js/scripts.js b/js/scripts.js index 1e75d87..f78b981 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -146,8 +146,27 @@ if (isHome & !isMobile) { $('html').css({ overflowY: "hidden" }) + //wrapping for big-small difference + $('article:first-child').wrap('
') + $('article:nth-child(2)').wrap('
') + 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('
') + } } + + /* ----------------------------- Snap on mobile ----------------------------- */ if (isHome & isMobile) { @@ -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 + ')') - console.log(currElem.attr("id")) + currElem = $( selector + ':nth-child(' + scrollnr + ')') + // console.log(currElem.attr("id")) } var scrolltimer = false; diff --git a/sass/base.scss b/sass/base.scss index 0588a2c..dc9b965 100644 --- a/sass/base.scss +++ b/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); - //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%);;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + @include transform(rotate(180deg)) // transform: rotate(180deg);;;;;;;;;;;; } } } @@ -627,124 +615,152 @@ 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: "
"; - display: block; - height: 1px; - width: 100%; - background: #000; - } - } - - & > a { - margin: 0; - padding: 0; - border: none; - display: inline-block; - } - .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%; - } - } - } - - /* -------------------------- 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; + & > a { + margin: 0; padding: 0; - justify-content: flex-start; - align-items: stretch; - @include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent); + border: none; + display: inline-block; + } - & > div { - width: 30%; - padding-top: #{$desktop-bottom-margin}; + .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%; + } } } - @media #{$mobile-landscape} { - height: calc(#{$desktop-home-margin} / 2); - } - .categories { - display: none; + + h2 { + width: 100%; + height: 50vh; + padding: 2rem; + padding-top: 3rem; + margin: 0; + // display: flex; + // flex-direction: row; + // align-items: center; @media #{$smalldesktop} { + height: unset; + position: absolute; + top: 6rem; + padding: 4rem; + } + + a { + @include home-title(); + } + } + } //article 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: "
"; display: block; - border-right: #000 solid 1px; + height: 1px; + width: 100%; + background: #000; } - } - .postedon { - @media #{$smalldesktop} { + /* -------------------------- 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 { + } } } } - - h2 { - width: 100%; - height: 50vh; - padding: 2rem; - padding-top: 3rem; - margin: 0; - // display: flex; - // flex-direction: row; - // align-items: center; - @media #{$smalldesktop} { - height: unset; - position: absolute; - top: 6rem; - padding: 4rem; - } - - a { - @include home-title(); + .home-wrapper-1 { + article { } } - } //article end + .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 /* -------------------------------------------------------------------------- */