External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

better initial styling

Browse Source
This commit is contained in:
plebbitor
2023-02-03 11:12:36 +01:00
parent baa481c495
commit 79438cfd4c
2 changed files with 27 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Home.jsx
+17 -23
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {Container, Header, Logo, Image, Page, About, BoxOuter, BoxInner, BoxBar, BoxContent, BoardBoxOuter, BoardBoxInner, BoardBoxBar, BoardBoxContent } from './styled/Home.styled';
import {Container, Header, Logo, Image, Page, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent } from './styled/Home.styled';
const Home = () => {
return (
@@ -14,27 +14,22 @@ const Home = () => {
</Header>
<Page>
<About>
<BoxOuter>
<BoxInner>
<BoxBar>
<h2>What is plebchan?</h2>
</BoxBar>
<BoxContent>
<div id="content">
<p>Plebchan is a serverless, adminless, decentralized 4chan alternative where anyone can post comments and share image links. This is achieved using the plebbit protocol, a revolutionary approach for the decentralization of any community-based social media. Users do not need to register an account before participating in the community. Feel free to click on a board below that interests you and jump right in! </p>
<br />
<p>There are no global rules, each board is completely independent and their owners decide how they should be moderated.</p>
</div>
</BoxContent>
</BoxInner>
</BoxOuter>
<AboutTitle>
<h2>What is plebchan?</h2>
</AboutTitle>
<AboutContent>
<div id="content">
<p>Plebchan is a serverless, adminless, decentralized 4chan alternative that lives on the <a href="https://plebbit.net">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share image links and even create a board. Search for any board .eth address, or feel free to click on a popular board below that interests you and jump right in! </p>
<br />
<p>There are no global rules, each board is completely independent and their owners decide how they should be moderated.</p>
</div>
</AboutContent>
</About>
<BoardBoxOuter>
<BoardBoxInner>
<BoardBoxBar>
<Boards>
<BoardsTitle>
<h2>Popular boards</h2>
</BoardBoxBar>
<BoardBoxContent>
</BoardsTitle>
<BoardsContent>
<div id="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor nec feugiat nisl pretium. Porta lorem mollis aliquam ut. Risus nec feugiat in fermentum posuere urna. Aliquam purus sit amet luctus venenatis lectus. Adipiscing elit ut aliquam purus sit. Ipsum consequat nisl vel pretium. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam. Neque ornare aenean euismod elementum nisi quis eleifend. Urna nec tincidunt praesent semper feugiat nibh. In fermentum posuere urna nec. Et netus et malesuada fames ac turpis egestas integer. Quam id leo in vitae turpis massa sed elementum tempus. Sed felis eget velit aliquet sagittis. At risus viverra adipiscing at in. Senectus et netus et malesuada fames ac turpis egestas. Consectetur adipiscing elit ut aliquam. At erat pellentesque adipiscing commodo elit at. Dolor sit amet consectetur adipiscing elit. Augue mauris augue neque gravida in.
@@ -42,9 +37,8 @@ const Home = () => {
Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Dolor morbi non arcu risus quis varius quam quisque. Nunc vel risus commodo viverra maecenas accumsan lacus. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. In vitae turpis massa sed. Aliquet risus feugiat in ante metus dictum at tempor commodo. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Vestibulum sed arcu non odio euismod lacinia at quis risus. Tristique senectus et netus et malesuada fames ac turpis. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Morbi leo urna molestie at. Quam elementum pulvinar etiam non quam. Sed risus ultricies tristique nulla aliquet enim tortor at. Tincidunt ornare massa eget egestas purus viverra. Convallis aenean et tortor at risus viverra. Blandit volutpat maecenas volutpat blandit. Felis eget nunc lobortis mattis. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. Egestas pretium aenean pharetra magna ac placerat.</p>
</div>
</BoardBoxContent>
</BoardBoxInner>
</BoardBoxOuter>
</BoardsContent>
</Boards>
</Page>
</Container>
)
src/components/styled/Home.styled.jsx
+10 -24
View File
@@ -37,24 +37,12 @@ export const Page = styled.div`
export const About = styled.div`
background: #fff;
color: #000;
border: 1px solid;
margin-bottom: .5em;
padding-bottom: .5em;
margin: 0;
`;
export const BoxOuter = styled.div`
border: 1px solid;
margin: 0;
padding: 0;
padding-bottom: .5em;
`;
export const BoxInner = styled.div`
margin: 0;
padding: 0;
`;
export const BoxBar = styled.div`
export const AboutTitle = styled.div`
background: #800;
color: #fff;
position: relative;
@@ -69,7 +57,7 @@ export const BoxBar = styled.div`
}
`;
export const BoxContent = styled.div`
export const AboutContent = styled.div`
line-height: 1.5em;
font-size: 93%;
padding: .5em;
@@ -81,13 +69,17 @@ export const BoxContent = styled.div`
min-height: 91px;
}
a:visited {
color: blue;
}
p {
margin: 0;
padding: 0;
}
`;
export const BoardBoxOuter = styled.div`
export const Boards = styled.div`
border: 1px solid;
margin: 0;
padding: 0;
@@ -95,12 +87,7 @@ export const BoardBoxOuter = styled.div`
background: #fff;
`;
export const BoardBoxInner = styled.div`
margin: 0;
padding: 0;
`;
export const BoardBoxBar = styled.div`
export const BoardsTitle = styled.div`
background: #fca;
color: #800;
position: relative;
@@ -115,9 +102,8 @@ export const BoardBoxBar = styled.div`
}
`;
export const BoardBoxContent = styled.div`
export const BoardsContent = styled.div`
padding: .5em;
padding-top: .25em;
padding-bottom: 0;
margin: 0;
`;