diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e54f0e..0fdc989 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,12 @@ # CHANGELOG -## Head +## 0.13.0 «Scale» +* rework scaling functionality * bugfix enqueue jQuery from Google CDN * bugfix remove hardcoded scripts from footer * bugfix (typo) in backend function `onlyadmin_update` -## 0.12.0 +## 0.12.0 «Heads up» * enqueue scripts, styles, fonts * add wp_head * add wp_head cleaner diff --git a/README.md b/README.md index 6956473..ff2d700 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -**Version:** 0.12.3 +**Version:** 0.13.0 ## What is WPSeed? WPSeed is a WordPress starter theme following the intention of being able to skip the time-consuming first steps when creating a new theme. @@ -47,8 +47,8 @@ WPSeeds environment (Gulp, Bower, Browsersync, asset-builder) uses the [sage](ht * `assets/styles/general.scss` (re-usable classes and settings) * `assets/styles/main.scss` (gathers all .scss files for compiling with gulp) * `assets/styles/nav.scss` (navigation) -* `assets/styles/responsive.scss` (responsive stuff, **this file is not meant to be changed**) -* `assets/styles/vars.scss` (manages all colors, fonts and re-sizing and other presets) +* `assets/styles/essentials.scss` (required SASS functions and all presets for responsive, **this file is not meant to be changed**) +* `assets/styles/vars.scss` (manages scaling, all colors, fonts and other presets) ##### Javascript * `assets/scrips/essentials.js` (re-usable essential javascript/jQuery functions/variables) @@ -72,22 +72,28 @@ All templates are seperate into three categories recognizable by their prefix: * **`str`**: structure files that have to be included in other sites or the main structure. -### Responsive mixins/classes -##### defined by variables +### Responsive/Fluid presets + +#### Scaling +By default, the layout will scale with the viewport-width as all units are `rem` based and `html` uses font-size as the root unit. +This scaling can be configured at the `SIZE/SCALING` section in `vars.scss`. It is also possible to stop the scaling at a certain viewport-width. See instructions inside `vars.scss`. + +#### Mixins/Classes +**defined by variables** * The width of the two available variables `mobile` and `desktop` are defined in vars.scss. Usage (with default values): * min 800px `@include desktop {...}` * max 799px`@include mobile {...}` -##### defined by individual pixel widths +**defined by individual pixel widths** * at least 750px: `@include vpw_min(750px)` * at most 500px: `@include vpw_max(500px)` * between 1000px and 1200px: `vpw(1000px, 1200px)` -##### defined by ascepct-ratio +**defined by ascepct-ratio** * at least 16:9: `@include asr_min(16,9) { ... }` * at most 4:3: `@include asr_max(4,3) { ... }` -##### defined by css-class +**defined by css-class** the two available classes `mobile` and `desktop` perform as followed (with default values): ```SCSS .desktop { diff --git a/assets/styles/content.scss b/assets/styles/content.scss index 27143a2..c70fe33 100644 --- a/assets/styles/content.scss +++ b/assets/styles/content.scss @@ -3,7 +3,7 @@ * Contains all content related styles * * @author Flurin Dürst - * @version 1.6.1 + * @version 1.7 * @since WPSeed 0.1 * */ @@ -16,26 +16,26 @@ .content { position: relative; width: 80%; - padding-top: 4rem; + padding-top: 2rem; @include mobile { width: 100%; - padding: 2rem; + padding: 1rem; } section img, article img { float: left; width: 50%; - padding: 0 2rem 2rem 0; + padding: 0 1rem 1rem 0; @include mobile { float: none; width: 100%; - padding: -2rem; + padding: -1rem; } } } .top + div { - margin-top: 8rem; + margin-top: 4rem; } /* TOP @@ -51,17 +51,17 @@ justify-content: flex-start; align-items: center; width: 100%; - height: 8rem; + height: 4rem; padding: 0 10%; background-color: $color_bright; box-shadow: $shadow_material_soft_s1; @include mobile { - padding: 0 2rem; + padding: 0 1rem; } .logo { - width: 6rem; - height: 6rem; - margin-right: 5rem; + width: 3rem; + height: 3rem; + margin-right: 2rem; background-image: url('../images/logo.svg'); background-size: contain; background-repeat: no-repeat; @@ -73,17 +73,17 @@ /===================================================== */ h1 { - margin: 0 0 .5rem 0; - font-size: 4rem; + margin: 0 0 .25rem 0; + font-size: 2rem; } h2 { margin: 0 0 .5rem 0; - font-size: 3rem; + font-size: 1.5rem; } p { - margin: 0 0 1rem 0; + margin: 0 0 .5rem 0; } @@ -94,7 +94,7 @@ p { /------------------------*/ .teaser { width: 100%; - height: 50rem; + height: 25rem; background-position: center; background-size: cover; } @@ -109,7 +109,7 @@ p { justify-content: space-between; article { flex-basis: calc(90% / 2); - margin-bottom: 2rem; + margin-bottom: 1rem; @include mobile { flex-basis: 100%; } @@ -125,14 +125,14 @@ p { .blog, .post { .postinfo { - margin: 0 0 2rem 0; + margin: 0 0 1rem 0; color: $color_grey; } .thumbnail { width: 100%; - height: 30rem; - margin-bottom: 1rem; + height: 15rem; + margin-bottom: .5rem; background-size: cover; } } @@ -147,7 +147,7 @@ p { justify-content: space-between; section { flex-basis: calc(90% / 3); - margin-bottom: 2rem; + margin-bottom: 1rem; @include vpw_min(1600px) { flex-basis: calc(90% / 4); } @@ -159,7 +159,7 @@ p { } .thumbnail { width: 100%; - height: 30rem; + height: 15rem; background-size: cover; } } @@ -172,8 +172,8 @@ p { .footer { width: 100%; margin-top: auto; - padding: 3rem; - font-size: 1.5rem; + padding: 1.5rem; + font-size: .8rem; color: $color_grey; background: $color_bright; box-shadow: $shadow_material_s1; diff --git a/assets/styles/essentials.scss b/assets/styles/essentials.scss new file mode 100644 index 0000000..b73023e --- /dev/null +++ b/assets/styles/essentials.scss @@ -0,0 +1,81 @@ +/** + * SASS Functions/Mixings/Toolbox + * Contains general SASS functions aswell all responsive/fluid mixins + * This file is not meant to be changed + * + * @author Flurin Dürst + * @version 1.0 + * @since WPSeed 0.13 + * + */ + + +@import 'vars'; + +/* GENERAL FUNCTIONS +/===================================================== */ + + /* STRIP UNIT + /------------------------*/ + // removes a unit from a variable + @function stripunit($number) { + @if type-of($number) == 'number' and not unitless($number) { + @return $number / ($number * 0 + 1); + } + @return $number; + } + + +/* RESPONSIVE MIXINS +/===================================================== */ +// contains styles & mixins for responsive/fluid usage + + /* BY BREAKPOINTS + /------------------------*/ + // breakpoint-width defined in vars.scss + @mixin desktop { + @media (min-width: #{$desktop_min}) { + @content; + } + } + @mixin mobile { + @media (max-width: #{$desktop_min - 1px}) { + @content; + } + } + + /* BY PIXELS + /------------------------*/ + // usage example: { ... } + @mixin vpw_min($min) { + @media (min-width: #{$min}) { @content; } + } + @mixin vpw_max($max) { + @media (max-width: #{$max}) { @content; } + } + @mixin vpw($min: 0px, $max: 0px) { + @media (min-width: #{$min}) and (max-width: #{$max}) { @content; } + } + + /* BY ASPECT RATIO + /------------------------*/ + // usage example: asr_min(16,9) { ... } + @mixin asr_min($width: 16, $height: 9) { + @media (min-aspect-ratio: #{$width} / #{$height}) { @content; } + } + @mixin asr_max($width: 16, $height: 9) { + @media (max-aspect-ratio: #{$width} / #{$height}) { @content; } + } + + /* BY CLASS + /------------------------*/ + .mobile { + @include desktop { + display: none; + } + } + .desktop { + @include mobile { + display: none; + } + } diff --git a/assets/styles/general.scss b/assets/styles/general.scss index e9df85f..4f275ae 100644 --- a/assets/styles/general.scss +++ b/assets/styles/general.scss @@ -6,7 +6,7 @@ * minimum while using vars.scss for very basic styling. * * @author Flurin Dürst - * @version 1.5.1 + * @version 1.6 * @since WPSeed 0.1 * */ @@ -35,36 +35,18 @@ html { overflow-x: hidden; margin: 0; padding: 0; - font-family: $font_name; - font-size: $base_size; - color: $color_text; - background-color: $color_bright; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - @include vpw_min(2000px) { - font-size: $size_2000; - } - @include vpw_max(1999px) { - font-size: $size_1800; - } - @include vpw_max(1800px) { - font-size: $size_1800; - } - @include vpw_max(1600px) { - font-size: $size_1600; - } - @include vpw_max(1400px) { - font-size: $size_1400; - } - @include vpw_max(1200px) { - font-size: $size_1200; - } - @include vpw_max(1000px) { - font-size: $size_1000; + font-family: $font_name, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: $size; + @include vpw_min($scl_breakpoint) { + font-size: $scl_breakpoint / 100 * stripunit($size); } @include mobile { font-size: $size_mobile; } + color: $color_text; + background-color: $color_bright; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } body { @@ -75,6 +57,7 @@ body { min-height: 100vh; font-size: $font_size; font-weight: $font_weight; + line-height: $line_height; } a { @@ -139,7 +122,7 @@ table { // used in dd() @ functions-dev.php .dev { - margin: 5rem 0; + margin: 2.5rem 0; border: 5px dashed #abb2c0; &.noborder { border: none; @@ -161,7 +144,7 @@ pre { margin: .1rem; padding: .3rem; font-family: 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace; - font-size: 2rem; + font-size: .5rem; color: #abb2c0; border-radius: 5px; background-color: #282c34; diff --git a/assets/styles/main.scss b/assets/styles/main.scss index ca0cc6b..4f00cb0 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -4,22 +4,18 @@ * included external sources: Bower, Normalize * * @author Flurin Dürst - * @version 1.2 + * @version 1.3 * @since WPSeed 0.1 * */ @charset 'UTF-8'; -@import 'vars'; -/* VARS +/* VARS/FUNCTIONS /===================================================== */ @import 'vars'; - -/* RESPONSIVE -/===================================================== */ -@import 'responsive'; +@import 'essentials'; /* STYLES /===================================================== */ diff --git a/assets/styles/nav.scss b/assets/styles/nav.scss index c7982d3..b75a265 100644 --- a/assets/styles/nav.scss +++ b/assets/styles/nav.scss @@ -3,7 +3,7 @@ * Contains all navigation related styles * * @author Flurin Dürst - * @version 1.5.0 + * @version 1.6.0 * @since WPSeed 0.1 * */ @@ -16,7 +16,7 @@ nav { z-index: 210; - font-size: 2rem; + font-size: 1rem; font-weight: 700; ul { margin: 0; @@ -40,7 +40,7 @@ nav { color: $color_nav-active; } + li:before{ - padding: 0 1.5rem; + padding: 0 .8rem; color: $color_nav_spacer; content: ' | '; } @@ -60,11 +60,11 @@ nav { #hamburger { // » https://jonsuh.com/hamburgers/ position: absolute; - top: 2rem; - right: 2rem; + top: 1rem; + right: 1rem; z-index: 260; display: block; - height: 4rem; + height: 2rem; cursor: pointer; &.is-active { z-index: 300; @@ -102,11 +102,11 @@ nav { display: flex; flex-direction: column; align-items: center; - margin-top: 6rem; // = x icon height + margin-top: 3rem; // = x icon height padding: 0; li { - padding: 2rem 0; - font-size: 4rem; + padding: 1rem 0; + font-size: 2rem; text-align: center; list-style-type: none; + li:before{ diff --git a/assets/styles/responsive.scss b/assets/styles/responsive.scss deleted file mode 100644 index 448762d..0000000 --- a/assets/styles/responsive.scss +++ /dev/null @@ -1,68 +0,0 @@ -/** - * Responsive CSS File - * Contains all responsive/fluid related styles, mixins, settings - * This file is not meant to be changed - * - * @author Flurin Dürst - * @version 1.1 - * @since WPSeed 0.1 - * - */ - - -@import 'vars'; - -/* RESPONSIVE MIXINS -/===================================================== */ - -/* BY BREAKPOINTS -/------------------------*/ -// breakpoint-width defined in vars.scss - -@mixin desktop { - @media (min-width: #{$desktop_min}) { - @content; - } -} -@mixin mobile { - @media (max-width: #{$desktop_min - 1px}) { - @content; - } -} - -/* BY PIXELS -/------------------------*/ -// usage example: { ... } -@mixin vpw_min($min) { - @media (min-width: #{$min}) { @content; } -} -@mixin vpw_max($max) { - @media (max-width: #{$max}) { @content; } -} -@mixin vpw($min: 0px, $max: 0px) { - @media (min-width: #{$min}) and (max-width: #{$max}) { @content; } -} - -/* BY ASPECT RATIO -/------------------------*/ -// usage example: asr_min(16,9) { ... } -@mixin asr_min($width: 16, $height: 9) { - @media (min-aspect-ratio: #{$width} / #{$height}) { @content; } -} -@mixin asr_max($width: 16, $height: 9) { - @media (max-aspect-ratio: #{$width} / #{$height}) { @content; } -} - - -/* BY CLASS -/------------------------*/ -.mobile { - @include desktop { - display: none; - } -} -.desktop { - @include mobile { - display: none; - } -} diff --git a/assets/styles/vars.scss b/assets/styles/vars.scss index ccb4088..93fc71d 100644 --- a/assets/styles/vars.scss +++ b/assets/styles/vars.scss @@ -6,7 +6,7 @@ * because we define settings here * * @author Flurin Dürst - * @version 1.3.0 + * @version 1.4.0 * @since WPSeed 0.1 * */ @@ -15,22 +15,12 @@ /* GENERAL /===================================================== */ - // Base Size - // scales everything (defined by rem) - $base_size: .5vw; - - // Base Size Scaling - // » defines scaling in relationship to viewport with - $size_2000: $base_size * 1; - $size_1800: $base_size * 1.1; - $size_1600: $base_size * 1.2; - $size_1400: $base_size * 1.3; - $size_1200: $base_size * 1.4; - $size_1000: $base_size * 1.5; - $size_mobile: $base_size * 3; - - // Desktop/Mobile Breakpoint - $desktop_min: 800px; +/* SIZE/SCALING +/------------------------*/ +$size: 2vw; // scales all `rem` based elements +$size_mobile: $size * 2.2; // scaling filter for mobile viewport +$scl_breakpoint: 1200px; // scaling of all `rem` based elements stops here +$desktop_min: 800px; // Desktop/Mobile Breakpoint /* COLORS @@ -60,7 +50,8 @@ /* FONT STYLING /===================================================== */ $font_name: 'Ubuntu'; // Normal 400, Medium 500, Bold 700 - $font_size: 2rem; // the actual font-size no coherence with html font-size + $font_size: 1rem; // default font-size + $line_height: 1.3; // default line-height; $font_weight: 300; // default font-weight in body /* SHADOWS diff --git a/style.css b/style.css index c061d4c..132e700 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ Theme Name: WPSeed Author: Flurin Dürst Description: WordPress Starter Theme [in Development] -Version: 0.12.3 +Version: 0.13.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: This theme is licensed under the GPL.