commit 281ec2a09fb6878596284cc00322eeffcd59fdae parent 60dc9245c15d21739d28f7b701942ff0fc27bce9 Author: Yohanes Bandung <bandungpenting@gmail.com> Date: Fri, 1 May 2020 16:57:09 +0700 style: refactor notes and move scss mixins to variables.scss Diffstat:
| M | assets/content.scss | | | 138 | ++++++++++++++++++++++++++++++++++++------------------------------------------- |
| M | assets/styles.scss | | | 35 | ++++++++++++----------------------- |
| M | assets/variables.scss | | | 21 | +++++++++++++++++++++ |
| M | layouts/index.html | | | 18 | +++++++++++------- |
| M | layouts/partials/footer/footer.html | | | 2 | +- |
| M | layouts/partials/post/notes-item.html | | | 6 | +++--- |
6 files changed, 111 insertions(+), 109 deletions(-)
diff --git a/assets/content.scss b/assets/content.scss @@ -1,95 +1,84 @@ @import "fonts"; @import "variables"; -@mixin themify($themes: $themes) { - @each $theme, $map in $themes { - - .theme-#{$theme} & { - $theme-map: () !global; - @each $key, $submap in $map { - $value: map-get(map-get($themes, $theme), '#{$key}'); - $theme-map: map-merge($theme-map, ($key: $value)) !global; - } - - @content; - $theme-map: null !global; - } - - } -} - @function themed($key) { @return map-get($theme-map, $key); } .content { - @include themify($themes) { - font-family: $font-text; - width: 100%; - pre { - overflow: auto; - padding: 0.5em; + font-family: $font-text; + width: 100%; + pre { + overflow: auto; + padding: 0.5em; + } + code { + padding: 0.1em; + font-family: $font-mono; + font-size: 0.9em; + } + table { + display: block; + overflow-x: auto; + border-collapse: collapse; + td, th { + border: 1px solid #ddd; } - code { - padding: 0.1em; - font-family: $font-mono; - font-size: 0.9em; + td { + padding: 0.5em 1em; } - table { - display: block; - overflow-x: auto; - border-collapse: collapse; - td, th { - border: 1px solid #ddd; - } - td { - padding: 0.5em 1em; - } - th { - padding: 1em 2em; - background-color: #333; + th { + padding: 1em 2em; + background-color: #333; + @include themify($themes) { color: themed('color-text'); } - tr:nth-child(even) { - background-color: #333; - } - tr:hover { - background-color: #303030; - } } - ul { - padding: 0; - li { - position: relative; - list-style: none; - padding-left: 20px; - margin-bottom: 10px; - &:before { - display: inline-block; - content: "- "; - position: absolute; - width: 20px; + tr:nth-child(even) { + background-color: #333; + } + tr:hover { + background-color: #303030; + } + } + ul { + padding: 0; + li { + position: relative; + list-style: none; + padding-left: 20px; + margin-bottom: 10px; + &:before { + display: inline-block; + content: "- "; + position: absolute; + width: 20px; + @include themify($themes) { color: themed('color-red'); - left: 0; } + left: 0; } } } - - .notes { - & > p { - margin-top: 5px; - } - margin-bottom: 2em; - @media (max-width: 599px) { - &__title { - margin: 10px 0 0; - &__separator { - display: none; - } - display: flex; - flex-direction: column; +} +.notes { + & > p { + margin: 0; + margin-top: 0.7em; + } + &__title { + margin: 0; + } + padding: 0 0.7em; + margin-bottom: 2em; + @media (max-width: 599px) { + &__title { + margin: 10px 0 0; + &__separator { + display: none; } + display: flex; + flex-direction: column; } } -}- \ No newline at end of file +} diff --git a/assets/styles.scss b/assets/styles.scss @@ -2,27 +2,6 @@ @import "fonts"; @import "content"; -@mixin themify($themes: $themes) { - @each $theme, $map in $themes { - - .theme-#{$theme} & { - $theme-map: () !global; - @each $key, $submap in $map { - $value: map-get(map-get($themes, $theme), '#{$key}'); - $theme-map: map-merge($theme-map, ($key: $value)) !global; - } - - @content; - $theme-map: null !global; - } - - } -} - -@function themed($key) { - @return map-get($theme-map, $key); -} - html { @include themify($themes) { background-color: themed('color-background'); @@ -95,7 +74,7 @@ a { background-color: themed('color-background-hover'); } } - &:first-child:not(.header__menu__list__item) { + &:first-child:not(.header__menu__list__item .listing_post) { margin-left: -0.5em; } } @@ -127,7 +106,17 @@ time { } .listing { - margin-left: 0.5em; + &__post { + padding-bottom: 1.3em !important; + &__title { + margin-top: 0.7em; + margin-bottom: 0; + } + &__description { + margin: 0; + margin-top: 0.8em; + } + } } .header { diff --git a/assets/variables.scss b/assets/variables.scss @@ -1,3 +1,24 @@ +@mixin themify($themes: $themes) { + @each $theme, $map in $themes { + + .theme-#{$theme} & { + $theme-map: () !global; + @each $key, $submap in $map { + $value: map-get(map-get($themes, $theme), '#{$key}'); + $theme-map: map-merge($theme-map, ($key: $value)) !global; + } + + @content; + $theme-map: null !global; + } + + } +} + +@function themed($key) { + @return map-get($theme-map, $key); +} + $themes: ( light: ( color-text: #242424, diff --git a/layouts/index.html b/layouts/index.html @@ -9,13 +9,17 @@ <h2>Blog Posts:</h2> <div class="listing"> {{ range first 5 (where .Site.RegularPages "Type" "posts") }} - <p> - <a href={{ .Permalink }} class="button full-width"> - <time>{{ .Date.Format "02 Jan 2006" }}</time> - <br> - <span class="link-white">{{ .Title }}</span> ยป - </a> - </p> + <a href={{ .Permalink }} class="button full-width listing__post"> + <h3 class="listing__post__title"> + {{ .Title }} + </h3> + <time class="listing__post__date"> + {{ .Date.Format "02 Jan 2006" }} + </time> + {{ with .Description }} + <p class="link-white listing__post__description">{{ . }}</p> + {{ end }} + </a> {{ end }} {{ $postURL := "/posts" | absURL }} </div> diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html @@ -12,7 +12,7 @@ <a class="button" href="https://twitter.com/{{ .Site.Params.Twitter }}" rel="me">Twitter</a> <a class="button" href="https://micro.blog/{{ .Site.Params.Microblog }}" rel="me">Micro.blog</a> <a class="button" href="https://indieweb.social/@ybbond" rel="me">Mastodon</a> - <a class="button" href={{ "index.xml" | absURL }}>RSS</a> + <a class="button" href={{ "posts/index.xml" | absURL }}>RSS</a> </p> </div> <p class="footer__copyright"> diff --git a/layouts/partials/post/notes-item.html b/layouts/partials/post/notes-item.html @@ -1,14 +1,14 @@ {{ $dateformat := .Date.Format "2006-01-02 15:04" }} {{ $idslug := (print $dateformat "-") | urlize }} <div class="notes"> - <h4 class="notes__title" id={{ $idslug }}> + <p class="notes__title" id={{ $idslug }}> <span> <time class="notes__title__date"> {{ .Date.Format "02 Jan 2006" }} </time> {{ if .Title }} {{ else }} - <a href="#{{ $idslug }}">#</a></span> + <a href="/notes/#{{ $idslug }}">#</a></span> {{ end }} </span> {{ with .Title}} @@ -17,6 +17,6 @@ {{ with .Title}} <span class="notes__title__title">{{ . }} <a href="#{{ $idslug }}">#</a></span> {{ end }} - </h4> + </p> {{ .Content }} </div> \ No newline at end of file