diff --git a/.editorconfig b/.editorconfig index 3a287c4..5d12634 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,7 +7,7 @@ indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true -insert_final_newline = false +insert_final_newline = true [*.md] trim_trailing_whitespace = false diff --git a/.scss-lint.yml b/.scss-lint.yml index 06e5633..d4ab56d 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -22,7 +22,7 @@ linters: max_elements: 1 BorderZero: - enabled: true + enabled: false convention: zero # or `none` ChainedClasses: @@ -110,7 +110,7 @@ linters: convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern NestingDepth: - enabled: true + enabled: false max_depth: 3 ignore_parent_selectors: false @@ -155,8 +155,8 @@ linters: enabled: true QualifyingElement: - enabled: true - allow_element_with_attribute: false + enabled: false + allow_element_with_attribute: true allow_element_with_class: false allow_element_with_id: false diff --git a/_includes/footer.html b/_includes/footer.html index 4245a51..3fb6489 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -6,4 +6,4 @@

© {{ site.time | date: '%Y' }} {{ site.title }}.

{% endif %} - \ No newline at end of file + diff --git a/_includes/page-intro.html b/_includes/page-intro.html index ff3f925..cb8a968 100644 --- a/_includes/page-intro.html +++ b/_includes/page-intro.html @@ -1,4 +1,4 @@ -
+
{% if page.image %} {% assign intro_image = page.image.path | default: page.image %} {% unless intro_image contains '://' %} @@ -39,4 +39,4 @@ {% endif %} -
\ No newline at end of file +
diff --git a/_layouts/about.html b/_layouts/about.html index 5f5a357..fe13cb4 100644 --- a/_layouts/about.html +++ b/_layouts/about.html @@ -18,4 +18,4 @@ layout: default {% include footer.html %} - \ No newline at end of file + diff --git a/_layouts/cv.html b/_layouts/cv.html index 09c0915..b2165f0 100644 --- a/_layouts/cv.html +++ b/_layouts/cv.html @@ -25,4 +25,4 @@ layout: default {% include footer.html %} - \ No newline at end of file + diff --git a/_layouts/default.html b/_layouts/default.html index b1974e4..b5b4d0c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -12,17 +12,19 @@ {% include skip-links.html %} - - Menu -
- +
+ + Menu +
+ +
-
+
{% include masthead.html %} {{ content }}
- - \ No newline at end of file + diff --git a/_sass/basically-basic.scss b/_sass/basically-basic.scss index 60d8acb..c95ab41 100644 --- a/_sass/basically-basic.scss +++ b/_sass/basically-basic.scss @@ -34,4 +34,4 @@ @import 'basically-basic/syntax-highlighting'; /* Utility classes */ -@import 'basically-basic/utilities'; \ No newline at end of file +@import 'basically-basic/utilities'; diff --git a/_sass/basically-basic/_base.scss b/_sass/basically-basic/_base.scss index 3a09a10..cec266f 100644 --- a/_sass/basically-basic/_base.scss +++ b/_sass/basically-basic/_base.scss @@ -7,8 +7,8 @@ html { } body { - color: $text-color; background: $background-color; + color: $text-color; } blockquote, @@ -21,9 +21,9 @@ q { font-style: normal; font-weight: bold; - &:before { - content: '\2014'; + &::before { padding-right: 0.25rem; + content: '\2014'; } } } @@ -39,14 +39,19 @@ kbd { display: inline-block; margin: 0 0.125em; padding: 0.125em 0.5em; - background-color: rgb(247, 247, 247); - border-radius: 3px; border: 1px solid rgb(204, 204, 204); + border-radius: 3px; + background-color: rgb(247, 247, 247); text-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 2px #fff; } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { font-family: $headline-font-family; text-rendering: optimizeLegibility; /* enable common ligatures and kerning */ } @@ -102,4 +107,4 @@ a { &:hover { color: shade($accent-color, 25%); } -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_buttons.scss b/_sass/basically-basic/_buttons.scss index 4efb419..4ef4b33 100644 --- a/_sass/basically-basic/_buttons.scss +++ b/_sass/basically-basic/_buttons.scss @@ -5,13 +5,13 @@ .btn { display: inline-block; padding: 0.5em 1em; + border: 0; + border-radius: $border-radius; + background-color: $accent-color; color: #fff; font-weight: bold; text-align: center; text-decoration: none; - background-color: $accent-color; - border: 0; - border-radius: $border-radius; cursor: pointer; &:hover { @@ -36,4 +36,4 @@ margin-top: 1rem; } } -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_contact-lists.scss b/_sass/basically-basic/_contact-lists.scss index 058475a..2bb5912 100644 --- a/_sass/basically-basic/_contact-lists.scss +++ b/_sass/basically-basic/_contact-lists.scss @@ -8,4 +8,4 @@ .icon { margin-right: 0.25em; } -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_entries.scss b/_sass/basically-basic/_entries.scss index 94b1d17..09432a3 100644 --- a/_sass/basically-basic/_entries.scss +++ b/_sass/basically-basic/_entries.scss @@ -17,9 +17,9 @@ } .entry-title { + @include fluid-type($min-vw, $max-vw, 18px, 24px); margin-bottom: 0.5rem; color: tint($text-color, 25%); - @include fluid-type($min-vw, $max-vw, 18px, 24px); line-height: inherit; a { @@ -28,8 +28,8 @@ } .entry-meta { - margin-bottom: 1rem; @include fluid-type($min-vw, $max-vw, 12px, 16px); + margin-bottom: 1rem; a { color: inherit; @@ -37,9 +37,9 @@ .byline-item { - &:not(:first-child):before { - content: '\00b7'; + &:not(:first-child)::before { margin: 0 0.5em; + content: '\00b7'; } } } @@ -103,7 +103,12 @@ line-height: 1.625; } - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { color: tint($text-color, 25%); } } @@ -112,8 +117,8 @@ .footnotes { margin: 2rem 0; padding-top: 1rem; - font-size: 80%; border-top: 1px solid $border-color; + font-size: 80%; } /* Read more link */ @@ -121,4 +126,4 @@ font-size: 75%; font-weight: bold; text-decoration: none; -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_footer.scss b/_sass/basically-basic/_footer.scss index d9ef315..9bd2cb0 100644 --- a/_sass/basically-basic/_footer.scss +++ b/_sass/basically-basic/_footer.scss @@ -2,12 +2,12 @@ Footer ========================================================================== */ -#footer { +.site-footer { margin-top: 4rem; - font-size: 80%; color: tint($text-color, 40%); + font-size: 80%; } .copyright { font-family: $monospace-font-family; -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_global.scss b/_sass/basically-basic/_global.scss index 225acfd..75a1ded 100644 --- a/_sass/basically-basic/_global.scss +++ b/_sass/basically-basic/_global.scss @@ -3,11 +3,11 @@ ========================================================================== */ .site-title { + @include fluid-type($min-vw, $max-vw, 20px, 24px); margin: 0; padding: 1.8125rem 1rem; 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; line-height: 1; @@ -28,8 +28,8 @@ } .site-image { - margin-right: 0.5rem; width: 50px; height: 50px; + margin-right: 0.5rem; border-radius: 50%; } diff --git a/_sass/basically-basic/_icons.scss b/_sass/basically-basic/_icons.scss index 9f78c5c..f9cd710 100644 --- a/_sass/basically-basic/_icons.scss +++ b/_sass/basically-basic/_icons.scss @@ -3,20 +3,20 @@ ========================================================================== */ .icon { + display: inline-block; position: relative; top: -0.05em; /* fine-tune alignment */ - display: inline-block; - fill: currentColor; width: 1em; height: 1em; line-height: 1; vertical-align: middle; + fill: currentColor; $icons: (bitbucket, #205081), - (codepen, #000000), + (codepen, #000), (dribbble, #ea4c89), - (email, #000000), + (email, #000), (facebook, #3b5998), (flickr, #0063dc), (github, #181717), @@ -39,4 +39,4 @@ fill: $color; } } -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_intro.scss b/_sass/basically-basic/_intro.scss index 244c5f5..7f6b3d5 100644 --- a/_sass/basically-basic/_intro.scss +++ b/_sass/basically-basic/_intro.scss @@ -2,8 +2,8 @@ Page intro ========================================================================== */ -#intro { - margin: 1rem 0 1rem; +.intro { + margin: 1rem 0; padding-top: 2rem; padding-bottom: 2rem; } @@ -13,14 +13,14 @@ margin-top: -3rem; /* compensate for intro top margin */ margin-bottom: 2rem; - &:before { - content: ''; + &::before { position: absolute; top: 0; - left: 0; right: 0; bottom: 0; + left: 0; background-color: rgba($accent-color, 0.25); + content: ''; } img { @@ -37,9 +37,9 @@ } .intro-title { + @include fluid-type($min-vw, $max-vw, 26px, 80px); margin-bottom: 0.5rem; color: tint($text-color, 25%); - @include fluid-type($min-vw, $max-vw, 26px, 80px); line-height: 1; } @@ -54,4 +54,4 @@ li { display: inline-block; } -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_layout.scss b/_sass/basically-basic/_layout.scss index 3a79f4a..fe023b7 100644 --- a/_sass/basically-basic/_layout.scss +++ b/_sass/basically-basic/_layout.scss @@ -2,39 +2,40 @@ Layout ========================================================================== */ -#wrapper { +.wrapper { min-height: 100vh; transition: $global-transition; } -#intro, #main { +.intro, +main { > .inner { padding: 0 0.5rem; @include breakpoint($small) { - padding-left: 1rem; padding-right: 1rem; + padding-left: 1rem; } @include breakpoint($medium) { - padding-left: 2rem; padding-right: 2rem; + padding-left: 2rem; } @include breakpoint($large) { - padding-left: 3rem; padding-right: 3rem; + padding-left: 3rem; } @include breakpoint($xlarge) { - padding-left: 4rem; padding-right: 4rem; + padding-left: 4rem; } } } -#main { +main { section { @include container; @@ -53,6 +54,7 @@ .layout--page { .entry-content { + @include breakpoint($large) { width: span(14 of 16); } @@ -65,27 +67,29 @@ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; @include breakpoint($medium) { -ms-flex-wrap: nowrap; - 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 { @@ -140,7 +144,7 @@ .taxonomy { - & + .taxonomy { + + .taxonomy { margin-top: 0.5rem; } diff --git a/_sass/basically-basic/_mixins.scss b/_sass/basically-basic/_mixins.scss index 7956e65..71f0610 100644 --- a/_sass/basically-basic/_mixins.scss +++ b/_sass/basically-basic/_mixins.scss @@ -1,7 +1,7 @@ -@import "mixins/color"; -@import "mixins/clearfix"; -@import "mixins/fluid-type"; -@import "mixins/float"; -@import "mixins/image"; -@import "mixins/lists"; -@import "mixins/text-truncate"; \ No newline at end of file +@import 'mixins/color'; +@import 'mixins/clearfix'; +@import 'mixins/fluid-type'; +@import 'mixins/float'; +@import 'mixins/image'; +@import 'mixins/lists'; +@import 'mixins/text-truncate'; diff --git a/_sass/basically-basic/_navicons.scss b/_sass/basically-basic/_navicons.scss index d887631..90915e5 100644 --- a/_sass/basically-basic/_navicons.scss +++ b/_sass/basically-basic/_navicons.scss @@ -6,13 +6,13 @@ display: inline-block; position: relative; padding: 1.8125rem 1rem; + transition: $navicon-duration / 2; background-color: $navicon-nav-bg-close; - transition: $navicon-duration/2; cursor: pointer; + -moz-user-select: none; + -ms-user-select: none; -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + user-select: none; @include breakpoint($medium) { margin-right: 2rem; @@ -26,19 +26,21 @@ background-color: $navicon-nav-bg-open; } - .navicon:before, .navicon:after { + .navicon::before, + .navicon::after { transition: $navicon-duration/2; } &:hover { transition: $navicon-duration; - .navicon:before, .navicon:after { - transition: $navicon-duration/2; + .navicon::before, + .navicon::after { + transition: $navicon-duration / 2; } - .navicon:before { top: (2.5 * $navicon-height); } - .navicon:after { top: (-2.5 * $navicon-height); } + .navicon::before { top: (2.5 * $navicon-height); } + .navicon::after { top: (-2.5 * $navicon-height); } } } @@ -46,40 +48,41 @@ position: relative; width: $navicon-width; height: $navicon-height; - background: $navicon-content-bg; transition: $navicon-duration; border-radius: $navicon-width; + background: $navicon-content-bg; - &:before, &:after { + &::before, + &::after { display: block; - content: ""; - height: $navicon-height; - width: $navicon-width; - background: $navicon-content-bg; position: absolute; - z-index: -1; - transition: $navicon-duration $navicon-duration/2; + width: $navicon-width; + height: $navicon-height; + transition: $navicon-duration $navicon-duration / 2; border-radius: $navicon-width; + background: $navicon-content-bg; + content: ''; + z-index: -1; } - &:before { top: (2 * $navicon-height); } - &:after { top: (-2 * $navicon-height); } + &::before { top: (2 * $navicon-height); } + &::after { top: (-2 * $navicon-height); } } -.open:not(.steps) .navicon:before, -.open:not(.steps) .navicon:after { +.open:not(.steps) .navicon::before, +.open:not(.steps) .navicon::after { top: 0 !important; } -.open .navicon:before, -.open .navicon:after { +.open .navicon::before, +.open .navicon::after { transition: $navicon-duration; } /* Minus */ .open { -ms-transform: scale($navicon-toggled-size); - transform: scale($navicon-toggled-size); + transform: scale($navicon-toggled-size); } /* Arrows */ @@ -87,42 +90,44 @@ .open.rarr .navicon, .open.uarr .navicon { - &:before, &:after { + &::before, + &::after { width: (0.6 * $navicon-width); } - &:before { + &::before { -ms-transform: rotate(35deg); - transform: rotate(35deg); + transform: rotate(35deg); -ms-transform-origin: left top; - transform-origin: left top; + transform-origin: left top; } - &:after { + &::after { -ms-transform: rotate(-35deg); - transform: rotate(-35deg); + transform: rotate(-35deg); -ms-transform-origin: left bottom; - transform-origin: left bottom; + transform-origin: left bottom; } } + .open.uarr { -ms-transform: scale($navicon-toggled-size) rotate(90deg); - transform: scale($navicon-toggled-size) rotate(90deg); + transform: scale($navicon-toggled-size) rotate(90deg); } /* Arrows */ .open.rarr .navicon { - &:before { + &::before { transform: translate3d(1em, 0, 0) rotate(-35deg); -ms-transform-origin: right top; - transform-origin: right top; + transform-origin: right top; } - &:after { + &::after { transform: translate3d(1em, 0, 0) rotate(35deg); -ms-transform-origin: right bottom; - transform-origin: right bottom; + transform-origin: right bottom; } } @@ -132,19 +137,19 @@ .navicon { background: transparent; - &:before { + &::before { -ms-transform: rotate(-45deg); - transform: rotate(-45deg); + transform: rotate(-45deg); } - &:after { + &::after { -ms-transform: rotate(45deg); - transform: rotate(45deg); + transform: rotate(45deg); } } } .open.plus { -ms-transform: scale($navicon-toggled-size) rotate(45deg); - transform: scale($navicon-toggled-size) rotate(45deg); -} \ No newline at end of file + transform: scale($navicon-toggled-size) rotate(45deg); +} diff --git a/_sass/basically-basic/_navigation.scss b/_sass/basically-basic/_navigation.scss index c9f9841..dd58358 100644 --- a/_sass/basically-basic/_navigation.scss +++ b/_sass/basically-basic/_navigation.scss @@ -26,9 +26,9 @@ > li { -ms-flex: 1; - flex: 1; + flex: 1; -ms-flex-pack: justify; - justify-content: space-between; + justify-content: space-between; } li + li { @@ -39,15 +39,15 @@ a { display: block; padding: 1em; + border-radius: $border-radius; + background-color: $accent-color; color: #fff; font-weight: bold; text-align: center; text-decoration: none; - background-color: $accent-color; - border-radius: $border-radius; &:hover { background-color: tint($accent-color, 20%); } } -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_reset.scss b/_sass/basically-basic/_reset.scss index 3303512..2fface1 100644 --- a/_sass/basically-basic/_reset.scss +++ b/_sass/basically-basic/_reset.scss @@ -10,13 +10,15 @@ ========================================================================== */ html { - box-sizing: border-box; font-family: $base-font-family; /* 1 */ + box-sizing: border-box; -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } -*, *:before, *:after { +*, +*::before, +*::after { box-sizing: inherit; } @@ -50,7 +52,18 @@ section { * */ -h1, h2, h3, h4, h5, h6, p, pre, blockquote, dl, table, address { +h1, +h2, +h3, +h4, +h5, +h6, +p, +pre, +blockquote, +dl, +table, +address { margin-top: 0; margin-bottom: 1.5rem; } @@ -69,7 +82,10 @@ h1 { * */ -h1, h2, h3, h4 { +h1, +h2, +h3, +h4 { line-height: 1.2; } @@ -101,9 +117,9 @@ figure { */ hr { - box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ + box-sizing: content-box; /* 1 */ } /** @@ -159,15 +175,7 @@ abbr[title] { b, strong { font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; + font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari. */ } /** @@ -213,8 +221,8 @@ small { */ blockquote { - margin-left: 0; margin-right: 0; + margin-left: 0; padding: 0 1rem; border-left: solid 0.25rem; @@ -230,9 +238,9 @@ blockquote { sub, sup { + position: relative; font-size: 75%; line-height: 0; - position: relative; vertical-align: baseline; } @@ -248,7 +256,8 @@ sup { * Remove margin */ -ul, ol { +ul, +ol { margin-top: 0; } @@ -306,10 +315,10 @@ input, optgroup, select, textarea { + margin: 0; /* 2 */ font-family: $base-font-family; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ } /** @@ -353,8 +362,8 @@ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; padding: 0; + border-style: none; } /** @@ -373,9 +382,9 @@ button:-moz-focusring, */ fieldset { - border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; } /** @@ -386,12 +395,12 @@ fieldset { */ legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ + color: inherit; /* 2 */ white-space: normal; /* 1 */ + box-sizing: border-box; /* 1 */ } /** @@ -419,8 +428,8 @@ textarea { [type="checkbox"], [type="radio"] { - box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ + box-sizing: border-box; /* 1 */ } /** @@ -438,8 +447,8 @@ textarea { */ [type="search"] { - -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ } /** @@ -457,8 +466,8 @@ textarea { */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ } /* Interactive @@ -510,4 +519,4 @@ template { [hidden] { display: none; -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_sidebar.scss b/_sass/basically-basic/_sidebar.scss index c478488..490c731 100644 --- a/_sass/basically-basic/_sidebar.scss +++ b/_sass/basically-basic/_sidebar.scss @@ -2,56 +2,67 @@ Sidebar ========================================================================== */ -#sidebar { +.sidebar { position: fixed; - left: 0; top: 0; + left: 0; width: 100%; height: 100%; overflow: hidden; - pointer-events: none; z-index: 150; + pointer-events: none; /* page overlay dimmer */ - &:after { - content: ''; + &::after { display: block; position: absolute; - left: 0; top: 0; + left: 0; width: 100%; height: 100%; - background: rgba($base-color, 0.5); - opacity: 0; - will-change: opacity; - pointer-events: none; transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1); + background: rgba($base-color, 0.5); + content: ''; + opacity: 0; + pointer-events: none; + will-change: opacity; } - /* line hover effect */ li { + -ms-transform: translateX(-1rem); + transform: translateX(-1rem); + transition: all 0.5s; + opacity: 0; + + &.is--moved { + -ms-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + + /* line hover effect */ a { position: relative; color: $base-color; - &:before { - content: ''; + &::before { display: block; position: absolute; top: 50%; left: -3rem; - height: 1px; width: 0; - background-color: $base-color; + height: 1px; transition: width 0.3s cubic-bezier(0, 0, 0.3, 1); + background-color: $base-color; + content: ''; } &:hover { color: $accent-color; } - &:hover:before { + &:hover::before { width: 2.5rem; } } @@ -59,7 +70,7 @@ &.is--visible { -ms-transform: translateX(0); - transform: translateX(0); + transform: translateX(0); &:after { opacity: 1; @@ -67,9 +78,9 @@ } > .inner { - box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125); -ms-transform: none; - transform: none; + transform: none; + box-shadow: 0 1em 5em 0 rgba(0, 0, 0, 0.125); } } @@ -83,17 +94,17 @@ > .inner { position: relative; - padding: 1.5em; width: 100%; max-width: $sidebar-width; height: 100%; - overflow-x: hidden; + padding: 1.5em; + -ms-transform: translateX(-1 * $sidebar-width); + transform: translateX(-1 * $sidebar-width); background-color: $sidebar-background-color; box-shadow: none; - -ms-transform: translateX(-1 * $sidebar-width); - transform: translateX(-1 * $sidebar-width); - will-change: transform; z-index: 160; + will-change: transform; + overflow-x: hidden; pointer-events: auto; @include breakpoint($medium) { @@ -102,16 +113,16 @@ @include breakpoint($large) { -ms-transform: translateX(-1.5 * $sidebar-width); - transform: translateX(-1.5 * $sidebar-width); + transform: translateX(-1.5 * $sidebar-width); max-width: (1.5 * $sidebar-width); } } .menu { + @include fluid-type($min-vw, $max-vw, 24px, 48px); position: relative; margin-bottom: 1.5rem; padding-bottom: 0.5rem; - @include fluid-type($min-vw, $max-vw, 24px, 48px); font-weight: bold; line-height: 1; @@ -120,13 +131,13 @@ } /* divider line */ - &:after { - content: ''; + &::after { position: absolute; bottom: 0; width: 1.5em; height: 1px; background-color: $base-color; + content: ''; } li { @@ -136,16 +147,7 @@ li { - -ms-transform: translateX(-1rem); - transform: translateX(-1rem); - opacity: 0; - transition: all 0.5s; - &.is--moved { - opacity: 1; - -ms-transform: translateX(0); - transform: translateX(0); - } } .contact-list { @@ -165,10 +167,10 @@ } } -#sidebar-toggle { +.sidebar-toggle-wrapper { position: fixed; top: 0.675rem; right: 0; cursor: pointer; z-index: 10000; -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_syntax-highlighting.scss b/_sass/basically-basic/_syntax-highlighting.scss index d9d1309..eebdff5 100644 --- a/_sass/basically-basic/_syntax-highlighting.scss +++ b/_sass/basically-basic/_syntax-highlighting.scss @@ -8,120 +8,120 @@ pre { margin: 0; + width: 100%; } - .lineno { - color: tint($base-color, 50%); - } -} + table { + margin: 0; + border: 0; + font-size: 1em; -.highlight table { - margin: 0; - font-size: 1em; - border: none; + tr { + border: 0; + } - tr { - border: none; - } + td { + padding: 5px; + border: 0; - td { - padding: 5px; - border: none; + /* line numbers gutter */ + &.gutter { + padding-right: 1rem; + } + } - /* line numbers */ - &.gutter { - padding-right: 1rem; + pre { + margin: 0; } } - pre { - margin: 0; + /* line numbers */ + .lineno { + color: tint($base-color, 50%); } + + /* + Solarized Light + http://ethanschoonover.com/solarized + + SOLARIZED HEX ROLE + --------- -------- ------------------------------------------ + base01 #586e75 body text / default code / primary content + base1 #93a1a1 comments / secondary content + base3 #fdf6e3 background + orange #cb4b16 constants + red #dc322f regex, special keywords + blue #22b3eb reserved keywords + cyan #2aa198 strings, numbers + green #859900 operators, other keywords + ========================================================================== */ + + .c { color: #93a1a1; } /* Comment */ + .err { color: #586e75; } /* Error */ + .g { color: #586e75; } /* Generic */ + .k { color: #859900; } /* Keyword */ + .l { color: #586e75; } /* Literal */ + .n { color: #586e75; } /* Name */ + .o { color: #859900; } /* Operator */ + .x { color: #cb4b16; } /* Other */ + .p { color: #586e75; } /* Punctuation */ + .cm { color: #93a1a1; } /* Comment.Multiline */ + .cp { color: #859900; } /* Comment.Preproc */ + .c1 { color: #93a1a1; } /* Comment.Single */ + .cs { color: #859900; } /* Comment.Special */ + .gd { color: #2aa198; } /* Generic.Deleted */ + .ge { color: #586e75; font-style: italic; } /* Generic.Emph */ + .gr { color: #dc322f; } /* Generic.Error */ + .gh { color: #cb4b16; } /* Generic.Heading */ + .gi { color: #859900; } /* Generic.Inserted */ + .go { color: #586e75; } /* Generic.Output */ + .gp { color: #586e75; } /* Generic.Prompt */ + .gs { color: #586e75; font-weight: bold; } /* Generic.Strong */ + .gu { color: #cb4b16; } /* Generic.Subheading */ + .gt { color: #586e75; } /* Generic.Traceback */ + .kc { color: #cb4b16; } /* Keyword.Constant */ + .kd { color: #22b3eb; } /* Keyword.Declaration */ + .kn { color: #859900; } /* Keyword.Namespace */ + .kp { color: #859900; } /* Keyword.Pseudo */ + .kr { color: #22b3eb; } /* Keyword.Reserved */ + .kt { color: #dc322f; } /* Keyword.Type */ + .ld { color: #586e75; } /* Literal.Date */ + .m { color: #2aa198; } /* Literal.Number */ + .s { color: #2aa198; } /* Literal.String */ + .na { color: #586e75; } /* Name.Attribute */ + .nb { color: #B58900; } /* Name.Builtin */ + .nc { color: #22b3eb; } /* Name.Class */ + .no { color: #cb4b16; } /* Name.Constant */ + .nd { color: #22b3eb; } /* Name.Decorator */ + .ni { color: #cb4b16; } /* Name.Entity */ + .ne { color: #cb4b16; } /* Name.Exception */ + .nf { color: #22b3eb; } /* Name.Function */ + .nl { color: #586e75; } /* Name.Label */ + .nn { color: #586e75; } /* Name.Namespace */ + .nx { color: #586e75; } /* Name.Other */ + .py { color: #586e75; } /* Name.Property */ + .nt { color: #22b3eb; } /* Name.Tag */ + .nv { color: #22b3eb; } /* Name.Variable */ + .ow { color: #859900; } /* Operator.Word */ + .w { color: #586e75; } /* Text.Whitespace */ + .mf { color: #2aa198; } /* Literal.Number.Float */ + .mh { color: #2aa198 } /* Literal.Number.Hex */ + .mi { color: #2aa198 } /* Literal.Number.Integer */ + .mo { color: #2aa198 } /* Literal.Number.Oct */ + .sb { color: #93a1a1 } /* Literal.String.Backtick */ + .sc { color: #2aa198 } /* Literal.String.Char */ + .sd { color: #586e75 } /* Literal.String.Doc */ + .s2 { color: #2aa198 } /* Literal.String.Double */ + .se { color: #cb4b16 } /* Literal.String.Escape */ + .sh { color: #586e75 } /* Literal.String.Heredoc */ + .si { color: #2aa198 } /* Literal.String.Interpol */ + .sx { color: #2aa198 } /* Literal.String.Other */ + .sr { color: #dc322f } /* Literal.String.Regex */ + .s1 { color: #2aa198 } /* Literal.String.Single */ + .ss { color: #2aa198 } /* Literal.String.Symbol */ + .bp { color: #22b3eb } /* Name.Builtin.Pseudo */ + .vc { color: #22b3eb } /* Name.Variable.Class */ + .vg { color: #22b3eb } /* Name.Variable.Global */ + .vi { color: #22b3eb } /* Name.Variable.Instance */ + .il { color: #2aa198 } /* Literal.Number.Integer.Long */ } - -.highlight pre { width: 100%; } - -/* - Solarized Light - http://ethanschoonover.com/solarized - - SOLARIZED HEX ROLE - --------- -------- ------------------------------------------ - base01 #586e75 body text / default code / primary content - base1 #93a1a1 comments / secondary content - base3 #fdf6e3 background - orange #cb4b16 constants - red #dc322f regex, special keywords - blue #22b3eb reserved keywords - cyan #2aa198 strings, numbers - green #859900 operators, other keywords - ========================================================================== */ - -.highlight .c { color: #93a1a1 } /* Comment */ -.highlight .err { color: #586e75 } /* Error */ -.highlight .g { color: #586e75 } /* Generic */ -.highlight .k { color: #859900 } /* Keyword */ -.highlight .l { color: #586e75 } /* Literal */ -.highlight .n { color: #586e75 } /* Name */ -.highlight .o { color: #859900 } /* Operator */ -.highlight .x { color: #cb4b16 } /* Other */ -.highlight .p { color: #586e75 } /* Punctuation */ -.highlight .cm { color: #93a1a1 } /* Comment.Multiline */ -.highlight .cp { color: #859900 } /* Comment.Preproc */ -.highlight .c1 { color: #93a1a1 } /* Comment.Single */ -.highlight .cs { color: #859900 } /* Comment.Special */ -.highlight .gd { color: #2aa198 } /* Generic.Deleted */ -.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #dc322f } /* Generic.Error */ -.highlight .gh { color: #cb4b16 } /* Generic.Heading */ -.highlight .gi { color: #859900 } /* Generic.Inserted */ -.highlight .go { color: #586e75 } /* Generic.Output */ -.highlight .gp { color: #586e75 } /* Generic.Prompt */ -.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #cb4b16 } /* Generic.Subheading */ -.highlight .gt { color: #586e75 } /* Generic.Traceback */ -.highlight .kc { color: #cb4b16 } /* Keyword.Constant */ -.highlight .kd { color: #22b3eb } /* Keyword.Declaration */ -.highlight .kn { color: #859900 } /* Keyword.Namespace */ -.highlight .kp { color: #859900 } /* Keyword.Pseudo */ -.highlight .kr { color: #22b3eb } /* Keyword.Reserved */ -.highlight .kt { color: #dc322f } /* Keyword.Type */ -.highlight .ld { color: #586e75 } /* Literal.Date */ -.highlight .m { color: #2aa198 } /* Literal.Number */ -.highlight .s { color: #2aa198 } /* Literal.String */ -.highlight .na { color: #586e75 } /* Name.Attribute */ -.highlight .nb { color: #B58900 } /* Name.Builtin */ -.highlight .nc { color: #22b3eb } /* Name.Class */ -.highlight .no { color: #cb4b16 } /* Name.Constant */ -.highlight .nd { color: #22b3eb } /* Name.Decorator */ -.highlight .ni { color: #cb4b16 } /* Name.Entity */ -.highlight .ne { color: #cb4b16 } /* Name.Exception */ -.highlight .nf { color: #22b3eb } /* Name.Function */ -.highlight .nl { color: #586e75 } /* Name.Label */ -.highlight .nn { color: #586e75 } /* Name.Namespace */ -.highlight .nx { color: #586e75 } /* Name.Other */ -.highlight .py { color: #586e75 } /* Name.Property */ -.highlight .nt { color: #22b3eb } /* Name.Tag */ -.highlight .nv { color: #22b3eb } /* Name.Variable */ -.highlight .ow { color: #859900 } /* Operator.Word */ -.highlight .w { color: #586e75 } /* Text.Whitespace */ -.highlight .mf { color: #2aa198 } /* Literal.Number.Float */ -.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */ -.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */ -.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */ -.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */ -.highlight .sc { color: #2aa198 } /* Literal.String.Char */ -.highlight .sd { color: #586e75 } /* Literal.String.Doc */ -.highlight .s2 { color: #2aa198 } /* Literal.String.Double */ -.highlight .se { color: #cb4b16 } /* Literal.String.Escape */ -.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */ -.highlight .si { color: #2aa198 } /* Literal.String.Interpol */ -.highlight .sx { color: #2aa198 } /* Literal.String.Other */ -.highlight .sr { color: #dc322f } /* Literal.String.Regex */ -.highlight .s1 { color: #2aa198 } /* Literal.String.Single */ -.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */ -.highlight .bp { color: #22b3eb } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #22b3eb } /* Name.Variable.Class */ -.highlight .vg { color: #22b3eb } /* Name.Variable.Global */ -.highlight .vi { color: #22b3eb } /* Name.Variable.Instance */ -.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/_sass/basically-basic/_tables.scss b/_sass/basically-basic/_tables.scss index aa6f136..8e0eaef 100644 --- a/_sass/basically-basic/_tables.scss +++ b/_sass/basically-basic/_tables.scss @@ -3,8 +3,8 @@ ========================================================================== */ table { - width: 100%; @include fluid-type($min-vw, $max-vw, 12px, 18px); + width: 100%; border-collapse: collapse; /* For Firefox to horizontally scroll wider tables */ word-break: normal; @@ -13,12 +13,14 @@ table { thead { - th, td { + th, + td { background-color: tint($base-color, 80%); } } -th, td { +th, +td { border-bottom: 1px solid $border-color; } @@ -32,6 +34,8 @@ td { padding: 0.5em; } -tr, td, th { +tr, +td, +th { vertical-align: middle; -} \ No newline at end of file +} diff --git a/_sass/basically-basic/_utilities.scss b/_sass/basically-basic/_utilities.scss index 7ab71e5..fd261bf 100644 --- a/_sass/basically-basic/_utilities.scss +++ b/_sass/basically-basic/_utilities.scss @@ -1,5 +1,5 @@ -@import "utilities/accessibility"; -@import "utilities/align"; -@import "utilities/clearfix"; -@import "utilities/float"; -@import "utilities/text"; \ No newline at end of file +@import 'utilities/accessibility'; +@import 'utilities/align'; +@import 'utilities/clearfix'; +@import 'utilities/float'; +@import 'utilities/text'; diff --git a/_sass/basically-basic/_variables.scss b/_sass/basically-basic/_variables.scss index 954a8f1..067a016 100644 --- a/_sass/basically-basic/_variables.scss +++ b/_sass/basically-basic/_variables.scss @@ -19,14 +19,14 @@ $max-font-size: 18px !default; $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; +$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 */ -$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-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 */ -$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-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 */ $h4-min: $modular-scale-1 * $base-font-size !default; $h4-max: $modular-scale-2 * $base-font-size !default; @@ -47,7 +47,7 @@ $monospace-font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospa $base-color: #393e46 !default; $text-color: #222831 !default; $accent-color: #00848a !default; -$background-color: #ffffff !default; +$background-color: #fff !default; $code-background-color: tint($base-color, 95%) !default; $border-color: tint($base-color, 80%) !default; $overlay-color: $base-color !default; @@ -77,4 +77,4 @@ $navicon-nav-bg-open: transparent !default; $navicon-content-bg: $text-color !default; /* Susy grid settings */ -$susy: (columns: 16, gutters: 0, math: fluid, output: float) !default; \ No newline at end of file +$susy: (columns: 16, gutters: 0, math: fluid, output: float) !default; diff --git a/_sass/basically-basic/mixins/_clearfix.scss b/_sass/basically-basic/mixins/_clearfix.scss index 015be8c..bd93049 100644 --- a/_sass/basically-basic/mixins/_clearfix.scss +++ b/_sass/basically-basic/mixins/_clearfix.scss @@ -1,11 +1,11 @@ -// -// Clearfix Mixin -// +/* ========================================================================== + Clearfix Mixin + ========================================================================== */ @mixin clearfix() { &::after { display: block; - content: ""; clear: both; + content: ''; } } diff --git a/_sass/basically-basic/mixins/_color.scss b/_sass/basically-basic/mixins/_color.scss index f796a89..80be545 100644 --- a/_sass/basically-basic/mixins/_color.scss +++ b/_sass/basically-basic/mixins/_color.scss @@ -1,6 +1,6 @@ -// -// Color Functions -// +/* ========================================================================== + Color Functions + ========================================================================== */ /// Slightly lighten a color /// @access public @@ -8,7 +8,7 @@ /// @param {Number} $percentage - percentage of `$color` in returned color /// @return {Color} @function tint($color, $percentage) { - @return mix(white, $color, $percentage); + @return mix(#fff, $color, $percentage); } /// Slightly darken a color @@ -17,5 +17,5 @@ /// @param {Number} $percentage - percentage of `$color` in returned color /// @return {Color} @function shade($color, $percentage) { - @return mix(black, $color, $percentage); -} \ No newline at end of file + @return mix(#000, $color, $percentage); +} diff --git a/_sass/basically-basic/mixins/_float.scss b/_sass/basically-basic/mixins/_float.scss index 1abddbe..a5bab5b 100644 --- a/_sass/basically-basic/mixins/_float.scss +++ b/_sass/basically-basic/mixins/_float.scss @@ -1,6 +1,6 @@ -// -// Float Mixins -// +/* ========================================================================== + Float Mixins + ========================================================================== */ @mixin float-left { float: left !important; diff --git a/_sass/basically-basic/mixins/_fluid-type.scss b/_sass/basically-basic/mixins/_fluid-type.scss index 65effe5..3eeb5c2 100644 --- a/_sass/basically-basic/mixins/_fluid-type.scss +++ b/_sass/basically-basic/mixins/_fluid-type.scss @@ -1,7 +1,7 @@ -// -// Fluid Type -// as seen on https://madebymike.com.au/writing/fluid-type-calc-examples/ -// +/* ========================================================================== + Fluid Type + as seen on https://madebymike.com.au/writing/fluid-type-calc-examples/ + ========================================================================== */ @function strip-unit($value) { @return $value / ($value * 0 + 1); @@ -17,6 +17,7 @@ & { font-size: $min-font-size; + @media screen and (min-width: $min-vw) { font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); } @@ -28,4 +29,4 @@ } @else { @error "Detected mixed units. Please use the same units for all parameters. " + $u1 +", " + $u2 + ", " + $u3 +", "+ $u4; } -} \ No newline at end of file +} diff --git a/_sass/basically-basic/mixins/_image.scss b/_sass/basically-basic/mixins/_image.scss index c2b45f2..8df8671 100644 --- a/_sass/basically-basic/mixins/_image.scss +++ b/_sass/basically-basic/mixins/_image.scss @@ -1,11 +1,13 @@ -// Image Mixins -// - Responsive image -// - Retina image +/* ========================================================================== + Image Mixins + - Responsive image + - Retina image + ========================================================================== */ - -// Responsive image -// -// Keep images from scaling beyond the width of their parents. +/* + Responsive image + Keep images from scaling beyond the width of their parents. + ========================================================================== */ @mixin img-fluid { // Part 1: Set a maximum relative to the parent @@ -15,10 +17,10 @@ height: auto; } - -// Retina image -// -// Short retina mixin for setting background-image and -size. +/* + Retina image + Short retina mixin for setting background-image and -size. + ========================================================================== */ @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { background-image: url($file-1x); diff --git a/_sass/basically-basic/mixins/_lists.scss b/_sass/basically-basic/mixins/_lists.scss index 7814532..2ca69a9 100644 --- a/_sass/basically-basic/mixins/_lists.scss +++ b/_sass/basically-basic/mixins/_lists.scss @@ -1,6 +1,6 @@ -// -// List Mixins -// +/* ========================================================================== + List Mixins + ========================================================================== */ // Unstyled keeps list items block level, just removes default browser padding and list-style @mixin list-unstyled { diff --git a/_sass/basically-basic/mixins/_text-truncate.scss b/_sass/basically-basic/mixins/_text-truncate.scss index 5a40bf5..5277c90 100644 --- a/_sass/basically-basic/mixins/_text-truncate.scss +++ b/_sass/basically-basic/mixins/_text-truncate.scss @@ -1,8 +1,10 @@ -// Text truncate -// Requires inline-block or block for proper styling +/* ========================================================================== + Text Truncate Mixin + Requires inline-block or block for proper styling + ========================================================================== */ @mixin text-truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} \ No newline at end of file +} diff --git a/_sass/basically-basic/themes/_night.scss b/_sass/basically-basic/themes/_night.scss index 64c8899..7b18a8c 100644 --- a/_sass/basically-basic/themes/_night.scss +++ b/_sass/basically-basic/themes/_night.scss @@ -7,6 +7,6 @@ $base-color: #252a34 !default; $text-color: #eaeaea !default; $accent-color: #00adb5 !default; $background-color: #252a34 !default; -$code-background-color: #ffffff !default; +$code-background-color: #fff !default; $border-color: rgba($text-color, 0.5) !default; -$overlay-color: #ffffff !default; \ No newline at end of file +$overlay-color: #fff !default; diff --git a/_sass/basically-basic/themes/_plum.scss b/_sass/basically-basic/themes/_plum.scss index 0f51173..75c573c 100644 --- a/_sass/basically-basic/themes/_plum.scss +++ b/_sass/basically-basic/themes/_plum.scss @@ -7,6 +7,6 @@ $base-color: #561050 !default; $text-color: #35013f !default; $accent-color: #951556 !default; $background-color: #e9b5d2 !default; -$code-background-color: #ffffff !default; +$code-background-color: #fff !default; $border-color: rgba($text-color, 0.5) !default; -$overlay-color: #ffffff !default; \ No newline at end of file +$overlay-color: #fff !default; diff --git a/_sass/basically-basic/themes/_sea.scss b/_sass/basically-basic/themes/_sea.scss index 6db0f52..d545f2b 100644 --- a/_sass/basically-basic/themes/_sea.scss +++ b/_sass/basically-basic/themes/_sea.scss @@ -7,6 +7,6 @@ $base-color: #41506b !default; $text-color: #90f6d7 !default; $accent-color: #35bcbf !default; $background-color: #263849 !default; -$code-background-color: #ffffff !default; +$code-background-color: #fff !default; $border-color: rgba($text-color, 0.5) !default; -$overlay-color: #ffffff !default; \ No newline at end of file +$overlay-color: #fff !default; diff --git a/_sass/basically-basic/themes/_soft.scss b/_sass/basically-basic/themes/_soft.scss index 03aae80..cb3efa6 100644 --- a/_sass/basically-basic/themes/_soft.scss +++ b/_sass/basically-basic/themes/_soft.scss @@ -7,6 +7,6 @@ $base-color: mix(#625772, #a9eee6, 75%) !default; $text-color: #625772 !default; $accent-color: #e85482 !default; $background-color: #fefaec !default; -$code-background-color: #ffffff !default; +$code-background-color: #fff !default; $border-color: rgba($text-color, 0.5) !default; -$overlay-color: #ffffff !default; \ No newline at end of file +$overlay-color: #fff !default; diff --git a/_sass/basically-basic/themes/_steel.scss b/_sass/basically-basic/themes/_steel.scss index a0f7b8d..4a6e0f2 100644 --- a/_sass/basically-basic/themes/_steel.scss +++ b/_sass/basically-basic/themes/_steel.scss @@ -7,6 +7,6 @@ $base-color: #3a4750 !default; $text-color: #303841 !default; $accent-color: #d72323 !default; $background-color: #eeeeee !default; -$code-background-color: #ffffff !default; +$code-background-color: #fff !default; $border-color: rgba($text-color, 0.25) !default; -$overlay-color: #ffffff !default; \ No newline at end of file +$overlay-color: #fff !default; diff --git a/_sass/basically-basic/utilities/_accessibility.scss b/_sass/basically-basic/utilities/_accessibility.scss index dd3a230..0fd14e9 100644 --- a/_sass/basically-basic/utilities/_accessibility.scss +++ b/_sass/basically-basic/utilities/_accessibility.scss @@ -1,49 +1,26 @@ -// -// Accessibility Modules -// +/* ========================================================================== + Accessibility Modules + ========================================================================== */ -// Skip links. +/* Skip links */ .skip-links { margin: 0; li { - height: 0; width: 0; + height: 0; list-style: none; } } -// Text meant only for screen readers. +/* Text meant only for screen readers */ .screen-reader-text, .screen-reader-text span, .screen-reader-shortcut { position: absolute !important; - clip: rect(0, 0, 0, 0); - height: 1px; width: 1px; - border: 0; - overflow: hidden; -} - -.screen-reader-text:focus, -.screen-reader-shortcut:focus, -.genesis-nav-menu .search input[type="submit"]:focus, -.widget_search input[type="submit"]:focus { - clip: auto !important; - height: auto; - width: auto; - z-index: 100000; - text-decoration: none; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); -} - -.screen-reader-text, -.screen-reader-text span, -.screen-reader-shortcut { - position: absolute !important; - clip: rect(0, 0, 0, 0); height: 1px; - width: 1px; + clip: rect(0, 0, 0, 0); border: 0; overflow: hidden; @@ -51,17 +28,29 @@ display: block; top: 5px; left: 5px; - padding: 0.75em 1em; width: auto; height: auto; + padding: 0.75em 1em; + clip: auto !important; + border-radius: 0.125em; + background-color: $base-color; color: #fff; font-weight: bold; line-height: normal; text-decoration: none; - background-color: $base-color; - border-radius: 0.125em; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; z-index: 100000; } -} \ No newline at end of file +} + +.screen-reader-text:focus, +.screen-reader-shortcut:focus, +.genesis-nav-menu .search input[type="submit"]:focus, +.widget_search input[type="submit"]:focus { + width: auto; + height: auto; + clip: auto !important; + text-decoration: none; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + z-index: 100000; +} diff --git a/_sass/basically-basic/utilities/_align.scss b/_sass/basically-basic/utilities/_align.scss index ac3bfde..d3a8bef 100644 --- a/_sass/basically-basic/utilities/_align.scss +++ b/_sass/basically-basic/utilities/_align.scss @@ -1,32 +1,32 @@ -// -// Alignment -// +/* ========================================================================== + Alignment + ========================================================================== */ -.align-baseline { vertical-align: baseline !important; } // Browser default -.align-top { vertical-align: top !important; } -.align-middle { vertical-align: middle !important; } -.align-bottom { vertical-align: bottom !important; } +.align-baseline { vertical-align: baseline !important; } // Browser default +.align-top { vertical-align: top !important; } +.align-middle { vertical-align: middle !important; } +.align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } -.align-text-top { vertical-align: text-top !important; } +.align-text-top { vertical-align: text-top !important; } -// -// Image Alignment -// +/* + Image Alignment + ========================================================================== */ .align-center, div.align-center, a img.align-center { display: block; - margin-left: auto; margin-right: auto; + margin-left: auto; } figure.align-center { img { display: block; - margin-left: auto; margin-right: auto; + margin-left: auto; } figcaption { @@ -36,23 +36,24 @@ figure.align-center { .align-right, a img.align-right { - float: right; - margin-left: 1rem; margin-bottom: 1rem; + margin-left: 1rem; + float: right; } .align-left, a img.align-left { - float: left; - margin-right: 1rem; margin-bottom: 1rem; + margin-right: 1rem; + float: left; } -// -// Sidebar pusher -// +/* + Sidebar Pusher + ========================================================================== */ .is--pushed { + @include breakpoint($medium) { padding-left: $sidebar-width; } @@ -60,4 +61,4 @@ a img.align-left { @include breakpoint($large) { padding-left: (1.5 * $sidebar-width); } -} \ No newline at end of file +} diff --git a/_sass/basically-basic/utilities/_float.scss b/_sass/basically-basic/utilities/_float.scss index 68ed0f3..fdcb2a1 100644 --- a/_sass/basically-basic/utilities/_float.scss +++ b/_sass/basically-basic/utilities/_float.scss @@ -1,7 +1,7 @@ -// -// FLoats -// +/* ========================================================================== + Floats + ========================================================================== */ -.float-left { @include float-left; } +.float-left { @include float-left; } .float-right { @include float-right; } -.float-none { @include float-none; } \ No newline at end of file +.float-none { @include float-none; } diff --git a/_sass/basically-basic/utilities/_text.scss b/_sass/basically-basic/utilities/_text.scss index f9cd429..0f53033 100644 --- a/_sass/basically-basic/utilities/_text.scss +++ b/_sass/basically-basic/utilities/_text.scss @@ -1,22 +1,28 @@ -// -// Text -// +/* ========================================================================== + Text + ========================================================================== */ -// Alignment +/* + Alignment + ========================================================================== */ -.text-justify { text-align: justify !important; } -.text-nowrap { white-space: nowrap !important; } -.text-left { text-align: left !important; } -.text-right { text-align: right !important; } -.text-center { text-align: center !important; } +.text-justify { text-align: justify !important; } +.text-nowrap { white-space: nowrap !important; } +.text-left { text-align: left !important; } +.text-right { text-align: right !important; } +.text-center { text-align: center !important; } -// Transformation +/* + Transformation + ========================================================================== */ -.text-lowercase { text-transform: lowercase !important; } -.text-uppercase { text-transform: uppercase !important; } +.text-lowercase { text-transform: lowercase !important; } +.text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .text-truncate { @include text-truncate; } -// Sizing +/* + Sizing + ========================================================================== */ -.small { font-size: 80%; } \ No newline at end of file +.small { font-size: 80%; } diff --git a/assets/javascripts/main.js b/assets/javascripts/main.js index b6bda4c..51ffe97 100644 --- a/assets/javascripts/main.js +++ b/assets/javascripts/main.js @@ -43,9 +43,9 @@ function OnTransitionEnd() { myMenu.classList.remove('is--animatable'); } -var myWrapper = document.querySelector('#wrapper'); -var myMenu = document.querySelector('#sidebar'); -var myToggle = document.querySelector('#sidebar-toggle'); +var myWrapper = document.querySelector('.wrapper'); +var myMenu = document.querySelector('.sidebar'); +var myToggle = document.querySelector('.toggle'); myMenu.addEventListener('transitionend', OnTransitionEnd, false); myToggle.addEventListener('click', function() { toggleClassMenu(); @@ -54,4 +54,4 @@ myToggle.addEventListener('click', function() { myMenu.addEventListener('click', function() { toggleClassMenu(); animateMenuItems(); -}, false); \ No newline at end of file +}, false);