hq/setto.basspistol.com
hq/setto.basspistol.com
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

header styling

Browse source
This commit is contained in:
Set Hallstrom 2020-09-18 11:15:11 +02:00
parent 742772ab6c
commit 113e2433dc
3 changed files with 47 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
_includes/header.html
View file

@ -4,36 +4,36 @@
<div class="imagecontainer"> <div class="imagecontainer">
<h4>{{ page.title }}</h4> <h4>{{ page.title }}</h4>
</div> </div>
<section class="splash">
<div class="container">
<div class="splash-logo">
<img src="{{ site.logo }}" width="240px" alt="{{ site.title }} Logo" />
</div>
<div class="description" {% unless page.url == '/' %}style="padding: 0;"{% endunless %}>
<h1>{{ page.title }}</h1>
{% if page.category == 'releases' %}
{% for album in site.albums %}
{% if album.slug == page.album %}
<h4>by <strong>{{ album.artists }}</strong></h4>
{% endif %}
{% endfor %}
{% endif %}
<p>{{ page.description }}</p>
</div>
</div>
</section>
</header> </header>
<section class="splash">
<div class="container">
<div class="splash-logo" {% unless page.url == '/' %}style="display: none;"{% endunless %}>
<img src="{{ site.logo }}" width="240px" alt="{{ site.title }} Logo" />
</div>
<div {% unless page.url == '/' %}style="padding: 0;"{% endunless %}>
<h1>{{ page.title }}</h1>
{% if page.category == 'releases' %}
{% for album in site.albums %}
{% if album.slug == page.album %}
<h4>by <strong>{{ album.artists }}</strong></h4>
{% endif %}
{% endfor %}
{% endif %}
<p>{{ page.description }}</p>
</div>
</div>
</section>

9
_sass/_elements.scss
View file

@ -303,12 +303,13 @@ a:hover {
} }
} }
.front-section:first-of-type { .front-section:nth-of-type(2) {
margin-top: 40px; margin-top: 40px;
} }
.splash { .splash {
background-color: transparent;
.container { .container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -316,6 +317,12 @@ a:hover {
align-items: flex-start; align-items: flex-start;
max-width: var(--max-width); max-width: var(--max-width);
margin: auto; margin: auto;
.description {
border-radius: var(--border-radius);
background: var(--bg-alt);
background: linear-gradient(90deg, transparent 0%, var(--bg) 91%);
}
h1, h2 { h1, h2 {
font-size: 2em; font-size: 2em;
} }

24
index.html
View file

@ -12,21 +12,21 @@ video_path: /videos/pingu.mp4
<div class="imagecontainer"> <div class="imagecontainer">
<h4>{{ page.title }}</h4> <h4>{{ page.title }}</h4>
</div> </div>
<section class="splash">
<div class="container">
<div class="splash-logo">
<img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" />
</div>
<div class="description">
<h1>{{ site.title }}</h1>
<p>{{ page.description }}</p>
</div>
</div>
</section>
</header> </header>
<section class="splash">
<div class="container">
<div class="splash-logo">
<img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" />
</div>
<div>
<h1>{{ site.title }}</h1>
<p>{{ page.description }}</p>
</div>
</div>
</section>
{% for post in site.posts limit: 3 %} {% for post in site.posts limit: 3 %}
{% if post.category == 'ramblings' %} {% if post.category == 'ramblings' %}
<section class="front-section"> <section class="front-section">