_sass/scss/_reusable.scss in doccoli-jekyll-1.1.3 vs _sass/scss/_reusable.scss in doccoli-jekyll-1.1.4

- old
+ new

@@ -1,566 +1 @@ -article, -aside, -details, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -html { - font-size: 100%; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - font-size: 1em; - line-height: 1.4; - text-rendering: optimizelegibility; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-backface-visibility: hidden; -} - -body { - color: rgba(0, 0, 0, 0.85); - background: aliceblue; - margin: 0; - font-family: 'EB Garamond', serif; - font-smooth: always; - -webkit-font-smoothing: subpixel-antialiased; - text-rendering: optimizelegibility; - font-display: swap; - font-display: optional; - -moz-osx-font-smoothing: grayscale; - -webkit-osx-font-smoothing: antialiased; -} - - -/* Anchors */ - -a { - color: #1177FF; - text-decoration: none; - text-rendering: optimizelegibility; - outline: 0; - &:focus, - &:active, - &:hover { - outline: 0; - } -} - - -/* Typography */ - -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0; - font-family: 'proxima-nova', Arial, sans-serif; -} - -h1 { - font-size: 280%; - font-weight: normal; -} - -h2 { - font-size: 200%; - font-weight: normal; -} - -h3 { - font-size: 150%; -} - -h4 { - font-size: 125%; -} - -h5 { - font-size: 110%; -} - -h6 { - font-size: 100%; -} - -b, -strong { - font-weight: bold; -} - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - display: block; - height: 1px; - border: 0; - border-top: 2px solid #1177FF; - margin: 1em 0; - padding: 0; -} - -p { - margin: .8em 0; -} - -menu, -ul, -ol { - margin: 0; - padding: 0; -} - -menu, -ul { - list-style-image: none; - list-style: none; -} - -nav ul { - list-style: none; - list-style-image: none; -} - -img { - border: 0; - -ms-interpolation-mode: bicubic; -} - - -/* Code formatting */ - -pre, -code { - border: 1px solid #e8e8e8; - border-radius: 3px; - background-color: #eff; -} - -code { - padding: 1px 5px; -} - -pre { - padding: 8px 12px; - overflow-x: auto; - >code { - border: 0; - padding-right: 0; - padding-left: 0; - } -} - -blockquote { - color: #333; - border-left: 10px solid #1177FF; - letter-spacing: -1px; - padding: 1em; - margin: 2em auto; - font-style: italic; - background: #fffafa; - > :last-child { - margin-bottom: 0; - } -} - - -/*-- Coloring pseudos text selection/inactive state. Sooth! :D --*/ - -* { - box-sizing: border-box; - &:after { - box-sizing: border-box; - } - &:before { - box-sizing: border-box; - } -} - -::-moz-selection { - background: #a7d7ff; - color: #000; - text-shadow: none; -} - -::selection { - background: #a7d7ff; - color: #000; - text-shadow: none; - &:window-inactive { - background: #eaeaea; - color: #000; - } -} - -input:-webkit-autofill { - -webkit-box-shadow: 0 0 1000px #FBFBFB inset; -} - -::-webkit-input-placeholder { - color: #555; - font-size: 15px; -} - -:-moz-placeholder { - color: #555; - font-size: 15px; -} - -::-moz-placeholder { - color: #555; - font-size: 14px; -} - -:-ms-input-placeholder { - color: #555; - font-size: 14px; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 1vw; - vertical-align: top; -} - - -/* Element Positioning */ - -.container { - margin: 44px 0 0 0; - background: white; -} - -.wrapper { - margin: 0 auto; -} - -.left { - float: left; - left: 0; -} - -.right { - float: right; - right: 0; -} - -.center { - text-align: center; - margin: 0 auto; -} - -.centerize { - margin: 0 auto; -} - -.fixed { - position: fixed; - will-change: transform; - transform: translateZ(0); -} - -.top { - top: 0; -} - -.bottom { - bottom: 0px; -} - -.absolute-center { - margin: auto; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} - -.flex { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; -} - -.fold { - min-height: calc(90vh - 45px); - max-width: 100vw; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; -} - - -/* -- Push aside, out & away ---*/ - -.side-gap { - margin-right: .5em; - margin-left: .5em; -} - -.top-gap { - margin-top: .5em; -} - -.double-top-gap { - margin-top: 1em; -} - -.bottom-gap { - margin-bottom: 1em; -} - -.double-bottom-gap { - margin-bottom: 2em; -} - -.pad { - padding: 0.5em 1em; -} - -.pad-vertically { - padding: 1em 0; -} - -.pad-horizontally { - padding: 0 1em; -} - - -/* -- Text --*/ - -.justify { - text-align: justify; -} - -.uppercase { - text-transform: uppercase; -} - -.lowercase { - text-transform: lowercase; -} - -.camelcase { - text-transform: capitalize; -} - -.italics { - font-style: italic; -} - -menu.horizontal-list li, -ul.horizontal-list li { - float: left; -} - -.will-change { - will-change: transform; - transform: translate3d(0, 0, 0); -} - -.unpointable { - pointer-events: none; -} - -.pointable { - pointer-events: auto; -} - -.ir { - background-color: transparent; - border: 0; - overflow: hidden; - *text-indent: -9999px; - &:before { - content: ""; - display: block; - width: 0; - height: 150%; - } -} - -.hidden { - display: none !important; - visibility: hidden; -} - -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - &.focusable { - &:active, - &:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; - } - } -} - -.invisible { - visibility: hidden; -} - -.clearfix { - &:before { - content: " "; - display: table; - } - &:after { - content: " "; - display: table; - clear: both; - } - *zoom: 1; -} - -@media (orientation: portrait) { - body { - .hide-on-mobiles { - display: none; - } - .display-on-mobiles { - display: inline-block; - } - .divide-in-half { - width: 90vw; - } - .one-half { - width: 100%; - } - .one-third { - width: 100%; - } - .two-third { - width: 100%; - } - .shrink { - width: 95%; - } - .align { - margin: 0 auto; - text-align: center; - } - - } -} - -@media (orientation: landscape) { - body { - .hide-on-mobiles { - display: marker; - } - .display-on-mobiles { - display: none; - } - .divide-in-half { - width: 50vw; - } - .one-half { - width: 50%; - } - .one-third { - width: 33.33333%; - } - .two-third { - width: 66.66666%; - } - .shrink { - width: 90%; - } - .align { - margin: 0 0; - } - .container { - width: calc(100vw - 208px); - margin-left: 208px; - } - } -} - -@media print, -(-o-min-device-pixel-ratio: 5 / 4), -(-webkit-min-device-pixel-ratio: 1.25), -(min-resolution: 120dpi) { - /* Style adjustments for high resolution devices */ -} - -@media print { - * { - background: transparent !important; - color: #000 !important; - box-shadow: none !important; - text-shadow: none !important; - } - a { - text-decoration: underline; - &:visited { - text-decoration: underline; - } - &[href]:after { - content: " (" attr(href) ")"; - } - } - abbr[title]:after { - content: " (" attr(title) ")"; - } - .ir a:after { - content: ""; - } - a { - &[href^="javascript:"]:after, - &[href^="#"]:after { - content: ""; - } - } - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - thead { - display: table-header-group; - } - tr { - page-break-inside: avoid; - } - img { - page-break-inside: avoid; - max-width: 100% !important; - } - @page { - margin: 0.5cm; - } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - h2, - h3 { - page-break-after: avoid; - } -} \ No newline at end of file