spip-contrib-squelettes
/
html5up_editorial
93
1
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity
Browse Source

une branche dev pour permettre d'utiliser sass et de configurer la couleur principale que l'on retrouve dans les fichiers scss sous le nom accent

pull/2/head
touti 2 years ago
parent
ac9d94eeb2
commit
e49f5f73ac
36 changed files with 2929 additions and 2629 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      css/base/_page.scss
  2. 76
      css/base/_reset.scss
  3. 187
      css/base/_typography.scss
  4. 63
      css/components/_actions.scss
  5. 26
      css/components/_box.scss
  6. 85
      css/components/_button.scss
  7. 47
      css/components/_contact.scss
  8. 156
      css/components/_features.scss
  9. 179
      css/components/_form.scss
  10. 33
      css/components/_icon.scss
  11. 30
      css/components/_icons.scss
  12. 74
      css/components/_image.scss
  13. 56
      css/components/_list.scss
  14. 31
      css/components/_mini-posts.scss
  15. 70
      css/components/_pagination.scss
  16. 179
      css/components/_posts.scss
  17. 31
      css/components/_row.scss
  18. 39
      css/components/_section.scss
  19. 81
      css/components/_table.scss
  20. 75
      css/layout/_banner.scss
  21. 18
      css/layout/_footer.scss
  22. 51
      css/layout/_header.scss
  23. 58
      css/layout/_main.scss
  24. 98
      css/layout/_menu.scss
  25. 223
      css/layout/_sidebar.scss
  26. 13
      css/layout/_wrapper.scss
  27. 223
      css/libs/_breakpoints.scss
  28. 56
      css/libs/_functions.scss
  29. 149
      css/libs/_html-grid.scss
  30. 358
      css/libs/_mixins.scss
  31. 10
      css/libs/_vars.scss
  32. 376
      css/libs/_vendor.scss
  33. 2275
      css/main.css
  34. 62
      css/main.scss
  35. 20
      css/spip.scss
  36. 2
      paquet.xml

48
css/base/_page.scss
Unescape View File

@ -0,0 +1,48 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Basic */
// MSIE: Required for IEMobile.
@-ms-viewport {
width: device-width;
}
// MSIE: Prevents scrollbar from overlapping content.
body {
-ms-overflow-style: scrollbar;
}
// Ensures page width is always >=320px.
@include breakpoint('<=xsmall') {
html, body {
min-width: 320px;
}
}
// Set box model to border-box.
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: _palette(bg);
// Stops initial animations until page loads or stops resizing.
&.is-preload,
&.is-resizing {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
}

76
css/base/_reset.scss
Unescape View File

@ -0,0 +1,76 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
// Reset.
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes: none;
&:before,
&:after {
content: '';
content: none;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}

187
css/base/_typography.scss
Unescape View File

@ -0,0 +1,187 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Type */
body, input, select, textarea {
color: _palette(fg);
font-family: _font(family);
font-size: 13pt;
font-weight: _font(weight);
line-height: 1.65;
@include breakpoint('<=xlarge') {
font-size: 11pt;
}
@include breakpoint('<=large') {
font-size: 10pt;
}
@include breakpoint('<=xxsmall') {
font-size: 9pt;
}
}
a {
@include vendor('transition', (
'color #{_duration(transition)} ease-in-out',
'border-bottom-color #{_duration(transition)} ease-in-out'
));
border-bottom: dotted 1px;
color: _palette(accent);
text-decoration: none;
&:hover {
border-bottom-color: _palette(accent);
color: _palette(accent) !important;
strong {
color: inherit;
}
}
}
strong, b {
color: _palette(fg-bold);
font-weight: _font(weight-bold);
}
em, i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
}
h1, h2, h3, h4, h5, h6 {
color: _palette(fg-bold);
font-family: _font(family-heading);
font-weight: _font(weight-heading);
line-height: 1.5;
margin: 0 0 (_size(element-margin) * 0.5) 0;
a {
color: inherit;
text-decoration: none;
border-bottom: 0;
}
}
h1 {
font-size: 4em;
margin: 0 0 (_size(element-margin) * 0.25) 0;
line-height: 1.3;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1.1em;
}
h5 {
font-size: 0.9em;
}
h6 {
font-size: 0.7em;
}
@include breakpoint('<=xlarge') {
h1 {
font-size: 3.5em;
}
}
@include breakpoint('<=medium') {
h1 {
font-size: 3.25em;
}
}
@include breakpoint('<=small') {
h1 {
font-size: 2em;
line-height: 1.4;
}
h2 {
font-size: 1.5em;
}
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
blockquote {
border-left: solid 3px _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
}
code {
background: _palette(border-bg);
border-radius: _size(border-radius);
border: solid 1px _palette(border);
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
line-height: 1.75;
padding: 1em 1.5em;
overflow-x: auto;
}
}
hr {
border: 0;
border-bottom: solid 1px _palette(border);
margin: _size(element-margin) 0;
&.major {
margin: (_size(element-margin) * 1.5) 0;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}

63
css/components/_actions.scss
Unescape View File

@ -0,0 +1,63 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Actions */
ul.actions {
@include vendor('display', 'flex');
cursor: default;
list-style: none;
margin-left: (_size(element-margin) * -0.5);
padding-left: 0;
li {
padding: 0 0 0 (_size(element-margin) * 0.5);
vertical-align: middle;
}
&.special {
@include vendor('justify-content', 'center');
width: 100%;
margin-left: 0;
li {
&:first-child {
padding-left: 0;
}
}
}
&.stacked {
@include vendor('flex-direction', 'column');
margin-left: 0;
li {
padding: (_size(element-margin) * 0.65) 0 0 0;
&:first-child {
padding-top: 0;
}
}
}
&.fit {
width: calc(100% + #{_size(element-margin) * 0.5});
li {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
width: 100%;
> * {
width: 100%;
}
}
&.stacked {
width: 100%;
}
}
}

26
css/components/_box.scss
Unescape View File

@ -0,0 +1,26 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Box */
.box {
border-radius: _size(border-radius);
border: solid 1px _palette(border);
margin-bottom: _size(element-margin);
padding: 1.5em;
> :last-child,
> :last-child > :last-child,
> :last-child > :last-child > :last-child {
margin-bottom: 0;
}
&.alt {
border: 0;
border-radius: 0;
padding: 0;
}
}

85
css/components/_button.scss
Unescape View File

@ -0,0 +1,85 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
@include vendor('appearance', 'none');
@include vendor('transition', (
'background-color #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
background-color: transparent;
border-radius: _size(border-radius);
border: 0;
box-shadow: inset 0 0 0 2px _palette(accent);
color: _palette(accent) !important;
cursor: pointer;
display: inline-block;
font-family: _font(family-heading);
font-size: 0.8em;
font-weight: _font(weight-heading);
height: 3.5em;
letter-spacing: _font(kerning-heading);
line-height: 3.5em;
padding: 0 2.25em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
&:hover {
background-color: transparentize(_palette(accent), 0.95);
}
&:active {
background-color: transparentize(_palette(accent), 0.85);
}
&.icon {
&:before {
margin-right: 0.5em;
}
}
&.fit {
width: 100%;
}
&.small {
font-size: 0.6em;
}
&.large {
font-size: 1em;
height: 3.65em;
line-height: 3.65em;
}
&.primary {
background-color: _palette(accent);
box-shadow: none;
color: _palette(bg) !important;
&:hover {
background-color: lighten(_palette(accent), 3);
}
&:active {
background-color: darken(_palette(accent), 3);
}
}
&.disabled,
&:disabled {
@include vendor('pointer-events', 'none');
opacity: 0.25;
}
}

47
css/components/_contact.scss
Unescape View File

@ -0,0 +1,47 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Contact */
ul.contact {
list-style: none;
padding: 0;
li {
@include icon;
border-top: solid 1px _palette(border);
margin: 1.5em 0 0 0;
padding: 1.5em 0 0 3em;
position: relative;
&:before {
color: _palette(accent);
display: inline-block;
font-size: 1.5em;
height: 1.125em;
left: 0;
line-height: 1.125em;
position: absolute;
text-align: center;
top: (1.5em / 1.5);
width: 1.5em;
}
&:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0;
&:before {
top: 0;
}
}
a {
color: inherit;
}
}
}

156
css/components/_features.scss
Unescape View File

@ -0,0 +1,156 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Features */
.features {
$gutter: _size(gutter);
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
margin: 0 0 _size(element-margin) ($gutter * -1);
width: calc(100% + #{$gutter});
article {
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
margin: 0 0 $gutter $gutter;
position: relative;
width: calc(50% - #{$gutter});
&:nth-child(2n - 1) {
margin-right: ($gutter * 0.5);
}
&:nth-child(2n) {
margin-left: ($gutter * 0.5);
}
&:nth-last-child(1),
&:nth-last-child(2) {
margin-bottom: 0;
}
.icon {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
display: block;
height: 10em;
line-height: 10em;
margin: 0 _size(element-margin) 0 0;
text-align: center;
width: 10em;
&:before {
color: _palette(accent);
font-size: 2.75rem;
position: relative;
top: 0.05em;
}
&:after {
@include vendor('transform', 'rotate(45deg)');
border-radius: 0.25rem;
border: solid 2px _palette(border);
content: '';
display: block;
height: 7em;
left: 50%;
margin: -3.5em 0 0 -3.5em;
position: absolute;
top: 50%;
width: 7em;
}
}
.content {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
width: 100%;
> :last-child {
margin-bottom: 0;
}
}
}
@include breakpoint('<=medium') {
margin: 0 0 _size(element-margin) 0;
width: 100%;
article {
margin: 0 0 $gutter 0;
width: 100%;
&:nth-child(2n - 1) {
margin-right: 0;
}
&:nth-child(2n) {
margin-left: 0;
}
&:nth-last-child(1),
&:nth-last-child(2) {
margin-bottom: $gutter;
}
&:last-child {
margin-bottom: 0;
}
.icon {
height: 8em;
line-height: 8em;
width: 8em;
&:before {
font-size: 2.25rem;
}
&:after {
height: 6em;
margin: -3em 0 0 -3em;
width: 6em;
}
}
}
}
@include breakpoint('<=xsmall') {
article {
@include vendor('flex-direction', 'column');
@include vendor('align-items', 'flex-start');
.icon {
height: 6em;
line-height: 6em;
margin: 0 0 (_size(element-margin) * 0.75) 0;
width: 6em;
&:before {
font-size: 1.5rem;
}
&:after {
height: 4em;
margin: -2em 0 0 -2em;
width: 4em;
}
}
}
}
@include breakpoint('<=xsmall') {
article {
.icon {
&:before {
font-size: 1.25rem;
}
}
}
}
}

179
css/components/_form.scss
Unescape View File

@ -0,0 +1,179 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Form */
form {
margin: 0 0 _size(element-margin) 0;
}
label {
color: _palette(fg-bold);
display: block;
font-size: 0.9em;
font-weight: _font(weight-bold);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
@include vendor('appearance', 'none');
background: _palette(bg);
border-radius: _size(border-radius);
border: none;
border: solid 1px _palette(border);
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
&:invalid {
box-shadow: none;
}
&:focus {
border-color: _palette(accent);
box-shadow: 0 0 0 1px _palette(accent);
}
}
select {
background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
background-size: 1.25em;
background-repeat: no-repeat;
background-position: calc(100% - 1em) center;
height: _size(element-height);
padding-right: _size(element-height);
text-overflow: ellipsis;
option {
color: _palette(fg-bold);
background: _palette(bg);
}
&:focus {
&::-ms-value {
background-color: transparent;
}
}
&::-ms-expand {
display: none;
}
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
height: _size(element-height);
}
textarea {
padding: 0.75em 1em;
}
input[type="checkbox"],
input[type="radio"], {
@include vendor('appearance', 'none');
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
& + label {
@include icon(false, solid);
color: _palette(fg);
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: _font(weight);
padding-left: (_size(element-height) * 0.6) + 0.75em;
padding-right: 0.75em;
position: relative;
&:before {
background: _palette(bg);
border-radius: _size(border-radius);
border: solid 1px _palette(border);
content: '';
display: inline-block;
font-size: 0.8em;
height: (_size(element-height) * 0.75);
left: 0;
line-height: (_size(element-height) * 0.75);
position: absolute;
text-align: center;
top: 0;
width: (_size(element-height) * 0.75);
}
}
&:checked + label {
&:before {
background: _palette(fg-bold);
border-color: _palette(fg-bold);
color: _palette(bg);
content: '\f00c';
}
}
&:focus + label {
&:before {
border-color: _palette(accent);
box-shadow: 0 0 0 1px _palette(accent);
}
}
}
input[type="checkbox"] {
& + label {
&:before {
border-radius: _size(border-radius);
}
}
}
input[type="radio"] {
& + label {
&:before {
border-radius: 100%;
}
}
}
::-webkit-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
:-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
::-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
:-ms-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}

33
css/components/_icon.scss
Unescape View File

@ -0,0 +1,33 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Icon */
.icon {
@include icon;
border-bottom: none;
position: relative;
> .label {
display: none;
}
&:before {
line-height: inherit;
}
&.solid {
&:before {
font-weight: 900;
}
}
&.brands {
&:before {
font-family: 'Font Awesome 5 Brands';
}
}
}

30
css/components/_icons.scss
Unescape View File

@ -0,0 +1,30 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Icons */
ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
li {
display: inline-block;
padding: 0 1em 0 0;
&:last-child {
padding-right: 0;
}
.icon {
color: inherit;
&:before {
font-size: 1.25em;
}
}
}
}

74
css/components/_image.scss
Unescape View File

@ -0,0 +1,74 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Image */
.image {
border-radius: _size(border-radius);
border: 0;
display: inline-block;
position: relative;
img {
border-radius: _size(border-radius);
display: block;
}
&.left,
&.right {
max-width: 40%;
img {
width: 100%;
}
}
&.left {
float: left;
padding: 0 1.5em 1em 0;
top: 0.25em;
}
&.right {
float: right;
padding: 0 0 1em 1.5em;
top: 0.25em;
}
&.fit {
display: block;
margin: 0 0 _size(element-margin) 0;
width: 100%;
img {
width: 100%;
}
}
&.main {
display: block;
margin: 0 0 (_size(element-margin) * 1.5) 0;
width: 100%;
img {
width: 100%;
}
}
}
a.image {
overflow: hidden;
img {
@include vendor('transition', 'transform #{_duration(transition)} ease');
}
&:hover {
img {
@include vendor('transform', 'scale(1.075)');
}
}
}

56
css/components/_list.scss
Unescape View File

@ -0,0 +1,56 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* List */
ol {
list-style: decimal;
margin: 0 0 _size(element-margin) 0;
padding-left: 1.25em;
li {
padding-left: 0.25em;
}
}
ul {
list-style: disc;
margin: 0 0 _size(element-margin) 0;
padding-left: 1em;
li {
padding-left: 0.5em;
}
&.alt {
list-style: none;
padding-left: 0;
li {
border-top: solid 1px _palette(border);
padding: 0.5em 0;
&:first-child {
border-top: 0;
padding-top: 0;
}
}
}
}
dl {
margin: 0 0 _size(element-margin) 0;
dt {
display: block;
font-weight: _font(weight-bold);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
dd {
margin-left: _size(element-margin);
}
}

31
css/components/_mini-posts.scss
Unescape View File

@ -0,0 +1,31 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Mini Posts */
.mini-posts {
article {
border-top: solid 1px _palette(border);
margin-top: _size(element-margin);
padding-top: _size(element-margin);
.image {
display: block;
margin: 0 0 (_size(element-margin) * 0.75) 0;
img {
display: block;
width: 100%;
}
}
&:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0;
}
}
}

70
css/components/_pagination.scss
Unescape View File

@ -0,0 +1,70 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Pagination */
ul.pagination {
cursor: default;
list-style: none;
padding-left: 0;
li {
display: inline-block;
padding-left: 0;
vertical-align: middle;
> .page {
@include vendor('transition', (
'background-color #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
border-bottom: 0;
border-radius: _size(border-radius);
display: inline-block;
font-size: 0.8em;
font-weight: _font(weight-bold);
height: 2em;
line-height: 2em;
margin: 0 0.125em;
min-width: 2em;
padding: 0 0.5em;
text-align: center;
&.active {
background-color: _palette(accent);
color: _palette(bg) !important;
&:hover {
background-color: lighten(_palette(accent), 3);
}
&:active {
background-color: darken(_palette(accent), 3);
}
}
}
&:first-child {
padding-right: 0.75em;
}
&:last-child {
padding-left: 0.75em;
}
}
@include breakpoint('<=xsmall') {
li {
&:nth-child(n+2):nth-last-child(n+2) {
display: none;
}
&:first-child {
padding-right: 0;
}
}
}
}

179
css/components/_posts.scss
Unescape View File

@ -0,0 +1,179 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Posts */
.posts {
$gutter: (_size(gutter) * 2);
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
margin: 0 0 _size(element-margin) ($gutter * -1);
width: calc(100% + #{$gutter});
article {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '1');
margin: 0 0 $gutter $gutter;
position: relative;
width: calc(#{(100% / 3)} - #{$gutter});
&:before {
background: _palette(border);
content: '';
display: block;
height: calc(100% + #{$gutter});
left: ($gutter * -0.5);
position: absolute;
top: 0;
width: 1px;
}
&:after {
background: _palette(border);
bottom: ($gutter * -0.5);
content: '';
display: block;
height: 1px;
position: absolute;
right: 0;
width: calc(100% + #{$gutter});
}
> :last-child {
margin-bottom: 0;
}
.image {
display: block;
margin: 0 0 _size(element-margin) 0;
img {
display: block;
width: 100%;
}
}
}
@include breakpoint('xlarge-to-max') {
article {
&:nth-child(3n + 1) {
&:before {
display: none;
}
&:after {
width: 100%;
}
}
&:nth-last-child(1),
&:nth-last-child(2),
&:nth-last-child(3) {
margin-bottom: 0;
&:before {
height: 100%;
}
&:after {
display: none;
}
}
}
}
@include breakpoint('<=xlarge') {
article {
width: calc(50% - #{$gutter});
&:nth-last-child(3) {
margin-bottom: $gutter;
}
}
}
@include breakpoint('small-to-xlarge') {
article {
&:nth-child(2n + 1) {
&:before {
display: none;
}
&:after {
width: 100%;
}
}
&:nth-last-child(1),
&:nth-last-child(2) {
margin-bottom: 0;
&:before {
height: 100%;
}
&:after {
display: none;
}
}
}
}
@include breakpoint('<=small') {
$gutter: _size(gutter) * 1.5;
margin: 0 0 _size(element-margin) ($gutter * -1);
width: calc(100% + #{$gutter});
article {
margin: 0 0 $gutter $gutter;
width: calc(50% - #{$gutter});
&:before {
height: calc(100% + #{$gutter});
left: ($gutter * -0.5);
}
&:after {
bottom: ($gutter * -0.5);
width: calc(100% + #{$gutter});
}
&:nth-last-child(3) {
margin-bottom: $gutter;
}
}
}
@include breakpoint('<=xsmall') {
$gutter: _size(gutter) * 1.5;
margin: 0 0 _size(element-margin) 0;
width: 100%;
article {
margin: 0 0 $gutter 0;
width: 100%;
&:before {
display: none;
}
&:after {
width: 100%;
}
&:last-child {
margin-bottom: 0;
&:after {
display: none;
}
}
}
}
}

31
css/components/_row.scss
Unescape View File

@ -0,0 +1,31 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Row */
.row {
@include html-grid(1.5em);
@include breakpoint('<=xlarge') {
@include html-grid(1.5em, 'xlarge');
}
@include breakpoint('<=large') {
@include html-grid(1.5em, 'large');
}
@include breakpoint('<=medium') {
@include html-grid(1.5em, 'medium');
}
@include breakpoint('<=small') {
@include html-grid(1.5em, 'small');
}
@include breakpoint('<=xsmall') {
@include html-grid(1.5em, 'xsmall');
}
}

39
css/components/_section.scss
Unescape View File

@ -0,0 +1,39 @@
///
/// Editorial by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Section/Article */
section, article {
&.special {
text-align: center;
}
}
header {
p {
font-family: _font(family-heading);
font-size: 1em;
font-weight: _font(weight-heading-alt);
letter-spacing: _font(kerning-heading);
margin-top: -0.5em;
text-transform: uppercase;
}
&.major {
> :last-child {
border-bottom: solid 3px _palette(accent);
display: inline-block;
margin: 0 0 _size(element-margin) 0;
padding: 0 0.75em 0.5em 0