diff options
author | Fabien CASTERS <fabien@vaga.io> | 2019-01-19 12:47:03 +0300 |
---|---|---|
committer | Fabien CASTERS <fabien@vaga.io> | 2019-01-20 20:07:11 +0300 |
commit | 90cbe1cab5e3ee9bc780c495242e6b1e4b2b3351 (patch) | |
tree | 341b53e4f21b3dd38db6b64a112c117b8716d3e7 /assets |
Initial commit
Diffstat (limited to 'assets')
-rw-r--r-- | assets/css/main.scss | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/assets/css/main.scss b/assets/css/main.scss new file mode 100644 index 0000000..ae7bf43 --- /dev/null +++ b/assets/css/main.scss @@ -0,0 +1,128 @@ +$darkest-color: {{ .Site.Params.style.darkestColor | default "#242930" }}; +$dark-color: {{ .Site.Params.style.darkColor | default "#353b43" }}; +$light-color: {{ .Site.Params.style.lightColor | default "#afbac4" }}; +$lightest-color: {{ .Site.Params.style.lightestColor | default "#ffffff" }}; +$primary-color: {{ .Site.Params.style.primaryColor | default "#57cc8a" }}; + +* { + box-sizing: border-box; +} + +html { + line-height: 1.6; +} + +body { + margin: 0; + font-family: sans-serif; + background: $dark-color; + color: $light-color; +} + +h1, h2, h3, h4, h5, h6 { + color: $lightest-color; +} + +a { + color: $primary-color; + text-decoration: none; + + &:hover { + color: $lightest-color; + transition: color 0.8s; + } +} + +pre { + overflow: auto; +} + +.app-header { + padding: 2.5em; + background: $darkest-color; + text-align: center; +} + +.app-header-avatar { + max-width: 15rem; + max-height: 15rem; + border-radius: 100%; + border: 0.5rem solid $primary-color; +} + +.app-container { + padding: 2.5rem; +} + +.app-header-social { + font-size: 2em; + color: $lightest-color; + + a { + margin: 0 .1em; + } +} + +.icon { + display: block-inline; + width: 1em; + height: 1em; + vertical-align: -.125em; +} + +.tag { + background: rgba(255, 255, 255, 0.1); + margin: 0 0.2em; + padding: 0.2em 0.4em; + border-radius: 0.2em; + transition: background 0.8s; + + &:hover { + background: rgba(255, 255, 255, 0.3); + } +} + +.post-title { + color: $lightest-color; +} + +.post-content { + pre { + border-left: 0.4em solid rgba($primary-color, .8); + padding-left: 1em; + } +} + +.post-meta { + font-size: 0.8em; +} + +.posts-list { + padding: 0; +} + +.posts-list-item { + list-style: none; + border-bottom: 1px dashed rgba(255, 255, 255, 0.3); + padding: 0.4em 0; +} + +.posts-list-item-description { + display: block; + font-size: 0.8em; +} + +@media (min-width: 940px) { + .app-header { + position: fixed; + top: 0; + left: 0; + width: 20rem; + min-height: 100vh; + } + + .app-container { + max-width: 65rem; + margin-left: 20rem; + } +} |