diff options
| -rw-r--r-- | assets/sass/_customize.scss | 267 | ||||
| -rw-r--r-- | assets/sass/_mixins.scss | 1 | ||||
| -rw-r--r-- | assets/sass/style.scss | 1 | ||||
| -rw-r--r-- | assets/sass/themes.scss | 78 | ||||
| -rw-r--r-- | resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content | 187 |
5 files changed, 264 insertions, 270 deletions
diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss index 6d55b8e..27d05f1 100644 --- a/assets/sass/_customize.scss +++ b/assets/sass/_customize.scss @@ -26,6 +26,15 @@ } } +.introduction { + h1.accent { + margin: 30px 0; + font-size: 4em; + line-height: 1; + letter-spacing: -1px; + } +} + #page-contact .container, #page-thanks .container, .introduction .container { @@ -34,13 +43,6 @@ text-align: center; } -.introduction h1.accent { - margin: 30px 0; - font-size: 4em; - line-height: 1; - letter-spacing: -1px; -} - .post { margin-top: 40px; @@ -97,44 +99,46 @@ ul.pager { margin: 0; padding: 0; list-style: none; -} -ul.pager li { - display: inline; - padding: 10px; - margin: 5px; + li { + display: inline; + padding: 10px; + margin: 5px; + } } .divider { position: relative; margin: 2.5rem 0; -} -.divider::after { - content: ""; - display: table; - clear: both; + &:after { + content: ""; + display: table; + clear: both; + } } .d-flex { display: flex; } -.footnotes hr { - margin: 0; - border: 0; -} +.footnotes { + hr { + margin: 0; + border: 0; + } -.footnotes blockquote + a.footnote-backref { - margin-bottom: 1rem; - display: inline-block; + blockquote + a.footnote-backref { + margin-bottom: 1rem; + display: inline-block; + } } .tags-wrapper { position: relative; } -ul.post-tags { +.post-tags { margin: 0; padding: 0; position: absolute; @@ -142,76 +146,74 @@ ul.post-tags { bottom: -12px; list-style: none; text-indent: unset; -} -.post-tags li, -.post-tags a { - font-family: $heading-font; - float: left; - height: 24px; - line-height: 24px; - position: relative; - font-size: .75em; -} - -.post-tags a { - margin-left: 20px; - padding: 0 10px 0 12px; - background: $link-color; - color: #fff; - text-decoration: none; - -webkit-border-bottom-right-radius:4px; - -moz-border-radius-bottomright:4px; - border-bottom-right-radius:4px; - -webkit-border-top-right-radius:4px; - -moz-border-radius-topright:4px; // editorconfig-checker-disable-line - border-top-right-radius:4px; // editorconfig-checker-disable-line -} - -.post-tags a:before { - content: ""; - float: left; - position: absolute; - top: 0; - left: -12px; - width: 0; - height: 0; - border-color: transparent $link-color transparent transparent; - border-style: solid; - border-width: 12px 12px 12px 0; -} - -.post-tags a:after { - content: ""; - position: absolute; - top: 10px; - left: 0; - float: left; - width: 4px; - height: 4px; - background: #fff; - @include border-radius (2px); - @include box-shadow (-1px -1px 2px $text-color); -} - -.post-tags a:hover { - background: $text-light-color; -} + li, a { + font-family: $heading-font; + float: left; + height: 24px; + line-height: 24px; + position: relative; + font-size: .75em; + } -.post-tags a:hover:before { - border-color: transparent $text-light-color transparent transparent; + a { + margin-left: 20px; + padding: 0 10px 0 12px; + background: $link-color; + color: #fff; + text-decoration: none; + + @include border-radius (0 4px 4px 0); + + &:before { + content: ""; + float: left; + position: absolute; + top: 0; + left: -12px; + width: 0; + height: 0; + border-color: transparent $link-color transparent transparent; + border-style: solid; + border-width: 12px 12px 12px 0; + } + + &:after { + content: ""; + position: absolute; + top: 10px; + left: 0; + float: left; + width: 4px; + height: 4px; + background: #fff; + + @include border-radius (2px); + @include box-shadow (-1px -1px 2px $text-color); + } + + &:hover { + background: $text-light-color; + } + + &:hover:before { + border-color: transparent $text-light-color transparent transparent; + } + } } -a.external:after { - background-color: #ac4142; - content: ""; - display: inline-flex; - height: 10px; - margin-left: 4px; - width: 10px; +a.external { + &:after { + background-color: #ac4142; + content: ""; + display: inline-flex; + height: 10px; + margin-left: 4px; + width: 10px; - @include mask-size (cover); - @include mask-image (url("/img/external-link.svg")); + @include mask-size (cover); + @include mask-image (url("/img/external-link.svg")); + } } ul.tags-cloud { @@ -224,81 +226,16 @@ ul.tags-cloud { list-style: none; border: 2px solid white; border-radius: 5px; -} -ul.tags-cloud .tag { - display: flex; - align-items: center; - margin: 0.25rem 1rem; -} - -ul.tags-cloud .tag-link { - padding: 5px 5px 0; - transition: 0.3s; - text-decoration: none; -} - -/* Themes */ - -/* Red */ -.theme-base-red .post-tags a { - background: #ac4142; -} - -.theme-base-red .post-tags a:before { - border-color: transparent #ac4142 transparent transparent; -} - -/* Orange */ -.theme-base-orange .post-tags a { - background: #d28445; -} - -.theme-base-orange .post-tags a:before { - border-color: transparent #d28445 transparent transparent; -} - -/* Green */ -.theme-base-green .post-tags a { - background: #90a959; -} - -.theme-base-green .post-tags a:before { - border-color: transparent #90a959 transparent transparent; -} - -/* Cyan */ -.theme-base-cyan .post-tags a { - background: #75b5aa; -} - -.theme-base-cyan .post-tags a:before { - border-color: transparent #75b5aa transparent transparent; -} - -/* Blue */ -.theme-base-blue .post-tags a { - background: #6a9fb5; -} - -.theme-base-blue .post-tags a:before { - border-color: transparent #6a9fb5 transparent transparent; -} - -/* Magenta */ -.theme-base-magenta .post-tags a { - background: #aa759f; -} - -.theme-base-magenta .post-tags a:before { - border-color: transparent #aa759f transparent transparent; -} - -/* Brown */ -.theme-base-brown .post-tags a { - background: #8f5536; -} + .tag { + display: flex; + align-items: center; + margin: 0.25rem 1rem; + } -.theme-base-brown .post-tags a:before { - border-color: transparent #8f5536 transparent transparent; + .tag-link { + padding: 5px 5px 0; + transition: 0.3s; + text-decoration: none; + } } diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss index 4c3168d..ae030d4 100644 --- a/assets/sass/_mixins.scss +++ b/assets/sass/_mixins.scss @@ -141,7 +141,6 @@ $break-desktop: 1600px; box-shadow: $args; } - // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Border Radius // // Usage: @include border-radius (10% 30% 50% 70%); diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 02334ef..42a7fb9 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -25,3 +25,4 @@ $link-color: #841212; @import "syntax"; @import "form-elements"; @import "customize"; +@import "themes"; diff --git a/assets/sass/themes.scss b/assets/sass/themes.scss new file mode 100644 index 0000000..c7edf60 --- /dev/null +++ b/assets/sass/themes.scss @@ -0,0 +1,78 @@ +/* Themes */ + +/* Red */ +.theme-base-red { + .post-tags a { + background: #ac4142; + + &:before { + border-color: transparent #ac4142 transparent transparent; + } + } +} + +/* Orange */ +.theme-base-orange { + .post-tags a { + background: #d28445; + + &:before { + border-color: transparent #d28445 transparent transparent; + } + } +} + +/* Green */ +.theme-base-green { + .post-tags a { + background: #90a959; + + &:before { + border-color: transparent #90a959 transparent transparent; + } + } +} + +/* Cyan */ +.theme-base-cyan { + .post-tags a { + background: #75b5aa; + + &:before { + border-color: transparent #75b5aa transparent transparent; + } + } +} + +/* Blue */ +.theme-base-blue { + .post-tags a { + background: #6a9fb5; + + &:before { + border-color: transparent #6a9fb5 transparent transparent; + } + } +} + +/* Magenta */ +.theme-base-magenta { + .post-tags a { + background: #aa759f; + + &:before { + border-color: transparent #aa759f transparent transparent; + } + } +} + +/* Brown */ +.theme-base-brown { + .post-tags a { + background: #8f5536; + + &:before { + border-color: transparent #8f5536 transparent transparent; + } + } +} diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index b83aaab..4f7bdbb 100644 --- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -901,6 +901,12 @@ form input:-moz-ui-invalid { .introduction { min-height: 100px; margin-bottom: 100px; } } +.introduction h1.accent { + margin: 30px 0; + font-size: 4em; + line-height: 1; + letter-spacing: -1px; } + #page-contact .container, #page-thanks .container, .introduction .container { @@ -908,12 +914,6 @@ form input:-moz-ui-invalid { max-width: 600px; text-align: center; } -.introduction h1.accent { - margin: 30px 0; - font-size: 4em; - line-height: 1; - letter-spacing: -1px; } - .post { margin-top: 40px; } @media only screen and (min-width: 768px) { @@ -959,20 +959,18 @@ ul.pager { margin: 0; padding: 0; list-style: none; } - -ul.pager li { - display: inline; - padding: 10px; - margin: 5px; } + ul.pager li { + display: inline; + padding: 10px; + margin: 5px; } .divider { position: relative; margin: 2.5rem 0; } - -.divider::after { - content: ""; - display: table; - clear: both; } + .divider:after { + content: ""; + display: table; + clear: both; } .d-flex { display: flex; } @@ -988,7 +986,7 @@ ul.pager li { .tags-wrapper { position: relative; } -ul.post-tags { +.post-tags { margin: 0; padding: 0; position: absolute; @@ -996,62 +994,52 @@ ul.post-tags { bottom: -12px; list-style: none; text-indent: unset; } - -.post-tags li, -.post-tags a { - font-family: sans-serif; - float: left; - height: 24px; - line-height: 24px; - position: relative; - font-size: .75em; } - -.post-tags a { - margin-left: 20px; - padding: 0 10px 0 12px; - background: #841212; - color: #fff; - text-decoration: none; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; } - -.post-tags a:before { - content: ""; - float: left; - position: absolute; - top: 0; - left: -12px; - width: 0; - height: 0; - border-color: transparent #841212 transparent transparent; - border-style: solid; - border-width: 12px 12px 12px 0; } - -.post-tags a:after { - content: ""; - position: absolute; - top: 10px; - left: 0; - float: left; - width: 4px; - height: 4px; - background: #fff; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - -webkit-box-shadow: -1px -1px 2px #454545; - -moz-box-shadow: -1px -1px 2px #454545; - box-shadow: -1px -1px 2px #454545; } - -.post-tags a:hover { - background: #676767; } - -.post-tags a:hover:before { - border-color: transparent #676767 transparent transparent; } + .post-tags li, .post-tags a { + font-family: sans-serif; + float: left; + height: 24px; + line-height: 24px; + position: relative; + font-size: .75em; } + .post-tags a { + margin-left: 20px; + padding: 0 10px 0 12px; + background: #841212; + color: #fff; + text-decoration: none; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; } + .post-tags a:before { + content: ""; + float: left; + position: absolute; + top: 0; + left: -12px; + width: 0; + height: 0; + border-color: transparent #841212 transparent transparent; + border-style: solid; + border-width: 12px 12px 12px 0; } + .post-tags a:after { + content: ""; + position: absolute; + top: 10px; + left: 0; + float: left; + width: 4px; + height: 4px; + background: #fff; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: -1px -1px 2px #454545; + -moz-box-shadow: -1px -1px 2px #454545; + box-shadow: -1px -1px 2px #454545; } + .post-tags a:hover { + background: #676767; } + .post-tags a:hover:before { + border-color: transparent #676767 transparent transparent; } a.external:after { background-color: #ac4142; @@ -1075,63 +1063,54 @@ ul.tags-cloud { list-style: none; border: 2px solid white; border-radius: 5px; } - -ul.tags-cloud .tag { - display: flex; - align-items: center; - margin: 0.25rem 1rem; } - -ul.tags-cloud .tag-link { - padding: 5px 5px 0; - transition: 0.3s; - text-decoration: none; } + ul.tags-cloud .tag { + display: flex; + align-items: center; + margin: 0.25rem 1rem; } + ul.tags-cloud .tag-link { + padding: 5px 5px 0; + transition: 0.3s; + text-decoration: none; } /* Themes */ /* Red */ .theme-base-red .post-tags a { background: #ac4142; } - -.theme-base-red .post-tags a:before { - border-color: transparent #ac4142 transparent transparent; } + .theme-base-red .post-tags a:before { + border-color: transparent #ac4142 transparent transparent; } /* Orange */ .theme-base-orange .post-tags a { background: #d28445; } - -.theme-base-orange .post-tags a:before { - border-color: transparent #d28445 transparent transparent; } + .theme-base-orange .post-tags a:before { + border-color: transparent #d28445 transparent transparent; } /* Green */ .theme-base-green .post-tags a { background: #90a959; } - -.theme-base-green .post-tags a:before { - border-color: transparent #90a959 transparent transparent; } + .theme-base-green .post-tags a:before { + border-color: transparent #90a959 transparent transparent; } /* Cyan */ .theme-base-cyan .post-tags a { background: #75b5aa; } - -.theme-base-cyan .post-tags a:before { - border-color: transparent #75b5aa transparent transparent; } + .theme-base-cyan .post-tags a:before { + border-color: transparent #75b5aa transparent transparent; } /* Blue */ .theme-base-blue .post-tags a { background: #6a9fb5; } - -.theme-base-blue .post-tags a:before { - border-color: transparent #6a9fb5 transparent transparent; } + .theme-base-blue .post-tags a:before { + border-color: transparent #6a9fb5 transparent transparent; } /* Magenta */ .theme-base-magenta .post-tags a { background: #aa759f; } - -.theme-base-magenta .post-tags a:before { - border-color: transparent #aa759f transparent transparent; } + .theme-base-magenta .post-tags a:before { + border-color: transparent #aa759f transparent transparent; } /* Brown */ .theme-base-brown .post-tags a { background: #8f5536; } - -.theme-base-brown .post-tags a:before { - border-color: transparent #8f5536 transparent transparent; } + .theme-base-brown .post-tags a:before { + border-color: transparent #8f5536 transparent transparent; } |