diff --git a/themes/qogir/assets/css/main.css b/themes/qogir/assets/css/main.css deleted file mode 100644 index 15107fb..0000000 --- a/themes/qogir/assets/css/main.css +++ /dev/null @@ -1,59 +0,0 @@ -body { - padding: 0 0.25rem; - margin: auto; - max-width: 48rem; - color: #e6ebef; - background: #32343d; - font-family: 'Roboto', 'Ubuntu', sans-serif; -} - -h1, h2, h3, h4, h5, h6 { - margin: 0; -} - -a { - color: #a9caf1; - text-decoration: none; -} -a:hover { - color: #d5e5f8; -} - -.post-item { - padding: 3%; - border-radius: 0.25rem; - background: #282a33; -} -.post-item h2 a { - color: #e6ebef; -} -.post-item div { - /* Make the same value as in post-item's 3% padding. - * 100 / 94 = ratio .post-item width / this div width, - * 94 = 100% - (3% * 2), where - * 3% is the padding in .post-item, - * 3 * 2 = padding-left + padding-right = 3% + 3% - */ - margin-top: calc(3% * 100 / (100 - 3 * 2)); -} - -a.button { - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - - background: transparent; - color: #e6ebef; - border: 0.0625rem solid rgba(255, 255, 255, 0.2); - - transition: - background-color 0.075s linear, - border-color 0.1s linear; -} -a.button:hover { - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.1); -} -a.button:active { - background: #5294e2; - border-color: #5294e2; -} diff --git a/themes/qogir/assets/scss/button.scss b/themes/qogir/assets/scss/button.scss new file mode 100644 index 0000000..1ac668e --- /dev/null +++ b/themes/qogir/assets/scss/button.scss @@ -0,0 +1,22 @@ +a.button { + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + + background: transparent; + color: $fg; + border: 0.0625rem solid $border; + + transition: + background-color 0.075s linear, + border-color 0.1s linear; + + &:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.1); + } + + &:active { + background: $bg-selected; + border-color: $bg-selected; + } +} diff --git a/themes/qogir/assets/scss/colors.scss b/themes/qogir/assets/scss/colors.scss new file mode 100644 index 0000000..a93b394 --- /dev/null +++ b/themes/qogir/assets/scss/colors.scss @@ -0,0 +1,7 @@ +$base: #282a33; +$bg: #32343d; +$fg: #e6ebef; +$link: #a9caf1; +$link-hover: #d5e5f8; +$border: rgba(255, 255, 255, 0.2); +$bg-selected: #5294e2; diff --git a/themes/qogir/assets/scss/main.scss b/themes/qogir/assets/scss/main.scss new file mode 100644 index 0000000..e344346 --- /dev/null +++ b/themes/qogir/assets/scss/main.scss @@ -0,0 +1,23 @@ +@import "colors.scss"; + +body { + padding: 0 0.25rem; + margin: auto; + max-width: 48rem; + color: $fg; + background: $bg; + font-family: 'Roboto', 'Ubuntu', sans-serif; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +a { + color: $link; + text-decoration: none; + + &:hover { + color: $link-hover; + } +} diff --git a/themes/qogir/assets/scss/post-item.scss b/themes/qogir/assets/scss/post-item.scss new file mode 100644 index 0000000..7dd9ac3 --- /dev/null +++ b/themes/qogir/assets/scss/post-item.scss @@ -0,0 +1,21 @@ +@import "colors.scss"; + +.post-item { + padding: 3%; + border-radius: 0.25rem; + background: $base; + + h2 a { + color: $fg; + } + + div { + /* Make the same value as in post-item's 3% padding. + * 100 / 94 = ratio .post-item width / this div width, + * 94 = 100% - (3% * 2), where + * 3% is the padding in .post-item, + * 3 * 2 = padding-left + padding-right = 3% + 3% + */ + margin-top: calc(3% * 100 / (100 - 3 * 2)); + } +} diff --git a/themes/qogir/layouts/partials/head.html b/themes/qogir/layouts/partials/head.html index 02c2240..30554d6 100644 --- a/themes/qogir/layouts/partials/head.html +++ b/themes/qogir/layouts/partials/head.html @@ -1,5 +1,6 @@