feat: Refined gallery page from clutters

GodotID · May 10, 2024 · 577fe3d · 577fe3d
1 parent 8afa9b3
commit 577fe3d
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 158 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -14,7 +14,7 @@ const Hero = () => {
 				ikuti berbagai event bersama!
 			</p>
 			<p className="hero__disclaimer">
-				Godot Indonesia is <a href="https://godotengine.org/community/user-groups/">the unofficial national community</a> forum for Indonesia.<br/>
+				Godot Indonesia is <a href="https://godotengine.org/community/user-groups/">a recognized national community</a> for Godot enthusiasts in Indonesia.<br/>
 				Godot Engine is courtesy of <a href="https://godotengine.org">Godot Core Team</a>.
 			</p>
 		</div>

diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -25,7 +25,6 @@ const NavBar = ({ color }) => {
                     <div className='navbar__mobile navbar__mobile__close'>
                         <X onClick={() => setClose('navbar__closed')} />
                     </div>
-					<a href="#?content=profil">Profil</a>
 					<a href="https://itch.io/jams/hosted-by-hanzceo">Kompetisi</a>
 					<Link to="/gallery">Galeri</Link>
 

diff --git a/src/pages/gallery.jsx b/src/pages/gallery.jsx
@@ -21,10 +21,6 @@ function Gallery() {
         <div className='gallery__gallery'>
             <NavBar color='secondary'/>
             <div className='gallery__content'>
-                <div className='gallery__hero'>
-                    <h1>Galeri Komunitas</h1>
-                    <p>Karya, kegiatan, dan penghargaan</p>
-                </div>
                 <ul className='gallery__masonry'>
                     {/* TODO: dynamic content loading, maybe we need server */}
                     <GalleryItem imgsrc={'https://picsum.photos/600/400'} title={'My Game'} desc={'A very great game with many developmental breakthrough'} />

diff --git a/src/styles/components/navbar.css b/src/styles/components/navbar.css
@@ -14,7 +14,8 @@
 }
 
 .navbar__navbar.secondary {
-    --primary-text: var(--secondary-text);
+    background: #00470250;
+    /* --primary-text: var(--secondary-text); */
 }
 
 .navbar__logoWrapper {

diff --git a/src/styles/gallery.css b/src/styles/gallery.css
@@ -1,26 +1,5 @@
-.gallery__hero {
-    width: 100%;
-    background: var(--primary-text);
-    text-align: center;
-    padding-top: calc(10em + 82px); /* +navbar height */
-    padding-bottom: 8em;
-    border-bottom: 1px solid var(--border-soft);
-    box-shadow: 0 4px 10px 0 var(--border-soft);
-}
-
-.gallery__hero > h1 {
-    font-size: 48px;
-    background: var(--primary-header-text);
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.gallery__hero > p {
-    color: var(--dim-paragraph);
-}
-
 .gallery__masonry {
-    padding: 0 2rem;
+    padding: 1rem 2rem;
     padding-top: 5rem;
     list-style: none;
     columns: 19rem;

diff --git a/src/styles/general.css b/src/styles/general.css
@@ -1,3 +1,27 @@
+#root {
+    --background: #218A2B;
+
+	--primary-text: #ffffff;
+	--primary-text2: #ffffff;
+	--secondary-text: #218A2B;
+    --dim-paragraph: #8a8a8a;
+	--primary-header-text: radial-gradient(
+		230.88% 96.39% at 19.17% 21.57%,
+		rgba(234, 193, 48, 1) 0,
+		rgba(205, 163, 13, 1) 100%
+	);
+
+	--border-soft: #6dac78c0;
+	--border-radius-second: 5px;
+
+    --button-background: #ffffffc9;
+    --button-background-hover: #ffffff;
+
+    --border-radius-1: 8px;
+    --border-radius-2: 5px;
+    --border-radius-3: 3px;
+}
+
 html, body, #root {
     height: 100%;
 }
@@ -36,31 +60,6 @@ button:hover {
     background-color: var(--button-background-hover);
 }
 
-#root {
-	height: 100%;
-
-
-	--primary-text: #ffffff;
-	--primary-text2: #ffffff;
-	--secondary-text: #218A2B;
-    --dim-paragraph: #8a8a8a;
-	--primary-header-text: radial-gradient(
-		230.88% 96.39% at 19.17% 21.57%,
-		rgba(234, 193, 48, 1) 0,
-		rgba(205, 163, 13, 1) 100%
-	);
-
-	--border-soft: #6dac78c0;
-	--border-radius-second: 5px;
-
-    --button-background: #ffffffc9;
-    --button-background-hover: #ffffff;
-
-    --border-radius-1: 8px;
-    --border-radius-2: 5px;
-    --border-radius-3: 3px;
-}
-
 @media screen and (max-width: 660px) {
 	html, body, #root {
 		overscroll-behavior: none;

diff --git a/src/styles/homepage.css b/src/styles/homepage.css
@@ -1,6 +1,6 @@
 .homepage__homepage {
     height: min-content;
-	background-image: radial-gradient(
+    background-image: radial-gradient(
         75% 75% at 68% 71%,
         #3DA42C10 0%,
         #1C802660 100%