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
*/
// Mixins and Functions
/* Mixins and functions */
@import "basically-basic/vendor/susy";
@import "basically-basic/vendor/breakpoint";
@include breakpoint-set("to ems", true);
@import "basically-basic/mixins";
// Variables
/* Variables */
@import "basically-basic/variables";
// Core CSS
/* Core CSS */
@import "basically-basic/reset";
@import "basically-basic/base";
@import "basically-basic/layout";
@import "basically-basic/tables";
// @import "basically-basic/forms";
@import "basically-basic/syntax-highlighting";
// Components
/* Components */
@import "basically-basic/global";
@import "basically-basic/sidebar";
@import "basically-basic/navigation";
@import "basically-basic/header";
@import "basically-basic/footer";
@import "basically-basic/entries";
@import "basically-basic/buttons";
@ -34,6 +31,7 @@
@import "basically-basic/intro";
@import "basically-basic/navicons";
@import "basically-basic/contact-lists";
@import "basically-basic/syntax-highlighting";
// Utility classes
/* Utility classes */
@import "basically-basic/utilities";

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

@ -1,6 +1,6 @@
//
// Base elements
//
/* ==========================================================================
Base elements
========================================================================== */
html {
@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 {
display: inline-block;
@ -27,7 +27,7 @@
margin-right: 0.5em;
}
// block button fills width of parent container
/* block button fills width of parent container */
&--block {
display: block;
width: 100%;

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

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

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

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

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

@ -1,11 +1,11 @@
//
// Site wide
//
/* ==========================================================================
Site-wide
========================================================================== */
.site-title {
margin: 0;
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;
@include fluid-type($min-vw, $max-vw, 20px, 24px);
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 {
position: relative;
top: -0.05em; // fine-tune alignment
top: -0.05em; /* fine-tune alignment */
display: inline-block;
fill: currentColor;
width: 1em;

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

@ -1,44 +1,16 @@
//
// Page intro
//
/* ==========================================================================
Page intro
========================================================================== */
#intro {
// position: relative;
margin: 1rem 0 1rem;
padding-top: 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 {
// position: relative;
// color: #fff;
// text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
// z-index: 1;
// a {
// color: #fff;
// }
// remove space after last child element
/* remove space after last child element */
> *:last-child {
margin-bottom: 0;
}
@ -56,26 +28,6 @@
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 {
@include list-unstyled;

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

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

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

@ -1,6 +1,6 @@
//
// Navicons
//
/* ==========================================================================
Navicons
========================================================================== */
.navicon-button {
display: inline-block;
@ -9,7 +9,10 @@
background-color: $navicon-nav-bg-close;
transition: $navicon-duration/2;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
@include breakpoint($medium) {
margin-right: 2rem;
@ -75,7 +78,8 @@
/* Minus */
.open {
transform: scale($navicon-toggled-size);
-ms-transform: scale($navicon-toggled-size);
transform: scale($navicon-toggled-size);
}
/* Arrows */
@ -88,17 +92,22 @@
}
&:before {
transform: rotate(35deg);
transform-origin: left top;
-ms-transform: rotate(35deg);
transform: rotate(35deg);
-ms-transform-origin: left top;
transform-origin: left top;
}
&:after {
transform: rotate(-35deg);
transform-origin: left bottom;
-ms-transform: rotate(-35deg);
transform: rotate(-35deg);
-ms-transform-origin: left bottom;
transform-origin: left bottom;
}
}
.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 */
@ -106,12 +115,14 @@
&:before {
transform: translate3d(1em, 0, 0) rotate(-35deg);
transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
}
&:after {
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;
&:before {
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
&:after {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}
.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 {
@include list-unstyled;
@ -11,9 +11,9 @@
}
}
//
// Paginator
//
/*
Paginator
========================================================================== */
.pager {
@include clearfix();
@ -21,11 +21,14 @@
ul {
@include list-unstyled;
display: -ms-flexbox;
display: flex;
> li {
flex: 1;
justify-content: space-between;
-ms-flex: 1;
flex: 1;
-ms-flex-pack: justify;
justify-content: space-between;
}
li + li {

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

@ -1,6 +1,6 @@
//
// Sidebar
//
/* ==========================================================================
Sidebar
========================================================================== */
#sidebar {
position: fixed;
@ -12,7 +12,7 @@
pointer-events: none;
z-index: 150;
// page overlay dimmer
/* page overlay dimmer */
&:after {
content: '';
display: block;
@ -28,7 +28,7 @@
transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
}
// line hover effect
/* line hover effect */
li {
a {
@ -58,7 +58,8 @@
}
&.is--visible {
transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
&:after {
opacity: 1;
@ -67,7 +68,8 @@
> .inner {
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;
background-color: $sidebar-background-color;
box-shadow: none;
transform: translateX(-1 * $sidebar-width);
-ms-transform: translateX(-1 * $sidebar-width);
transform: translateX(-1 * $sidebar-width);
will-change: transform;
z-index: 160;
pointer-events: auto;
@ -98,7 +101,8 @@
}
@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);
}
}
@ -115,7 +119,7 @@
display: block;
}
// divider line
/* divider line */
&:after {
content: '';
position: absolute;
@ -132,13 +136,15 @@
li {
transform: translateX(-1rem);
-ms-transform: translateX(-1rem);
transform: translateX(-1rem);
opacity: 0;
transition: all 0.5s;
&.is--moved {
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 {
padding: 1em;
@ -28,7 +28,7 @@
padding: 5px;
border: none;
// line numbers
/* line numbers */
&.gutter {
padding-right: 1rem;
}

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

@ -1,12 +1,12 @@
//
// Tables
//
/* ==========================================================================
Tables
========================================================================== */
table {
width: 100%;
@include fluid-type($min-vw, $max-vw, 12px, 18px);
border-collapse: collapse;
// For Firefox to horizontally scroll wider tables.
/* For Firefox to horizontally scroll wider tables */
word-break: normal;
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;
$medium: 768px !default;
$large: 1024px !default;
$xlarge: 1280px !default;
// Fluid type
/* Fluid type */
$base-font-size: 16px !default;
$min-vw: $small !default;
$max-vw: $xlarge !default;
$min-font-size: 14px !default;
$max-font-size: 18px !default;
// Calculate Modular Scale
$modular-scale-1: 1.067 !default; // small
$modular-scale-2: 1.296 !default; // large
// Heading 1
/* Calculate Modular Scale */
$modular-scale-1: 1.067 !default; /* small */
$modular-scale-2: 1.296 !default; /* large */
/* Heading 1 */
$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;
// Heading 2
/* Heading 2 */
$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;
// Heading 3
/* Heading 3 */
$h3-min: $modular-scale-1*$modular-scale-1 * $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-max: $modular-scale-2 * $base-font-size !default;
// Heading 5
/* Heading 5 */
$h5-min: $base-font-size !default;
$h5-max: $base-font-size !default;
// Heading 6
/* Heading 6 */
$h6-min: ($base-font-size / $modular-scale-1) !default;
$h6-max: ($base-font-size / $modular-scale-2) !default;
// 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;
// Other font families
$headline-font-family: $base-font-family;
/* Base font family */
$base-font-family: "Fira Sans", sans-serif !default;
/* Other font families */
$headline-font-family: $base-font-family !default;
$monospace-font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace !default;
// Colors
/* Colors */
$base-color: #393e46 !default;
$text-color: #222831 !default;
$accent-color: #00848a !default;
@ -53,22 +52,22 @@ $code-background-color: tint($base-color, 95%) !default;
$border-color: tint($base-color, 80%) !default;
$overlay-color: $base-color !default;
// Max-width of the main content
/* Max-width of the main content */
$main-max-width: $xlarge !default;
// Width of the sidebar
/* Width of the sidebar */
$sidebar-width: $small !default;
// Background color of the sidebar
/* Background color of the sidebar */
$sidebar-background-color: #fff !default;
// Border radius
/* Border radius */
$border-radius: 0.25em !default;
// Global transition
/* Global transition */
$global-transition: all 0.4s ease !default;
// Navicon
/* Navicon */
$navicon-width: 1.75em !default;
$navicon-height: 0.25em !default;
$navicon-duration: 0.5s !default;
@ -77,5 +76,5 @@ $navicon-nav-bg-close: transparent !default;
$navicon-nav-bg-open: transparent !default;
$navicon-content-bg: $text-color !default;
// Susy grid settings
/* Susy grid settings */
$susy: (columns: 16, gutters: 0, math: fluid, output: float) !default;