Re-organize SASS structure (#1425)
This commit is contained in:
Ismail El Korchi
GitHub
parent
27fc314b55
commit
5c74dc9fa8
52 changed files with 541 additions and 515 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -3,3 +3,4 @@
|
|||
package-lock.json
|
||||
composer.lock
|
||||
style.css.map
|
||||
.DS_Store
|
||||
|
|
@ -13,7 +13,7 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s
|
|||
* Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
|
||||
* Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
|
||||
* A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
|
||||
* 2 sample layouts in `sass/layout/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/site/_site.scss`.
|
||||
* 2 sample layouts in `sass/layouts/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/style.scss`.
|
||||
Note: `.no-sidebar` styles are automatically loaded.
|
||||
* Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
|
||||
* Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.
|
||||
|
|
|
|||
5
sass/abstracts/_abstracts.scss
Normal file
5
sass/abstracts/_abstracts.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "variables/colors";
|
||||
@import "variables/typography";
|
||||
@import "variables/structure";
|
||||
@import "variables/columns";
|
||||
@import "mixins/mixins";
|
||||
20
sass/base/_base.scss
Normal file
20
sass/base/_base.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/* Typography
|
||||
--------------------------------------------- */
|
||||
@import "typography/typography";
|
||||
|
||||
/* Elements
|
||||
--------------------------------------------- */
|
||||
@import "elements/body";
|
||||
@import "elements/hr";
|
||||
@import "elements/lists";
|
||||
@import "elements/media";
|
||||
@import "elements/tables";
|
||||
|
||||
/* Links
|
||||
--------------------------------------------- */
|
||||
@import "elements/links";
|
||||
|
||||
/* Forms
|
||||
--------------------------------------------- */
|
||||
@import "elements/buttons";
|
||||
@import "elements/fields";
|
||||
3
sass/base/elements/_body.scss
Normal file
3
sass/base/elements/_body.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
background: $color__background-body; // Fallback for when there is no custom background color defined.
|
||||
}
|
||||
6
sass/base/elements/_hr.scss
Normal file
6
sass/base/elements/_hr.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
hr {
|
||||
background-color: $color__background-hr;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
15
sass/base/elements/_media.scss
Normal file
15
sass/base/elements/_media.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/* Make sure embeds and iframes fit their containers. */
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto; // Make sure images are scaled correctly.
|
||||
max-width: 100%; // Adhere to container width.
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
|
||||
}
|
||||
27
sass/components/_components.scss
Normal file
27
sass/components/_components.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/* Navigation
|
||||
--------------------------------------------- */
|
||||
@import "navigation/navigation";
|
||||
|
||||
/* Posts and pages
|
||||
--------------------------------------------- */
|
||||
@import "content/posts-and-pages";
|
||||
|
||||
/* Comments
|
||||
--------------------------------------------- */
|
||||
@import "comments/comments";
|
||||
|
||||
/* Widgets
|
||||
--------------------------------------------- */
|
||||
@import "widgets/widgets";
|
||||
|
||||
/* Media
|
||||
--------------------------------------------- */
|
||||
@import "media/media";
|
||||
|
||||
/* Captions
|
||||
--------------------------------------------- */
|
||||
@import "media/captions";
|
||||
|
||||
/* Galleries
|
||||
--------------------------------------------- */
|
||||
@import "media/galleries";
|
||||
13
sass/components/media/_media.scss
Normal file
13
sass/components/media/_media.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.page-content .wp-smiley,
|
||||
.entry-content .wp-smiley,
|
||||
.comment-content .wp-smiley {
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Make sure logo link wraps around logo image. */
|
||||
.custom-logo-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
/* Inherit box-sizing to more easily change it's value on a component level.
|
||||
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $color__background-body; // Fallback for when there is no custom background color defined.
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: $color__background-hr;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
@import "lists";
|
||||
|
||||
img {
|
||||
height: auto; // Make sure images are scaled correctly.
|
||||
max-width: 100%; // Adhere to container width.
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
|
||||
}
|
||||
|
||||
@import "tables";
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import "buttons";
|
||||
@import "fields";
|
||||
11
sass/generic/_box-sizing.scss
Normal file
11
sass/generic/_box-sizing.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* Inherit box-sizing to more easily change it's value on a component level.
|
||||
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
.page-content .wp-smiley,
|
||||
.entry-content .wp-smiley,
|
||||
.comment-content .wp-smiley {
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Make sure embeds and iframes fit their containers. */
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Make sure logo link wraps around logo image. */
|
||||
.custom-logo-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Captions
|
||||
--------------------------------------------------------------*/
|
||||
@import "captions";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Galleries
|
||||
--------------------------------------------------------------*/
|
||||
@import "galleries";
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
/*--------------------------------------------------------------
|
||||
## Links
|
||||
--------------------------------------------------------------*/
|
||||
@import "links";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Menus
|
||||
--------------------------------------------------------------*/
|
||||
@import "menus";
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
// @import "../layout/content-sidebar";
|
||||
// @import "../layout/sidebar-content";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Posts and pages
|
||||
--------------------------------------------------------------*/
|
||||
@import "primary/posts-and-pages";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Comments
|
||||
--------------------------------------------------------------*/
|
||||
@import "primary/comments";
|
||||
108
sass/style.scss
108
sass/style.scss
|
|
@ -23,78 +23,78 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
|
|||
/*--------------------------------------------------------------
|
||||
>>> TABLE OF CONTENTS:
|
||||
----------------------------------------------------------------
|
||||
# Normalize
|
||||
# Typography
|
||||
# Elements
|
||||
# Forms
|
||||
# Navigation
|
||||
## Links
|
||||
## Menus
|
||||
# Accessibility
|
||||
# Alignments
|
||||
# Widgets
|
||||
# Content
|
||||
## Posts and pages
|
||||
## Comments
|
||||
# Infinite scroll
|
||||
# Media
|
||||
## Captions
|
||||
## Galleries
|
||||
# Generic
|
||||
- Normalize
|
||||
- Box sizing
|
||||
# Base
|
||||
- Typography
|
||||
- Elements
|
||||
- Links
|
||||
- Forms
|
||||
## Layouts
|
||||
# Components
|
||||
- Navigation
|
||||
- Posts and pages
|
||||
- Comments
|
||||
- Widgets
|
||||
- Media
|
||||
- Captions
|
||||
- Galleries
|
||||
# plugins
|
||||
- Jetpack infinite scroll
|
||||
# Utilities
|
||||
- Accessibility
|
||||
- Alignments
|
||||
|
||||
--------------------------------------------------------------*/
|
||||
@import "variables-site/variables-site";
|
||||
@import "mixins/mixins-master";
|
||||
|
||||
// Import variables and mixins.
|
||||
@import "abstracts/abstracts";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Normalize
|
||||
# Generic
|
||||
--------------------------------------------------------------*/
|
||||
@import "normalize";
|
||||
|
||||
/* Normalize
|
||||
--------------------------------------------- */
|
||||
@import "generic/normalize";
|
||||
|
||||
/* Box sizing
|
||||
--------------------------------------------- */
|
||||
@import "generic/box-sizing";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Typography
|
||||
# Base
|
||||
--------------------------------------------------------------*/
|
||||
@import "typography/typography";
|
||||
@import "base/base";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Elements
|
||||
# Layouts
|
||||
--------------------------------------------------------------*/
|
||||
@import "elements/elements";
|
||||
// @import "layouts/content-sidebar"; // Uncomment this line for a sidebar on right side of your content.
|
||||
// @import "layouts/sidebar-content"; // Uncomment this line for a sidebar on left side of your content.
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Forms
|
||||
# Components
|
||||
--------------------------------------------------------------*/
|
||||
@import "forms/forms";
|
||||
@import "components/components";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Navigation
|
||||
# Plugins
|
||||
--------------------------------------------------------------*/
|
||||
@import "navigation/navigation";
|
||||
|
||||
/* Jetpack infinite scroll
|
||||
--------------------------------------------- */
|
||||
@import "plugins/jetpack/infinite-scroll";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Accessibility
|
||||
# Utilities
|
||||
--------------------------------------------------------------*/
|
||||
@import "modules/accessibility";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Alignments
|
||||
--------------------------------------------------------------*/
|
||||
@import "modules/alignments";
|
||||
/* Accessibility
|
||||
--------------------------------------------- */
|
||||
@import "utilities/accessibility";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Widgets
|
||||
--------------------------------------------------------------*/
|
||||
@import "site/secondary/widgets";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content
|
||||
--------------------------------------------------------------*/
|
||||
@import "site/site";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Infinite scroll
|
||||
--------------------------------------------------------------*/
|
||||
@import "modules/infinite-scroll";
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Media
|
||||
--------------------------------------------------------------*/
|
||||
@import "media/media";
|
||||
/* Alignments
|
||||
--------------------------------------------- */
|
||||
@import "utilities/alignments";
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
@import "colors";
|
||||
@import "typography";
|
||||
@import "structure";
|
||||
@import "columns";
|
||||
|
|
@ -9,36 +9,35 @@ $woocommerce__color-error: #e2401c;
|
|||
$woocommerce__color-success: #0f834d;
|
||||
$woocommerce__color-info: #3d9cd2;
|
||||
|
||||
// Imports
|
||||
@import "variables-site/variables-site";
|
||||
@import "mixins/mixins-master";
|
||||
// Import variables and mixins
|
||||
@import "abstracts/abstracts";
|
||||
|
||||
/**
|
||||
* Shop tables
|
||||
*/
|
||||
@import "shop/tables";
|
||||
@import "plugins/woocommerce/tables";
|
||||
|
||||
/**
|
||||
* Products
|
||||
*/
|
||||
@import "shop/products";
|
||||
@import "plugins/woocommerce/products";
|
||||
|
||||
/**
|
||||
* Single product
|
||||
*/
|
||||
@import "shop/single-product";
|
||||
@import "plugins/woocommerce/single-product";
|
||||
|
||||
/**
|
||||
* Checkout
|
||||
*/
|
||||
@import "shop/checkout";
|
||||
@import "plugins/woocommerce/checkout";
|
||||
|
||||
/**
|
||||
* General WooCommerce components
|
||||
*/
|
||||
@import "shop/components";
|
||||
@import "plugins/woocommerce/components";
|
||||
|
||||
/**
|
||||
* WooCommerce widgets
|
||||
*/
|
||||
@import "shop/widgets";
|
||||
@import "plugins/woocommerce/widgets";
|
||||
|
|
|
|||
367
style-rtl.css
367
style-rtl.css
|
|
@ -23,29 +23,38 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
|
|||
/*--------------------------------------------------------------
|
||||
>>> TABLE OF CONTENTS:
|
||||
----------------------------------------------------------------
|
||||
# Normalize
|
||||
# Typography
|
||||
# Elements
|
||||
# Forms
|
||||
# Navigation
|
||||
## Links
|
||||
## Menus
|
||||
# Accessibility
|
||||
# Alignments
|
||||
# Widgets
|
||||
# Content
|
||||
## Posts and pages
|
||||
## Comments
|
||||
# Infinite scroll
|
||||
# Media
|
||||
## Captions
|
||||
## Galleries
|
||||
# Generic
|
||||
- Normalize
|
||||
- Box sizing
|
||||
# Base
|
||||
- Typography
|
||||
- Elements
|
||||
- Links
|
||||
- Forms
|
||||
## Layouts
|
||||
# Components
|
||||
- Navigation
|
||||
- Posts and pages
|
||||
- Comments
|
||||
- Widgets
|
||||
- Media
|
||||
- Captions
|
||||
- Galleries
|
||||
# plugins
|
||||
- Jetpack infinite scroll
|
||||
# Utilities
|
||||
- Accessibility
|
||||
- Alignments
|
||||
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Normalize
|
||||
# Generic
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Normalize
|
||||
--------------------------------------------- */
|
||||
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
|
|
@ -364,9 +373,27 @@ template {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Box sizing
|
||||
--------------------------------------------- */
|
||||
|
||||
/* Inherit box-sizing to more easily change it's value on a component level.
|
||||
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Typography
|
||||
# Base
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Typography
|
||||
--------------------------------------------- */
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
|
|
@ -442,22 +469,8 @@ big {
|
|||
font-size: 125%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Elements
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Inherit box-sizing to more easily change it's value on a component level.
|
||||
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Elements
|
||||
--------------------------------------------- */
|
||||
body {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -496,6 +509,13 @@ dd {
|
|||
margin: 0 1.5em 1.5em;
|
||||
}
|
||||
|
||||
/* Make sure embeds and iframes fit their containers. */
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
|
@ -510,9 +530,33 @@ table {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Forms
|
||||
--------------------------------------------------------------*/
|
||||
/* Links
|
||||
--------------------------------------------- */
|
||||
a {
|
||||
color: #4169e1;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #800080;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: #191970;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
--------------------------------------------- */
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
|
|
@ -595,38 +639,15 @@ textarea {
|
|||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Navigation
|
||||
# Layouts
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Links
|
||||
# Components
|
||||
--------------------------------------------------------------*/
|
||||
a {
|
||||
color: #4169e1;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #800080;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: #191970;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Menus
|
||||
--------------------------------------------------------------*/
|
||||
/* Navigation
|
||||
--------------------------------------------- */
|
||||
.main-navigation {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -721,90 +742,8 @@ a:active {
|
|||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Accessibility
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Text meant only for screen readers. */
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.screen-reader-text:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
height: auto;
|
||||
right: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
/* Do not show the outline on the skip link target. */
|
||||
#primary[tabindex="-1"]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Alignments
|
||||
--------------------------------------------------------------*/
|
||||
.alignleft {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Widgets
|
||||
--------------------------------------------------------------*/
|
||||
.widget {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.widget select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Posts and pages
|
||||
--------------------------------------------------------------*/
|
||||
/* Posts and pages
|
||||
--------------------------------------------- */
|
||||
.sticky {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -829,9 +768,8 @@ a:active {
|
|||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Comments
|
||||
--------------------------------------------------------------*/
|
||||
/* Comments
|
||||
--------------------------------------------- */
|
||||
.comment-content a {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
|
@ -840,24 +778,18 @@ a:active {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Infinite scroll
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
|
||||
.infinite-scroll .posts-navigation,
|
||||
.infinite-scroll.neverending .site-footer {
|
||||
display: none;
|
||||
/* Widgets
|
||||
--------------------------------------------- */
|
||||
.widget {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
|
||||
.infinity-end.neverending .site-footer {
|
||||
display: block;
|
||||
.widget select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Media
|
||||
--------------------------------------------------------------*/
|
||||
/* Media
|
||||
--------------------------------------------- */
|
||||
.page-content .wp-smiley,
|
||||
.entry-content .wp-smiley,
|
||||
.comment-content .wp-smiley {
|
||||
|
|
@ -867,21 +799,13 @@ a:active {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
/* Make sure embeds and iframes fit their containers. */
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Make sure logo link wraps around logo image. */
|
||||
.custom-logo-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Captions
|
||||
--------------------------------------------------------------*/
|
||||
/* Captions
|
||||
--------------------------------------------- */
|
||||
.wp-caption {
|
||||
margin-bottom: 1.5em;
|
||||
max-width: 100%;
|
||||
|
|
@ -901,9 +825,8 @@ object {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Galleries
|
||||
--------------------------------------------------------------*/
|
||||
/* Galleries
|
||||
--------------------------------------------- */
|
||||
.gallery {
|
||||
margin-bottom: 1.5em;
|
||||
display: grid;
|
||||
|
|
@ -951,3 +874,89 @@ object {
|
|||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Plugins
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Jetpack infinite scroll
|
||||
--------------------------------------------- */
|
||||
|
||||
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
|
||||
.infinite-scroll .posts-navigation,
|
||||
.infinite-scroll.neverending .site-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
|
||||
.infinity-end.neverending .site-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Utilities
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Accessibility
|
||||
--------------------------------------------- */
|
||||
|
||||
/* Text meant only for screen readers. */
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.screen-reader-text:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
height: auto;
|
||||
right: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
/* Do not show the outline on the skip link target. */
|
||||
#primary[tabindex="-1"]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Alignments
|
||||
--------------------------------------------- */
|
||||
.alignleft {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
|
|
|||
367
style.css
367
style.css
|
|
@ -23,29 +23,38 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
|
|||
/*--------------------------------------------------------------
|
||||
>>> TABLE OF CONTENTS:
|
||||
----------------------------------------------------------------
|
||||
# Normalize
|
||||
# Typography
|
||||
# Elements
|
||||
# Forms
|
||||
# Navigation
|
||||
## Links
|
||||
## Menus
|
||||
# Accessibility
|
||||
# Alignments
|
||||
# Widgets
|
||||
# Content
|
||||
## Posts and pages
|
||||
## Comments
|
||||
# Infinite scroll
|
||||
# Media
|
||||
## Captions
|
||||
## Galleries
|
||||
# Generic
|
||||
- Normalize
|
||||
- Box sizing
|
||||
# Base
|
||||
- Typography
|
||||
- Elements
|
||||
- Links
|
||||
- Forms
|
||||
## Layouts
|
||||
# Components
|
||||
- Navigation
|
||||
- Posts and pages
|
||||
- Comments
|
||||
- Widgets
|
||||
- Media
|
||||
- Captions
|
||||
- Galleries
|
||||
# plugins
|
||||
- Jetpack infinite scroll
|
||||
# Utilities
|
||||
- Accessibility
|
||||
- Alignments
|
||||
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Normalize
|
||||
# Generic
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Normalize
|
||||
--------------------------------------------- */
|
||||
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
|
|
@ -364,9 +373,27 @@ template {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Box sizing
|
||||
--------------------------------------------- */
|
||||
|
||||
/* Inherit box-sizing to more easily change it's value on a component level.
|
||||
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Typography
|
||||
# Base
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Typography
|
||||
--------------------------------------------- */
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
|
|
@ -442,22 +469,8 @@ big {
|
|||
font-size: 125%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Elements
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Inherit box-sizing to more easily change it's value on a component level.
|
||||
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Elements
|
||||
--------------------------------------------- */
|
||||
body {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
@ -496,6 +509,13 @@ dd {
|
|||
margin: 0 1.5em 1.5em;
|
||||
}
|
||||
|
||||
/* Make sure embeds and iframes fit their containers. */
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
|
@ -510,9 +530,33 @@ table {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Forms
|
||||
--------------------------------------------------------------*/
|
||||
/* Links
|
||||
--------------------------------------------- */
|
||||
a {
|
||||
color: #4169e1;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #800080;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: #191970;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
--------------------------------------------- */
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
|
|
@ -595,38 +639,15 @@ textarea {
|
|||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Navigation
|
||||
# Layouts
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Links
|
||||
# Components
|
||||
--------------------------------------------------------------*/
|
||||
a {
|
||||
color: #4169e1;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #800080;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active {
|
||||
color: #191970;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Menus
|
||||
--------------------------------------------------------------*/
|
||||
/* Navigation
|
||||
--------------------------------------------- */
|
||||
.main-navigation {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -721,90 +742,8 @@ a:active {
|
|||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Accessibility
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Text meant only for screen readers. */
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.screen-reader-text:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
height: auto;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
/* Do not show the outline on the skip link target. */
|
||||
#primary[tabindex="-1"]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Alignments
|
||||
--------------------------------------------------------------*/
|
||||
.alignleft {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Widgets
|
||||
--------------------------------------------------------------*/
|
||||
.widget {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.widget select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Content
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Posts and pages
|
||||
--------------------------------------------------------------*/
|
||||
/* Posts and pages
|
||||
--------------------------------------------- */
|
||||
.sticky {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -829,9 +768,8 @@ a:active {
|
|||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Comments
|
||||
--------------------------------------------------------------*/
|
||||
/* Comments
|
||||
--------------------------------------------- */
|
||||
.comment-content a {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
|
@ -840,24 +778,18 @@ a:active {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Infinite scroll
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
|
||||
.infinite-scroll .posts-navigation,
|
||||
.infinite-scroll.neverending .site-footer {
|
||||
display: none;
|
||||
/* Widgets
|
||||
--------------------------------------------- */
|
||||
.widget {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
|
||||
.infinity-end.neverending .site-footer {
|
||||
display: block;
|
||||
.widget select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Media
|
||||
--------------------------------------------------------------*/
|
||||
/* Media
|
||||
--------------------------------------------- */
|
||||
.page-content .wp-smiley,
|
||||
.entry-content .wp-smiley,
|
||||
.comment-content .wp-smiley {
|
||||
|
|
@ -867,21 +799,13 @@ a:active {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
/* Make sure embeds and iframes fit their containers. */
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Make sure logo link wraps around logo image. */
|
||||
.custom-logo-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Captions
|
||||
--------------------------------------------------------------*/
|
||||
/* Captions
|
||||
--------------------------------------------- */
|
||||
.wp-caption {
|
||||
margin-bottom: 1.5em;
|
||||
max-width: 100%;
|
||||
|
|
@ -901,9 +825,8 @@ object {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## Galleries
|
||||
--------------------------------------------------------------*/
|
||||
/* Galleries
|
||||
--------------------------------------------- */
|
||||
.gallery {
|
||||
margin-bottom: 1.5em;
|
||||
display: grid;
|
||||
|
|
@ -951,3 +874,89 @@ object {
|
|||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Plugins
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Jetpack infinite scroll
|
||||
--------------------------------------------- */
|
||||
|
||||
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
|
||||
.infinite-scroll .posts-navigation,
|
||||
.infinite-scroll.neverending .site-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
|
||||
.infinity-end.neverending .site-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Utilities
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
/* Accessibility
|
||||
--------------------------------------------- */
|
||||
|
||||
/* Text meant only for screen readers. */
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.screen-reader-text:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
height: auto;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
/* Do not show the outline on the skip link target. */
|
||||
#primary[tabindex="-1"]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Alignments
|
||||
--------------------------------------------- */
|
||||
.alignleft {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue