feat(daffio): clean up footer styles (#2723)

graycoreio · Jan 16, 2024 · 2f550fc · 2f550fc
1 parent 3966654
commit 2f550fc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 18 deletions.
diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.html
@@ -2,7 +2,7 @@
   <div class="daffio-simple-footer__grid">
     <div class="daffio-simple-footer__menu">
       <a routerLink="{{ link.path }}" *ngFor="let link of links" class="daffio-simple-footer__link">{{ link.title }}</a>
-      <a class="daffio-simple-footer__link" href="https://github.com/sponsors/graycoreio" target="_blank">Sponsor</a>
+      <a class="daffio-simple-footer__link" href="https://github.com/sponsors/graycoreio" target="_blank" rel="noopener noreferrer">Sponsor</a>
     </div>
     <a class="daffio-simple-footer__logo" routerLink="/">
       <daff-branding-logo type="icon"></daff-branding-logo>

diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.scss
@@ -3,9 +3,9 @@
 :host {
 	display: block;
 	font-size: daff.$small-font-size;
-	padding: 48px 24px;
+	padding: 24px;
 
-	@include daff.breakpoint(tablet) {
+	@include daff.breakpoint(big-tablet) {
 		padding: 64px 48px;
 	}
 
@@ -25,16 +25,8 @@
 			'social';
 		grid-gap: 16px;
 
-		@include daff.breakpoint(tablet) {
-			grid-template-columns: 1fr 1fr;
-			grid-template-areas:
-				'logo  logo'
-				'menu  social';
-			grid-gap: 24px;
-		}
-
 		@include daff.breakpoint(big-tablet) {
-			grid-template-columns: 1fr 1fr 1fr;
+			grid-template-columns: 2fr 1fr 2fr;
 			grid-template-areas: 'menu logo social';
 			grid-gap: 48px;
 		}
@@ -43,9 +35,12 @@
 	&__menu {
 		grid-area: menu;
 		display: flex;
+		flex-wrap: wrap;
+		gap: 8px 16px;
 		justify-content: center;
 
 		@include daff.breakpoint(big-tablet) {
+			gap: 24px;
 			justify-content: flex-start;
 		}
 	}
@@ -61,27 +56,23 @@
 	&__social {
 		grid-area: social;
 		display: flex;
+		gap: 8px 16px;
 		justify-content: center;
 
 		@include daff.breakpoint(big-tablet) {
+			gap: 24px;
 			justify-content: flex-end;
 		}
 	}
 
 	&__link {
 		@include daff.embolden();
 		@include daff.uppercase();
-		padding-right: 32px;
 		text-decoration: none;
-
-		&:last-child {
-			padding-right: 0;
-		}
 	}
 
 	&__social-icon {
 		vertical-align: middle;
-
 		margin-right: 8px;
 	}
 

diff --git a/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.ts b/apps/daffio/src/app/core/footer/simple-footer/simple-footer.component.ts
@@ -22,6 +22,7 @@ export class DaffioSimpleFooterComponent {
 
   links: any[] = [
     { path: '/why-pwa', title: 'Why PWA' },
+    { path: '/api', title: 'Docs' },
     { path: '/support', title: 'Support' },
   ];