Blog

Post Title

- - -``` +Ronu is a clean and simple responsive theme for [hugo](https://gohugo.io). Generates beautifully formatted plain html without using any css classes, thanks to [Sakura](https://oxal.org/projects/sakura) - A classless css framework. -Instead, you will have beautifully formatted plain html without having to specify any css classes, thanks to [Sakura](https://oxal.org/projects/sakura) - A classless css framework. +![Ronu screenshot](https://raw.githubusercontent.com/softwareyoga/ronu-hugo-theme/master/images/screenshot.png) -```html - - -

Blog

Post Title>

Content text

- - -``` +**Live demo** : [softwareyoga.com](https://www.softwareyoga.com) 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) +## Features +* Clean html generated with **no** css classes +* Theming support +* Lightning fast load times +* Responsive on all screen sizes +* Automatic dark/light mode based on system preference +* Syntax highlighting +* Pagination +* SEO Friendly +* Google Analytics support +* RSS feed ## Installation ### Requirements -- Hugo 0.91.2 or higher (extended version because of usage of sass) +- Hugo 0.91.2 or higher ### Standard Installation @@ -66,7 +50,7 @@ Second, specify `ronu-hugo-theme` as your default theme in the `config.toml` fil at the top of the file. -## Base configuration +## Basic configuration First include the following configuration in the config file: @@ -93,13 +77,13 @@ Create a list of menu item links in the nav bar by assigning "menu.main" in the ```toml [[menu.main]] - name = "Blog" - url = "/blog/" + name = "Home" + url = "/" weight = 1 - + [[menu.main]] - name = "About" - url = "/about/" + name = "Blog" + url = "/blog/" weight = 2 ``` @@ -123,14 +107,14 @@ Inform your audience about your social presense in the footer, like so: ### 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'. - -Reference values for the 3 built in colour options are specified in the files 'sakura-dark.scss', 'sakura-vader.scss' and 'sakura-white.scss' +Ronu supports Automatic dark/light mode based on system preference. +Ronu theming is based on [Sakura color scheme](https://github.com/oxalorg/sakura/tree/master/css). -To create your own theme, look to the file 'style-in-use.scss' and change the provided colors. +Files with reference values are available in the above link. +To apply a particular theme, copy the css of your choice into the css directory and include it in the partial `head.html`. -![Ronu in dark mode](https://github.com/softwareyoga/ronu-hugo-theme/blob/master/images/screenshot-dark.png) -![Ronu in vader mode](https://github.com/softwareyoga/ronu-hugo-theme/blob/master/images/screenshot-vader.png) +![Ronu in dark mode](https://raw.githubusercontent.com/softwareyoga/ronu-hugo-theme/master/images/screenshot-dark.png) +![Ronu in vader mode](https://raw.githubusercontent.com/softwareyoga/ronu-hugo-theme/master/images/screenshot-vader.png) ## Google Analytics diff --git a/assets/css/normalize.css b/assets/css/normalize.css deleted file mode 100644 index b0c1902..0000000 --- a/assets/css/normalize.css +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} \ No newline at end of file diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss deleted file mode 100644 index 9702451..0000000 --- a/assets/scss/_custom.scss +++ /dev/null @@ -1,30 +0,0 @@ -nav { - font-family: $font-family-base; - letter-spacing: .05em; - - h1 { - display: block; - font-weight: 400; - font-size: 1.3em; - margin: 0 0 .25em 0; - } - - ul { - list-style-type: none; - padding: 0; - } - - li { - display: inline; - color: $color-blossom; - font-size: .8em; - margin: 0 2.75% 0 0; - text-transform: uppercase; - } -} - -#pagination { - display: flex; - justify-content: space-between; - list-style-type: none; -} \ No newline at end of file diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss deleted file mode 100755 index fc420ae..0000000 --- a/assets/scss/_main.scss +++ /dev/null @@ -1,223 +0,0 @@ -/* Sakura.css v1.3.1 - * ================ - * Minimal css theme. - * Project: https://github.com/oxalorg/sakura/ - */ - -/* Body */ - -html { - font-size: 62.5%; // So that root size becomes 10px - font-family: $font-family-base; -} - -body { - // $font-size-base must be a rem value - font-size: $font-size-base; - line-height: 1.618; - max-width: 38em; - margin: auto; - color: $color-text; - background-color: $color-bg; - padding: 13px; -} - -@media (max-width: 684px) { - body { - font-size: $font-size-base * 0.85; - } -} - -@media (max-width: 382px) { - body { - font-size: $font-size-base * 0.75; - } -} - -@mixin word-wrap() { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-word; -} - -h1, h2, h3, h4, h5, h6 { - line-height: 1.1; - font-family: $font-family-heading; - font-weight: 700; - margin-top: 3rem; - margin-bottom: 1.5rem; - @include word-wrap; -} - -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: $color-blossom; -} - -a { - text-decoration: none; - color: $color-blossom; - - &:hover { - color: $color-fade; - 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 { - 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 $color-blossom; - margin-bottom: 2.5rem; - background-color: $color-bg-alt; -} - -blockquote p { - margin-bottom: 0; -} - -img, video { - height: auto; - max-width: 100%; - margin-top: 0px; - margin-bottom: 2.5rem; -} - -/* Pre and Code */ - -pre { - background-color: $color-bg-alt; - 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: $color-bg-alt; - white-space: pre-wrap; -} - -pre > code { - padding: 0; - background-color: transparent; - white-space: pre; -} - -/* Tables */ - -table { - text-align: justify; - width: 100%; - border-collapse: collapse; -} - -td, th { - padding: 0.5em; - border-bottom: 1px solid $color-bg-alt; -} - -/* Buttons, forms and input */ - -input, textarea { - border: 1px solid $color-text; - - &:focus { - border: 1px solid $color-blossom; - } -} - -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: $color-blossom; - color: $color-bg; - border-radius: 1px; - border: 1px solid $color-blossom; - cursor: pointer; - box-sizing: border-box; - - &[disabled] { - cursor: default; - opacity: .5; - } - - &:focus:enabled, &:hover:enabled { - background-color: $color-fade; - border-color: $color-fade; - color: $color-bg; - outline: 0; - } -} - -textarea, select, input { - color: $color-text; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - margin-bottom: 10px; - background-color: $color-bg-alt; - border: 1px solid $color-bg-alt; - border-radius: 4px; - box-shadow: none; - box-sizing: border-box; - - &:focus { - border: 1px solid $color-blossom; - outline: 0; - } -} - -input[type="checkbox"]:focus { - outline: 1px dotted $color-blossom; -} - -label, legend, fieldset { - display: block; - margin-bottom: .5rem; - font-weight: 600; -} diff --git a/assets/scss/sakura-dark-solarized.scss b/assets/scss/sakura-dark-solarized.scss deleted file mode 100644 index ba36a91..0000000 --- a/assets/scss/sakura-dark-solarized.scss +++ /dev/null @@ -1,14 +0,0 @@ -$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 deleted file mode 100755 index fbbb1b2..0000000 --- a/assets/scss/sakura-dark.scss +++ /dev/null @@ -1,14 +0,0 @@ -$color-blossom: #ffffff; -$color-fade: #c9c9c9; - -$color-bg: #222222; -$color-bg-alt: #4a4a4a; - -/* $color-text: #dedce5; */ -$color-text: #c9c9c9; -$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-earthly.scss b/assets/scss/sakura-earthly.scss deleted file mode 100644 index d412466..0000000 --- a/assets/scss/sakura-earthly.scss +++ /dev/null @@ -1,13 +0,0 @@ -$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 deleted file mode 100644 index 3b89945..0000000 --- a/assets/scss/sakura-ink.scss +++ /dev/null @@ -1,13 +0,0 @@ -$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 deleted file mode 100755 index 8438850..0000000 --- a/assets/scss/sakura-vader.scss +++ /dev/null @@ -1,15 +0,0 @@ -$color-force: #DA4453; -$color-blossom: lighten($color-force, 20%); -$color-fade: $color-force; - -$color-bg: #120c0e; -$color-bg-alt: #40363a; - -/* $color-text: #dedce5; */ -$color-text: #d9d8dc; -$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.scss b/assets/scss/sakura.scss deleted file mode 100644 index 26c6651..0000000 --- a/assets/scss/sakura.scss +++ /dev/null @@ -1,13 +0,0 @@ -$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 deleted file mode 100644 index 8358810..0000000 --- a/assets/scss/style-in-use.scss +++ /dev/null @@ -1,16 +0,0 @@ -$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; - -/* Replace values above from the other sakura-*.scss files to generate a different theme */ - -@import "main"; -@import "custom"; \ No newline at end of file diff --git a/exampleSite/.gitignore b/exampleSite/.gitignore index ca4d540..bbcf343 100644 --- a/exampleSite/.gitignore +++ b/exampleSite/.gitignore @@ -25,3 +25,4 @@ _testmain.go /public /themes .DS_Store +.hugo_build.lock diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 49019ac..7993ae2 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -7,8 +7,4 @@ {{ if not .Site.IsServer }} {{ template "_internal/google_analytics_async.html" . }} -{{ end }} - - - \ No newline at end of file +{{ end }} \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 8925363..c407995 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -23,14 +23,9 @@ {{ printf `` .Rel .MediaType.Type .MediaType.Suffix .Permalink $.Site.Title | safeHTML }} {{ end -}} - - {{- $normalize_css := resources.Get "css/normalize.css" }} - - {{- $inServerMode := .Site.IsServer }} - {{- $cssTarget := "css/style.css" }} - {{- $cssOptions := cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true) (dict "targetPath" $cssTarget "outputStyle" "compressed") }} - {{- $style := resources.Get "scss/style-in-use.scss" | toCSS $cssOptions }} - - {{- $css := slice $normalize_css $style | resources.Concat "css/bundle.css" | resources.Minify }} - + + + + + \ No newline at end of file diff --git a/static/css/custom.css b/static/css/custom.css new file mode 100644 index 0000000..7d205a6 --- /dev/null +++ b/static/css/custom.css @@ -0,0 +1,15 @@ +nav ul { + padding: 0; +} + +nav ul li { + display: inline; + margin: 0 3% 0 0; + text-transform: uppercase; +} + +#pagination { + display: flex; + justify-content: space-between; + list-style-type: none; +} \ No newline at end of file diff --git a/static/css/sakura-dark.css b/static/css/sakura-dark.css new file mode 100644 index 0000000..d097a99 --- /dev/null +++ b/static/css/sakura-dark.css @@ -0,0 +1,187 @@ +/* $color-text: #dedce5; */ +/* Sakura.css v1.3.1 + * ================ + * Minimal css theme. + * Project: https://github.com/oxalorg/sakura/ + */ +/* Body */ +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: #c9c9c9; + background-color: #222222; + 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: #ffffff; } + +a { + text-decoration: none; + color: #ffffff; } + a:hover { + color: #c9c9c9; + border-bottom: 2px solid #c9c9c9; } + a:visited { + color: #e6e6e6; } + +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 #ffffff; + margin-bottom: 2.5rem; + background-color: #4a4a4a; } + +blockquote p { + margin-bottom: 0; } + +img, video { + height: auto; + max-width: 100%; + margin-top: 0px; + margin-bottom: 2.5rem; } + +/* Pre and Code */ +pre { + background-color: #4a4a4a; + display: block; + padding: 1em; + overflow-x: auto; + margin-top: 0px; + margin-bottom: 2.5rem; + font-size: 0.9em; } + +code { + font-size: 0.9em; + padding: 0 0.5em; + background-color: #4a4a4a; + white-space: pre-wrap; } + +pre > code { + padding: 0; + background-color: transparent; + white-space: pre; + font-size: 1em; } + +/* Tables */ +table { + text-align: justify; + width: 100%; + border-collapse: collapse; } + +td, th { + padding: 0.5em; + border-bottom: 1px solid #4a4a4a; } + +/* Buttons, forms and input */ +input, textarea { + border: 1px solid #c9c9c9; } + input:focus, textarea:focus { + border: 1px solid #ffffff; } + +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: #ffffff; + color: #222222; + border-radius: 1px; + border: 1px solid #ffffff; + 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: #c9c9c9; + border-color: #c9c9c9; + color: #222222; + outline: 0; } + +textarea, select, input { + color: #c9c9c9; + padding: 6px 10px; + /* The 6px vertically centers text on FF, ignored by Webkit */ + margin-bottom: 10px; + background-color: #4a4a4a; + border: 1px solid #4a4a4a; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } + textarea:focus, select:focus, input:focus { + border: 1px solid #ffffff; + outline: 0; } + +input[type="checkbox"]:focus { + outline: 1px dotted #ffffff; } + +label, legend, fieldset { + display: block; + margin-bottom: .5rem; + font-weight: 600; } \ No newline at end of file diff --git a/static/css/sakura.css b/static/css/sakura.css new file mode 100644 index 0000000..6a68961 --- /dev/null +++ b/static/css/sakura.css @@ -0,0 +1,186 @@ +/* Sakura.css v1.3.1 + * ================ + * Minimal css theme. + * Project: https://github.com/oxalorg/sakura/ + */ +/* Body */ +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: #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: -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: #1d7484; } + +a { + text-decoration: none; + color: #1d7484; } + a:hover { + color: #982c61; + border-bottom: 2px solid #4a4a4a; } + a:visited { + color: #144f5a; } + +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 #1d7484; + margin-bottom: 2.5rem; + background-color: #f1f1f1; } + +blockquote p { + margin-bottom: 0; } + +img, video { + height: auto; + max-width: 100%; + margin-top: 0px; + margin-bottom: 2.5rem; } + +/* Pre and Code */ +pre { + background-color: #f1f1f1; + display: block; + padding: 1em; + overflow-x: auto; + margin-top: 0px; + margin-bottom: 2.5rem; + font-size: 0.9em; } + +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; + font-size: 1em; } + +/* Tables */ +table { + text-align: justify; + width: 100%; + border-collapse: collapse; } + +td, th { + padding: 0.5em; + border-bottom: 1px solid #f1f1f1; } + +/* Buttons, forms and input */ +input, textarea { + border: 1px solid #4a4a4a; } + input:focus, textarea:focus { + border: 1px solid #1d7484; } + +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: #1d7484; + color: #f9f9f9; + border-radius: 1px; + border: 1px solid #1d7484; + 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: #982c61; + border-color: #982c61; + color: #f9f9f9; + outline: 0; } + +textarea, select, input { + color: #4a4a4a; + padding: 6px 10px; + /* The 6px vertically centers text on FF, ignored by Webkit */ + 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:focus { + border: 1px solid #1d7484; + outline: 0; } + +input[type="checkbox"]:focus { + outline: 1px dotted #1d7484; } + +label, legend, fieldset { + display: block; + margin-bottom: .5rem; + font-weight: 600; } \ No newline at end of file diff --git a/theme.toml b/theme.toml index 87809ac..1570e20 100644 --- a/theme.toml +++ b/theme.toml @@ -3,9 +3,9 @@ license = "MIT" licenselink = "https://github.com/softwareyoga/ronu-hugo-theme/blob/master/LICENSE" description = "Clean and simple responsive theme for Hugo with complete separation of html content and css classes." homepage = "https://www.softwareyoga.com" -tags = ["blog", "responsive", "minimal", "clean", "simple", "google-analytics", "minimalist", "syntax-highlighting", "minimalistic"] -features = ["blog", "pagination", "clean", "no-css-html"] -min_version = "0.64.1" +tags = ["blog", "responsive", "minimal", "clean", "simple", "google-analytics", "minimalist", "syntax-highlighting", "minimalistic", "dark mode"] +features = ["blog", "syntax highlighting, "pagination", "clean", "no-css-html", "dark mode"] +min_version = "0.91.2" # If the theme has a single author [author] -- cgit v1.2.3