From db83b90edb86021be872c3541f4a8eb68897c09c Mon Sep 17 00:00:00 2001 From: Deepak Karanth Date: Mon, 23 Nov 2020 17:15:35 +0000 Subject: update sakura and added terms html for tags and categories display --- README.md | 6 +-- assets/scss/_custom.scss | 2 +- assets/scss/_main.scss | 53 ++++++++++++++++------ assets/scss/sakura-dark-solarized.scss | 14 ++++++ assets/scss/sakura-dark.scss | 6 ++- assets/scss/sakura-earthly.scss | 13 ++++++ assets/scss/sakura-ink.scss | 13 ++++++ assets/scss/sakura-vader.scss | 5 +- assets/scss/sakura.scss | 13 ++++++ assets/scss/style-in-use.scss | 16 ++++--- ...e.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content | 2 +- layouts/_default/list.html | 2 +- layouts/_default/terms.html | 8 ++++ layouts/index.html | 11 +++++ 14 files changed, 132 insertions(+), 32 deletions(-) create mode 100644 assets/scss/sakura-dark-solarized.scss create mode 100644 assets/scss/sakura-earthly.scss create mode 100644 assets/scss/sakura-ink.scss create mode 100644 assets/scss/sakura.scss create mode 100644 layouts/_default/terms.html create mode 100644 layouts/index.html diff --git a/README.md b/README.md index 7946d01..0eaeab7 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Instead, you will have beautifully formatted plain html without having to specif ``` -The uncluttered user interface (and clean code) make it a delight to work with, focussing on the most important aspect - The Content. +The uncluttered user interface (and clean code) makes it a delight to work with, focussing on the most important aspect - The Content. ![Ronu screenshot](https://github.com/softwareyoga/ronu-hugo-theme/blob/master/images/screenshot.png) @@ -123,9 +123,9 @@ siteDescription = "Your awesome site description" ### Theme colours -Ronu ships with 3 optional colour schemes based on [Sakura color scheme](https://github.com/oxalorg/sakura/tree/master/scss). To apply a particular colour, change the variables in 'style-in-use.scss'. +Ronu ships with many colour schemes based on [Sakura color scheme](https://github.com/oxalorg/sakura/tree/master/scss). To apply a particular colour, change the variables in 'style-in-use.scss'. -Reference values for the 3 built in colour options are specified in the files 'sakura-dark.scss', 'sakura-vader.scss' and 'sakura-white.scss' +Reference values for the built in colour options are specified in the files 'sakura-white.scss', 'sakura-dark.scss', 'sakura-vader.scss' and 'sakura-white.scss' etc. To create your own theme, look to the file 'style-in-use.scss' and change the provided colors. diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index e5a9528..9702451 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -1,5 +1,5 @@ nav { - font-family: $font-family-serif; + font-family: $font-family-base; letter-spacing: .05em; h1 { diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index daf6284..fc420ae 100755 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -1,14 +1,14 @@ -/* Sakura.css v1.0.0 +/* Sakura.css v1.3.1 * ================ * Minimal css theme. - * Project: https://github.com/oxalorg/sakura + * Project: https://github.com/oxalorg/sakura/ */ /* Body */ html { font-size: 62.5%; // So that root size becomes 10px - font-family: $font-family-serif; + font-family: $font-family-base; } body { @@ -39,16 +39,14 @@ body { word-wrap: break-word; -ms-word-break: break-all; word-break: break-word; - -ms-hyphens: auto; - -moz-hyphens: auto; - -webkit-hyphens: auto; - hyphens: auto; } h1, h2, h3, h4, h5, h6 { line-height: 1.1; - font-family: $font-family-sans-serif; + font-family: $font-family-heading; font-weight: 700; + margin-top: 3rem; + margin-bottom: 1.5rem; @include word-wrap; } @@ -59,6 +57,11 @@ h4 { font-size: 1.5em } h5 { font-size: 1.25em } h6 { font-size: 1em } +p { + margin-top: 0px; + margin-bottom: 2.5rem; +} + small, sub, sup { font-size: 75%; } @@ -76,10 +79,16 @@ a { border-bottom: 2px solid $color-text; } + &:visited { + color: darken($color-blossom, 10%); + } + } ul { padding-left: 1.4em; + margin-top: 0px; + margin-bottom: 2.5rem; } li { @@ -87,14 +96,26 @@ li { } blockquote { - font-style: italic; - margin-left: 1.5em; + margin-left: 0px; + margin-right: 0px; padding-left: 1em; - border-left: 3px solid $color-blossom; + padding-top: 0.8em; + padding-bottom: 0.8em; + padding-right: 0.8em; + border-left: 5px solid $color-blossom; + margin-bottom: 2.5rem; + background-color: $color-bg-alt; +} + +blockquote p { + margin-bottom: 0; } -img { +img, video { + height: auto; max-width: 100%; + margin-top: 0px; + margin-bottom: 2.5rem; } /* Pre and Code */ @@ -104,6 +125,8 @@ pre { display: block; padding: 1em; overflow-x: auto; + margin-top: 0px; + margin-bottom: 2.5rem; } code { @@ -165,7 +188,7 @@ textarea { opacity: .5; } - &:focus, &:hover { + &:focus:enabled, &:hover:enabled { background-color: $color-fade; border-color: $color-fade; color: $color-bg; @@ -173,7 +196,7 @@ textarea { } } -textarea, select, input[type] { +textarea, select, input { color: $color-text; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ margin-bottom: 10px; @@ -196,5 +219,5 @@ input[type="checkbox"]:focus { label, legend, fieldset { display: block; margin-bottom: .5rem; - font-weight: 600; + font-weight: 600; } diff --git a/assets/scss/sakura-dark-solarized.scss b/assets/scss/sakura-dark-solarized.scss new file mode 100644 index 0000000..ba36a91 --- /dev/null +++ b/assets/scss/sakura-dark-solarized.scss @@ -0,0 +1,14 @@ +$color-blossom: #2aa198; +$color-fade: #657b83; + +$color-bg: #002b36; +$color-bg-alt: #073642; + +/* $color-text: #dedce5; */ +$color-text: #839496; +$font-size-base: 1.8rem; + +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; + +@import "main"; diff --git a/assets/scss/sakura-dark.scss b/assets/scss/sakura-dark.scss index 446e1e1..fbbb1b2 100755 --- a/assets/scss/sakura-dark.scss +++ b/assets/scss/sakura-dark.scss @@ -8,5 +8,7 @@ $color-bg-alt: #4a4a4a; $color-text: #c9c9c9; $font-size-base: 1.8rem; -$font-family-sans-serif: Verdana, Geneva, sans-serif; -$font-family-serif: serif; +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; + +@import "main"; diff --git a/assets/scss/sakura-earthly.scss b/assets/scss/sakura-earthly.scss new file mode 100644 index 0000000..d412466 --- /dev/null +++ b/assets/scss/sakura-earthly.scss @@ -0,0 +1,13 @@ +$color-blossom: #007559; +$color-fade: #006994; + +$color-bg: #ffffff; +$color-bg-alt: #f7f7f7; + +$color-text: #222222; +$font-size-base: 1.8rem; + +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; + +@import "main"; diff --git a/assets/scss/sakura-ink.scss b/assets/scss/sakura-ink.scss new file mode 100644 index 0000000..3b89945 --- /dev/null +++ b/assets/scss/sakura-ink.scss @@ -0,0 +1,13 @@ +$color-blossom: #3b22ea; +$color-fade: #DA4453; + +$color-bg: #ffffff; +$color-bg-alt: #f7f7f7; + +$color-text: rgba(0,0,0,0.85); +$font-size-base: 1.8rem; + +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; + +@import "main"; diff --git a/assets/scss/sakura-vader.scss b/assets/scss/sakura-vader.scss index 9ad435b..8438850 100755 --- a/assets/scss/sakura-vader.scss +++ b/assets/scss/sakura-vader.scss @@ -9,6 +9,7 @@ $color-bg-alt: #40363a; $color-text: #d9d8dc; $font-size-base: 1.8rem; -$font-family-sans-serif: Verdana, Geneva, sans-serif; -$font-family-serif: serif; +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; +@import "main"; diff --git a/assets/scss/sakura.scss b/assets/scss/sakura.scss new file mode 100644 index 0000000..26c6651 --- /dev/null +++ b/assets/scss/sakura.scss @@ -0,0 +1,13 @@ +$color-blossom: #1d7484; +$color-fade: #982c61; + +$color-bg: #f9f9f9; +$color-bg-alt: #f1f1f1; + +$color-text: #4a4a4a; +$font-size-base: 1.8rem; + +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; + +@import "main"; diff --git a/assets/scss/style-in-use.scss b/assets/scss/style-in-use.scss index 5cd1cd4..eebdbc1 100644 --- a/assets/scss/style-in-use.scss +++ b/assets/scss/style-in-use.scss @@ -1,14 +1,16 @@ -$color-blossom: #2c8898; -$color-fade: #982c61; +$color-force: #DA4453; +$color-blossom: lighten($color-force, 20%); +$color-fade: $color-force; -$color-bg: #f9f9f9; -$color-bg-alt: #f1f1f1; +$color-bg: #120c0e; +$color-bg-alt: #40363a; -$color-text: #4a4a4a; +/* $color-text: #dedce5; */ +$color-text: #d9d8dc; $font-size-base: 1.8rem; -$font-family-sans-serif: Verdana, Geneva, sans-serif; -$font-family-serif: serif; +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; /* Replace values above from the other sakura-*.scss files to generate a different theme */ diff --git a/exampleSite/resources/_gen/assets/scss/scss/style-in-use.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content b/exampleSite/resources/_gen/assets/scss/scss/style-in-use.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content index ed26298..e8662ed 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/style-in-use.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content +++ b/exampleSite/resources/_gen/assets/scss/scss/style-in-use.scss_33d66d0b5f8b04b1d41c1da7ba50ddae.content @@ -1 +1 @@ -html{font-size:62.5%;font-family:serif}body{font-size:1.8rem;line-height:1.618;max-width:38em;margin:auto;color:#4a4a4a;background-color:#f9f9f9;padding:13px}@media (max-width: 684px){body{font-size:1.53rem}}@media (max-width: 382px){body{font-size:1.35rem}}h1,h2,h3,h4,h5,h6{line-height:1.1;font-family:Verdana,Geneva,sans-serif;font-weight:700;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}h1{font-size:2.35em}h2{font-size:2.00em}h3{font-size:1.75em}h4{font-size:1.5em}h5{font-size:1.25em}h6{font-size:1em}small,sub,sup{font-size:75%}hr{border-color:#2c8898}a{text-decoration:none;color:#2c8898}a:hover{color:#982c61;border-bottom:2px solid #4a4a4a}ul{padding-left:1.4em}li{margin-bottom:0.4em}blockquote{font-style:italic;margin-left:1.5em;padding-left:1em;border-left:3px solid #2c8898}img{max-width:100%}pre{background-color:#f1f1f1;display:block;padding:1em;overflow-x:auto}code{font-size:0.9em;padding:0 0.5em;background-color:#f1f1f1;white-space:pre-wrap}pre>code{padding:0;background-color:transparent;white-space:pre}table{text-align:justify;width:100%;border-collapse:collapse}td,th{padding:0.5em;border-bottom:1px solid #f1f1f1}input,textarea{border:1px solid #4a4a4a}input:focus,textarea:focus{border:1px solid #2c8898}textarea{width:100%}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;padding:5px 10px;text-align:center;text-decoration:none;white-space:nowrap;background-color:#2c8898;color:#f9f9f9;border-radius:1px;border:1px solid #2c8898;cursor:pointer;box-sizing:border-box}.button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled]{cursor:default;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type="submit"]:focus,input[type="submit"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="button"]:focus,input[type="button"]:hover{background-color:#982c61;border-color:#982c61;color:#f9f9f9;outline:0}textarea,select,input[type]{color:#4a4a4a;padding:6px 10px;margin-bottom:10px;background-color:#f1f1f1;border:1px solid #f1f1f1;border-radius:4px;box-shadow:none;box-sizing:border-box}textarea:focus,select:focus,input[type]:focus{border:1px solid #2c8898;outline:0}input[type="checkbox"]:focus{outline:1px dotted #2c8898}label,legend,fieldset{display:block;margin-bottom:.5rem;font-weight:600}nav{font-family:serif;letter-spacing:.05em}nav h1{display:block;font-weight:400;font-size:1.3em;margin:0 0 .25em 0}nav ul{list-style-type:none;padding:0}nav li{display:inline;color:#2c8898;font-size:.8em;margin:0 2.75% 0 0;text-transform:uppercase}#pagination{display:flex;justify-content:space-between;list-style-type:none} +html{font-size:62.5%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}body{font-size:1.8rem;line-height:1.618;max-width:38em;margin:auto;color:#d9d8dc;background-color:#120c0e;padding:13px}@media (max-width: 684px){body{font-size:1.53rem}}@media (max-width: 382px){body{font-size:1.35rem}}h1,h2,h3,h4,h5,h6{line-height:1.1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-weight:700;margin-top:3rem;margin-bottom:1.5rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word}h1{font-size:2.35em}h2{font-size:2.00em}h3{font-size:1.75em}h4{font-size:1.5em}h5{font-size:1.25em}h6{font-size:1em}p{margin-top:0px;margin-bottom:2.5rem}small,sub,sup{font-size:75%}hr{border-color:#eb99a1}a{text-decoration:none;color:#eb99a1}a:hover{color:#DA4453;border-bottom:2px solid #d9d8dc}a:visited{color:#e26f7a}ul{padding-left:1.4em;margin-top:0px;margin-bottom:2.5rem}li{margin-bottom:0.4em}blockquote{margin-left:0px;margin-right:0px;padding-left:1em;padding-top:0.8em;padding-bottom:0.8em;padding-right:0.8em;border-left:5px solid #eb99a1;margin-bottom:2.5rem;background-color:#40363a}blockquote p{margin-bottom:0}img,video{height:auto;max-width:100%;margin-top:0px;margin-bottom:2.5rem}pre{background-color:#40363a;display:block;padding:1em;overflow-x:auto;margin-top:0px;margin-bottom:2.5rem}code{font-size:0.9em;padding:0 0.5em;background-color:#40363a;white-space:pre-wrap}pre>code{padding:0;background-color:transparent;white-space:pre}table{text-align:justify;width:100%;border-collapse:collapse}td,th{padding:0.5em;border-bottom:1px solid #40363a}input,textarea{border:1px solid #d9d8dc}input:focus,textarea:focus{border:1px solid #eb99a1}textarea{width:100%}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;padding:5px 10px;text-align:center;text-decoration:none;white-space:nowrap;background-color:#eb99a1;color:#120c0e;border-radius:1px;border:1px solid #eb99a1;cursor:pointer;box-sizing:border-box}.button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled]{cursor:default;opacity:.5}.button:focus:enabled,.button:hover:enabled,button:focus:enabled,button:hover:enabled,input[type="submit"]:focus:enabled,input[type="submit"]:hover:enabled,input[type="reset"]:focus:enabled,input[type="reset"]:hover:enabled,input[type="button"]:focus:enabled,input[type="button"]:hover:enabled{background-color:#DA4453;border-color:#DA4453;color:#120c0e;outline:0}textarea,select,input{color:#d9d8dc;padding:6px 10px;margin-bottom:10px;background-color:#40363a;border:1px solid #40363a;border-radius:4px;box-shadow:none;box-sizing:border-box}textarea:focus,select:focus,input:focus{border:1px solid #eb99a1;outline:0}input[type="checkbox"]:focus{outline:1px dotted #eb99a1}label,legend,fieldset{display:block;margin-bottom:.5rem;font-weight:600}nav{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;letter-spacing:.05em}nav h1{display:block;font-weight:400;font-size:1.3em;margin:0 0 .25em 0}nav ul{list-style-type:none;padding:0}nav li{display:inline;color:#eb99a1;font-size:.8em;margin:0 2.75% 0 0;text-transform:uppercase}#pagination{display:flex;justify-content:space-between;list-style-type:none} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index e45e63b..6b12990 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,5 +1,5 @@ {{ define "main" }} - {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" site.Params.mainSections) }} + {{ $paginator := .Paginate (.Pages) }} {{ range $paginator.Pages }}

{{ .Title }}{{ if .Draft }} ::Draft{{ end }}

diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html new file mode 100644 index 0000000..9c471f2 --- /dev/null +++ b/layouts/_default/terms.html @@ -0,0 +1,8 @@ +{{ define "main" }} +

{{ .Title }}

+ +{{ end }} \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..e45e63b --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,11 @@ +{{ define "main" }} + {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" site.Params.mainSections) }} + + {{ range $paginator.Pages }} +

{{ .Title }}{{ if .Draft }} ::Draft{{ end }}

+ {{ .Description | plainify | safeHTML }} + Read More. + {{ end }} + + {{ partial "pagination.html" . }} +{{ end }} \ No newline at end of file -- cgit v1.2.3