From 29d309db5196099982d96933acdc4c0d0ae45436 Mon Sep 17 00:00:00 2001 From: Roger Gonzalez Date: Sat, 25 Apr 2020 16:50:56 -0300 Subject: Initial commit, migrating from Ghost --- themes/m10c/assets/css/_base.scss | 55 ++++++++++++++++++++++ themes/m10c/assets/css/_extra.scss | 2 + themes/m10c/assets/css/components/_app.scss | 40 ++++++++++++++++ themes/m10c/assets/css/components/_error_404.scss | 7 +++ themes/m10c/assets/css/components/_icon.scss | 6 +++ themes/m10c/assets/css/components/_pagination.scss | 24 ++++++++++ themes/m10c/assets/css/components/_post.scss | 17 +++++++ themes/m10c/assets/css/components/_posts_list.scss | 17 +++++++ themes/m10c/assets/css/components/_tag.scss | 15 ++++++ themes/m10c/assets/css/main.scss | 19 ++++++++ 10 files changed, 202 insertions(+) create mode 100644 themes/m10c/assets/css/_base.scss create mode 100644 themes/m10c/assets/css/_extra.scss create mode 100644 themes/m10c/assets/css/components/_app.scss create mode 100644 themes/m10c/assets/css/components/_error_404.scss create mode 100644 themes/m10c/assets/css/components/_icon.scss create mode 100644 themes/m10c/assets/css/components/_pagination.scss create mode 100644 themes/m10c/assets/css/components/_post.scss create mode 100644 themes/m10c/assets/css/components/_posts_list.scss create mode 100644 themes/m10c/assets/css/components/_tag.scss create mode 100644 themes/m10c/assets/css/main.scss (limited to 'themes/m10c/assets/css') diff --git a/themes/m10c/assets/css/_base.scss b/themes/m10c/assets/css/_base.scss new file mode 100644 index 0000000..9848303 --- /dev/null +++ b/themes/m10c/assets/css/_base.scss @@ -0,0 +1,55 @@ +* { + 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; + transition: color 0.35s; + text-decoration: none; + + &:hover { + color: $lightest-color; + } +} + +// Browsers seem to use a smaller default font-size with monospaced code +// blocks (like 80% of the size of normal text) and that looks pretty bad with +// small inline code-blocks in the middle of normal text (mainly because of +// the very noticeable difference in x-height). This CSS corrects that problem. +code { + font-family: monospace,monospace; + font-size: 1em; + color: rgba($light-color, .8); +} + +pre { + // A larger monospaced block of text (that isn't mixed with normal text) + // generally looks heavier than normal text with the same font size. For this + // reason using a smaller monospaced font size makes sense in this situation. + code { + font-size: .8em; + } + overflow: auto; +} + +::selection { + background: rgba($light-color, .25); +} +::-moz-selection { + background: rgba($light-color, .25); +} diff --git a/themes/m10c/assets/css/_extra.scss b/themes/m10c/assets/css/_extra.scss new file mode 100644 index 0000000..8eaa4d4 --- /dev/null +++ b/themes/m10c/assets/css/_extra.scss @@ -0,0 +1,2 @@ +// Do not add any CSS to this file in the theme sources. +// This file can be overridden to add project-specific CSS. diff --git a/themes/m10c/assets/css/components/_app.scss b/themes/m10c/assets/css/components/_app.scss new file mode 100644 index 0000000..28c7bc9 --- /dev/null +++ b/themes/m10c/assets/css/components/_app.scss @@ -0,0 +1,40 @@ +.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 0.1em; + } +} + +@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; + } +} diff --git a/themes/m10c/assets/css/components/_error_404.scss b/themes/m10c/assets/css/components/_error_404.scss new file mode 100644 index 0000000..c819570 --- /dev/null +++ b/themes/m10c/assets/css/components/_error_404.scss @@ -0,0 +1,7 @@ +.error-404 { + text-align: center; +} + +.error-404-title { + text-transform: uppercase; +} diff --git a/themes/m10c/assets/css/components/_icon.scss b/themes/m10c/assets/css/components/_icon.scss new file mode 100644 index 0000000..207d421 --- /dev/null +++ b/themes/m10c/assets/css/components/_icon.scss @@ -0,0 +1,6 @@ +.icon { + display: block-inline; + width: 1em; + height: 1em; + vertical-align: -0.125em; +} diff --git a/themes/m10c/assets/css/components/_pagination.scss b/themes/m10c/assets/css/components/_pagination.scss new file mode 100644 index 0000000..cc0d8a1 --- /dev/null +++ b/themes/m10c/assets/css/components/_pagination.scss @@ -0,0 +1,24 @@ +.pagination { + display: block; + list-style: none; + padding: 0; + font-size: 0.8em; + text-align: center; + margin: 3em 0; +} + +.page-item { + display: inline-block; + .page-link { + display: block; + padding: 0.285em 0.8em; + } + + &.active { + .page-link { + color: $lightest-color; + border-radius: 2em; + background: $primary-color; + } + } +} diff --git a/themes/m10c/assets/css/components/_post.scss b/themes/m10c/assets/css/components/_post.scss new file mode 100644 index 0000000..b8265a7 --- /dev/null +++ b/themes/m10c/assets/css/components/_post.scss @@ -0,0 +1,17 @@ +.post-title { + color: $lightest-color; +} + +.post-content { + pre { + border-left: 0.4em solid rgba($primary-color, .8); + padding-left: 1em; + } + img { + max-width: 100%; + } +} + +.post-meta { + font-size: 0.8em; +} diff --git a/themes/m10c/assets/css/components/_posts_list.scss b/themes/m10c/assets/css/components/_posts_list.scss new file mode 100644 index 0000000..2fe0cf0 --- /dev/null +++ b/themes/m10c/assets/css/components/_posts_list.scss @@ -0,0 +1,17 @@ +.posts-list { + padding: 0; +} + +.posts-list-item { + list-style: none; + &:not(:last-child) { + border-bottom: 1px dashed rgba(255, 255, 255, 0.3); + } + padding: 0.4em 0; +} + +.posts-list-item-description { + display: block; + font-size: 0.8em; +} + diff --git a/themes/m10c/assets/css/components/_tag.scss b/themes/m10c/assets/css/components/_tag.scss new file mode 100644 index 0000000..8bf628a --- /dev/null +++ b/themes/m10c/assets/css/components/_tag.scss @@ -0,0 +1,15 @@ +.tag { + display: inline-block; + margin-right: 0.2em; + padding: 0 0.6em; + font-size: 0.9em; + border-radius: 0.2em; + white-space: nowrap; + background: rgba(255, 255, 255, 0.1); + transition: color 0.35s, background 0.35s; + + &:hover { + transition: color 0.25s, background 0.05s; + background: rgba(255, 255, 255, 0.3); + } +} diff --git a/themes/m10c/assets/css/main.scss b/themes/m10c/assets/css/main.scss new file mode 100644 index 0000000..51712e1 --- /dev/null +++ b/themes/m10c/assets/css/main.scss @@ -0,0 +1,19 @@ +$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" }}; + +@import 'base'; + +@import 'components/app'; +@import 'components/error_404'; +@import 'components/icon'; +@import 'components/pagination'; +@import 'components/post'; +@import 'components/posts_list'; +@import 'components/tag'; + +// The last 'extra' import can optionally be overridden on a per project +// basis by creating a /assets/css/_extra.scss file. +@import 'extra'; -- cgit v1.2.3