ry
/
datat.fi
6
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

CSS cleanup 

- Remove unused styles
- Run through Autoprefixer
This commit is contained in:
Michael Rose 2017-03-10 14:37:14 -05:00
parent 43654c1a70
commit 724e6b5136
17 changed files with 154 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_sass/basically-basic.scss
View File

@ -5,28 +5,25 @@
* https://github.com/mmistakes/jekyll-theme-basically-basic/blob/master/LICENSE.md * https://github.com/mmistakes/jekyll-theme-basically-basic/blob/master/LICENSE.md
*/ */
// Mixins and Functions /* Mixins and functions */
@import "basically-basic/vendor/susy"; @import "basically-basic/vendor/susy";
@import "basically-basic/vendor/breakpoint"; @import "basically-basic/vendor/breakpoint";
@include breakpoint-set("to ems", true); @include breakpoint-set("to ems", true);
@import "basically-basic/mixins"; @import "basically-basic/mixins";
// Variables /* Variables */
@import "basically-basic/variables"; @import "basically-basic/variables";
// Core CSS /* Core CSS */
@import "basically-basic/reset"; @import "basically-basic/reset";
@import "basically-basic/base"; @import "basically-basic/base";
@import "basically-basic/layout"; @import "basically-basic/layout";
@import "basically-basic/tables"; @import "basically-basic/tables";
// @import "basically-basic/forms";
@import "basically-basic/syntax-highlighting";
// Components /* Components */
@import "basically-basic/global"; @import "basically-basic/global";
@import "basically-basic/sidebar"; @import "basically-basic/sidebar";
@import "basically-basic/navigation"; @import "basically-basic/navigation";
@import "basically-basic/header";
@import "basically-basic/footer"; @import "basically-basic/footer";
@import "basically-basic/entries"; @import "basically-basic/entries";
@import "basically-basic/buttons"; @import "basically-basic/buttons";
@ -34,6 +31,7 @@
@import "basically-basic/intro"; @import "basically-basic/intro";
@import "basically-basic/navicons"; @import "basically-basic/navicons";
@import "basically-basic/contact-lists"; @import "basically-basic/contact-lists";
@import "basically-basic/syntax-highlighting";
// Utility classes /* Utility classes */
@import "basically-basic/utilities"; @import "basically-basic/utilities";

6
_sass/basically-basic/_base.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Base elements Base elements
// ========================================================================== */
html { html {
@include fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size); @include fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size);

8
_sass/basically-basic/_buttons.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Buttons Buttons
// ========================================================================== */
.btn { .btn {
display: inline-block; display: inline-block;
@ -27,7 +27,7 @@
margin-right: 0.5em; margin-right: 0.5em;
} }
// block button fills width of parent container /* block button fills width of parent container */
&--block { &--block {
display: block; display: block;
width: 100%; width: 100%;

6
_sass/basically-basic/_contact-lists.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Contact lists Contact lists
// ========================================================================== */
.contact-list { .contact-list {
@include list-unstyled; @include list-unstyled;

26
_sass/basically-basic/_entries.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Entries (Posts, collection documents, etc.) Entries (Posts, collection documents, etc.)
// ========================================================================== */
.entry { .entry {
@include clearfix(); @include clearfix();
@ -44,9 +44,9 @@
} }
} }
// /*
// Entry list Entry list
// ========================================================================== */
.entries { .entries {
@ -56,14 +56,14 @@
@include span(5 of 16); @include span(5 of 16);
@include suffix(1 of 16); @include suffix(1 of 16);
// remove space after last child element /* remove space after last child element */
> *:last-child { > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
// break long words that could overflow /* break long words that could overflow */
.entry-title { .entry-title {
word-wrap: break-word; word-wrap: break-word;
} }
@ -73,12 +73,12 @@
@include span(11 of 16 last); @include span(11 of 16 last);
} }
// normalize font sizes /* normalize font sizes */
> * { > * {
font-size: 1em; font-size: 1em;
} }
// remove space after last child element /* remove space after last child element */
> *:last-child { > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -89,7 +89,7 @@
@include span(11 of 16 last); @include span(11 of 16 last);
} }
// remove space after last child element /* remove space after last child element */
> *:last-child { > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -107,7 +107,7 @@
} }
} }
// Footnotes /* Footnotes */
.footnotes { .footnotes {
margin: 2rem 0; margin: 2rem 0;
padding-top: 1rem; padding-top: 1rem;
@ -115,7 +115,7 @@
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
// Read more link /* Read more link */
.more-link { .more-link {
font-size: 75%; font-size: 75%;
font-weight: bold; font-weight: bold;

6
_sass/basically-basic/_footer.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Footer Footer
// ========================================================================== */
#footer { #footer {
margin-top: 4rem; margin-top: 4rem;

8
_sass/basically-basic/_global.scss
View File

@ -1,11 +1,11 @@
// /* ==========================================================================
// Site wide Site-wide
// ========================================================================== */
.site-title { .site-title {
margin: 0; margin: 0;
padding: 1.35rem 1rem; padding: 1.35rem 1rem;
padding-right: calc(10vw + #{$navicon-width}); // make room for sidebar toggle padding-right: calc(10vw + #{$navicon-width}); /* make room for sidebar toggle */
font-family: $base-font-family; font-family: $base-font-family;
@include fluid-type($min-vw, $max-vw, 20px, 24px); @include fluid-type($min-vw, $max-vw, 20px, 24px);
font-weight: bold; font-weight: bold;

32
_sass/basically-basic/_header.scss
View File

@ -1,32 +0,0 @@
//
// Page header
//
#page-header {
position: relative;
margin: 1rem 0 2rem;
padding: 4rem 0;
color: #fff;
background-image: linear-gradient(-90deg, transparent 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.55) 60%);
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background-image: linear-gradient(60deg, rgba(171, 236, 214, 0.25) 0%, rgba(251, 237, 150, 0.25) 100%);
pointer-events: none;
}
.inner {
position: relative;
z-index: 1;
}
.entry-title {
font-size: 3em;
}
}

8
_sass/basically-basic/_icons.scss
View File

@ -1,10 +1,10 @@
// /* ==========================================================================
// Icons Icons
// ========================================================================== */
.icon { .icon {
position: relative; position: relative;
top: -0.05em; // fine-tune alignment top: -0.05em; /* fine-tune alignment */
display: inline-block; display: inline-block;
fill: currentColor; fill: currentColor;
width: 1em; width: 1em;

56
_sass/basically-basic/_intro.scss
View File

@ -1,44 +1,16 @@
// /* ==========================================================================
// Page intro Page intro
// ========================================================================== */
#intro { #intro {
// position: relative;
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
// darken image
// background-color: rgba(0, 0, 0, 0.6);
// @include breakpoint($large) {
// // darken image
// background-color: initial;
// background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.3));
// }
// &:after {
// content: '';
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// background-image: linear-gradient(60deg, rgba(171, 236, 214, 0.25) 0%, rgba(251, 237, 150, 0.25) 100%);
// pointer-events: none;
// }
} }
.intro-text { .intro-text {
// position: relative;
// color: #fff;
// text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
// z-index: 1;
// a { /* remove space after last child element */
// color: #fff;
// }
// remove space after last child element
> *:last-child { > *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -56,26 +28,6 @@
font-style: italic; font-style: italic;
} }
// .intro-more {
// @include breakpoint($medium) {
// width: 70%;
// }
// }
// .intro-image {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// z-index: -1;
// // parallax effect via fixed background image
// background-attachment: fixed;
// background-position: center center;
// background-size: cover;
// }
.intro-actions { .intro-actions {
@include list-unstyled; @include list-unstyled;

30
_sass/basically-basic/_layout.scss
View File

@ -1,13 +1,13 @@
// /* ==========================================================================
// Layout Layout
// ========================================================================== */
#wrapper { #wrapper {
min-height: 100vh; min-height: 100vh;
transition: $global-transition; transition: $global-transition;
} }
#intro, #page-header, #main { #intro, #main {
> .inner { > .inner {
padding: 0 0.5rem; padding: 0 0.5rem;
@ -45,9 +45,9 @@
max-width: $large; max-width: $large;
} }
// /*
// Layout specific adjustments Layout specific adjustments
// ========================================================================== */
.layout--post, .layout--post,
.layout--page { .layout--page {
@ -62,24 +62,30 @@
.layout--about { .layout--about {
.entry-wrap { .entry-wrap {
display: -ms-flexbox;
display: flex; display: flex;
flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap;
@include breakpoint($medium) { @include breakpoint($medium) {
flex-wrap: nowrap; -ms-flex-wrap: nowrap;
flex-wrap: nowrap;
} }
} }
.entry-content { .entry-content {
@include breakpoint($medium) { @include breakpoint($medium) {
flex: 1; -ms-flex: 1;
flex: 1;
} }
} }
.entry-sidebar { .entry-sidebar {
order: -1; -ms-flex-order: -1;
order: -1;
@include breakpoint($medium) { @include breakpoint($medium) {
order: initial; -ms-flex-order: initial;
order: initial;
} }
.author-picture { .author-picture {

44
_sass/basically-basic/_navicons.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Navicons Navicons
// ========================================================================== */
.navicon-button { .navicon-button {
display: inline-block; display: inline-block;
@ -9,7 +9,10 @@
background-color: $navicon-nav-bg-close; background-color: $navicon-nav-bg-close;
transition: $navicon-duration/2; transition: $navicon-duration/2;
cursor: pointer; cursor: pointer;
user-select: none; -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
@include breakpoint($medium) { @include breakpoint($medium) {
margin-right: 2rem; margin-right: 2rem;
@ -75,7 +78,8 @@
/* Minus */ /* Minus */
.open { .open {
transform: scale($navicon-toggled-size); -ms-transform: scale($navicon-toggled-size);
transform: scale($navicon-toggled-size);
} }
/* Arrows */ /* Arrows */
@ -88,17 +92,22 @@
} }
&:before { &:before {
transform: rotate(35deg); -ms-transform: rotate(35deg);
transform-origin: left top; transform: rotate(35deg);
-ms-transform-origin: left top;
transform-origin: left top;
} }
&:after { &:after {
transform: rotate(-35deg); -ms-transform: rotate(-35deg);
transform-origin: left bottom; transform: rotate(-35deg);
-ms-transform-origin: left bottom;
transform-origin: left bottom;
} }
} }
.open.uarr { .open.uarr {
transform: scale($navicon-toggled-size) rotate(90deg); -ms-transform: scale($navicon-toggled-size) rotate(90deg);
transform: scale($navicon-toggled-size) rotate(90deg);
} }
/* Arrows */ /* Arrows */
@ -106,12 +115,14 @@
&:before { &:before {
transform: translate3d(1em, 0, 0) rotate(-35deg); transform: translate3d(1em, 0, 0) rotate(-35deg);
transform-origin: right top; -ms-transform-origin: right top;
transform-origin: right top;
} }
&:after { &:after {
transform: translate3d(1em, 0, 0) rotate(35deg); transform: translate3d(1em, 0, 0) rotate(35deg);
transform-origin: right bottom; -ms-transform-origin: right bottom;
transform-origin: right bottom;
} }
} }
@ -122,15 +133,18 @@
background: transparent; background: transparent;
&:before { &:before {
transform: rotate(-45deg); -ms-transform: rotate(-45deg);
transform: rotate(-45deg);
} }
&:after { &:after {
transform: rotate(45deg); -ms-transform: rotate(45deg);
transform: rotate(45deg);
} }
} }
} }
.open.plus { .open.plus {
transform: scale($navicon-toggled-size) rotate(45deg) -ms-transform: scale($navicon-toggled-size) rotate(45deg);
transform: scale($navicon-toggled-size) rotate(45deg);
} }

19
_sass/basically-basic/_navigation.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Navigation Navigation
// ========================================================================== */
.menu { .menu {
@include list-unstyled; @include list-unstyled;
@ -11,9 +11,9 @@
} }
} }
// /*
// Paginator Paginator
// ========================================================================== */
.pager { .pager {
@include clearfix(); @include clearfix();
@ -21,11 +21,14 @@
ul { ul {
@include list-unstyled; @include list-unstyled;
display: -ms-flexbox;
display: flex; display: flex;
> li { > li {
flex: 1; -ms-flex: 1;
justify-content: space-between; flex: 1;
-ms-flex-pack: justify;
justify-content: space-between;
} }
li + li { li + li {

30
_sass/basically-basic/_sidebar.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Sidebar Sidebar
// ========================================================================== */
#sidebar { #sidebar {
position: fixed; position: fixed;
@ -12,7 +12,7 @@
pointer-events: none; pointer-events: none;
z-index: 150; z-index: 150;
// page overlay dimmer /* page overlay dimmer */
&:after { &:after {
content: ''; content: '';
display: block; display: block;
@ -28,7 +28,7 @@
transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1); transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
} }
// line hover effect /* line hover effect */
li { li {
a { a {
@ -58,7 +58,8 @@
} }
&.is--visible { &.is--visible {
transform: translateX(0); -ms-transform: translateX(0);
transform: translateX(0);
&:after { &:after {
opacity: 1; opacity: 1;
@ -67,7 +68,8 @@
> .inner { > .inner {
box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125); box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125);
transform: none; -ms-transform: none;
transform: none;
} }
} }
@ -88,7 +90,8 @@
overflow-x: hidden; overflow-x: hidden;
background-color: $sidebar-background-color; background-color: $sidebar-background-color;
box-shadow: none; box-shadow: none;
transform: translateX(-1 * $sidebar-width); -ms-transform: translateX(-1 * $sidebar-width);
transform: translateX(-1 * $sidebar-width);
will-change: transform; will-change: transform;
z-index: 160; z-index: 160;
pointer-events: auto; pointer-events: auto;
@ -98,7 +101,8 @@
} }
@include breakpoint($large) { @include breakpoint($large) {
transform: translateX(-1.5 * $sidebar-width); -ms-transform: translateX(-1.5 * $sidebar-width);
transform: translateX(-1.5 * $sidebar-width);
max-width: (1.5 * $sidebar-width); max-width: (1.5 * $sidebar-width);
} }
} }
@ -115,7 +119,7 @@
display: block; display: block;
} }
// divider line /* divider line */
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
@ -132,13 +136,15 @@
li { li {
transform: translateX(-1rem); -ms-transform: translateX(-1rem);
transform: translateX(-1rem);
opacity: 0; opacity: 0;
transition: all 0.5s; transition: all 0.5s;
&.is--moved { &.is--moved {
opacity: 1; opacity: 1;
transform: translateX(0); -ms-transform: translateX(0);
transform: translateX(0);
} }
} }

8
_sass/basically-basic/_syntax-highlighting.scss
View File

@ -1,6 +1,6 @@
// /* ==========================================================================
// Syntax highlighitng Syntax highlighting
// ========================================================================== */
.highlight { .highlight {
padding: 1em; padding: 1em;
@ -28,7 +28,7 @@
padding: 5px; padding: 5px;
border: none; border: none;
// line numbers /* line numbers */
&.gutter { &.gutter {
padding-right: 1rem; padding-right: 1rem;
} }

8
_sass/basically-basic/_tables.scss
View File

@ -1,12 +1,12 @@
// /* ==========================================================================
// Tables Tables
// ========================================================================== */
table { table {
width: 100%; width: 100%;
@include fluid-type($min-vw, $max-vw, 12px, 18px); @include fluid-type($min-vw, $max-vw, 12px, 18px);
border-collapse: collapse; border-collapse: collapse;
// For Firefox to horizontally scroll wider tables. /* For Firefox to horizontally scroll wider tables */
word-break: normal; word-break: normal;
word-break: keep-all; word-break: keep-all;
} }

53
_sass/basically-basic/_variables.scss
View File

@ -1,50 +1,49 @@
// /* ==========================================================================
// Variables Variables
// ========================================================================== */
// Breakpoint widths /* Breakpoint widths */
$small: 320px !default; $small: 320px !default;
$medium: 768px !default; $medium: 768px !default;
$large: 1024px !default; $large: 1024px !default;
$xlarge: 1280px !default; $xlarge: 1280px !default;
// Fluid type /* Fluid type */
$base-font-size: 16px !default; $base-font-size: 16px !default;
$min-vw: $small !default; $min-vw: $small !default;
$max-vw: $xlarge !default; $max-vw: $xlarge !default;
$min-font-size: 14px !default; $min-font-size: 14px !default;
$max-font-size: 18px !default; $max-font-size: 18px !default;
// Calculate Modular Scale /* Calculate Modular Scale */
$modular-scale-1: 1.067 !default; // small $modular-scale-1: 1.067 !default; /* small */
$modular-scale-2: 1.296 !default; // large $modular-scale-2: 1.296 !default; /* large */
// Heading 1 /* Heading 1 */
$h1-min: $modular-scale-1*$modular-scale-1*$modular-scale-1*$modular-scale-1 * $base-font-size !default; $h1-min: $modular-scale-1*$modular-scale-1*$modular-scale-1*$modular-scale-1 * $base-font-size !default;
$h1-max: $modular-scale-2*$modular-scale-2*$modular-scale-2*$modular-scale-2 * $base-font-size !default; $h1-max: $modular-scale-2*$modular-scale-2*$modular-scale-2*$modular-scale-2 * $base-font-size !default;
// Heading 2 /* Heading 2 */
$h2-min: $modular-scale-1*$modular-scale-1*$modular-scale-1 * $base-font-size !default; $h2-min: $modular-scale-1*$modular-scale-1*$modular-scale-1 * $base-font-size !default;
$h2-max: $modular-scale-2*$modular-scale-2*$modular-scale-2 * $base-font-size !default; $h2-max: $modular-scale-2*$modular-scale-2*$modular-scale-2 * $base-font-size !default;
// Heading 3 /* Heading 3 */
$h3-min: $modular-scale-1*$modular-scale-1 * $base-font-size !default; $h3-min: $modular-scale-1*$modular-scale-1 * $base-font-size !default;
$h3-max: $modular-scale-2*$modular-scale-2 * $base-font-size !default; $h3-max: $modular-scale-2*$modular-scale-2 * $base-font-size !default;
// Heading 4 /* Heading 4 */
$h4-min: $modular-scale-1 * $base-font-size !default; $h4-min: $modular-scale-1 * $base-font-size !default;
$h4-max: $modular-scale-2 * $base-font-size !default; $h4-max: $modular-scale-2 * $base-font-size !default;
// Heading 5 /* Heading 5 */
$h5-min: $base-font-size !default; $h5-min: $base-font-size !default;
$h5-max: $base-font-size !default; $h5-max: $base-font-size !default;
// Heading 6 /* Heading 6 */
$h6-min: ($base-font-size / $modular-scale-1) !default; $h6-min: ($base-font-size / $modular-scale-1) !default;
$h6-max: ($base-font-size / $modular-scale-2) !default; $h6-max: ($base-font-size / $modular-scale-2) !default;
// Base font family /* Base font family */
$base-font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif !default; $base-font-family: "Fira Sans", sans-serif !default;
$base-font-family: 'Fira Sans', sans-serif; /* Other font families */
// Other font families $headline-font-family: $base-font-family !default;
$headline-font-family: $base-font-family;
$monospace-font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace !default; $monospace-font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace !default;
// Colors /* Colors */
$base-color: #393e46 !default; $base-color: #393e46 !default;
$text-color: #222831 !default; $text-color: #222831 !default;
$accent-color: #00848a !default; $accent-color: #00848a !default;
@ -53,22 +52,22 @@ $code-background-color: tint($base-color, 95%) !default;
$border-color: tint($base-color, 80%) !default; $border-color: tint($base-color, 80%) !default;
$overlay-color: $base-color !default; $overlay-color: $base-color !default;
// Max-width of the main content /* Max-width of the main content */
$main-max-width: $xlarge !default; $main-max-width: $xlarge !default;
// Width of the sidebar /* Width of the sidebar */
$sidebar-width: $small !default; $sidebar-width: $small !default;
// Background color of the sidebar /* Background color of the sidebar */
$sidebar-background-color: #fff !default; $sidebar-background-color: #fff !default;
// Border radius /* Border radius */
$border-radius: 0.25em !default; $border-radius: 0.25em !default;
// Global transition /* Global transition */
$global-transition: all 0.4s ease !default; $global-transition: all 0.4s ease !default;
// Navicon /* Navicon */
$navicon-width: 1.75em !default; $navicon-width: 1.75em !default;
$navicon-height: 0.25em !default; $navicon-height: 0.25em !default;
$navicon-duration: 0.5s !default; $navicon-duration: 0.5s !default;
@ -77,5 +76,5 @@ $navicon-nav-bg-close: transparent !default;
$navicon-nav-bg-open: transparent !default; $navicon-nav-bg-open: transparent !default;
$navicon-content-bg: $text-color !default; $navicon-content-bg: $text-color !default;
// Susy grid settings /* Susy grid settings */
$susy: (columns: 16, gutters: 0, math: fluid, output: float) !default; $susy: (columns: 16, gutters: 0, math: fluid, output: float) !default;