Add an index page
This commit is contained in:
parent
32ef5808fa
commit
aa9789b36d
5 changed files with 205 additions and 5 deletions
8
_layouts/adventures.html
Normal file
8
_layouts/adventures.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<a href="/{{ page.source }}/{{ page.slug }}/">
|
||||
<div class="card" id="adventure">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<h3>An Adventure For {{ page.system }}</h3>
|
||||
<hr>
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
</a>
|
||||
15
_layouts/cards.html
Normal file
15
_layouts/cards.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<a href="/{{ page.source }}/{{ page.slug }}/">
|
||||
<div class="card">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<hr>
|
||||
<figure>
|
||||
<img src="/assets/{{ page.slug }}.png" alt="{{ page.title }} Logo">
|
||||
<hr>
|
||||
<figcaption>{{ content }}</figcaption>
|
||||
<hr>
|
||||
</figure>
|
||||
{% if page.system %}
|
||||
<h3>An Adventure For {{ page.system }}</h3>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
12
_layouts/journals.html
Normal file
12
_layouts/journals.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<a href="/{{ page.source }}/{{ page.slug }}/">
|
||||
<div class="card" id="journal">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<hr>
|
||||
<figure>
|
||||
<img src="/assets/{{ page.slug }}.png" alt="{{ page.title }} Logo">
|
||||
<hr>
|
||||
<figcaption>{{ content }}</figcaption>
|
||||
<hr>
|
||||
</figure>
|
||||
</div>
|
||||
</a>
|
||||
148
assets/home.css
Normal file
148
assets/home.css
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
html {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
body {
|
||||
display: flex;
|
||||
margin: 0 auto; max-width: 1620px;
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
main {
|
||||
position:relative;
|
||||
height:100vh; width: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
main article {
|
||||
margin: 3vh auto; padding: 0; max-width: 90%;
|
||||
}
|
||||
.main-filter {
|
||||
display: none;
|
||||
}
|
||||
/* Typography */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
a,a:visited,a:link,a:focus {
|
||||
text-decoration: none;
|
||||
color: purple;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
a:hover {
|
||||
color: darkorchid;
|
||||
transition: color 0.5s;
|
||||
text-decoration: underline;
|
||||
}
|
||||
article {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
h2 {
|
||||
background-color: black;
|
||||
color: white;
|
||||
box-shadow: 0 10px 10px grey;
|
||||
padding: 0.2em 0.6em;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex; flex-flow: row wrap;
|
||||
|
||||
&#adventure {
|
||||
justify-content: space-evenly;
|
||||
|
||||
a {
|
||||
width: 30%;
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&#journal {
|
||||
justify-content: left;
|
||||
|
||||
a {
|
||||
width: 20vw; max-width: 20vw; min-width: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a,a:visited,a:link,a:focus {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
a:hover {
|
||||
color: #222;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 2px solid black; border-radius: 10px;
|
||||
padding: 0 2em; margin: 1vh 2vw;
|
||||
transition:
|
||||
background-color 0.3s ease-out,
|
||||
box-shadow 0.5s ease-in;
|
||||
|
||||
&#adventure {
|
||||
background-color: grey;
|
||||
|
||||
&:hover {
|
||||
background-color: lightgrey;
|
||||
box-shadow: 10px 5px 5px black;
|
||||
transition:
|
||||
background-color 0.3s ease-in,
|
||||
box-shadow 0.5s ease-out;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&#journal {
|
||||
background-color: darkgoldenrod;
|
||||
|
||||
&:hover {
|
||||
background-color: goldenrod;
|
||||
box-shadow: 10px 5px 5px black;
|
||||
transition:
|
||||
background-color 0.3s ease-in,
|
||||
box-shadow 0.5s ease-out;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
width: 100%; max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media only screen and (max-width: 900px) {
|
||||
body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
article {
|
||||
.cards {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,26 @@
|
|||
---
|
||||
layout: home
|
||||
---
|
||||
# {{ site.title }}
|
||||
{{ site.description }}
|
||||
|
||||
<h2>Journals</h2>
|
||||
<ul>
|
||||
<li><a href="/journals/nataliah">Nataliah Kas Zhukoff</a></li>
|
||||
<li><a href="/journals/bask">Bask Temlin</a></li>
|
||||
</ul>
|
||||
## Adventures
|
||||
<div class="cards" id="adventure">
|
||||
{% for adv in site.adventures %}
|
||||
{{ adv }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
## Journals
|
||||
<div class="cards" id="journal">
|
||||
{% for journal in site.journals %}
|
||||
{{ journal }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
## Tools
|
||||
<div class="cards" id="tool">
|
||||
{% for tool in site.tools %}
|
||||
{{ tool }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue