Skip to content

Commit 0913d9e

Browse files
author
srisankethu
committed
Minor styling improvements
1 parent 1abc46c commit 0913d9e

File tree

7 files changed

+36
-23
lines changed

7 files changed

+36
-23
lines changed

‎gatsby-config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ module.exports = {
3232
background_color: `#663399`,
3333
theme_color: `#663399`,
3434
display: `minimal-ui`,
35-
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
35+
icon: `src/images/logo.png`, // This path is relative to the root of the site.
3636
},
3737
},
3838
],

‎src/components/index.css

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1+
.card-image {
2+
height: 50%;
3+
width: 50%;
4+
}
5+
16

27
#top {
3-
background-image: url('../images/samplebackground.jpg');
8+
background-image: url('../images/topbackground.png');
9+
background-size: 100% 100%;
410
padding-bottom: 5%;
511
}
612

@@ -14,7 +20,8 @@
1420
}
1521

1622
#projects {
17-
background-image: url('../images/samplebackground.jpg');
23+
background-image: url('../images/samplebackground.png');
24+
background-size: 100% 100%;
1825
padding-top: 5%;
1926
padding-bottom: 5%;
2027
}
@@ -25,7 +32,8 @@
2532
}
2633

2734
#permaweb {
28-
background-image: url('../images/samplebackground.jpg');
35+
background-image: url('../images/samplebackground.png');
36+
background-size: 100% 100%;
2937
padding-top: 5%;
3038
padding-bottom: 5%;
3139
padding-left: 5%;
@@ -37,6 +45,7 @@
3745
}
3846

3947
#submitproposal {
40-
background-image: url('../images/samplebackground.jpg');
48+
background-image: url('../images/samplebackground.png');
49+
background-size: 100% 100%;
4150
padding-top: 5%;
4251
}

‎src/components/seo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function SEO({ description, lang, meta, title }) {
3333
lang,
3434
}}
3535
title={title}
36-
titleTemplate={`%s | ${site.siteMetadata.title}`}
36+
titleTemplate={`%s`}
3737
meta={[
3838
{
3939
name: `description`,

‎src/images/logo.png

38.1 KB
Loading

‎src/images/samplebackground.png

30.8 KB
Loading

‎src/images/topbackground.png

20.2 KB
Loading

‎src/pages/index.tsx

+21-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React,{ useState, useEffect } from "react"
22
import { Link } from "gatsby"
33
import { Anchor, Box, Heading, Paragraph, Nav, Button, Avatar, Text } from "grommet"
4-
import {Checkmark} from "grommet-icons"
4+
import {Checkmark, LinkNext} from "grommet-icons"
55

66
import Layout from "../components/layout"
77
import Image from "../components/image"
@@ -11,20 +11,24 @@ import "../components/index.css"
1111

1212
const IndexPage = () => (
1313
<Layout>
14-
<SEO title="Home" />
14+
<SEO title="ARCA DAO" />
1515
<div id="top">
1616
<div>
17-
<Nav direction="row" pad="medium">
17+
<Nav direction="row" pad="medium" gap="30%">
18+
<Box direction="row" gap="large">
1819
<img src={`logo.png`} width="200" height="60"/>
1920
<Anchor href = "#about" label = "What is ARCA?" color="light-1"/>
2021
<Anchor href = "#articles" label = "Articles" color="light-1"/>
2122
<Anchor href = "#projects" label = "Projects" color="light-1"/>
2223
<Anchor href = "/#" label = "Submit Proposal" color="light-1"/>
24+
</Box>
25+
<Box direction="row" gap="medium">
2326
<Box pad="xsmall" direction ="row" border = {{ color: "white", size: 'small' }} round = "xsmall" gap="small">
2427
<Box pad = "small" background = "status-ok" round = "full"/>
2528
<Text color="light-1">Online</Text>
2629
</Box>
2730
<Button primary href = "/#" label = "Join Us" color="status-ok"/>
31+
</Box>
2832
</Nav>
2933
</div>
3034
<div id="intro">
@@ -70,21 +74,21 @@ const IndexPage = () => (
7074
</div>
7175

7276
<div id="projects">
73-
<Box align="center">
77+
<Box align="center" height="large">
7478
<Heading color="light-1"> Projects </Heading>
7579
<Box direction = "row-responsive" gap = "xlarge">
76-
<Box pad="small" border={{ color: "light-3"}} background="light-1">
77-
<img src={`project1.png`} />
80+
<Box pad="small" border={{ color: "light-3"}} background="light-1" align="center">
81+
<img class="card-image" src={`project1.png`} />
7882
<Heading level="3"> Feedweave </Heading>
7983
<Paragraph color="dark-6"> A Decentralised Community Built Social Network </Paragraph>
8084
</Box>
81-
<Box pad = "small" border={{ color: "light-3"}} background="light-1">
82-
<img src={`project2.png`} />
85+
<Box pad = "small" border={{ color: "light-3"}} background="light-1" align="center">
86+
<img class="card-image" src={`project2.png`} />
8387
<Heading level="3"> Arweave Reverse DNS Gateway </Heading>
8488
<Paragraph color="dark-6"> Point a domain you own to your arweave DApp. </Paragraph>
8589
</Box>
86-
<Box pad = "small" border={{ color: "light-3"}} background="light-1">
87-
<img src={`project3.png`} />
90+
<Box pad = "small" border={{ color: "light-3"}} background="light-1" align="center">
91+
<img class="card-image" src={`project3.png`} />
8892
<Heading level="3"> Permasnap </Heading>
8993
<Paragraph color="dark-6"> Censorship Resistant Moments, embedded on the permaweb. </Paragraph>
9094
</Box>
@@ -93,7 +97,7 @@ const IndexPage = () => (
9397
</div>
9498

9599
<div id="about">
96-
<Box direction = "row" gap="15%" align="center" justify="center">
100+
<Box direction = "row" gap="20%" align="center" justify="center">
97101
<Box>
98102
<img src={`aboutarca.png`} />
99103
</Box>
@@ -109,15 +113,15 @@ const IndexPage = () => (
109113
<Heading color="light-1"> What is Permaweb? </Heading>
110114
<Paragraph color="light-1"> Arweave is a new type of storage that backs data with sustainable and perpetual endowments, allowing users and developers to truly store data forever - for the very first time.</Paragraph>
111115
<Paragraph color="light-1"> As a collectively owned hard drive that never forgets, Arweave allows us to remember and preserve valuable information, apps, and history indefinitely. By preserving history, it prevents others from rewriting it.</Paragraph>
112-
<Box direction = "row" gap = "small">
113-
<Button primary label="Visit ARWEAVE" href="https://arweave.org" target="_blank" color = "lightgreen"></Button>
114-
<Button primary label="Built on the PERMAWEB" href="https://arweaveapps.com" target="_blank" color = "#1E90FF"></Button>
116+
<Box direction = "column" gap = "small" width="medium">
117+
<Button primary label="Visit ARWEAVE" href="https://arweave.org" target="_blank" color = "lightgreen" icon=<LinkNext color="light-1"/> reverse="true"/>
118+
<Button primary label="Built on the PERMAWEB" href="https://arweaveapps.com" target="_blank" color = "#1E90FF" icon=<LinkNext color="light-1"/> reverse="true"/>
115119
</Box>
116120
</div>
117121

118122
<div id="joinUs">
119-
<Box direction="row" gap="large" justify="center">
120-
<Box width = "large">
123+
<Box direction="row" gap="none" justify="center">
124+
<Box width = "large" pad = "medium" border={{ color: "light-3" }} round="small">
121125
<Heading> Why would you join us:</Heading>
122126
<ul>
123127
<li style="list-style-type:none"><Checkmark color="green"/><Text color="dark-6">Brainstorm innovate ideas and build them using decentralized and open source tools.</Text></li>
@@ -128,7 +132,7 @@ const IndexPage = () => (
128132
<li style="list-style-type:none"><Checkmark color="green"/><Text color="dark-6"> Access to test servers and software for developing proof of concepts.</Text></li>
129133
</ul>
130134
</Box>
131-
<Box pad="medium" background="brand">
135+
<Box pad="medium" background="brand" round="small">
132136
<Heading color="light-1"> Be part of ARCADAO</Heading>
133137
<Paragraph color="light-1"> ARCA is calling all those passionate about technology and Arweave - whelther you are a dev, a network engineer, a social media guru, a writer, a leader, a ower, or even if even you just have the next big, decentralized idea.</Paragraph>
134138
<Button primary label="Join us" />

0 commit comments

Comments
 (0)