fix layout
This commit is contained in:
Set Hallstrom
parent
b03bf1ae16
commit
b21ed40794
|
|
@ -1,39 +1,18 @@
|
|||
{% include relBase.html %}
|
||||
<header class="hero" id="top"
|
||||
style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}">
|
||||
<header class="hero" style="background-image: url({{ page.image }});">
|
||||
<div class="textcontainer">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ page.description }}</p>
|
||||
{% if page.category == 'releases' %}
|
||||
<p><a href="#plwrap" class="button">Listen</a></p>
|
||||
{% endif %}
|
||||
{% if page.category == 'ramblings' %}
|
||||
<p><a href="#read" class="button">Read</a></p>
|
||||
{% endif %}
|
||||
{% if page.url == '/404/' %}
|
||||
<p><a href="/" class="button">Take me home</a></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="imagecontainer">
|
||||
<h4>{{ page.title }}</h4>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -303,59 +303,9 @@ a:hover {
|
|||
}
|
||||
|
||||
}
|
||||
.front-section:nth-of-type(2) {
|
||||
margin-top: 40px;
|
||||
|
||||
}
|
||||
|
||||
.splash {
|
||||
background-color: transparent;
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 40px;
|
||||
align-items: flex-start;
|
||||
max-width: var(--max-width);
|
||||
margin: auto;
|
||||
.description {
|
||||
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--bg-alt);
|
||||
background: linear-gradient(90deg, transparent 0%, var(--bg) 91%);
|
||||
}
|
||||
h1, h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
p, h1, h2, h3, h4 {
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
div {
|
||||
max-width: unset;
|
||||
margin: 0;
|
||||
flex: 1 1 300px;
|
||||
padding: 0 0 0 80px;
|
||||
|
||||
}
|
||||
.splash-logo {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@media only screen and (max-width: 759px) {
|
||||
div {
|
||||
min-width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.splash-logo {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#contact {
|
||||
padding: 20px;
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ body {
|
|||
.wrapper {
|
||||
margin: 20px 40px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -40,16 +41,18 @@ body {
|
|||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 40px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
min-height: 80vh;
|
||||
width: 100vw;
|
||||
|
||||
.textcontainer {
|
||||
background-color: var(--bg-alt);
|
||||
background: rgb(2,0,36);
|
||||
background: linear-gradient(90deg, transparent 0%, var(--bg) 91%);
|
||||
border-radius: var(--border-radius);
|
||||
max-width: 700px;
|
||||
padding: 20px 20px 40px 20px;
|
||||
max-width: var(--max-width);
|
||||
padding: 0px 40px 40px 40px;
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
@ -57,7 +60,7 @@ body {
|
|||
h1,
|
||||
p {
|
||||
flex: 1 0 100%;
|
||||
width: 100%;
|
||||
|
||||
z-index: 10;
|
||||
color: var(--fg);
|
||||
max-width: var(--max-width);
|
||||
|
|
@ -100,6 +103,56 @@ body {
|
|||
filter: blur(1px);
|
||||
}
|
||||
}
|
||||
.splash {
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 40px;
|
||||
align-items: flex-start;
|
||||
max-width: var(--max-width);
|
||||
margin: auto;
|
||||
.description {
|
||||
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--bg-alt);
|
||||
background: linear-gradient(90deg, transparent 0%, var(--bg) 91%);
|
||||
> * {
|
||||
margin: 40px !important;
|
||||
}
|
||||
}
|
||||
h1, h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
p, h1, h2, h3, h4 {
|
||||
text-align: left;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
div {
|
||||
max-width: unset;
|
||||
margin: 0;
|
||||
flex: 1 1 300px;
|
||||
|
||||
|
||||
}
|
||||
.splash-logo {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@media only screen and (max-width: 759px) {
|
||||
div {
|
||||
min-width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.splash-logo {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
|
|
|
|||
BIN
images/posts/Screenshot_20200918_112312.jpg
Normal file
BIN
images/posts/Screenshot_20200918_112312.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
|
|
@ -8,12 +8,12 @@ video_path: /videos/pingu.mp4
|
|||
---
|
||||
{% include relBase.html %}
|
||||
<header class="hero" id="top"
|
||||
style="{% unless page.video_path %}background-image: url({{ page.image }});{% endunless %}">
|
||||
style="background-image: url({{ page.image }});">
|
||||
<div class="imagecontainer">
|
||||
<h4>{{ page.title }}</h4>
|
||||
</div>
|
||||
<section class="splash">
|
||||
<div class="container">
|
||||
|
||||
<div class="splash">
|
||||
<div class="splash-logo">
|
||||
<img src="{{ site.icon }}" width="240px" alt="{{ site.title }} Logo" />
|
||||
</div>
|
||||
|
|
@ -23,7 +23,7 @@ video_path: /videos/pingu.mp4
|
|||
<p>{{ page.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue