Created landing page.

This commit is contained in:
Greenscreener
2019-09-08 13:03:05 +02:00
parent 3dcbe47512
commit 1adcd93c73
17 changed files with 324 additions and 78 deletions
+85 -1
View File
@@ -19,7 +19,7 @@ $primary: #0b2a37;
}
}
#home-navbar {
/*#home-navbar {
&:not(.is-fixed-top) {
patek-logo {
font-size: 0;
@@ -49,7 +49,85 @@ $primary: #0b2a37;
background-color: $primary;
color: $primary-invert !important;
font-family: 'Fira Code';
}*/
#landing {
background-color: $primary;
color: $primary-invert;
.patek-logo-top {
text-align: center;
font-size: 70px;
padding-top: 40px;
padding-bottom: 30px;
}
.intro {
text-align: center;
font-family: 'Fira Code';
padding-bottom: 30px;
font-size: 1.3em;
}
a {
color: white !important;
}
.column {
display: flex;
justify-content: center;
}
.big-buttons {
max-width: 62em;
}
.big-button {
width: 100%;
height: 12em;
position: relative;
overflow: hidden;
text-align: center;
padding: 1em;
font-family: 'Fira Code';
transition: transform 0.4s;
border-radius: 5px;
font-weight: 500;
max-width: 30em;
&:hover {
transform: scale(1.02);
cursor: pointer;
color: white;
}
h1 {
font-size: 4em;
font-weight: 500;
patek-logo {
position: relative;
top: -10px;
}
}
.front, .back {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: opacity 0.4s, height 0.4s;
}
.front {
height: 100%;
opacity: 1;
}
.back {
height: 0;
opacity: 0;
}
&:hover, &:focus {
.front {
height: 0;
opacity: 0;
}
.back {
height: 100%;
opacity: 1;
}
}
}
}
.footer {
background-color: $primary;
color: $primary-invert;
@@ -59,6 +137,12 @@ $primary: #0b2a37;
h2 {
color: $primary-invert;
}
a {
color: #73A0E7;
&:hover {
color: white;
}
}
}
.author-media {
margin-bottom: 15px;
+65 -1
View File
@@ -1,7 +1,7 @@
{{ define "title" }} Pátek {{ end }}
{{ define "body" }}
<!--
<div class="hero is-primary">
<div class="hero-body">
<div class="container">
@@ -25,5 +25,69 @@
</div>
{{ partial "footer.html" . }}
{{ partial "js.html" "js/home.js"}}
-->
<div id="landing">
<div class="patek-logo-top">
<patek-logo></patek-logo>
</div>
<div class="intro container">
<section class="section">
{{ .Content }}
</section>
</div>
<div class="big-buttons container">
<section class="section columns is-multiline">
{{ range .Site.Menus.landing }}
<div class="column is-6">
<a href="{{ .URL }}">
<div class="big-button" style="background-color: {{ .Page.Params.buttonColor }}; color: {{ .Page.Params.buttonTextColor | default "white" }}">
<div class="front">
<h1>{{ safeHTML .Title }}</h1>
</div>
<div class="back">
{{ .Page.Summary | truncate 200 }}
</div>
</div>
</a>
</div>
{{ end }}
<!--
<div class="column is-6">
<div class="big-button">
<div class="front">
<h1><patek-logo title="Talks" subtitle="Pátek"></patek-logo></h1>
</div>
<div class="back">
{{ (.Site.GetPage "about").Summary | truncate 250 }}
</div>
</div>
</div>
<div class="column is-6">
<div class="big-button">
<div class="front">
<h1>O nás</h1>
</div>
<div class="back">
{{ (.Site.GetPage "about").Summary | truncate 250 }}
</div>
</div>
</div>
<div class="column is-6">
<div class="big-button">
<div class="front">
<h1>O nás</h1>
</div>
<div class="back">
{{ (.Site.GetPage "about").Summary | truncate 250 }}
</div>
</div>
</div>
-->
</section>
</div>
</div>
{{ partial "footer.html" . }}
{{ end }}