aboutsummaryrefslogtreecommitdiffstats
path: root/pelican-striped-html5up/static/sass/main.scss
diff options
context:
space:
mode:
Diffstat (limited to 'pelican-striped-html5up/static/sass/main.scss')
-rw-r--r--pelican-striped-html5up/static/sass/main.scss1445
1 files changed, 1445 insertions, 0 deletions
diff --git a/pelican-striped-html5up/static/sass/main.scss b/pelican-striped-html5up/static/sass/main.scss
new file mode 100644
index 0000000..03d2b1d
--- /dev/null
+++ b/pelican-striped-html5up/static/sass/main.scss
@@ -0,0 +1,1445 @@
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@charset "UTF-8";
+@import url("font-awesome.min.css");
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700|Open+Sans+Condensed:300,700");
+
+/*
+ Striped by Pixelarity
+ pixelarity.com | hello@pixelarity.com
+ License: pixelarity.com/license
+*/
+
+ @import "libs/skel";
+
+ @include skel-breakpoints((
+ desktop: '(min-width: 737px)',
+ wide: '(min-width: 1201px)',
+ narrow: '(min-width: 737px) and (max-width: 1200px)',
+ narrower: '(min-width: 737px) and (max-width: 1000px)',
+ mobile: '(max-width: 736px)'
+ ));
+
+ @include skel-layout((
+ reset: 'full',
+ boxModel: 'border',
+ grid: ( gutters: (50px, 50px) ),
+ conditionals: true,
+ containers: 100%,
+ breakpoints: (
+ mobile: (
+ containers: (100%, true),
+ )
+ )
+ ));
+
+/* Basic */
+
+ body {
+ background-color: #e8e8e8;
+ background-image: url('images/bg02.png');
+ font-family: 'Source Sans Pro', sans-serif;
+ font-weight: 400;
+ color: #565656;
+
+ &.is-loading * {
+ @include vendor('transition', 'none !important');
+ @include vendor('animation', 'none !important');
+ }
+ }
+
+ input, textarea, select {
+ font-family: 'Source Sans Pro', sans-serif;
+ font-weight: 400;
+ color: #565656;
+ }
+
+ a {
+ color: #63ae9a;
+ }
+
+ strong, b {
+ font-weight: 700;
+ color: #232323;
+ }
+
+ h2, h3, h4, h5, h6 {
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-weight: 700;
+ color: #232323;
+ }
+
+ h2 a, h4 a, h5 a, h6 a {
+ text-decoration: none;
+ color: inherit;
+ }
+
+ blockquote {
+ border-left: solid 5px #ddd;
+ padding: 1em 0 1em 2em;
+ font-style: italic;
+ }
+
+ em, i {
+ font-style: italic;
+ }
+
+ hr {
+ border: 0;
+ border-top: solid 1px #ddd;
+ padding: 1.5em 0 0 0;
+ margin: 1.75em 0 0 0;
+ }
+
+ sub {
+ position: relative;
+ top: 0.5em;
+ font-size: 0.8em;
+ }
+
+ sup {
+ position: relative;
+ top: -0.5em;
+ font-size: 0.8em;
+ }
+
+ br.clear {
+ clear: both;
+ }
+
+ p, ul, ol, dl {
+ margin-bottom: 1em;
+ }
+
+/* Table */
+
+ table {
+ margin-bottom: 1em;
+ width: 100%;
+
+ &.default {
+ tbody {
+ tr {
+ &:nth-child(2n+2) {
+ background: #f4f4f4;
+ }
+ }
+ }
+
+ td {
+ padding: 0.5em 1em 0.5em 1em;
+ }
+
+ th {
+ text-align: left;
+ font-weight: 700;
+ padding: 0.75em 1em 0.75em 1em;
+ }
+
+ thead {
+ border-bottom: solid 1px #ddd;
+ }
+
+ tfoot {
+ border-top: solid 1px #ddd;
+ background: #eee;
+ }
+ }
+ }
+
+/* Form */
+
+ form {
+ label {
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-weight: 700;
+ color: #232323;
+ margin: 0 0 0.75em 0;
+ }
+
+ input[type="text"],
+ input[type="email"],
+ input[type="password"],
+ select,
+ textarea {
+ display: block;
+ border-radius: 0.4em;
+ -webkit-appearance: none;
+ border: solid 1px #ddd;
+ padding: 0.5em 0.75em;
+ width: 100%;
+ line-height: 1.25em;
+
+ &:focus {
+ box-shadow: 0px 0px 2px 2px #63ae9a;
+ }
+ }
+
+ ::-webkit-input-placeholder {
+ color: #aaa;
+ }
+
+ :-moz-placeholder {
+ color: #aaa;
+ }
+
+ ::-moz-placeholder {
+ color: #aaa;
+ }
+
+ :-ms-input-placeholder {
+ color: #aaa;
+ }
+ }
+
+/* Section/Article */
+
+ header {
+ margin: 0 0 2em 0;
+
+ > p {
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-weight: 300;
+ display: block;
+ margin-top: 1em;
+ color: #999;
+ }
+ }
+
+ section, article {
+ margin-bottom: 3em;
+
+ > :last-child,
+ > .inner > :last-child,
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+/* Image */
+
+ .image {
+ display: inline-block;
+
+ img {
+ display: block;
+ width: 100%;
+ }
+
+ &.fit {
+ display: block;
+ width: 100%;
+ }
+
+ &.featured {
+ display: block;
+ width: 100%;
+ margin: 0 0 2em 0;
+ }
+
+ &.left {
+ float: left;
+ margin: 0 2em 2em 0;
+ }
+
+ &.centered {
+ display: block;
+ margin: 0 0 2em 0;
+
+ img {
+ margin: 0 auto;
+ width: auto;
+ }
+ }
+ }
+
+/* Button */
+
+ input[type="button"],
+ input[type="submit"],
+ input[type="reset"],
+ button,
+ .button {
+ cursor: pointer;
+ background-color: #63ae9a;
+ background-image: url('images/bg01.png');
+ border-radius: 0.4em;
+ text-align: center;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.15);
+ color: #fff;
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-weight: 700;
+ text-decoration: none;
+ @include vendor('transition', ('background-color .25s ease-in-out', 'color .25s ease-in-out'));
+ text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
+
+ &:disabled, &.disabled {
+ opacity: 0.35;
+ cursor: default;
+ }
+
+ &:hover {
+ background-color: #73beaa;
+ }
+
+ &:active {
+ background-color: #539e8a;
+ }
+
+ &.alt {
+ background-color: #304046;
+
+ &:hover {
+ background-color: #405056;
+ }
+
+ &:active {
+ background-color: #203036;
+ }
+ }
+ }
+
+/* List */
+
+ ul {
+ &.default {
+ list-style: disc;
+ padding-left: 1em;
+
+ li {
+ padding-left: 0.5em;
+ }
+ }
+ }
+
+ ol {
+ &.default {
+ list-style: decimal;
+ padding-left: 1.25em;
+
+ li {
+ padding-left: 0.25em;
+ }
+ }
+ }
+
+/* Pagination */
+
+ .pagination {
+ .pages {
+ display: inline-block;
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-weight: 700;
+
+ span {
+ display: inline-block;
+ width: 1.5em;
+ text-align: center;
+ margin: 0 0.4em 0 0;
+ }
+
+ a {
+ cursor: pointer;
+ display: inline-block;
+ text-align: center;
+ text-decoration: none;
+ color: inherit;
+ background-color: #e8e8e8;
+ background-image: url('images/bg02.png');
+ color: #565656;
+ margin: 0 0.4em 0 0;
+ border-radius: 0.4em;
+ @include vendor('transition', 'background-color .25s ease-in-out');
+ box-shadow: inset 0 0.075em 0.25em 0 rgba(0, 0, 0, 0.1);
+
+ &:hover {
+ background-color: #dadada;
+ }
+
+ &.active {
+ background-color: #304046;
+ color: #fff;
+ box-shadow: none;
+ text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
+ }
+ }
+ }
+ }
+
+/* Box */
+
+ .box {
+ &.calendar {
+ .inner {
+ position: relative;
+ background-color: #272E39;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-radius: 0.4em;
+ padding: 0.75em 0.5em 0.75em 0.5em;
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
+ }
+
+ caption {
+ font-weight: 700;
+ color: #fff;
+ margin: 0 0 0.25em 0;
+ }
+
+ table {
+ margin: 0 auto;
+ }
+
+ td {
+ cursor: default;
+ padding: 0.35em 0 0.35em 0;
+ border-top: solid 1px rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
+ }
+
+ th {
+ cursor: default;
+ padding: 0.35em 0 0.35em 0;
+ border-top: solid 1px rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
+ font-weight: 700;
+ color: #fff;
+ }
+
+ td {
+ a, span {
+ display: block;
+ margin: 0 auto;
+ width: 1.5em;
+ height: 1.5em;
+ text-align: center;
+ line-height: 1.4em;
+ border-radius: 0.4em;
+ @include vendor('transition', 'background-color .25s ease-in-out');
+ text-decoration: none;
+ }
+
+ a {
+ color: #fff;
+ font-weight: 700;
+
+ &:hover {
+ background-color: rgba(200, 225, 255, 0.1);
+ color: #fff;
+ }
+ }
+
+ &.today {
+ a {
+ background-color: #63ae9a;
+ background-image: url('images/bg01.png');
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0 0.025em 0.15em 0em rgba(0, 0, 0, 0.25);
+ color: #fff !important;
+ }
+ }
+ }
+ }
+
+ &.post {
+ position: relative;
+
+ .info {
+ .stats {
+ margin: 0;
+ cursor: default;
+
+ a {
+ font-size: 0.8em;
+ text-decoration: none;
+ color: #232323;
+ font-weight: 700;
+ line-height: 1em;
+ }
+ }
+ }
+ }
+
+ &.recent-posts {
+ li {
+ border-top: solid 1px rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
+ padding: 0.5em 0 0.5em 0;
+
+ &:first-child {
+ border-top: 0;
+ box-shadow: none;
+ padding-top: 0;
+ }
+
+ &:last-child {
+ padding-bottom: 0;
+ }
+ }
+ }
+
+ &.recent-comments {
+ li {
+ border-top: solid 1px rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
+ padding: 0.5em 0 0.5em 0;
+
+ &:first-child {
+ border-top: 0;
+ box-shadow: none;
+ padding-top: 0;
+ }
+
+ &:last-child {
+ padding-bottom: 0;
+ }
+ }
+ }
+
+ &.search {
+ form {
+ position: relative;
+
+ input {
+ position: relative;
+ padding-right: 34px;
+ }
+
+ &:before {
+ display: inline-block;
+ font-family: FontAwesome;
+ font-size: 18px;
+ text-decoration: none;
+ font-style: normal;
+ font-weight: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: '\f002';
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+ @include vendor('transform', 'scale(-1, 1)');
+ position: absolute;
+ right: 0.5em;
+ top: 0.25em;
+ z-index: 1;
+ text-shadow: none;
+ color: #c8ccce;
+ }
+ }
+ }
+
+ &.text-style1 {
+ .inner {
+ position: relative;
+ background-color: #272E39;
+ background-color: rgba(0, 0, 0, 0.15);
+ border-radius: 0.4em;
+ padding: 1.25em;
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
+ }
+ }
+ }
+
+/* Icons */
+
+ .icon {
+ position: relative;
+ text-decoration: none;
+
+ &:before {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ text-transform: none !important;
+ }
+
+ > .label {
+ display: none;
+ }
+ }
+
+/* Nav */
+
+ #nav {
+ > ul > li > ul {
+ display: none;
+ }
+
+ ul {
+ margin: 0;
+ }
+
+ li {
+ border-top: solid 1px rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
+ padding: 0.5em 0 0.5em 0;
+
+ &:first-child {
+ border: 0;
+ box-shadow: none;
+ padding-top: 0;
+ }
+
+ &:last-child {
+ padding-bottom: 0;
+ }
+
+ a {
+ display: block;
+ padding: 0.4em 1em 0.4em 1em;
+ text-decoration: none;
+ border-radius: 0.4em;
+ outline: 0;
+ @include vendor('transition', ('background-color .25s ease-in-out', 'color .25s ease-in-out'));
+ }
+
+ &.current {
+ a {
+ background-color: #272E39 !important;
+ background-color: rgba(0, 0, 0, 0.15) !important;
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
+ font-weight: 700;
+ color: #fff;
+ }
+ }
+
+ &:hover {
+ a {
+ background-color: rgba(255, 255, 255, 0.1);
+ color: #fff;
+ }
+ }
+ }
+ }
+
+/* Sidebar */
+
+ #titleBar {
+ @include vendor('backface-visibility', 'hidden');
+ @include vendor('transition', 'transform #{_duration(sidebar)} ease');
+ display: none;
+ height: 44px;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: _misc(z-index-base) + 1;
+ background: #304046 url('images/bg01.png');
+
+ .title {
+ display: block;
+ color: #fff;
+ line-height: 44px;
+ font-size: 1.25em;
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
+ text-align: center;
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+
+ .toggle {
+ width: 80px;
+ height: 60px;
+ position: absolute;
+ top: 0;
+
+ @if _misc(sidebar-side) == 'left' {
+ left: 0;
+ }
+ @else {
+ right: 0;
+ }
+
+ &:before {
+ font-family: FontAwesome;
+ text-decoration: none;
+ font-style: normal;
+ font-weight: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: '\f0c9';
+ display: block;
+ position: absolute;
+ top: 7px;
+ font-size: 14px;
+ width: 50px;
+ height: 30px;
+ line-height: 30px;
+ background: #63ae9a url('images/bg01.png');
+ border-radius: 5px;
+ color: #fff;
+ text-align: center;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0 0.025em 0.15em 0em rgba(0, 0, 0, 0.25);
+ text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
+
+ @if _misc(sidebar-side) == 'left' {
+ left: 7px;
+ }
+ @else {
+ right: 7px;
+ }
+ }
+
+ &:active {
+ &:before {
+ background-color: #73beaa;
+ }
+ }
+ }
+ }
+
+ #sidebar {
+ color: #aaa;
+ color: rgba(255, 255, 255, 0.55);
+ text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.5);
+ width: _size(sidebar);
+ padding: 3em 1.35em 1em 1.15em;
+ background: #304046 url('images/bg01.png');
+ overflow-y: auto;
+
+ @if _misc(sidebar-side) == 'left' {
+ left: 0;
+ box-shadow: inset -0.1em 0em 0.35em 0em rgba(0, 0, 0, 0.15);
+ }
+ @else {
+ right: 0;
+ box-shadow: inset 0.1em 0em 0.35em 0em rgba(0, 0, 0, 0.15);
+ }
+
+ form {
+ input, select, textarea {
+ border: 0;
+ }
+ }
+
+ section, nav {
+ position: relative;
+ margin: 2em 0 0 0;
+ font-size: 0.9em;
+
+ &:before {
+ content: '';
+ border-top: solid 1px;
+ border-bottom: solid 1px;
+ border-color: #171E29;
+ border-color: rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075), 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
+ display: block;
+ height: 0.5em;
+ margin: 0 0 2em 0;
+ }
+ }
+
+ strong, b {
+ color: #fff;
+ }
+
+ a {
+ color: #d4dde0;
+ }
+
+ h2, h3, h4, h5, h6 {
+ color: #fff;
+ }
+
+ header {
+ margin: 0 0 1.25em 0;
+ }
+ }
+
+/* Content */
+
+ #content {
+ position: relative;
+ background-color: #fff;
+ background-image: url('images/bg02.png');
+
+ > .inner {
+ position: relative;
+ z-index: 1;
+ }
+ }
+
+/* Copyright */
+
+ #copyright {
+ padding-bottom: 2em;
+
+ p {
+ opacity: 0.75;
+ }
+
+ a {
+ color: inherit !important;
+ }
+
+ &:before {
+ content: '';
+ border-top: solid 1px;
+ border-bottom: solid 1px;
+ border-color: #171E29;
+ border-color: rgba(0, 0, 0, 0.25);
+ box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075), 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
+ display: block;
+ }
+ }
+
+/* Desktop */
+
+ @include breakpoint(desktop) {
+
+ /* Basic */
+
+ body {
+ height: 100%;
+ line-height: 1.75em;
+ }
+
+ input, textarea, select {
+ line-height: 1.75em;
+ }
+
+ h2 {
+ font-size: 1.2em;
+ }
+
+ h3, h4, h5, h6 {
+ font-size: 1em;
+ }
+
+ /* Button */
+
+ input[type="button"],
+ input[type="submit"],
+ input[type="reset"],
+ .button,
+ button {
+ display: inline-block;
+ padding: 0.5em 2em 0.5em 2em;
+
+ &.small {
+ font-size: 0.85em;
+ padding: 0.35em 1.5em 0.35em 1.5em;
+ }
+
+ &.big {
+ font-size: 1.25em;
+ padding: 0.75em 2em 0.75em 2em;
+ }
+
+ &.huge {
+ font-size: 1.5em;
+ padding: 0.75em 2em 0.75em 2em;
+ }
+ }
+
+ /* Pagination */
+
+ .pagination {
+ padding: 3em 0 0 0;
+
+ .previous {
+ margin-right: 0.6em;
+ }
+
+ .next {
+ margin-left: 0.2em;
+ }
+
+ .pages {
+ a {
+ width: 2.75em;
+ height: 2.75em;
+ line-height: 2.75em;
+ }
+ }
+
+ .button {
+ height: 2.75em;
+ padding-top: 0;
+ padding-bottom: 0;
+ line-height: 2.75em;
+ }
+ }
+
+ /* Box */
+
+ .box {
+ &.post {
+ .info {
+ .stats {
+ li {
+ a {
+ border-radius: 0.4em;
+ opacity: 0.5;
+ @include vendor('transition', ('opacity .25s ease-in-out', 'background-color .25s ease-in-out'));
+ }
+
+ &:hover {
+ a {
+ background-color: #f4f4f4;
+ opacity: 1.0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ /* Logo */
+
+ #logo {
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-weight: 700;
+ font-size: 2em;
+ letter-spacing: 0.1em;
+
+ a {
+ display: block;
+ background-color: #63ae9a;
+ background-image: url('images/bg01.png');
+ padding: 0.875em 0.25em;
+ border-radius: 0.2em;
+ text-align: center;
+ box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.15), 0 0.025em 0.15em 0em rgba(0, 0, 0, 0.25);
+ text-decoration: none;
+ color: #fff;
+ }
+ }
+
+ /* Content */
+
+ #content {
+ box-shadow: 0 0 0.25em 0em rgba(0, 0, 0, 0.25);
+
+ > .inner {
+ /*
+ This sets an upper limit on your page content to prevent it
+ from looking insane on really wide displays. It's currently set
+ to the width of the sample post images, but you can change it to
+ whatever you like (or remove it entirely).
+ */
+ max-width: 1038px;
+ padding-bottom: 6em;
+ }
+ }
+
+ /* Sidebar */
+
+ #sidebar {
+ position: absolute;
+ top: 0;
+ }
+
+ /* Copyright */
+
+ #copyright {
+ margin: 2em 0 0 0;
+ text-align: center;
+
+ p {
+ font-size: 0.8em;
+ line-height: 2em;
+ }
+
+ &:before {
+ height: 0.5em;
+ margin: 0 0 2em 0;
+ }
+ }
+
+ }
+
+/* Wide */
+
+ @include breakpoint(wide) {
+
+ /* Basic */
+
+ body {
+ min-width: 1200px;
+ font-size: 12pt;
+ }
+
+ input, textarea, select {
+ font-size: 12pt;
+ }
+
+ /* Box */
+
+ .box {
+ &.post {
+ h2 {
+ font-size: 3.25em;
+ line-height: 1.25em;
+ }
+
+ header {
+ padding: 2.75em 0 0 0;
+ margin: 0 0 3em 0;
+
+ > p {
+ font-size: 2.25em;
+ line-height: 1.5em;
+ position: relative;
+ top: -0.65em;
+ margin-bottom: -0.65em;
+ }
+ }
+
+ .info {
+ position: absolute;
+ width: 5.5em;
+ overflow: hidden;
+ background-color: #fff;
+ background-image: url('images/bg02.png');
+ left: -10.5em;
+ top: 0;
+ padding: 1.5em 1em 1.5em 1em;
+ border-top-left-radius: 0.4em;
+ border-bottom-left-radius: 0.4em;
+ box-shadow: 0.25em 0 0 0 #fbfbfb, 0 0 0.25em 0em rgba(0, 0, 0, 0.25);
+
+ .date {
+ position: relative;
+ z-index: 1;
+ font-family: 'Open Sans Condensed', sans-serif;
+ font-weight: 400;
+ text-align: center;
+ display: block;
+ font-size: 1.5em;
+ color: #999;
+ border-bottom: solid 1px #ddd;
+ padding: 0 0 1em 0;
+ margin: 0 0 0.75em 0;
+
+ .year,
+ .month span {
+ display: none;
+ }
+
+ .day {
+ display: block;
+ margin: 0.25em 0 0 0;
+ font-size: 1.5em;
+ font-weight: 700;
+ color: #1b252a;
+ }
+ }
+
+ .stats {
+ position: relative;
+ z-index: 1;
+
+ li {
+ margin: 1.25em 0 0 0;
+
+ a {
+ position: relative;
+ display: block;
+ text-align: right;
+ padding: 0 0.5em 0 0.5em;
+
+ &:before {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ margin-top: -0.5em;
+ font-size: 16px;
+ width: 1.5em;
+ text-align: center;
+ opacity: 0.35;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ /* Content */
+
+ #content {
+ padding: 3em 5em 8em 5em;
+
+ @if _misc(sidebar-side) == 'left' {
+ margin-left: _size(sidebar) + 7em;
+ }
+ @else {
+ margin-right: _size(sidebar);
+ margin-left: 7em;
+ }
+ }
+
+ }
+
+/* Narrow */
+
+ @include breakpoint(narrow) {
+
+ /* Basic */
+
+ body {
+ min-width: 1000px;
+ font-size: 11pt;
+ }
+
+ input, textarea, select {
+ font-size: 11pt;
+ }
+
+ /* Box */
+
+ .box {
+ &.post {
+ h2 {
+ font-size: 3.25em;
+ line-height: 1.25em;
+ }
+
+ header {
+ padding: 1.5em 0 0 0;
+ margin: 0 0 3em 0;
+
+ > p {
+ font-size: 1.75em;
+ line-height: 1.5em;
+ position: relative;
+ top: -0.75em;
+ margin-bottom: -0.75em;
+ }
+ }
+
+ .info {
+ width: 100%;
+ padding: 1em 0 0 0;
+ position: relative;
+ top: -2em;
+
+ .date {
+ display: inline;
+ }
+
+ .stats {
+ display: inline;
+ border-left: solid 1px #ddd;
+ margin-left: 1em;
+ padding-left: 1em;
+
+ li {
+ display: inline-block;
+ margin-left: 0.25em;
+
+ a {
+ display: inline-block;
+ padding-right: 0.5em;
+
+ &:before {
+ position: relative;
+ width: 1.75em;
+ text-align: center;
+ margin-right: 0.35em;
+ opacity: 0.35;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ /* Content */
+
+ #content {
+ padding: 2em 3em 6em 3em;
+
+ @if _misc(sidebar-side) == 'left' {
+ margin-left: _size(sidebar);
+ }
+ @else {
+ margin-right: _size(sidebar);
+ }
+ }
+
+ }
+
+/* Narrower */
+
+ @include breakpoint(narrower) {
+
+ /* Basic */
+
+ body {
+ min-width: 641px;
+ font-size: 14pt;
+ }
+
+ input, textarea, select {
+ font-size: 14pt;
+ }
+
+ /* Logo */
+
+ #logo {
+ display: none;
+ }
+
+ /* Nav */
+
+ #nav {
+ margin-top: 0 !important;
+
+ &:before {
+ display: none !important;
+ }
+
+ li {
+ &:hover {
+ a {
+ background: none;
+ }
+ }
+ }
+ }
+
+ /* Sidebar */
+
+ #sidebar {
+ padding: 30px 20px 30px 20px;
+ }
+
+ }
+
+/* Mobile */
+
+ @include breakpoint(mobile) {
+
+ /* Basic */
+
+ body, input, textarea, select {
+ line-height: 1.75em;
+ font-size: 11pt;
+ letter-spacing: 0;
+ }
+
+ h2, h3, h4, h5, h6 {
+ font-size: 1.5em;
+ }
+
+ /* Section/Article */
+
+ section, article {
+ clear: both;
+ }
+
+ /* Button */
+
+ input[type="button"],
+ input[type="submit"],
+ input[type="reset"],
+ button,
+ .button {
+ display: block;
+ width: 100%;
+ font-size: 1.25em;
+ padding: 0.75em 0 0.75em 0;
+ margin: 0.5em 0 0.5em 0;
+ }
+
+ /* Pagination */
+
+ .pagination {
+ .pages {
+ display: none;
+ }
+ }
+
+ /* Box */
+
+ .box {
+ &.post {
+ padding-bottom: 5em;
+ margin-bottom: 6em;
+
+ header {
+ > p {
+ font-size: 1em;
+ font-family: 'Source Sans Pro', sans-serif;
+ line-height: 1.5em;
+ }
+ }
+
+ .info {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ border-top: solid 1px #ddd;
+ padding-top: 0.5em;
+
+ .date {
+ display: inline;
+
+ .year, .month span {
+ display: none;
+ }
+ }
+
+ .stats {
+ display: inline;
+ border-left: solid 1px #ddd;
+ margin-left: 0.75em;
+ padding-left: 0.75em;
+
+ li {
+ display: inline-block;
+ margin-right: 0.85em;
+
+ a {
+ display: inline-block;
+ opacity: 0.5;
+
+ &:before {
+ position: relative;
+ top: 0.1em;
+ margin-right: 0.5em;
+ opacity: 0.35;
+ }
+
+ &:active {
+ opacity: 1.0;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ /* Logo */
+
+ #logo {
+ display: none;
+ }
+
+ /* Nav */
+
+ #nav {
+ margin-top: 0 !important;
+
+ &:before {
+ display: none !important;
+ }
+
+ li:hover {
+ a {
+ background: none;
+ }
+ }
+ }
+
+ /* Content */
+
+ #content {
+ margin-top: 44px;
+ padding: 3em 20px 2em 20px;
+ }
+
+ /* Sidebar */
+
+ #sidebar {
+ padding: 20px 12px 20px 10px;
+ box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.15), inset -0.1em 0 0.5em 0 rgba(0, 0, 0, 0.25);
+ }
+
+ /* Copyright */
+
+ #copyright {
+ margin: 2em 0 0 0;
+ text-align: center;
+
+ p {
+ font-size: 0.9em;
+ line-height: 2em;
+ }
+
+ &:before {
+ height: 0.5em;
+ margin: 0 0 2em 0;
+ }
+ }
+
+ }
+
+/* Off-Canvas Sidebar */
+
+ @media screen and (max-width: 1000px) {
+
+ /* Basic */
+
+ html, body {
+ overflow-x: hidden;
+ }
+
+ /* Content */
+
+ #content {
+ @include vendor('backface-visibility', 'hidden');
+ @include vendor('transition', 'transform #{_duration(sidebar)} ease');
+ margin-top: 44px;
+ margin-left: 0;
+ margin-right: 0;
+ min-height: 0 !important;
+ }
+
+ /* Sidebar */
+
+ #titleBar {
+ display: block;
+ }
+
+ #sidebar {
+ @include vendor('backface-visibility', 'hidden');
+ @include vendor('transition', ('transform #{_duration(sidebar)} ease'));
+ display: block;
+ height: 100% !important;
+ min-height: 0 !important;
+ overflow-y: auto;
+ position: fixed;
+ top: 0;
+ z-index: _misc(z-index-base) + 2;
+
+ @if _misc(sidebar-side) == 'left' {
+ @include vendor('transform', 'translateX(#{_size(sidebar) * -1})');
+ }
+ @else {
+ @include vendor('transform', 'translateX(#{_size(sidebar)})');
+ }
+ }
+
+ body {
+ &.sidebar-visible {
+ #content, #titleBar {
+ @if _misc(sidebar-side) == 'left' {
+ @include vendor('transform', 'translateX(#{_size(sidebar)})');
+ }
+ @else {
+ @include vendor('transform', 'translateX(#{_size(sidebar) * -1})');
+ }
+ }
+
+ #sidebar {
+ @include vendor('transform', 'translateX(0)');
+ }
+ }
+ }
+
+ } \ No newline at end of file
generated by cgit (git 2.34.1) at 2024-11-16 08:41:57 +0000