joshua/dashdev-website
1
0
Fork 0
mirror of https://github.com/seigler/dashdev-website synced 2025-07-26 22:36:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

front page layout improvements

Browse source
This commit is contained in:
Joshua Seigler 2020-03-27 16:51:50 -04:00
parent 29281b12a2
commit 99b6a10aaa
7 changed files with 72 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/assets/css/styles.css
View file

@ -28,6 +28,7 @@ body {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #f7f2ea;
} }
article, article,
@ -76,11 +77,9 @@ li {
} }
img { img {
float: right;
width: auto; width: auto;
height: auto; height: auto;
max-width: 50%; max-width: 100%;
margin: 0 0 1em 1em;
border: 0 none; border: 0 none;
} }
@ -195,9 +194,7 @@ p.articleinfo {
main { main {
/* for page and article template */ /* for page and article template */
clear: both; clear: both;
background-color: #f7f2ea;
overflow: auto; overflow: auto;
min-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
@ -208,24 +205,31 @@ main {
padding-top: 10px; padding-top: 10px;
} }
.frontpage>main { .frontpage {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: #111833; background-color: #111833;
}
.frontpage p,
.frontpage h2 {
color: white; color: white;
/* margin-bottom: 0; */
} }
.frontpage>main img { .frontpage>main {
float: left; /* width: 60em;
/* width: auto; */ max-width: 100%;
margin: 0 auto; */
}
.hero-row {
display: flex;
}
.hero-row > * {
width: 33.33%;
}
.hero-3d-text {
height: auto; height: auto;
width: 33.333%; margin: 0;
/* margin-top: 15em; */
margin-left: 0;
margin-bottom: 0;
} }
article { article {
@ -396,7 +400,6 @@ main>.content {
main { main {
/* global template */ /* global template */
padding-top: 60px; padding-top: 60px;
min-height: 100%;
} }
.subpages .content { .subpages .content {
/* article template */ /* article template */
@ -449,3 +452,17 @@ main>.content {
padding-right: 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);
}

BIN
src/assets/images/front/blockman-front-red.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 241 KiB

After

Width:  |  Height:  |  Size: 210 KiB

Before After
Before After

BIN
src/assets/images/front/dashbox-front-orange.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 222 KiB

After

Width:  |  Height:  |  Size: 211 KiB

Before After
Before After

BIN
src/assets/images/front/data-contract-3d.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 157 KiB

Before After
Before After

BIN
src/assets/images/front/reactvue-front-yellow.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 219 KiB

After

Width:  |  Height:  |  Size: 209 KiB

Before After
Before After

14
src/html/index.md
View file

@ -3,20 +3,6 @@ title:
description: Frontpage description: Frontpage
priority: 1.0 priority: 1.0
--- ---
<!-- TODO: data-contract-3d image should be placed above dashbox image (and scaled and fine positioned) -->
[![dashbox]({{ root }}images/front/data-contract-3d.png)]({{ root }}docs/)
## Tools, Examples and Inspiration for Data Contracts
Dashdev-Suite Dapp Framework. Making developers life easier.
<!-- [![dashbox]({{ root }}images/front/data_contract_3d.png)]({{ root }}docs/) -->
[![dashbox]({{ root }}images/front/dashbox-front-orange.png)]({{ root }}docs/)
[![dashbox]({{ root }}images/front/blockman-front-red.png)]({{ root }}docs/)
[![dashbox]({{ root }}images/front/reactvue-front-yellow.png)]({{ root }}docs/)
<!-- [Get started&hellip;]({{ root }}docs/) --> <!-- [Get started&hellip;]({{ root }}docs/) -->
<!-- <span style="color:red"> [Get started&hellip;]({{ root }}docs/) </span> --> <!-- <span style="color:red"> [Get started&hellip;]({{ root }}docs/) </span> -->

56
src/layouts/frontpage.hbs
View file

@ -1,32 +1,46 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{{> meta }} {{> meta }}
</head> </head>
<body> <body>
{{> header }} {{> header }}
<div class="frontpage"> <div class="frontpage">
<main>
<main> <div class="hero">
<div class="hero-row">
<img class="hero-left-screen" src="{{root}}images/front/data-contract-3d.png" />
{{#if title}} <div class="hero-title">
<h1>{{ title }}</h1> <h2>Tools, Examples and Inspiration for Data Contracts</h2>
{{/if}} <div class="hero-subtitle">Dashdev-Suite Dapp Framework. Making developers life easier.</div>
</div>
{{{ contents }}} {{!-- <img src="" alt="" class="hero-right-screen"> --}}
</div>
<div class="hero-row">
</main> <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> </div>
</body> </body>
</html> </html>