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

updated readme, started new home layout

Browse Source
This commit is contained in:
Péter Gyetvai
2019-06-04 23:56:52 +02:00
parent 9ec32551f6
commit 2450fc6da5
5 changed files with 277 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
README.md
View File

@@ -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

2
_jegyzet.md
View File

@@ -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

129
css/base.css
View File

@@ -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;
/* -------------------------- home article metadata ------------------------- */ }
height: 100vh; }
@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; }
@media (min-width: 769px) {
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) {
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 .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) {
.home main section article .metadata {
@media (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2.1) {
.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; } }
.home main section article h2 {
width: 100%;
height: 50vh;
padding: 2rem;
padding-top: 3rem;
margin: 0; }
border-right: #000 solid 1px; }
.home main section .home-wrapper-2 article {
border-left: #000 1px solid; } }
@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; } }
.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 */

28
js/scripts.js
View File

@@ -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 + ')')
console.log(currElem.attr("id"))
currElem = $( selector + ':nth-child(' + scrollnr + ')')
// console.log(currElem.attr("id"))
}
var scrolltimer = false;

174
sass/base.scss
View File

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