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
/* -------------------------------------------------------------------------- */