Many changes
diff --git a/Components/Card.js b/Components/Card.js
index c7f7cca..29fea4c 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -7,18 +7,26 @@
class Card extends Component {
constructor(props) {
super(props);
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick(e) {
+ e.preventDefault();
+ if (this.props.url) {
+ this.props.router.push(this.props.url);
+ }
}
render() {
return (
<div className={Styles.card + " " + (this.props.shown ? Styles.shown : null)} style={{
margin: "0"
- }} onClick={this.props.url ? () => { this.props.router.push(this.props.url)} : null}>
+ }} onClick={this.handleClick}>
<div className={Styles.backgroundGradient} style={{
backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`
}} />
<img alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/web/waves/card/${this.props.wave}.svg`} draggable={false} />
- <div className={Styles.panel} onClick={() => { this.props.url ? () => { this.props.router.push(this.props.url)} : null}}>
+ <div className={Styles.panel} onClick={this.handleClick}>
<div className={Styles.titleContainer}>
<img alt="Project icon" className={Styles.image} src={"https://assets.clicks.codes/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
<h1 className={Styles.title}>{this.props.title}</h1>
diff --git a/Components/Header.js b/Components/Header.js
index ff46351..f5e7bb7 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -69,6 +69,8 @@
<meta name="msapplication-TileColor" content={"#000000"} />
</Head>
<img draggable={false} alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/${props.wave}.svg`} />
+ <div id="headerConfetti" />
+ <div id="disappointmentConfetti" />
<div className={Styles.panel}>
<div className={Styles.titleContainer}>
<div onClick={confetti}>
@@ -114,8 +116,6 @@
</div> : <></>
}
</div>
- <div id="headerConfetti" />
- <div id="disappointmentConfetti" />
</div>
)
}
diff --git a/pages/gps.js b/pages/gps.js
index 8b2e194..f35a841 100644
--- a/pages/gps.js
+++ b/pages/gps.js
@@ -54,6 +54,7 @@
icon="web/icons/gps/shuffles"
title="Shuffles"
subtext={`Replace your worst cards with new ones because \"The bot is unfair
+ and always gives me the worst cards and everyone else is better at the game than me\"` + `Replace your worst cards with new ones because \"The bot is unfair
and always gives me the worst cards and everyone else is better at the game than me\"`}
wave="clcks"
gradient={["C4C4C4", "8D8D8D"]}
diff --git a/pages/index.js b/pages/index.js
index f84c7cd..593cc8d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -14,11 +14,13 @@
wave="web/waves/header/cmp"
buttons={[]}
index={true}
+ fullscreen={true}
/>
<AutoLayout>
<Panel halfSize={false}>
<Title>Projects</Title>
<Divider />
+ <Text>{"Here's things we've released and are in the making"}</Text>
<CardRow>
<Card
wave="gps" title="GPS" subtext="Cards Against Humanity on Discord"
@@ -31,7 +33,7 @@
url="/gps"
/>
<Card
- wave="rsm" title="RSM" subtext="Moderation Redefined"
+ wave="rsm" title="RSM" subtext="Moderation RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration RedefinedModeration Redefined"
icon="bots/rsm/circle"
buttons={[
{color: "424242", link: "https://discord.com/api/oauth2/authorize?client_id=715989276382462053&permissions=121295465718&scope=bot%20applications.commands",text:"Invite"},
@@ -75,7 +77,7 @@
<Panel halfSize={true}>
<Title>Code Bases</Title>
<Divider />
- <Text>View any open source projects by Clicks on the following sites:</Text>
+ <Text>We release open source projects in a few different places depending on the language and purpose</Text>
<CardRow>
<Card
wave="github" title="GitHub" subtext="View our open source projects"
@@ -100,7 +102,7 @@
<Panel halfSize={true}>
<Title>Socials</Title>
<Divider />
- <Text>Talk to us and ask us anything!</Text>
+ <Text>{"We've got discord, feel free to ask us anything"}</Text>
<CardRow>
<Card
wave="discord" title="Discord" subtext="Join our Discord server to talk with the community"
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 9997098..9cdb2d8 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -23,7 +23,7 @@
}
.card {
- border-radius: 17px;
+ border-radius: 25px;
width: 100%;
height: 204px;
padding-inline: 5px;
@@ -35,6 +35,8 @@
opacity: 0;
transform: translateY(10px);
transition: 0.3s ease-in-out;
+
+ box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
}
.card:hover {
transform: translateY(-5px) !important;
@@ -45,8 +47,6 @@
transform: translateY(0px);
}
-
-
.panel {
position: absolute;
overflow-x: hidden;
@@ -69,7 +69,7 @@
justify-content: center;
align-items: center;
width: 100%;
- height: 32px;
+ height: 20%;
padding-inline: 10px;
margin-top: 10px;
}
@@ -82,6 +82,7 @@
max-lines: 2;
color: var(--theme-ui-colors-text);
transition: color 0.3s ease-in-out;
+ text-align: center;
}
.image {
@@ -91,8 +92,10 @@
.subtext {
width: 100%;
+ height: 35%;
padding-inline: 10px;
text-align: center;
+ overflow-y: auto;
color: var(--theme-ui-colors-text);
transition: color 0.3s ease-in-out;
}
@@ -108,6 +111,7 @@
position: absolute;
bottom: 5px;
right: 5px;
+ height: 25%
}
.button {
@@ -125,28 +129,6 @@
border-radius: 8px;
}
-@media (max-width: 500px) {
-}
-
-
-.card.clicked {
- transform: scale(1) !important;
- z-index: 9999;
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
-}
-
-.backgroundGradient.clicked {
- background-image: red;
-}
-
-/* .image.clicked {
- width: 1000px !important;
-} */
-
.container {
width: calc(100% - 20px);
height: 100%;
diff --git a/styles/Components/header.module.css b/styles/Components/header.module.css
index c6f12ad..25f95e8 100644
--- a/styles/Components/header.module.css
+++ b/styles/Components/header.module.css
@@ -32,8 +32,8 @@
.panel {
position: relative;
overflow: hidden;
- width: min(calc(100vw - 40px), 1000px);
- border-radius: 16.5px;
+ width: min(calc(100vw - 40px), 750px);
+ border-radius: 25px;
background-color: var(--theme-ui-colors-cardBackground);
transition: background-color 0.3s ease-in-out;
backdrop-filter: blur(7px);
diff --git a/styles/Components/panels.module.css b/styles/Components/panels.module.css
index c06a5a6..8659030 100644
--- a/styles/Components/panels.module.css
+++ b/styles/Components/panels.module.css
@@ -11,6 +11,8 @@
gap: 10px;
background-color: var(--theme-ui-colors-panelColor);
+ transition: background-color 0.3s ease-in-out !important;
+
border-radius: 20px;
}
@@ -46,6 +48,8 @@
padding-block: 20px;
padding-inline: 20px;
background-color: var(--theme-ui-colors-background);
+
+ transition: 0.3s ease-in-out background-color;
}
.title {
@@ -83,7 +87,8 @@
.divider {
width: 75%;
- height: 4px;
+ height: 6px;
+ min-height: 6px;
border-radius: 100vw;
margin-block: 10px;
transition: background-color 0.3s ease-in-out;
diff --git a/styles/globals.css b/styles/globals.css
index 98d38b0..b2806e2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -12,14 +12,12 @@
/* background-color: var(--theme-ui-colors-background); */
transition: background-color 0.3s ease-in-out;
background-color: #000000 !important;
- transition: 0.3s ease-in-out border-radius;
border-radius: 0px;
}
body {
background-color: #000000;
overflow: hidden;
overflow-y: auto;
- transition: 0.3s ease-in-out border-radius;
padding-bottom: 0;
border-radius: 25px;
}