Skip to content

Commit 1ce54ee

Browse files
KingMoblacarmen
KingMob
authored and
lacarmen
committed
Add Lotus theme to Cryogen (#153)
* Update for some CSS/Sass inconsistencies Created “css” dir, with example CSS and Sass files inside, and added it to :resources list. Removed :sass-dest key from config (should still work with old cryogen-core, since it’ll default to “css” if missing) - pucoming cryogen-core changes always compile Sass to same directory Updated docs to remove :sass-dest * Added Lotus theme * Made img links relative Fixed bug in title tag * Made weird hack to split blog title with <br>'s, since Selmer has no way to split strings, and I don't have a good way to add a custom filter in a theme... * Fixed missing menu opening behavior Updated image URLs to handle blog prefix Removed hacky way of tightening blog title text * Added config.edn for Lotus theme Added README with installation instructions on changing the logo and social media links * Fixed minor typo in Lotus theme README
1 parent 232ddf9 commit 1ce54ee

27 files changed

+1661
-1
lines changed

‎src/leiningen/new/cryogen.clj‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,39 @@
6363
["resources/templates/themes/nucleus/css/style.css" (render "themes/nucleus/css/style.css")]
6464
["resources/templates/themes/nucleus/css/typography.css" (render "themes/nucleus/css/typography.css")]])
6565

66+
(def lotus-theme
67+
[["resources/templates/themes/lotus/config.edn" (render "themes/lotus/config.edn")]
68+
["resources/templates/themes/lotus/README.md" (render "themes/lotus/README.md")]
69+
["resources/templates/themes/lotus/css/_buttons.scss" (render "themes/lotus/css/_buttons.scss")]
70+
["resources/templates/themes/lotus/css/_layout.scss" (render "themes/lotus/css/_layout.scss")]
71+
["resources/templates/themes/lotus/css/_menu.scss" (render "themes/lotus/css/_menu.scss")]
72+
["resources/templates/themes/lotus/css/_typography.scss" (render "themes/lotus/css/_typography.scss")]
73+
["resources/templates/themes/lotus/css/_variables.scss" (render "themes/lotus/css/_variables.scss")]
74+
["resources/templates/themes/lotus/css/blog.scss" (render "themes/lotus/css/blog.scss")]
75+
["resources/templates/themes/lotus/css/lotus-highlightjs.min.css" (render "themes/lotus/css/lotus-highlightjs.min.css")]
76+
["resources/templates/themes/lotus/css/normalize.css" (render "themes/lotus/css/normalize.css")]
77+
["resources/templates/themes/lotus/html/404.html" (render "themes/lotus/html/404.html")]
78+
["resources/templates/themes/lotus/html/archives.html" (render "themes/lotus/html/archives.html")]
79+
["resources/templates/themes/lotus/html/author.html" (render "themes/lotus/html/author.html")]
80+
["resources/templates/themes/lotus/html/base.html" (render "themes/lotus/html/base.html")]
81+
["resources/templates/themes/lotus/html/home.html" (render "themes/lotus/html/home.html")]
82+
["resources/templates/themes/lotus/html/page.html" (render "themes/lotus/html/page.html")]
83+
["resources/templates/themes/lotus/html/post.html" (render "themes/lotus/html/post.html")]
84+
["resources/templates/themes/lotus/html/post-content.html" (render "themes/lotus/html/post-content.html")]
85+
["resources/templates/themes/lotus/html/prev-next.html" (render "themes/lotus/html/prev-next.html")]
86+
["resources/templates/themes/lotus/html/previews.html" (render "themes/lotus/html/previews.html")]
87+
["resources/templates/themes/lotus/html/tag.html" (render "themes/lotus/html/tag.html")]
88+
["resources/templates/themes/lotus/html/tags.html" (render "themes/lotus/html/tags.html")]
89+
["resources/templates/themes/lotus/img/black-lotus.svg" (render "themes/lotus/img/black-lotus.svg")]
90+
["resources/templates/themes/lotus/img/icons.svg" (render "themes/lotus/img/icons.svg")]
91+
["resources/templates/themes/lotus/img/white-lotus.svg" (render "themes/lotus/img/white-lotus.svg")]
92+
["resources/templates/themes/lotus/js/highlight.pack.js" (render "themes/lotus/js/highlight.pack.js")]])
93+
6694
(def themes
6795
(concat blue-theme
6896
blue-centered-theme
69-
nucleus-theme))
97+
nucleus-theme
98+
lotus-theme))
7099

71100
(defn cryogen
72101
"Create a new Cryogen project"

‎src/leiningen/new/cryogen/themes/lotus/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# About Lotus
2+
An elegant and responsive theme for Cryogen by [Matthew Davidson](https://github.com/KingMob). To see it live, visit my site, [modulolotus.net](https://modulolotus.net).
3+
4+
# Install
5+
6+
1. Change the `:theme` key in `resources/templates/config.edn` to "lotus".
7+
2. Replace the GitHub and LinkedIn links in `base.html` with links to your own profiles. (More social media icons can be found in `icons.svg`.)
8+
3. Replace the white lotus logo with the logo of your choice in `base.html`.

‎src/leiningen/new/cryogen/themes/lotus/config.edn‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{:sass-src ["themes/lotus/css"]
2+
:resources ["themes/lotus/img"]}

‎src/leiningen/new/cryogen/themes/lotus/css/_buttons.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@import "variables";
2+
3+
.button {
4+
background: none;
5+
border: $default-border;
6+
position: relative;
7+
display: inline-block;
8+
padding: 7px 12px;
9+
margin: 0;
10+
width: auto;
11+
font-family: $wide-font-family;
12+
font-size: $button-font-size;
13+
text-transform: uppercase;
14+
15+
cursor: pointer;
16+
text-align: left;
17+
text-decoration: none;
18+
letter-spacing: 2px;
19+
20+
&:hover {
21+
background: $default-border-color;
22+
color: $white;
23+
}
24+
25+
&:active {
26+
top: 1px;
27+
}
28+
}

‎src/leiningen/new/cryogen/themes/lotus/css/_layout.scss‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
@import "variables";
2+
3+
body {
4+
display: flex;
5+
flex-flow: row nowrap;
6+
align-items: stretch;
7+
justify-content: space-between;
8+
9+
@media (max-width: $mobile-breakpoint) {
10+
flex-flow: column nowrap;
11+
}
12+
}
13+
14+
#sidebar {
15+
@media (min-width: $mobile-breakpoint) {
16+
flex: 0 0 auto;
17+
height: 100vh;
18+
}
19+
@media (max-width: $mobile-breakpoint) {
20+
flex: 1 0 auto;
21+
width: 100vw;
22+
}
23+
}
24+
25+
#sidebar-links {
26+
display: flex;
27+
flex-flow: column nowrap;
28+
justify-content: space-between;
29+
align-items: stretch;
30+
31+
@media (max-width: $mobile-breakpoint) {
32+
flex-flow: row nowrap;
33+
}
34+
}
35+
36+
.post-header {
37+
h1 {
38+
margin-top: 0;
39+
}
40+
41+
.byline {
42+
display: flex;
43+
justify-content: space-between;
44+
margin-bottom: 1.375rem;
45+
46+
@media (max-width: $tablet-breakpoint) {
47+
margin-bottom: 1.375rem;
48+
}
49+
50+
@media (max-width: $mobile-breakpoint) {
51+
margin-bottom: 1.25rem;
52+
}
53+
}
54+
}
55+
56+
#main {
57+
flex: 1 1 0;
58+
59+
@media (min-width: $mobile-breakpoint) {
60+
height: 100vh;
61+
overflow-y: scroll;
62+
}
63+
}
64+
65+
#prev-next {
66+
display: flex;
67+
align-items: center;
68+
flex-flow: row nowrap;
69+
justify-content: space-between;
70+
71+
.prev, .next {
72+
display: flex;
73+
align-items: center;
74+
flex-flow: row nowrap;
75+
76+
flex: 1 1 50%;
77+
fill: currentColor;
78+
text-decoration: none;
79+
80+
.icon {
81+
flex: 0 0 1em;
82+
height: 1em;
83+
width: 1em;
84+
}
85+
86+
.nav-text {
87+
flex: 1 1 0;
88+
margin-left: 1em;
89+
margin-right: 1em;
90+
text-align: center;
91+
}
92+
}
93+
}

‎src/leiningen/new/cryogen/themes/lotus/css/_menu.scss‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
@import "variables";
2+
3+
#menucont {
4+
#menu-checkbox {
5+
display: none;
6+
}
7+
8+
.menutitle {
9+
display: none;
10+
}
11+
12+
.menu {
13+
margin: 0;
14+
padding: 0;
15+
16+
li {
17+
width: 100%;
18+
list-style-type: none;
19+
padding: 0;
20+
21+
a {
22+
color: #FFF;
23+
width: 100%;
24+
margin: 0;
25+
font-weight: 300;
26+
text-transform: uppercase;
27+
line-height: 22px;
28+
text-decoration: none;
29+
letter-spacing: 2px;
30+
}
31+
32+
&:hover {
33+
background: rgba(0, 0, 0, 0.2);
34+
}
35+
36+
&.active {
37+
background: rgba(0, 0, 0, 0.2);
38+
39+
a {
40+
font-weight: 600;
41+
}
42+
}
43+
44+
.menu-item-text {
45+
padding: $default-gutter/2 $default-gutter;
46+
width: 100%;
47+
}
48+
}
49+
}
50+
}
51+
52+
// From the awesome animate.css
53+
@keyframes fadeIn {
54+
from {
55+
opacity: 0;
56+
}
57+
58+
to {
59+
opacity: 1;
60+
}
61+
}
62+
63+
@media screen and (max-width: $mobile-breakpoint) {
64+
65+
#menucont {
66+
#menu-checkbox {
67+
&:checked ~ .menu {
68+
display: block;
69+
margin-bottom: .5em;
70+
}
71+
}
72+
73+
.menutitle {
74+
display: flex;
75+
align-items: center;
76+
77+
padding: $default-gutter/2 $default-gutter;
78+
cursor: pointer;
79+
text-transform: uppercase;
80+
opacity: $default-opacity;
81+
82+
.icon-menu {
83+
// color: currentColor;
84+
fill: currentColor;
85+
86+
// margin: 0 0 0 2px;
87+
// font-size: $default-font-size * 1.2;
88+
height: $default-font-size;
89+
width: $default-font-size;
90+
}
91+
92+
.menu-text {
93+
margin: 0 0 0 .8em;
94+
font-size: $default-font-size;
95+
font-weight: $font-weight-heavy;
96+
letter-spacing: 2px;
97+
line-height: 1;
98+
}
99+
}
100+
101+
.menu {
102+
animation-name: fadeIn;
103+
animation-duration: 1s;
104+
animation-fill-mode: both;
105+
106+
display: none;
107+
108+
li {
109+
&.active {
110+
background: transparent;
111+
112+
a, a:hover {
113+
font-weight: 600;
114+
color: #FFF;
115+
}
116+
}
117+
118+
a {
119+
width: 100%;
120+
display: inline-block;
121+
margin: 0;
122+
line-height: 23px;
123+
color: rgba(255, 255, 255, 0.6);
124+
font-weight: 300;
125+
text-transform: uppercase;
126+
}
127+
128+
.menu-item-text {
129+
padding: $default-gutter/4 $default-gutter;
130+
}
131+
}
132+
}
133+
}
134+
}

0 commit comments

Comments
 (0)