diff --git a/assets/themes/blog-monospace/theme.scss b/assets/themes/blog-monospace/theme.scss index e3642d30..5c97c276 100644 --- a/assets/themes/blog-monospace/theme.scss +++ b/assets/themes/blog-monospace/theme.scss @@ -1,3 +1,3 @@ * { - font-family: monospace; + font-family: monospace; } diff --git a/assets/themes/default/_article.scss b/assets/themes/default/_article.scss index 6555e097..5d1ee909 100644 --- a/assets/themes/default/_article.scss +++ b/assets/themes/default/_article.scss @@ -64,37 +64,37 @@ main header.article { } main .article-info { - margin: 0 auto 3em; - font-size: 0.95em; - font-weight: 400; + margin: 0 auto 3em; + font-size: 0.95em; + font-weight: 400; - .author, .author a { - font-weight: 600; - } + .author, .author a { + font-weight: 600; + } } /* The article itself */ main article { max-width: $article-width; - margin: 2.5em auto; - font-family: $lora; - font-size: 1.2em; - line-height: 1.7; + margin: 2.5em auto; + font-family: $lora; + font-size: 1.2em; + line-height: 1.7; - a:hover { - text-decoration: underline; - } + a:hover { + text-decoration: underline; + } - img { - display: block; - margin: 3em auto; - max-width: 100%; + img { + display: block; + margin: 3em auto; + max-width: 100%; } pre { - padding: 1em; - background: $gray; - overflow: auto; + padding: 1em; + background: $gray; + overflow: auto; } blockquote { @@ -126,7 +126,7 @@ main .article-meta { > p { margin: 2em $horizontal-margin; - font-size: 0.9em; + font-size: 0.9em; } /* Article Tags */ @@ -157,15 +157,15 @@ main .article-meta { /* Likes & Boosts */ .actions { display: flex; - flex-direction: row; - justify-content: space-around; + flex-direction: row; + justify-content: space-around; } .likes, .reshares { display: flex; - flex-direction: column; - align-items: center; - padding: 0.5em 0; + flex-direction: column; + align-items: center; + padding: 0.5em 0; p { font-size: 1.5em; @@ -175,34 +175,34 @@ main .article-meta { .action { display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0; - padding: 0; - background: none; - color: $text-color; - border: none; - font-size: 1.1em; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0; + padding: 0; + background: none; + color: $text-color; + border: none; + font-size: 1.1em; cursor: pointer; - svg.feather { - transition: background 0.1s ease-in; - display: flex; - align-items: center; - justify-content: center; + svg.feather { + transition: background 0.1s ease-in; + display: flex; + align-items: center; + justify-content: center; - margin: 0.5em 0; - width: 2.5em; - height: 2.5em; + margin: 0.5em 0; + width: 2.5em; + height: 2.5em; - border-radius: 50%; + border-radius: 50%; } &.reshared, &.liked { svg.feather { - color: $background; - font-weight: 900; + color: $background; + font-weight: 900; } } } @@ -213,14 +213,14 @@ main .article-meta { .action svg.feather { padding: 0.7em; - box-sizing: border-box; - color: $red; - fill: none; - border: solid $red thin; + box-sizing: border-box; + color: $red; + fill: none; + border: solid $red thin; } .action:hover svg.feather { - background: transparentize($red, 0.85); + background: transparentize($red, 0.85); } .action.liked svg.feather { @@ -238,22 +238,22 @@ main .article-meta { .action svg.feather { padding: 0.7em; - box-sizing: border-box; - color: $primary; - border: solid $primary thin; - font-weight: 600; + box-sizing: border-box; + color: $primary; + border: solid $primary thin; + font-weight: 600; } .action:hover svg.feather { - background: transparentize($primary, 0.85); + background: transparentize($primary, 0.85); } .action.reshared svg.feather { background: $primary; } .action.reshared:hover svg.feather { - background: transparentize($primary, 0.75) - color: $primary; + background: transparentize($primary, 0.75) + color: $primary; } } @@ -262,9 +262,9 @@ main .article-meta { margin: 0 $horizontal-margin; h2 { - color: $primary; - font-size: 1.5em; - font-weight: 600; + color: $primary; + font-size: 1.5em; + font-weight: 600; } summary { @@ -279,16 +279,16 @@ main .article-meta { // Respond & delete comment buttons a.button, form.inline, form.inline input { - padding: 0; - background: none; - color: $text-color; - margin-right: 2em; - font-family: $route159; + padding: 0; + background: none; + color: $text-color; + margin-right: 2em; + font-family: $route159; font-weight: normal; - &::before { - color: $primary; - padding-right: 0.5em; + &::before { + color: $primary; + padding-right: 0.5em; } &:hover { color: $primary; } @@ -296,8 +296,8 @@ main .article-meta { .comment { margin: 1em 0; - font-size: 1em; - border: none; + font-size: 1em; + border: none; .content { background: $gray; @@ -328,36 +328,36 @@ main .article-meta { color: transparentize($text-color, 0.6); } - .author { - display: flex; - flex-direction: row; - align-items: center; - align-content: center; + .author { + display: flex; + flex-direction: row; + align-items: center; + align-content: center; - * { - transition: all 0.1s ease-in; - } + * { + transition: all 0.1s ease-in; + } - .display-name { - color: $text-color; + .display-name { + color: $text-color; } &:hover { .display-name { color: $primary; } small { opacity: 1; } } - } + } & > .comment { padding-left: 2em; } - .text { - padding: 1.25em 0; - font-family: $lora; - font-size: 1.1em; - line-height: 1.4; - text-align: left; + .text { + padding: 1.25em 0; + font-family: $lora; + font-size: 1.1em; + line-height: 1.4; + text-align: left; } } } diff --git a/assets/themes/default/_forms.scss b/assets/themes/default/_forms.scss index da8cda8e..79e2af2e 100644 --- a/assets/themes/default/_forms.scss +++ b/assets/themes/default/_forms.scss @@ -1,27 +1,27 @@ label { - display: block; - margin: 2em auto .5em; - font-size: 1.2em; + display: block; + margin: 2em auto .5em; + font-size: 1.2em; } input, textarea, select { - transition: all 0.1s ease-in; - display: block; - width: 100%; - margin: auto; - padding: 1em; - box-sizing: border-box; + transition: all 0.1s ease-in; + display: block; + width: 100%; + margin: auto; + padding: 1em; + box-sizing: border-box; -webkit-appearance: textarea; - background: $form-input-background; - color: $text-color; - border: solid $form-input-border thin; + background: $form-input-background; + color: $text-color; + border: solid $form-input-border thin; - font-size: 1.2em; - font-weight: 400; + font-size: 1.2em; + font-weight: 400; - &:focus { - border-color: $primary; - } + &:focus { + border-color: $primary; + } } form input[type="submit"] { margin: 2em auto; @@ -29,18 +29,18 @@ form input[type="submit"] { } textarea { - resize: vertical; + resize: vertical; overflow-y: scroll; - font-family: $lora; - font-size: 1.1em; - line-height: 1.5; + font-family: $lora; + font-size: 1.1em; + line-height: 1.5; } input[type="checkbox"] { - display: inline; - margin: initial; - min-width: initial; - width: initial; + display: inline; + margin: initial; + min-width: initial; + width: initial; -webkit-appearance: checkbox; } @@ -71,31 +71,31 @@ form.inline { } .button, .button:visited, input[type="submit"], input[type="submit"].button { - transition: all 0.1s ease-in; - display: inline-block; + transition: all 0.1s ease-in; + display: inline-block; -webkit-appearance: none; - margin: 0.5em auto; - padding: 0.75em 1em; + margin: 0.5em auto; + padding: 0.75em 1em; - background: $primary; - color: $primary-text-color; + background: $primary; + color: $primary-text-color; font-weight: bold; border: none; - cursor: pointer; + cursor: pointer; - &:hover { - background: transparentize($primary, 0.1); - } + &:hover { + background: transparentize($primary, 0.1); + } - &.destructive { - background: $red; + &.destructive { + background: $red; &:hover { background: transparentize($red, 0.1); } - } + } &.secondary { background: $gray; @@ -115,20 +115,20 @@ input[type="submit"] { form.new-post { max-width: 60em; .title { - margin: 0 auto; - padding: 0.75em 0; + margin: 0 auto; + padding: 0.75em 0; - background: none; - border: none; + background: none; + border: none; - font-family: $playfair; - font-size: 2em; - text-align: left; + font-family: $playfair; + font-size: 2em; + text-align: left; } textarea { - min-height: 20em; - overflow-y: scroll; - resize: none; + min-height: 20em; + overflow-y: scroll; + resize: none; -webkit-appearance: textarea; } } diff --git a/assets/themes/default/_global.scss b/assets/themes/default/_global.scss index 2e2784bb..7a891b34 100644 --- a/assets/themes/default/_global.scss +++ b/assets/themes/default/_global.scss @@ -6,43 +6,43 @@ html { } html, body { - margin: 0; - padding: 0; - background: $background; - color: $text-color; - font-family: $route159; + margin: 0; + padding: 0; + background: $background; + color: $text-color; + font-family: $route159; ::selection { background: transparentize($primary, 0.7); } - ::-moz-selection { + ::-moz-selection { background: transparentize($primary, 0.7); - } + } } a, a:visited { - color: $primary; - text-decoration: none; + color: $primary; + text-decoration: none; } a::selection { - color: $background; + color: $background; } a::-moz-selection { - color: $background; + color: $background; } small { - margin-left: 1em; - color: transparentize($text-color, 0.6); - font-size: 0.75em; - word-wrap: break-word; - word-break: break-all; + margin-left: 1em; + color: transparentize($text-color, 0.6); + font-size: 0.75em; + word-wrap: break-word; + word-break: break-all; } .center { - text-align: center; - font-weight: bold; - opacity: 0.6; - padding: 5em; + text-align: center; + font-weight: bold; + opacity: 0.6; + padding: 5em; } .right { @@ -53,28 +53,28 @@ small { } .spaced { - margin: 4rem 0; + margin: 4rem 0; } .banner { - background: $gray; - padding-top: 2em; - padding-bottom: 1em; - margin: 3em 0px; + background: $gray; + padding-top: 2em; + padding-bottom: 1em; + margin: 3em 0px; } .hidden { - display: none; - appearance: none; + display: none; + appearance: none; } /* Main */ body > main > *, .h-feed > * { - margin: 1em $horizontal-margin; + margin: 1em $horizontal-margin; } body > main > .h-entry, .h-feed { - margin: 0; + margin: 0; } body > main { @@ -98,18 +98,18 @@ main { margin-top: 1em; &.article { - margin: 1em auto 0.5em; - font-family: $playfair; - font-size: 2.5em; - font-weight: normal; + margin: 1em auto 0.5em; + font-family: $playfair; + font-size: 2.5em; + font-weight: normal; } } h2 { - font-size: 1.75em; - font-weight: 300; + font-size: 1.75em; + font-weight: 300; - &.article { + &.article { font-size: 1.25em; margin-bottom: 0.5em; } @@ -139,15 +139,15 @@ main { /* Errors */ p.error { - color: $red; - font-weight: bold; + color: $red; + font-weight: bold; } /* User page */ .user h1 { - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; margin: 0px; } @@ -156,14 +156,14 @@ p.error { } .badge { - margin-right: 1em; - padding: 0.35em 1em; + margin-right: 1em; + padding: 0.35em 1em; - background: $background; - color: $primary; - border: 1px solid $primary; + background: $background; + color: $primary; + border: 1px solid $primary; - font-size: 1rem; + font-size: 1rem; } .user-summary { @@ -172,25 +172,25 @@ p.error { /* Cards */ .cards { - display: flex; - flex-direction: row; - flex-wrap: wrap; - padding: 0 5%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 0 5%; margin: 1rem 0 5rem; } .card { - flex: 1; - display: flex; - flex-direction: column; + flex: 1; + display: flex; + flex-direction: column; position: relative; - min-width: 20em; - min-height: 20em; - margin: 1em; - box-sizing: border-box; + min-width: 20em; + min-height: 20em; + margin: 1em; + box-sizing: border-box; - background: $gray; + background: $gray; text-overflow: ellipsis; @@ -215,11 +215,11 @@ p.error { } - > * { - margin: 20px; - } + > * { + margin: 20px; + } - .cover { + .cover { min-height: 10em; background-position: center; background-size: cover; @@ -227,19 +227,19 @@ p.error { } h3 { - flex-grow: 1; - margin: 0; - font-family: $playfair; - font-size: 1.75em; - font-weight: normal; - line-height: 1.75; - a { - display: block; - transition: color 0.1s ease-in; - color: $text-color; + flex-grow: 1; + margin: 0; + font-family: $playfair; + font-size: 1.75em; + font-weight: normal; + line-height: 1.75; + a { + display: block; + transition: color 0.1s ease-in; + color: $text-color; - &:hover { color: $primary; } - } + &:hover { color: $primary; } + } } .controls { @@ -252,13 +252,13 @@ p.error { } main { - flex: 1; + flex: 1; - font-family: $lora; - font-size: 1em; - line-height: 1.25; - text-align: left; - overflow: hidden; + font-family: $lora; + font-size: 1em; + line-height: 1.25; + text-align: left; + overflow: hidden; } } @@ -300,15 +300,15 @@ p.error { /* Stats */ .stats { - display: flex; - justify-content: space-around; - margin: 2em; + display: flex; + justify-content: space-around; + margin: 2em; - > div { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + > div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } p { diff --git a/assets/themes/default/_header.scss b/assets/themes/default/_header.scss index bb75513c..8b3e9cf8 100644 --- a/assets/themes/default/_header.scss +++ b/assets/themes/default/_header.scss @@ -3,8 +3,8 @@ body > header { #content { display: flex; - align-content: center; - justify-content: space-between; + align-content: center; + justify-content: space-between; } nav#menu { @@ -19,44 +19,44 @@ body > header { a { transform: skewX(15deg); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 1.4em; - height: 1.4em; - margin: 0; - padding: 0; - color: $gray; - font-size: 1.33em; - } + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 1.4em; + height: 1.4em; + margin: 0; + padding: 0; + color: $gray; + font-size: 1.33em; + } } nav { display: flex; - flex-direction: row; - align-items: center; + flex-direction: row; + align-items: center; - hr { - height: 100%; - width: 0.2em; - background: $primary; - border: none; - transform: skewX(-15deg); + hr { + height: 100%; + width: 0.2em; + background: $primary; + border: none; + transform: skewX(-15deg); } a { - display: flex; - align-items: center; - position: relative; - align-self: stretch; - margin: 0; - padding: 0 2em; - font-size: 1em; + display: flex; + align-items: center; + position: relative; + align-self: stretch; + margin: 0; + padding: 0 2em; + font-size: 1em; - i { font-size: 1.2em; } + i { font-size: 1.2em; } - &.title { - margin: 0; + &.title { + margin: 0; text-align: center; padding: 0.5em 1em; font-size: 1.75em; @@ -70,7 +70,7 @@ body > header { margin: 0; padding-left: 0.5em; } - } + } } } } @@ -205,36 +205,36 @@ body > header { /* Only enable label animations on large screens */ @media screen and (min-width: 600px) { - header nav a { - i { - transition: all 0.2s ease; - margin: 0; - } - - .mobile-label { - transition: all 0.2s ease; - display: block; - position: absolute; - left: 50%; - transform: translate(-50%, 0); - transform: translateZ(0); - -webkit-transform: none !important; - opacity: 0; - font-size: 0.9em; - white-space: nowrap; - } - - img + .mobile-label { display: none; } - - &:hover { - i { margin-bottom: 0.75em; } - .mobile-label { - opacity: 1; - transform: translate(-50%, 80%); - -webkit-transform: translate(-50%, 80%); - } + header nav a { + i { + transition: all 0.2s ease; + margin: 0; } - } + + .mobile-label { + transition: all 0.2s ease; + display: block; + position: absolute; + left: 50%; + transform: translate(-50%, 0); + transform: translateZ(0); + -webkit-transform: none !important; + opacity: 0; + font-size: 0.9em; + white-space: nowrap; + } + + img + .mobile-label { display: none; } + + &:hover { + i { margin-bottom: 0.75em; } + .mobile-label { + opacity: 1; + transform: translate(-50%, 80%); + -webkit-transform: translate(-50%, 80%); + } + } + } } // Small screens