Add scarlet-showcase page

src/_settings.ts

@@ -51,7 +51,7 @@ export class SettingsService {
     public pageLinks: PageLink[] = [
       new PageLink('Home', 'home'),
       // new PageLink('SGJ', 'scarlet-game-jam'),
-      // new PageLink('GGJ', 'global-game-jam'),
+      new PageLink('Scarlet S', 'scarlet-showcase'),
       new PageLink('Members', 'members'),
       new PageLink('Projects', 'projects'),
       new PageLink('Pics', 'pictures'),

src/app/modules/_core/button/button.component.css

@@ -1,13 +1,13 @@
 .button {
-	border: none;
-	text-align: center;
-	text-decoration: none;
-	display: inline-block;
-	padding: 0 1.25em;
-	height: 3em;
+  border: none;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  padding: 0 1.25em;
+  height: 3em;
   width: 100%;
   border-radius: 30em;
-  display: flex;  
+  display: flex;
   align-items: center;
   justify-content: center;
   outline: 0px;
@@ -17,4 +17,8 @@
   background-color: transparent;
   border: solid;
   border-width: 2px;
-}
+}
+
+:host {
+  display: block;
+}

src/app/modules/_core/column-layout/column-layout.component.css

@@ -1,15 +1,8 @@
 :host {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 32px;
-}
-
-@media only screen and (max-width: 1080px) {
-	:host {
-		grid-template-columns: repeat(1, 1fr);
-	}
+  display: grid;
+  gap: 32px;
 }
 
 :host > * {
-	display: block;
-}
+  display: block;
+}

src/app/modules/_core/column-layout/column-layout.component.ts

@@ -1,12 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { BreakpointManagerService } from '@src/app/services/breakpoint-manager.service';
 
 @Component({
   selector: 'app-column-layout',
   templateUrl: './column-layout.component.html',
   styleUrls: ['./column-layout.component.css'],
 })
 export class ColumnLayoutComponent implements OnInit {
-  constructor() {}
+  @Input('grid-template-columns') gridTemplateColumns: string = 'repeat(2, 1fr)';
+  @HostBinding('style.grid-template-columns') currGridTemplateColumns: string = '';
 
-  ngOnInit(): void {}
+  constructor(private breakpointManagerService: BreakpointManagerService) {
+    breakpointManagerService.onBreakpointChanged.subscribe(() => {
+      this.updateGrid();
+    });
+  }
+
+  ngOnInit(): void {
+    this.updateGrid();
+  }
+
+  updateGrid() {
+    this.currGridTemplateColumns = this.breakpointManagerService.matchedBreakpointOrBelow('MOBILE')
+      ? 'repeat(1, 1fr)'
+      : this.gridTemplateColumns;
+  }
 }

src/app/modules/_core/event-header/event-header.component.html

@@ -1,16 +1,23 @@
 <!-- SGJ -->
-<app-section class="app-event-header section" title="Scarlet Game Jam is here!" bottom-gradient color="primary" bgImage="assets/images/sgj-bg-f2024.png" bgRepeatMode="repeat" bgPosition="0 0" style="height:100% " shadow>
+<!-- <app-section class="app-event-header section" title="Scarlet Game Jam is here!" top-gradient bottom-gradient
+  color="primary" bgImage="assets/images/sgj-bg-f2024.png" bgRepeatMode="repeat" bgPosition="0 0" style="height:100% "
+  shadow>
   <div style="width: 100vw;"></div>
   <div style="max-width: 512px">
-    <p>Come sign up for this biannual event and make a game with friends in a week! Click the button below for more information.</p>
+    <p>Come sign up for this biannual event and make a game with friends in a week! Click the button below for more
+      information.</p>
     <app-button iconifyIcon="majesticons:door-exit" link="scarlet-game-jam" color="blank">Go to SGJ page</app-button>
   </div>
-</app-section>
-<!-- GGJ -->
-<!-- <app-section class="app-event-header section" title="Global Game Jam is coming soon!" bottom-gradient color="primary" bgImage="assets/images/ggj-bg.png" style="height:100% " shadow>
+</app-section> -->
+<!-- Scarlet Showcase -->
+<app-section class="app-event-header section" title="Scarlet Showcase is here!" top-gradient bottom-gradient
+  color="primary" bgImage="assets/images/ss-bg.png" bgRepeatMode="repeat" bgPosition="0 0" style="height:100% " shadow>
   <div style="width: 100vw;"></div>
   <div style="max-width: 512px">
-    <p>Come sign up for this annual event and make a game with friends in 48 hours! Click the button below for more information.</p>
-    <app-button iconifyIcon="majesticons:door-exit" link="global-game-jam" color="blank">Go to GGJ page</app-button>
+    <p>Check out our end of semester creative showcase event! Play games made by your fellow Rutgers students,
+      participate in fun activities, and win prizes. Click the button below for more
+      information.</p>
+    <app-button iconifyIcon="majesticons:door-exit" link="scarlet-showcase" color="blank">Go to Scarlet Showcase
+      page</app-button>
   </div>
-</app-section> -->
+</app-section>

src/app/modules/_core/full-page-header/full-page-header.component.css

@@ -1,26 +1,28 @@
 .bg {
-	position: relative;
-  	display: -webkit-box;
-  	display: -webkit-flex;
-  	display: -ms-flexbox;
-  	display: flex;
-	box-sizing: border-box;
-	min-height: calc(100vh - var(--site-header-height)); /* Accounting for header */
-	padding: var(--content-padding);
-	background-size: cover;
-	background-position: center;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  min-height: calc(100vh - var(--site-header-height)); /* Accounting for header */
+  padding: var(--content-padding);
+  background-size: cover;
+  background-position: center;
 }
 
 .content {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	width: var(--content-width);
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: var(--content-width);
 }
 
 .scroll-button {
-	position: absolute;
-	left: calc(50% - 21px);
-	bottom: 10%;
-	filter: drop-shadow(0 0 1rem black);
-}
+  position: absolute;
+  left: calc(50% - 21px);
+  bottom: 10%;
+  filter: drop-shadow(0 0 1rem black);
+  width: fit-content;
+  height: fit-content;
+}

src/app/modules/_core/full-page-header/full-page-header.component.html

@@ -9,6 +9,7 @@
       behavior: 'smooth' 
     });
   ">
-    <ic-icon class="app-full-page-header scroll-icon iconify {{color}}" size="42px" icon="arrowDownCircleFill"></ic-icon>
+    <ic-icon class="app-full-page-header scroll-icon iconify {{color}}" [ngClass]="getIconClass()" size="42px"
+      icon="arrowDownCircleFill"></ic-icon>
   </button>
 </div>

src/app/modules/_core/full-page-header/full-page-header.component.ts

@@ -10,16 +10,29 @@ export class FullPageHeaderComponent implements OnInit {
   @Input() color: string = 'primary';
   @Input() bgRepeatMode: string = '';
   @Input() bgPosition: string = '';
+  @Input() gradient: boolean = true;
+  @Input() fgColor: string = '';
 
   constructor() {}
 
   ngOnInit(): void {}
 
   getBgStyle(): Object {
     return {
-      'background-image': 'linear-gradient(to bottom, var(--background-color), #00000000), url(' + this.bgImage + ')',
+      'background-image':
+        (this.gradient ? 'linear-gradient(to bottom, var(--background-color), #00000000),' : '') +
+        ' url(' +
+        this.bgImage +
+        ')',
       ...(this.bgRepeatMode !== '' && { 'background-repeat': this.bgRepeatMode, 'background-size': 'auto' }),
       ...(this.bgPosition !== '' && { 'background-position': this.bgPosition }),
+      ...(this.color == 'none' && { 'background-color': 'none' }),
+    };
+  }
+
+  getIconClass(): Object {
+    return {
+      [this.fgColor]: true,
     };
   }
 }

src/app/modules/_core/section/section.component.ts

@@ -18,6 +18,7 @@ export class SectionComponent implements OnInit {
   fullWidth: boolean;
   shadow: boolean;
   bottomGradient: boolean;
+  topGradient: boolean;
 
   constructor(
     private elementRef: ElementRef,
@@ -26,6 +27,7 @@ export class SectionComponent implements OnInit {
     @Optional() @Attribute('full-page') fullPage: any,
     @Optional() @Attribute('full-width') fullWidth: any,
     @Optional() @Attribute('shadow') shadow: any,
+    @Optional() @Attribute('top-gradient') topGradient: any,
     @Optional() @Attribute('bottom-gradient') bottomGradient: any,
   ) {
     this.last = last != undefined;
@@ -34,6 +36,7 @@ export class SectionComponent implements OnInit {
     this.fullWidth = fullWidth != undefined;
     this.shadow = shadow != undefined;
     this.bottomGradient = bottomGradient != undefined;
+    this.topGradient = topGradient != undefined;
   }
 
   ngOnInit(): void {
@@ -47,17 +50,22 @@ export class SectionComponent implements OnInit {
 
   //transparent-background-color
   getBgStyle(): Object {
+    let gradient = '';
+    if (this.topGradient || this.bottomGradient) {
+      gradient =
+        'linear-gradient(' +
+        (this.topGradient ? 'var(--background-color),' : '') +
+        '#00000000' +
+        (this.bottomGradient ? ', var(--background-color)' : '') +
+        '),';
+    }
     return {
       ...(this.bgImage && {
-        'background-image':
-          'linear-gradient(var(--background-color), #00000000' +
-          (this.bottomGradient ? ', var(--background-color)' : '') +
-          '), url(' +
-          this.bgImage +
-          ')',
+        'background-image': gradient + 'url(' + this.bgImage + ')',
       }),
       ...(this.bgRepeatMode !== '' && { 'background-repeat': this.bgRepeatMode, 'background-size': 'auto' }),
       ...(this.bgPosition !== '' && { 'background-position': this.bgPosition }),
+      ...(this.color == 'none' && { 'background-color': 'none' }),
     };
   }
 }

src/app/pages/_pages.scss

@@ -5,15 +5,15 @@
 @use './signup/signup-page' as signup;
 @use './users/users-dir' as users-dir;
 @use './projects/projects-dir' as projects-dir;
-@use './global-game-jam/global-game-jam-page' as ggj;
+@use './scarlet-showcase/scarlet-showcase-page' as ggj;
 
 @mixin theme($theme) {
-	@include blog-dir.theme($theme);
-	@include home.theme($theme);
-	@include login.theme($theme);
-	@include sgj.theme($theme);
-	@include signup.theme($theme);
-	@include users-dir.theme($theme);
-	@include projects-dir.theme($theme);
-	@include ggj.theme($theme);
-}
+  @include blog-dir.theme($theme);
+  @include home.theme($theme);
+  @include login.theme($theme);
+  @include sgj.theme($theme);
+  @include signup.theme($theme);
+  @include users-dir.theme($theme);
+  @include projects-dir.theme($theme);
+  @include ggj.theme($theme);
+}