Adding basic landing page, reorganize and specification, get deca buttons to be responsive

This commit is contained in:
David E. Perez Negron R. 2024-06-19 20:43:15 -06:00
parent 67cd96cd33
commit 98698047bb
4 changed files with 144 additions and 33 deletions

View File

@ -13,6 +13,14 @@
text-wrap: balance; text-wrap: balance;
} }
.page-title-landing {
font: var(--font-display);
letter-spacing: var(--font-display-spacing);
text-align: center;
margin: 0;
text-wrap: balance;
}
.page-navigation { .page-navigation {
margin-bottom: var(--row-gap-medium); margin-bottom: var(--row-gap-medium);
@ -36,3 +44,74 @@
border-top: solid 1px var(--color-line); border-top: solid 1px var(--color-line);
margin-top: var(--row-gap-medium); margin-top: var(--row-gap-medium);
} }
.container {
text-align: center;
list-style: none;
padding: 0;
}
.main-button-group {
display: flex;
justify-content: center;
align-items: center;
gap: 20px; /* Space between the main button and the right button */
flex-wrap: wrap; /* Allow wrapping if screen space is limited */
padding: 10px; /* Some padding to avoid touching screen edges */
position: relative;
}
.main-button, .specification-button {
background-color: inherit;
color: inherit;
padding: 15px 30px;
border-radius: 50px;
font-size: 24px;
text-decoration: none;
border-style: double;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 5px 15px var(--color-link-hover, rgba(0, 0, 0, 0.2));
}
.main-button:hover, .main-button:focus,
.specification-button:hover, .specification-button:focus {
color: var(--color-link-hover);
border-style: solid;
transform: translateY(-2px);
box-shadow: 0 8px 20px var(--color-link-hover, rgba(0, 0, 0, 0.4));
}
.hover-buttons {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding-top: 10px;
}
.main-button:hover .hover-buttons,
.main-button:focus .hover-buttons {
display: block;
}
.specification-button {
margin: 5px 0;
}
.secondary-button {
display: block;
margin: 5px 0;
padding: 10px 20px;
background-color: inherit;
color: inherit;
border-radius: 20px;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.secondary-button:hover, .secondary-button:focus {
border-style: solid;
transform: translateY(-2px);
}

View File

@ -5,40 +5,24 @@ title: Home
--- ---
<header class="page-header"> <header class="page-header">
<h1 class="page-title">{{ home.welcome }}</h1> <h1 class="page-title-landing">{{ home.welcome }}</h1>
<div class="search" id="search"></div>
</header> </header>
<section class="postList"> <section class="container">
{{ for post of search.pages("type=post", "date=desc", 3) }} <div class="main-button-group">
<article class="post"> <a href="https://docs.google.com/presentation/d/1H4V5X0X-9jnulwmmQBKk7PiStqKoPh_t_h7F0R3kLw0/edit?usp=sharing" target="_blank" class="specification-button">Specification</a>
<header class="post-header"> <div class="main-button">
<h2 class="post-title"> Get Deca
<a href="{{ post.url }}" {{ if post.url == url }} aria-current="page"{{ /if }}> <div class="hover-buttons">
{{ post.title || post.url }} <a href="https://app.uniswap.org/swap?inputCurrency=ETH&outputCurrency=0x3556a5005d5411603e0115efd9b875fdfb3ad7e9&chain=mainnet" target="_blank" class="secondary-button">Mainnet</a>
</a> <a href="https://app.uniswap.org/swap?inputCurrency=ETH&outputCurrency=0x02f1cb850799d651d56775dae04f66362eb8e4b2&chain=arbitrum" target="_blank" class="secondary-button">Arbitrum</a>
</h2> </div>
</div>
{{ include "templates/post-details.vto" { </div>
date: post.date,
tags: post.tags,
author: post.author,
readingInfo: post.readingInfo
} }}
</header>
<div class="post-excerpt body">
{{ post.excerpt |> md }}
</div>
<a href="{{ post.url }}" class="post-link">
{{ i18n.nav.continue_reading }}
</a>
</article>
{{ /for }}
</section> </section>
<br>
<br>
<br>
<hr> <hr>
<p>{{ i18n.nav.archive }}</p> <p>{{ i18n.nav.archive }}</p>

48
pages/blog.vto Normal file
View File

@ -0,0 +1,48 @@
---
layout: layouts/base.vto
bodyClass: body-home
title: Blog
url: /blog/
menu:
visible: true
order: 2
---
<header class="page-header">
<h1 class="page-title">{{ home.welcome }}</h1>
<div class="search" id="search"></div>
</header>
<section class="postList">
{{ for post of search.pages("type=post", "date=desc", 3) }}
<article class="post">
<header class="post-header">
<h2 class="post-title">
<a href="{{ post.url }}" {{ if post.url == url }} aria-current="page"{{ /if }}>
{{ post.title || post.url }}
</a>
</h2>
{{ include "templates/post-details.vto" {
date: post.date,
tags: post.tags,
author: post.author,
readingInfo: post.readingInfo
} }}
</header>
<div class="post-excerpt body">
{{ post.excerpt |> md }}
</div>
<a href="{{ post.url }}" class="post-link">
{{ i18n.nav.continue_reading }}
</a>
</article>
{{ /for }}
</section>
<hr>
<p>{{ i18n.nav.archive }}</p>

View File

@ -4,7 +4,7 @@ title: FAQs
url: /faq/ url: /faq/
menu: menu:
visible: true visible: true
order: 2 order: 3
--- ---
## What is DECA Token? ## What is DECA Token?