front page layout improvements
Joshua Seigler
|
|
@ -28,6 +28,7 @@ body {
|
|||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #f7f2ea;
|
||||
}
|
||||
|
||||
article,
|
||||
|
|
@ -76,11 +77,9 @@ li {
|
|||
}
|
||||
|
||||
img {
|
||||
float: right;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 50%;
|
||||
margin: 0 0 1em 1em;
|
||||
max-width: 100%;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
|
|
@ -195,9 +194,7 @@ p.articleinfo {
|
|||
main {
|
||||
/* for page and article template */
|
||||
clear: both;
|
||||
background-color: #f7f2ea;
|
||||
overflow: auto;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
|
@ -208,24 +205,31 @@ main {
|
|||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.frontpage>main {
|
||||
.frontpage {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #111833;
|
||||
}
|
||||
|
||||
.frontpage p,
|
||||
.frontpage h2 {
|
||||
color: white;
|
||||
/* margin-bottom: 0; */
|
||||
}
|
||||
|
||||
.frontpage>main img {
|
||||
float: left;
|
||||
/* width: auto; */
|
||||
.frontpage>main {
|
||||
/* width: 60em;
|
||||
max-width: 100%;
|
||||
margin: 0 auto; */
|
||||
}
|
||||
|
||||
.hero-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero-row > * {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.hero-3d-text {
|
||||
height: auto;
|
||||
width: 33.333%;
|
||||
/* margin-top: 15em; */
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
article {
|
||||
|
|
@ -396,7 +400,6 @@ main>.content {
|
|||
main {
|
||||
/* global template */
|
||||
padding-top: 60px;
|
||||
min-height: 100%;
|
||||
}
|
||||
.subpages .content {
|
||||
/* article template */
|
||||
|
|
@ -448,4 +451,18 @@ main>.content {
|
|||
padding-left: 4em;
|
||||
padding-right: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-orange {
|
||||
--headerColor: #FF6028;
|
||||
}
|
||||
.theme-magenta {
|
||||
--headerColor: #FD1D56;
|
||||
}
|
||||
.theme-yellow {
|
||||
--headerColor: #FDA828;
|
||||
}
|
||||
|
||||
section h1, section h2, section h3 {
|
||||
color: var(--headerColor);
|
||||
}
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 210 KiB |
|
Before Width: | Height: | Size: 222 KiB After Width: | Height: | Size: 211 KiB |
|
Before Width: | Height: | Size: 166 KiB After Width: | Height: | Size: 157 KiB |
|
Before Width: | Height: | Size: 219 KiB After Width: | Height: | Size: 209 KiB |
|
|
@ -3,20 +3,6 @@ title:
|
|||
description: Frontpage
|
||||
priority: 1.0
|
||||
---
|
||||
<!-- TODO: data-contract-3d image should be placed above dashbox image (and scaled and fine positioned) -->
|
||||
[]({{ root }}docs/)
|
||||
|
||||
## Tools, Examples and Inspiration for Data Contracts
|
||||
|
||||
Dashdev-Suite Dapp Framework. Making developers life easier.
|
||||
|
||||
<!-- []({{ root }}docs/) -->
|
||||
|
||||
|
||||
[]({{ root }}docs/)
|
||||
[]({{ root }}docs/)
|
||||
[]({{ root }}docs/)
|
||||
|
||||
|
||||
<!-- [Get started…]({{ root }}docs/) -->
|
||||
<!-- <span style="color:red"> [Get started…]({{ root }}docs/) </span> -->
|
||||
|
|
@ -1,32 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
{{> meta }}
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
{{> header }}
|
||||
|
||||
<div class="frontpage">
|
||||
|
||||
<main>
|
||||
|
||||
|
||||
{{#if title}}
|
||||
<h1>{{ title }}</h1>
|
||||
{{/if}}
|
||||
|
||||
{{{ contents }}}
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<main>
|
||||
<div class="hero">
|
||||
<div class="hero-row">
|
||||
<img class="hero-left-screen" src="{{root}}images/front/data-contract-3d.png" />
|
||||
<div class="hero-title">
|
||||
<h2>Tools, Examples and Inspiration for Data Contracts</h2>
|
||||
<div class="hero-subtitle">Dashdev-Suite Dapp Framework. Making developers life easier.</div>
|
||||
</div>
|
||||
{{!-- <img src="" alt="" class="hero-right-screen"> --}}
|
||||
</div>
|
||||
<div class="hero-row">
|
||||
<a href="{{ root }}docs/">
|
||||
<img class="hero-3d-text" src="{{ root }}images/front/dashbox-front-orange.png" alt="dashbox">
|
||||
</a>
|
||||
<a href="{{ root }}docs/">
|
||||
<img class="hero-3d-text" src="{{ root }}images/front/blockman-front-red.png" alt="blockman">
|
||||
</a>
|
||||
<a href="{{ root }}docs/">
|
||||
<img class="hero-3d-text" src="{{ root }}images/front/reactvue-front-yellow.png" alt="reactvue">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{!-- <section class="theme-orange">
|
||||
<h2>Dashbox</h2>
|
||||
<p>text about dashbox</p>
|
||||
</section>
|
||||
<section class="theme-magenta">
|
||||
<h2>Blockman</h2>
|
||||
<p>text about blockman</p>
|
||||
</section>
|
||||
<section class="theme-yellow">
|
||||
<h2>Dashbox</h2>
|
||||
<p>text about reactvue</p>
|
||||
</section> --}}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||