Skip to content

/ hugo-coder

Permalink
Browse files

Add SCSS via Asset Pipeline (#65) 

* Remove old files

* Add SCSS pipeline

* Add generated files

* Fix navigation HTML

* Fix media queries

* Remove RTL

* Fix styling for big screens

* Remove separator configs

* Fix menu dropdown

* Add working mobile menu

* Fix menu item heights

* Update README
  • Loading branch information
@luizdepra
luizdepra committed Aug 21, 2018
Verified
This commit was created on GitHub.com and signed with a verified signature using GitHub’s key.
GPG key ID: 4AEE18F83AFDEB23 Learn about signing commits
1 parent 1d8e193 commit 934db8e96492db45469694d1a7c68ad9c231dd8d
2 .editorconfig
View file
@@ -22,7 +22,7 @@ trim_trailing_whitespace = false
indent_size = 2

# web files
[*.{html,css,less}]
[*.{html,css,scss}]
indent_size = 2

[Makefile]
30 Makefile
View file
@@ -1,36 +1,10 @@
# LESS params
LESS_DIR = ./static/less
LESS_FILE = style.less
LESS_RTL_FILE = style-rtl.less
.PHONY: demo clear

# CSS params
CSS_DIR = ./static/css
CSS_FILE = style.min.css
CSS_RTL_FILE = style-rtl.min.css
CSS_TMP_FILE = tmp.css

define build_less
lessc $(LESS_DIR)/$(1) > $(CSS_DIR)/$(CSS_TMP_FILE)
uglifycss $(CSS_DIR)/$(CSS_TMP_FILE) > $(CSS_DIR)/$(2)
rm -f $(CSS_DIR)/$(CSS_TMP_FILE)
endef

.PHONY: clean demo build build-ltr build-rtl

build: clean build-ltr build-rtl

build-ltr:
$(call build_less,$(LESS_FILE),$(CSS_FILE))

build-rtl:
$(call build_less,$(LESS_RTL_FILE),$(CSS_RTL_FILE))

demo: build
demo:
mkdir -p demo/themes/coder
rsync -av exampleSite/* demo
rsync -av --exclude='demo' --exclude='exampleSite' --exclude='.git' . demo/themes/coder
cd demo && hugo serve -D

clean:
rm -f $(CSS_DIR)/*.css
rm -rf demo
14 README.md
View file
@@ -4,6 +4,10 @@ A simple and clean blog theme for Hugo.

![](https://github.com/luizdepra/hugo-coder/blob/master/images/screenshot.png)

**Coder is using Asset Pipeline now!**

To use this theme you need Hugo Extended Version, v0.45 or later. But, if you still want to use the old version, you can clone the [v1.0](https://github.com/luizdepra/hugo-coder/releases/tag/v1.0) release.

## How to use this theme

To use `hugo-coder` go through the following steps.
@@ -52,12 +56,6 @@ disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.
# Custom CSS
custom_css = []
# RTL support
rtl = false
# Multilanguage mode
langseparator = "|" # Separates menus from language selectors when site is multilingual.
# Social links
[[params.social]]
name = "Github"
@@ -92,7 +90,7 @@ Each `language` section overrides default site's parameters when that language i

```toml
[params]
langseparator = "|" # separates menus from language selectors.
author = "John Doe"
[languages]
[languages.en]
@@ -101,7 +99,6 @@ Each `language` section overrides default site's parameters when that language i
# You can configure the theme parameter for each language.
[languages.en.params]
author = "John Doe"
info = "Full Stack DevOps and Magician"
description = "John Doe's personal website"
keywords = "blog,developer,personal"
@@ -124,7 +121,6 @@ Each `language` section overrides default site's parameters when that language i
title = "John Doe po polsku"
[languages.pl.params]
author = "John Doe"
description = "Strona domowa John'a Doe"
keywords = "blog,developer,strona domowa"
info = "Full Stack DevOps i Magik"
176 assets/scss/_base.scss
View file
@@ -0,0 +1,176 @@
*,
*:after,
*:before {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: 62.5%;
}

body {
display:flex;
color: $fg-color;
background-color: $bg-color;
font-family: 'Fira Mono', monospace;
font-size: 1.6em;
font-weight: 400;
letter-spacing: 0.0625em;
line-height: 1.8em;
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
font-size: 1.4em;
line-height: 1.6em;
}
}

a {
font-weight: 700;
color: $alt-fg-color;
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
}

p {
margin: 1.6rem 0 1.6rem 0;
a {
font-weight: 400;
color: $alt-fg-color;
text-decoration: underline;
text-underline-position: under;
&:focus,
&:hover {
color: $link-color;
}
}
}

h1,
h2,
h3,
h4,
h5,
h6 {
color: $alt-fg-color;
text-transform: uppercase;
letter-spacing: 0.0625em;
margin: 3.2rem 0 1.6rem 0;
}

h1 {
font-size: 3.2rem;
line-height: 3.2rem;
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
font-size: 2.8rem;
line-height: 2.8rem;
}
}
h2 {
font-size: 2.8rem;
line-height: 2.8rem;
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
font-size: 2.4rem;
line-height: 2.4rem;
}
}
h3 {
font-size: 2.4rem;
line-height: 2.4rem;
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
font-size: 2.0rem;
line-height: 2.0rem;
}
}
h4 {
font-size: 2.2rem;
line-height: 2.2rem;
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
font-size: 1.8rem;
line-height: 1.8rem;
}
}
h5 {
font-size: 2.0rem;
line-height: 2.0rem;
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
font-size: 1.6rem;
line-height: 1.6rem;
}
}
h6 {
font-size: 1.4rem;
line-height: 1.4rem;
}

pre {
margin: 1.6rem 0 1.0rem 0;
padding: 1.6rem;
overflow-x: auto;
}

code {
display: inline-block;
background-color: $alt-fg-color;
color: $bg-color;
padding: 0.4rem 0.8rem 0.4rem 0.8rem;
}

blockquote {
border-left: 2px solid $alt-bg-color;
padding-left: 1.6rem;
font-style: italic;
}

th, td {
padding: 1.6rem;
}
table {
border-collapse: collapse;
}
table td, table th {
border: 2px solid $alt-fg-color;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}

img {
max-width: 100%;
}

.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}

.container {
margin: 0 auto;
max-width: 120.0rem;
width: 100%;
padding-left: 2.0rem;
padding-right: 2.0rem;
}

.float-right {
float: right;
}

.float-left {
float: left;
}
121 assets/scss/_content.scss
View file
@@ -0,0 +1,121 @@
.content {
flex: 1;
margin-top: 1.6rem;
margin-bottom: 3.2rem;
article {
header {
margin-top: 3.2rem;
margin-bottom: 3.2rem;
h1, h2 {
margin: 0;
}
h2 {
margin-top: 1.0rem;
font-size: 1.8rem;
color: $fg-color;
@media only screen and (max-device-width : 768px) {
font-size: 1.6rem;
}
}
}
}
}

.avatar img{
width: 20rem;
height: auto;
border-radius: 50%;
@media only screen and (max-device-width : 768px) {
width: 10rem;
}
}

.list {
ul {
margin: 3.2rem 0 3.2rem 0;
list-style: none;
padding: 0;
li {
font-size: 1.6rem;
@media only screen and (max-device-width : 768px) {
font-size: 1.4rem;
margin: 1.6rem 0 1.6rem 0;
}
span {
display: inline-block;
width: 20.0rem;
text-align: right;
margin-right: 3.0rem;
text-align: right;
margin-right: 3.0rem;
@media only screen and (max-device-width : 768px) {
display: block;
text-align: left;
}
}
a {
text-transform: uppercase;
}
}
}
}

.centered {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
.about {
text-align: center;
h1 {
margin-top: 2.0rem;
margin-bottom: 0.5rem;
}
h2 {
margin-top: 1.0rem;
margin-bottom: 0.5rem;
font-size: 2.4rem;
@media only screen and (max-device-width : 768px) {
font-size: 2.0rem;
}
}
ul {
list-style: none;
margin: 3.0rem 0 1.0rem 0;
padding: 0;
li {
display: inline-block;
position: relative;
a {
text-transform: uppercase;
margin-left: 1.0rem;
margin-right: 1.0rem;
font-size: 1.6rem;
@media only screen and (max-device-width : 768px) {
font-size: 1.4rem;
}
}
}
}
}

.error {
text-align: center;
h1 {
margin-top: 2.0rem;
margin-bottom: 0.5rem;
font-size: 4.6rem;
@media only screen and (max-device-width : 768px) {
font-size: 3.2rem;
}
}
h2 {
margin-top: 2.0rem;
margin-bottom: 3.2rem;
font-size: 3.2rem;
@media only screen and (max-device-width : 768px) {
font-size: 2.8rem;
}
}
}
}

0 comments on commit 934db8e

Please sign in to comment.