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