Skip to content

Commit 934db8e

Browse files
luizdepraluizdepra
authored
Add SCSS via Asset Pipeline (luizdepra#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
1 parent 1d8e193 commit 934db8e

22 files changed

+778
-572
lines changed

‎.editorconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ trim_trailing_whitespace = false
2222
indent_size = 2
2323

2424
# web files
25-
[*.{html,css,less}]
25+
[*.{html,css,scss}]
2626
indent_size = 2
2727

2828
[Makefile]

‎Makefile

+2-28
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,10 @@
1-
# LESS params
2-
LESS_DIR = ./static/less
3-
LESS_FILE = style.less
4-
LESS_RTL_FILE = style-rtl.less
1+
.PHONY: demo clear
52

6-
# CSS params
7-
CSS_DIR = ./static/css
8-
CSS_FILE = style.min.css
9-
CSS_RTL_FILE = style-rtl.min.css
10-
CSS_TMP_FILE = tmp.css
11-
12-
define build_less
13-
lessc $(LESS_DIR)/$(1) > $(CSS_DIR)/$(CSS_TMP_FILE)
14-
uglifycss $(CSS_DIR)/$(CSS_TMP_FILE) > $(CSS_DIR)/$(2)
15-
rm -f $(CSS_DIR)/$(CSS_TMP_FILE)
16-
endef
17-
18-
.PHONY: clean demo build build-ltr build-rtl
19-
20-
build: clean build-ltr build-rtl
21-
22-
build-ltr:
23-
$(call build_less,$(LESS_FILE),$(CSS_FILE))
24-
25-
build-rtl:
26-
$(call build_less,$(LESS_RTL_FILE),$(CSS_RTL_FILE))
27-
28-
demo: build
3+
demo:
294
mkdir -p demo/themes/coder
305
rsync -av exampleSite/* demo
316
rsync -av --exclude='demo' --exclude='exampleSite' --exclude='.git' . demo/themes/coder
327
cd demo && hugo serve -D
338

349
clean:
35-
rm -f $(CSS_DIR)/*.css
3610
rm -rf demo

‎README.md

+5-9
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ A simple and clean blog theme for Hugo.
44

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

7+
**Coder is using Asset Pipeline now!**
8+
9+
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.
10+
711
## How to use this theme
812

913
To use `hugo-coder` go through the following steps.
@@ -52,12 +56,6 @@ disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.
5256
# Custom CSS
5357
custom_css = []
5458

55-
# RTL support
56-
rtl = false
57-
58-
# Multilanguage mode
59-
langseparator = "|" # Separates menus from language selectors when site is multilingual.
60-
6159
# Social links
6260
[[params.social]]
6361
name = "Github"
@@ -92,7 +90,7 @@ Each `language` section overrides default site's parameters when that language i
9290

9391
```toml
9492
[params]
95-
langseparator = "|" # separates menus from language selectors.
93+
author = "John Doe"
9694

9795
[languages]
9896
[languages.en]
@@ -101,7 +99,6 @@ Each `language` section overrides default site's parameters when that language i
10199

102100
# You can configure the theme parameter for each language.
103101
[languages.en.params]
104-
author = "John Doe"
105102
info = "Full Stack DevOps and Magician"
106103
description = "John Doe's personal website"
107104
keywords = "blog,developer,personal"
@@ -124,7 +121,6 @@ Each `language` section overrides default site's parameters when that language i
124121
title = "John Doe po polsku"
125122

126123
[languages.pl.params]
127-
author = "John Doe"
128124
description = "Strona domowa John'a Doe"
129125
keywords = "blog,developer,strona domowa"
130126
info = "Full Stack DevOps i Magik"

‎assets/scss/_base.scss

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
*,
2+
*:after,
3+
*:before {
4+
box-sizing: inherit;
5+
}
6+
7+
html {
8+
box-sizing: border-box;
9+
font-size: 62.5%;
10+
}
11+
12+
body {
13+
display:flex;
14+
color: $fg-color;
15+
background-color: $bg-color;
16+
font-family: 'Fira Mono', monospace;
17+
font-size: 1.6em;
18+
font-weight: 400;
19+
letter-spacing: 0.0625em;
20+
line-height: 1.8em;
21+
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
22+
font-size: 1.4em;
23+
line-height: 1.6em;
24+
}
25+
}
26+
27+
a {
28+
font-weight: 700;
29+
color: $alt-fg-color;
30+
text-decoration: none;
31+
&:focus,
32+
&:hover {
33+
text-decoration: underline;
34+
}
35+
}
36+
37+
p {
38+
margin: 1.6rem 0 1.6rem 0;
39+
a {
40+
font-weight: 400;
41+
color: $alt-fg-color;
42+
text-decoration: underline;
43+
text-underline-position: under;
44+
&:focus,
45+
&:hover {
46+
color: $link-color;
47+
}
48+
}
49+
}
50+
51+
h1,
52+
h2,
53+
h3,
54+
h4,
55+
h5,
56+
h6 {
57+
color: $alt-fg-color;
58+
text-transform: uppercase;
59+
letter-spacing: 0.0625em;
60+
margin: 3.2rem 0 1.6rem 0;
61+
}
62+
63+
h1 {
64+
font-size: 3.2rem;
65+
line-height: 3.2rem;
66+
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
67+
font-size: 2.8rem;
68+
line-height: 2.8rem;
69+
}
70+
}
71+
h2 {
72+
font-size: 2.8rem;
73+
line-height: 2.8rem;
74+
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
75+
font-size: 2.4rem;
76+
line-height: 2.4rem;
77+
}
78+
}
79+
h3 {
80+
font-size: 2.4rem;
81+
line-height: 2.4rem;
82+
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
83+
font-size: 2.0rem;
84+
line-height: 2.0rem;
85+
}
86+
}
87+
h4 {
88+
font-size: 2.2rem;
89+
line-height: 2.2rem;
90+
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
91+
font-size: 1.8rem;
92+
line-height: 1.8rem;
93+
}
94+
}
95+
h5 {
96+
font-size: 2.0rem;
97+
line-height: 2.0rem;
98+
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
99+
font-size: 1.6rem;
100+
line-height: 1.6rem;
101+
}
102+
}
103+
h6 {
104+
font-size: 1.4rem;
105+
line-height: 1.4rem;
106+
}
107+
108+
pre {
109+
margin: 1.6rem 0 1.0rem 0;
110+
padding: 1.6rem;
111+
overflow-x: auto;
112+
}
113+
114+
code {
115+
display: inline-block;
116+
background-color: $alt-fg-color;
117+
color: $bg-color;
118+
padding: 0.4rem 0.8rem 0.4rem 0.8rem;
119+
}
120+
121+
blockquote {
122+
border-left: 2px solid $alt-bg-color;
123+
padding-left: 1.6rem;
124+
font-style: italic;
125+
}
126+
127+
th, td {
128+
padding: 1.6rem;
129+
}
130+
table {
131+
border-collapse: collapse;
132+
}
133+
table td, table th {
134+
border: 2px solid $alt-fg-color;
135+
}
136+
table tr:first-child th {
137+
border-top: 0;
138+
}
139+
table tr:last-child td {
140+
border-bottom: 0;
141+
}
142+
table tr td:first-child,
143+
table tr th:first-child {
144+
border-left: 0;
145+
}
146+
table tr td:last-child,
147+
table tr th:last-child {
148+
border-right: 0;
149+
}
150+
151+
img {
152+
max-width: 100%;
153+
}
154+
155+
.wrapper {
156+
display: flex;
157+
flex-direction: column;
158+
min-height: 100vh;
159+
width: 100%;
160+
}
161+
162+
.container {
163+
margin: 0 auto;
164+
max-width: 120.0rem;
165+
width: 100%;
166+
padding-left: 2.0rem;
167+
padding-right: 2.0rem;
168+
}
169+
170+
.float-right {
171+
float: right;
172+
}
173+
174+
.float-left {
175+
float: left;
176+
}

‎assets/scss/_content.scss

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
.content {
2+
flex: 1;
3+
margin-top: 1.6rem;
4+
margin-bottom: 3.2rem;
5+
article {
6+
header {
7+
margin-top: 3.2rem;
8+
margin-bottom: 3.2rem;
9+
h1, h2 {
10+
margin: 0;
11+
}
12+
h2 {
13+
margin-top: 1.0rem;
14+
font-size: 1.8rem;
15+
color: $fg-color;
16+
@media only screen and (max-device-width : 768px) {
17+
font-size: 1.6rem;
18+
}
19+
}
20+
}
21+
}
22+
}
23+
24+
.avatar img{
25+
width: 20rem;
26+
height: auto;
27+
border-radius: 50%;
28+
@media only screen and (max-device-width : 768px) {
29+
width: 10rem;
30+
}
31+
}
32+
33+
.list {
34+
ul {
35+
margin: 3.2rem 0 3.2rem 0;
36+
list-style: none;
37+
padding: 0;
38+
li {
39+
font-size: 1.6rem;
40+
@media only screen and (max-device-width : 768px) {
41+
font-size: 1.4rem;
42+
margin: 1.6rem 0 1.6rem 0;
43+
}
44+
span {
45+
display: inline-block;
46+
width: 20.0rem;
47+
text-align: right;
48+
margin-right: 3.0rem;
49+
text-align: right;
50+
margin-right: 3.0rem;
51+
@media only screen and (max-device-width : 768px) {
52+
display: block;
53+
text-align: left;
54+
}
55+
}
56+
a {
57+
text-transform: uppercase;
58+
}
59+
}
60+
}
61+
}
62+
63+
.centered {
64+
display: flex;
65+
height: 100%;
66+
align-items: center;
67+
justify-content: center;
68+
.about {
69+
text-align: center;
70+
h1 {
71+
margin-top: 2.0rem;
72+
margin-bottom: 0.5rem;
73+
}
74+
h2 {
75+
margin-top: 1.0rem;
76+
margin-bottom: 0.5rem;
77+
font-size: 2.4rem;
78+
@media only screen and (max-device-width : 768px) {
79+
font-size: 2.0rem;
80+
}
81+
}
82+
ul {
83+
list-style: none;
84+
margin: 3.0rem 0 1.0rem 0;
85+
padding: 0;
86+
li {
87+
display: inline-block;
88+
position: relative;
89+
a {
90+
text-transform: uppercase;
91+
margin-left: 1.0rem;
92+
margin-right: 1.0rem;
93+
font-size: 1.6rem;
94+
@media only screen and (max-device-width : 768px) {
95+
font-size: 1.4rem;
96+
}
97+
}
98+
}
99+
}
100+
}
101+
102+
.error {
103+
text-align: center;
104+
h1 {
105+
margin-top: 2.0rem;
106+
margin-bottom: 0.5rem;
107+
font-size: 4.6rem;
108+
@media only screen and (max-device-width : 768px) {
109+
font-size: 3.2rem;
110+
}
111+
}
112+
h2 {
113+
margin-top: 2.0rem;
114+
margin-bottom: 3.2rem;
115+
font-size: 3.2rem;
116+
@media only screen and (max-device-width : 768px) {
117+
font-size: 2.8rem;
118+
}
119+
}
120+
}
121+
}

0 commit comments

Comments
 (0)