Skip to content

Commit a89d5dd

Browse files
RodFireProductionsRodFireProductions
committed
Bettering the navigation
1 parent 044cb47 commit a89d5dd

File tree

9 files changed

+109
-50
lines changed

9 files changed

+109
-50
lines changed

‎_includes/navigation.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<nav>
2-
<ul>
2+
<ul class="{{ include.style }}">
33
<li><a href={{ "./" | relative_url }}>Home</a></li>
4+
<li><a href={{ "./characters" | relative_url }}>Characters</a></li>
5+
<li><a href={{ "./about" | relative_url }}>About</a></li>
46
</ul>
57
</nav>

‎_layouts/base.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,14 @@
1111
<body>
1212
<header>
1313
<h1>{{ page.title }}</h1>
14-
{% include navigation.html %}
1514
</header>
16-
<main>
17-
{{ content }}
18-
</main>
15+
<div id="page">
16+
{% include navigation.html style="side" %}
17+
<main>
18+
{{ content }}
19+
</main>
20+
</div>
21+
1922
{% include footer.html %}
2023
</body>
2124
</html>

‎_layouts/character.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
<link rel="shortcut icon" href="{{ 'assets/img/' | append: page.image.icon | relative_url }}">
2020
</head>
2121
<body>
22-
{% include navigation.html %}
22+
23+
{% include navigation.html style="top" %}
2324

2425
{% if page.style == 1 %}
2526
<aside id="body-image">

‎_layouts/tag.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,16 @@
1111
<body>
1212
<header>
1313
<h1>{{ page.title }}</h1>
14-
{% include navigation.html %}
1514
</header>
16-
<main>
1715

18-
{% include character_widget_group.html characters=page.characters %}
16+
<div id="page">
17+
{% include navigation.html style="side" %}
18+
19+
<main>
20+
{% include character_widget_group.html characters=page.characters %}
21+
</main>
22+
</div>
1923

20-
</main>
2124
{% include footer.html %}
2225
</body>
2326
</html>

‎_pages/about.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: About
3+
layout: base
4+
5+
example_group:
6+
- c:example
7+
- c:example2
8+
- c:example
9+
---
10+
11+
These are just example code.
12+
13+
## Character Widgets
14+
15+
### Displaying an individual widget.
16+
{% include character_widget.html character="c:example" %}
17+
18+
### Displaying a group of widgets.
19+
{% include character_widget_group.html characters=page.example_group %}
20+
21+
### Displaying all widgets.
22+
{% include character_widget_all.html %}

‎_pages/characters.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: Characters
3+
layout: base
4+
---
5+
6+
{% if site.characters.size != 1 %}
7+
All {{ site.characters.size}} Characters!
8+
{% else %}
9+
The Single Character!
10+
{% endif %}
11+
12+
<!-- Displays all character widgets. -->
13+
{% include character_widget_all.html %}

‎_pages/index.md‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
---
22
title: Lil-Ref
33
layout: base
4-
5-
group:
6-
- c:example
7-
- c:example2
8-
- c:example
94
---
105

11-
## Displaying an individual widget.
12-
{% include character_widget.html character="c:example" %}
13-
14-
## Displaying a group of widgets.
15-
{% include character_widget_group.html characters=page.group %}
6+
An original character directory template.
167

17-
## Displaying all widgets.
18-
{% include character_widget_all.html %}
8+
See the example characters:
9+
{% include character_widget.html character="c:example" %}
10+
{% include character_widget.html character="c:example2" %}

‎assets/css/universal.css‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ body {
66
font-family: var(--main-font);
77
font-size: var(--font-size);
88
margin: 0px;
9-
padding: 1em 11em;
9+
padding: 1em 10em;
1010
}
1111
@media only screen and (max-width: 1200px) {
1212
body {
@@ -24,13 +24,54 @@ body {
2424
}
2525
}
2626

27+
#page {
28+
display: grid;
29+
grid-template-columns: 150px 1fr;
30+
grid-template-rows: auto 1fr;
31+
grid-template-areas: 'nav main' 'empy main';
32+
33+
grid-gap: 1em;
34+
}
35+
2736
main {
37+
grid-area: main;
2838
background-color: var(--fg-color);
2939
background-image: var(--fg-image);
3040

3141
padding: 1em;
3242
border-radius: 5px;
3343
}
44+
nav {
45+
grid-area: nav;
46+
background-color: var(--fg-color);
47+
display: block;
48+
}
49+
nav ul {
50+
list-style: '';
51+
padding: 0px;
52+
margin: 0px;
53+
display: grid;
54+
grid-auto-flow: row;
55+
grid-gap: 2px;
56+
}
57+
58+
nav ul.top {
59+
position: absolute;
60+
background-color: var(--fg-color);
61+
top: 0;
62+
left: 0;
63+
width: 100%;
64+
65+
grid-auto-flow: column;
66+
justify-content: center;
67+
68+
}
69+
70+
nav li {
71+
padding: .5em;
72+
}
73+
74+
/***/
3475

3576
h1, h2, h3, h4, h5, h6 {
3677
color: var(--header-color);
@@ -68,24 +109,6 @@ hr {
68109
image-rendering: crisp-edges;
69110
}
70111

71-
/* Navigation */
72-
nav {
73-
background-color: var(--fg-color);
74-
display: block;
75-
position: absolute;
76-
left: 0;
77-
top: 0;
78-
width: 100%;
79-
max-width: 100vw;
80-
}
81-
nav ul {
82-
list-style: '';
83-
padding: 0px;
84-
margin: 0px;
85-
display: grid;
86-
grid-auto-flow: column;
87-
justify-content: space-around;
88-
}
89112

90113
/* Heading */
91114

@@ -116,6 +139,7 @@ hgroup p {
116139

117140
text-align: center;
118141
border: 1px var(--accent-color) solid;
142+
margin: 5px;
119143
}
120144
.character-widgets .character-widget {
121145
width: auto;

‎readme.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,14 @@ Inspired by sites like [Toyhou.se](https://toyhou.se) and [RefSheet](https://ref
44

55
You can see the demo here: [demo](https://rodfireproductions.github.io/Lil-Ref/)
66

7-
The spiritual predecessor of [RefMine](https://refmine.shroom.ink),
7+
The spiritual successor of [RefMine](https://refmine.shroom.ink),
88
a project that got rewritten multiple times but never released.
99
A project I started when I was a lot less experienced.
1010
I just needed to restart again with a blank slate.
1111

1212
Features
1313
- Two layout styles: Wiki, and Full-Body.
1414

15-
16-
To-Do
17-
- [ ] Make gallery and permissions a separate tab
18-
- [ ] Make a way to display a group of widgets with a certain tag
19-
- [ ] Create better home page and other useful pages
20-
2115
## Set Up Locally
2216

2317
Pre-requisites:
@@ -33,9 +27,14 @@ Your site should be available at [http://localhost:4000/](http://localhost:4000/
3327

3428
## Creating Character Pages
3529

36-
It uses the [YAML](https://yaml.org/) syntax.
30+
1. Create a new markdown file in `_characters`.
31+
2. Copy and paste the contents of `blank_charater.md` in drafts into your new file.
32+
3. Then you just gotta fill in your character's info! (There are multiple comments to help you.)
33+
34+
## Contribution
35+
Contribution is very much welcome. I'm sure there are many things that can be improved.
3736

3837
## License
3938
Lil-Ref's code is licensed under the [Do What The F*ck You Want To Public License](https://github.com/RodFireProductions/Lil-Ref/blob/master/LICENSE).
4039

41-
Basically, you can do whatever you want with this.
40+
Basically, you can do whatever you want with this. I'd love to see your creations, though.

0 commit comments

Comments
 (0)