archiwum/gractwo-pl
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add content grid

Browse Source
This commit is contained in:
Stanislaw
2022-05-08 22:49:05 +02:00
parent 920a193adb
commit b5efd408a8
10 changed files with 6562 additions and 1350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Banner.js
View File

@@ -3,7 +3,7 @@ export default function Banner() {
<> <>
<section className="banner"> <section className="banner">
<div /> <div />
<h1>Dzień dobry.</h1> <h1>Remont strony</h1>
<p>Tutaj znajdzie się banner ze zdjęciem.</p> <p>Tutaj znajdzie się banner ze zdjęciem.</p>
</section> </section>
</> </>

11
icons/PaperPlane.js Normal file
View File

@@ -0,0 +1,11 @@
export function PaperPlane(props) {
return (
<svg width="24px" height="24px" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M13.7612096,12.010246 L3.00114069,10.9260828 L3.00000002,4.07390726 C2.9999013,3.48090338 3.4805459,3.00009873 4.07354978,3.00000001 C4.24030125,2.99997226 4.40476746,3.03878301 4.55391451,3.11335654 L20.4062223,11.0395104 C20.9366211,11.3047098 21.1516077,11.9496696 20.8864083,12.4800684 C20.78252,12.6878448 20.6140494,12.8563254 20.4062791,12.960226 L4.55631145,20.8863826 C4.02592835,21.1516134 3.38095585,20.936665 3.11572505,20.4062819 C3.04118163,20.2572172 3.00236221,20.092846 3.0023401,19.9261816 L3.00143069,13.0735399 L13.7612096,12.010246 Z"
id="Shape"
></path>
</svg>
);
}

5151
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -12,7 +12,8 @@
"next": "12.1.6", "next": "12.1.6",
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",
"sass": "^1.51.0" "sass": "^1.51.0",
"yarn": "^1.22.18"
}, },
"devDependencies": { "devDependencies": {
"eslint": "8.14.0", "eslint": "8.14.0",

6
pages/_app.js
View File

@@ -7,6 +7,12 @@ function MyApp({ Component, pageProps }) {
<Head> <Head>
<link rel="shortcut icon" href="/gractwo.svg" /> <link rel="shortcut icon" href="/gractwo.svg" />
<title>Gractwo</title> <title>Gractwo</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap"
rel="stylesheet"
></link>
</Head> </Head>
<Component {...pageProps} /> <Component {...pageProps} />
</> </>

57
pages/index.js
View File

@@ -1,29 +1,48 @@
import Header from "../components/Header.js"; import Header from "../components/Header.js";
import Banner from "../components/Banner.js"; import Banner from "../components/Banner.js";
import { PaperPlane } from "../icons/PaperPlane.js";
export default function Home() { export default function Home() {
return ( return (
<> <>
<Header /> <Header />
<Banner /> <Banner />
<style jsx>{` <article className="main">
h1, <div className="Map">
p { <div className="msg">
margin: 1rem; <h1>99,9k</h1>
} <p>Wysłane wiadomości</p>
p { <PaperPlane className="icons" />
border-left: 0.2rem solid white; </div>
padding-left: 1rem; <div className="bots">
} <p>Status botów</p>
`}</style> </div>
<h1>Strona w przebudowie.</h1> <div className="discord">
<p> <PaperPlane className="icons" />
Tutaj powstaje Gractwo experience godny Twoich oczu. <br /> Zakładając, </div>
że zaraz nie dostanę od Ciebie - drogi internauto - wiadomości, że żaden <div className="twitter">
taki nie jest. <br /> <PaperPlane className="icons" />
I&apos;m onto you. <br /> </div>
<br />~ jamesen <div className="members">
</p> <h1>99,9k</h1>
<p>Wysłane wiadomości</p>
<PaperPlane className="icons" />
</div>
<div className="days">
<h1>99,9k</h1>
<p>Wysłane wiadomości</p>
<PaperPlane className="icons" />
</div>
<div className="yt">
<PaperPlane className="icons" />
</div>
<div className="github">
<PaperPlane className="icons" />
</div>
<div className="minecraft">
<PaperPlane className="icons" />
</div>
</div>
</article>
</> </>
); );
} }

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

4
public/vercel.svg
View File

@@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

88
styles/globals.scss
View File

@@ -1,8 +1,8 @@
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap");
:root { :root {
--black0: #121212; --black0: #121212;
--black1: #1a1a1a; --black1: #1a1a1a;
--black2: #2c2c2c; --black2: #2c2c2c;
--black3: #1d1d1d;
--accent: #61f2ea; --accent: #61f2ea;
} }
* { * {
@@ -24,15 +24,14 @@ nav.main {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
position: relative; position: relative;
a { a {
font-family: "Lexend", sans-serif;
display: block; display: block;
padding: 0 1.5rem; padding: 0 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
margin: 0 0.5rem;
color: white; color: white;
text-decoration: none; text-decoration: none;
font-family: "Lexend", sans-serif;
transition-duration: 150ms; transition-duration: 150ms;
// font-size: 16px; // font-size: 16px;
&:hover { &:hover {
@@ -66,10 +65,10 @@ section.banner {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 28rem; height: 25rem;
h1, h1,
p { p {
position: fixed; position: absolute;
text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); text-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
} }
h1 { h1 {
@@ -86,3 +85,80 @@ section.banner {
background-color: var(--black0); background-color: var(--black0);
} }
} }
article.main {
width: 100%;
display: flex;
justify-content: center;
.Map {
margin-top: 2rem;
display: grid;
grid-gap: 2rem;
grid-template-rows: repeat(2, 10rem);
grid-template-columns: repeat(7, 10rem);
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--black3);
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
overflow: hidden;
position: relative;
h1 {
font-family: "Lexend", sans-serif;
font-size: 4.5rem;
}
p {
font-family: "Lexend", sans-serif;
font-size: 1.6rem;
}
.icons {
margin-bottom: 4rem;
margin-left: 11rem;
transform: rotate(195deg);
width: 15rem;
height: 15rem;
opacity: 5%;
position: absolute;
color: white;
}
}
.msg {
grid-column: 1/3;
grid-row: 1;
}
.bots {
grid-column: 3/6;
grid-row: 1;
}
.discord {
grid-column: 6;
grid-row: 1;
}
.twitter {
grid-column: 7;
grid-row: 1;
}
.members {
grid-column: 1/3;
grid-row: 2;
}
.days {
grid-column: 3/5;
grid-row: 2;
}
.yt {
grid-column: 5;
grid-row: 2;
}
.github {
grid-column: 6;
grid-row: 2;
}
.minecraft {
grid-column: 7;
grid-row: 2;
}
}
}

2590
yarn.lock
View File

File diff suppressed because it is too large Load Diff