From c2e75303cb11b2a3860415f28b0e079c62f25948 Mon Sep 17 00:00:00 2001 From: Yingi Date: Sun, 1 Jun 2025 11:48:28 +0200 Subject: [PATCH 1/2] updated the abstract scss content --- src/app/app.routes.ts | 6 +-- src/app/layout/navbar/navbar.component.html | 4 +- src/scss/abstracts/_index.scss | 3 +- src/scss/abstracts/_media-query.scss | 0 src/scss/abstracts/_mixins.scss | 49 +++++++++++++++++++++ src/scss/abstracts/_variables.scss | 46 +++++++++---------- src/styles.css.map | 18 +------- 7 files changed, 80 insertions(+), 46 deletions(-) delete mode 100644 src/scss/abstracts/_media-query.scss diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 904ee61..0e7f5d8 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -11,9 +11,9 @@ export const routes: Routes = [ component: MasterpageComponent, // Master page children: [ { path: '', component: HomeComponent, title: 'Home' }, - { path: 'about', component: AboutUsComponent, title: 'About Us' }, - { path: 'services', component: OurServicesComponent, title: 'Our Services' }, - { path: 'contactus', component: ContactUsComponent, title: 'Contact Us' }, + { path: 'about-us', component: AboutUsComponent, title: 'About Us' }, + { path: 'our-services', component: OurServicesComponent, title: 'Our Services' }, + { path: 'contact-us', component: ContactUsComponent, title: 'Contact Us' }, // Add other routes here ] }, diff --git a/src/app/layout/navbar/navbar.component.html b/src/app/layout/navbar/navbar.component.html index 5a99f8c..5e57b68 100644 --- a/src/app/layout/navbar/navbar.component.html +++ b/src/app/layout/navbar/navbar.component.html @@ -1,3 +1,5 @@ Home | -About Us +About Us | +Our Services | +Contact Us diff --git a/src/scss/abstracts/_index.scss b/src/scss/abstracts/_index.scss index de809c9..246f100 100644 --- a/src/scss/abstracts/_index.scss +++ b/src/scss/abstracts/_index.scss @@ -1,4 +1,3 @@ @forward 'variables'; @forward 'mixins'; -@forward 'functions'; -@forward 'media-query'; \ No newline at end of file +@forward 'functions'; \ No newline at end of file diff --git a/src/scss/abstracts/_media-query.scss b/src/scss/abstracts/_media-query.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/scss/abstracts/_mixins.scss b/src/scss/abstracts/_mixins.scss index e69de29..36790e3 100644 --- a/src/scss/abstracts/_mixins.scss +++ b/src/scss/abstracts/_mixins.scss @@ -0,0 +1,49 @@ +// Responsive breakpoints mixin +@mixin respond-to($breakpoint) { + @if $breakpoint == sm { + @media (min-width: #{$breakpoint-sm}) { @content; } + } + @if $breakpoint == md { + @media (min-width: #{$breakpoint-md}) { @content; } + } + @if $breakpoint == lg { + @media (min-width: #{$breakpoint-lg}) { @content; } + } + @if $breakpoint == xl { + @media (min-width: #{$breakpoint-xl}) { @content; } + } +} + +// Button mixin with variants +@mixin button-variant($bg-color, $text-color: white) { + background-color: $bg-color; + color: $text-color; + border: 2px solid $bg-color; + + &:hover { + background-color: darken($bg-color, 10%); + border-color: darken($bg-color, 10%); + } + + &:focus { + box-shadow: 0 0 0 3px rgba($bg-color, 0.25); + } +} + +// Flex center mixin +@mixin flex-center { + display: flex; + align-items: center; + justify-content: center; +} + +// Card shadow mixin +@mixin card-shadow($level: 1) { + @if $level == 1 { + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + } @else if $level == 2 { + box-shadow: 0 4px 8px rgba(0,0,0,0.15); + } @else if $level == 3 { + box-shadow: 0 8px 16px rgba(0,0,0,0.2); + } +} \ No newline at end of file diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss index 1e03c1b..8a8fdad 100644 --- a/src/scss/abstracts/_variables.scss +++ b/src/scss/abstracts/_variables.scss @@ -1,26 +1,26 @@ -/* global font size */ -$global-font-size: 14px; +// Color palette +$primary-color: #3498db; +$secondary-color: #2ecc71; +$danger-color: #e74c3c; +$warning-color: #f39c12; +$dark-color: #2c3e50; +$light-color: #ecf0f1; -/* global font color */ -$global-font-color: rgba(0,0,0, 1); +// Typography +$font-primary: 'Helvetica Neue', Arial, sans-serif; +$font-secondary: Georgia, serif; +$font-size-base: 16px; +$line-height-base: 1.6; -/* global border radius */ -$global-border-radius: 6px; +// Spacing +$spacing-xs: 0.25rem; +$spacing-sm: 0.5rem; +$spacing-md: 1rem; +$spacing-lg: 2rem; +$spacing-xl: 4rem; -/* global Layouts gaps */ -$global-gap: 10px; - -/* global background color variables */ -$global-bg-color: rgba(245,245,245, 0.5); - -/* global form controls - textbox */ -$input-text-border: 1px solid rgba(245,245,245, 0.5); -$input-text-font-size: 10px; -$input-text-font-color: rgba(245,245,245, 0.5); - -/* global form controls - placeholder */ -$form-placeholder-size: 13px; -$form-placeholder-color: lightgrey; - -/* global form controls - error messages */ -$error-message-color: red; \ No newline at end of file +// Breakpoints +$breakpoint-sm: 576px; +$breakpoint-md: 768px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1200px; diff --git a/src/styles.css.map b/src/styles.css.map index 6420698..33e8547 100644 --- a/src/styles.css.map +++ b/src/styles.css.map @@ -1,17 +1 @@ -{ - "version": 3, - "sourceRoot": "", - "sources": [ - "scss/styles.scss", - "scss/abstracts/_variables.scss", - "scss/base/_index.scss", - "scss/base/_reset.scss", - "scss/base/_typography.scss", - "scss/layout/_header.scss", - "scss/layout/_navbar.scss", - "scss/layout/_masterpage.scss" - ], - "names": [], - "mappings": "AAAA;AACA;ACDA;AAGA;AAGA;AAGA;AAGA;AAGA;AAKA;AAIA;ACxBA;ACAA;AACA;EAEQ;EACA;;;AHJR;AACA;AICA;EACI;EACA;EACA;EACA;;;AJNJ;AACA;AKDA;ALAA;AACA;AMEA;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEJ;EACI;EACA;;;AAKR;EAEI;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;;;ACvCR;AAAA;AAAA;AAAA;AAIA;EAEI;EACA;EAEA;EACA;EACA;EACA;EACA;EAMA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA,qBACoB;AAGhB;AAKA;;AAJA;EACI;;AAIJ;EACI;;;AAMZ;AACA;EACI;;;AAGJ;AACA;AAEI;EACC;IACI;;EAOJ;IACG;IACA;;;APtFR;AACA;AADA;AACA;AADA;AACA;AADA;AACA;AADA;AACA;AADA;AACA;AADA;AACA;AADA;AACA", - "file": "styles.css" -} +{"version":3,"sourceRoot":"","sources":["scss/styles.scss","scss/base/_index.scss","scss/base/_reset.scss","scss/base/_typography.scss","scss/layout/_header.scss","scss/layout/_navbar.scss","scss/layout/_masterpage.scss"],"names":[],"mappings":"AAAA;AACA;ACDA;ACAA;AACA;EAEQ;EACA;;;ACFR;EACI;EACA;EACA;EACA;;;ACNJ;ACGA;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEJ;EACI;EACA;;;AAKR;EAEI;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;;;ACvCR;AAAA;AAAA;AAAA;AAIA;EAEI;EACA;EAEA;EACA;EACA;EACA;EACA;EAMA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA,qBACoB;AAGhB;AAKA;;AAJA;EACI;;AAIJ;EACI;;;AAMZ;AACA;EACI;;;AAGJ;AACA;AAEI;EACC;IACI;;EAOJ;IACG;IACA","file":"styles.css"} \ No newline at end of file From 957cc45734ab58e51e86e34c898437aa55f87b55 Mon Sep 17 00:00:00 2001 From: Yingi Date: Sun, 1 Jun 2025 15:31:50 +0200 Subject: [PATCH 2/2] Update the site grid css app routers --- angular.json | 9 +- package.json | 4 +- src/app/app.component.html | 2 - src/app/app.routes.ts | 66 ++++++++++---- .../page-not-found.component.html | 1 + .../page-not-found.component.scss | 0 .../page-not-found.component.spec.ts | 23 +++++ .../page-not-found.component.ts | 11 +++ src/app/layout/grid/grid.component.html | 32 +++++++ src/app/layout/grid/grid.component.scss | 0 src/app/layout/grid/grid.component.spec.ts | 23 +++++ src/app/layout/grid/grid.component.ts | 13 +++ .../masterpage/masterpage.component.html | 15 ---- src/app/layout/navbar/navbar.component.html | 38 ++++++-- src/app/layout/navbar/navbar.component.ts | 4 +- src/scss/abstracts/_functions.scss | 2 + src/scss/abstracts/_mixins.scss | 2 + src/scss/abstracts/_variables.scss | 2 +- src/scss/base/_reset.scss | 26 ++++-- src/scss/base/_typography.scss | 22 +++-- src/scss/components/_buttons.scss | 56 ++++++++++++ src/scss/components/_cards.scss | 41 +++++++++ src/scss/components/_index.scss | 2 + .../layout/{_masterpage.scss => _grid.scss} | 23 ++--- src/scss/layout/_header.scss | 24 ++++++ src/scss/layout/_index.scss | 2 +- src/scss/layout/_navbar.scss | 86 +++++++++++-------- src/scss/pages/_home.scss | 21 +++++ src/scss/styles.scss | 1 + src/styles.css.map | 2 +- 30 files changed, 447 insertions(+), 106 deletions(-) create mode 100644 src/app/features/page-not-found/pages/page-not-found/page-not-found.component.html create mode 100644 src/app/features/page-not-found/pages/page-not-found/page-not-found.component.scss create mode 100644 src/app/features/page-not-found/pages/page-not-found/page-not-found.component.spec.ts create mode 100644 src/app/features/page-not-found/pages/page-not-found/page-not-found.component.ts create mode 100644 src/app/layout/grid/grid.component.html create mode 100644 src/app/layout/grid/grid.component.scss create mode 100644 src/app/layout/grid/grid.component.spec.ts create mode 100644 src/app/layout/grid/grid.component.ts rename src/scss/layout/{_masterpage.scss => _grid.scss} (81%) diff --git a/angular.json b/angular.json index 0233a2d..f59baee 100644 --- a/angular.json +++ b/angular.json @@ -24,7 +24,7 @@ "zone.js" ], "tsConfig": "tsconfig.app.json", - "inlineStyleLanguage": "scss", + "inlineStyleLanguage": "css", "assets": [ { "glob": "**/*", @@ -32,9 +32,12 @@ } ], "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], - "scripts": [], + "scripts": [ + "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" + ], "server": "src/main.server.ts", "outputMode": "server", "ssr": { @@ -88,7 +91,7 @@ "zone.js/testing" ], "tsConfig": "tsconfig.spec.json", - "inlineStyleLanguage": "scss", + "inlineStyleLanguage": "css", "assets": [ { "glob": "**/*", diff --git a/package.json b/package.json index 79299a3..7e57f5d 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "@angular/platform-server": "^19.2.0", "@angular/router": "^19.2.0", "@angular/ssr": "^19.2.6", + "@ng-bootstrap/ng-bootstrap": "^18.0.0", + "bootstrap": "^5.3.6", "express": "^4.18.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -41,4 +43,4 @@ "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.7.2" } -} \ No newline at end of file +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 55bf23e..67e7bd4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1 @@ -

Welcome

- diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 0e7f5d8..706c1ad 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,21 +1,57 @@ import { Routes } from '@angular/router'; -import { MasterpageComponent } from './layout/masterpage/masterpage.component'; -import { HomeComponent } from './features/home/pages/home/home.component'; -import { AboutUsComponent } from './features/about-us/pages/about-us/about-us.component'; -import { OurServicesComponent } from './features/our-services/pages/our-services/our-services.component'; -import { ContactUsComponent } from './features/contact-us/pages/contact-us/contact-us.component'; +import { GridComponent } from './layout/grid/grid.component'; export const routes: Routes = [ - { + // { path: '', redirectTo: 'home', pathMatch: 'full' }, + { path: '', - component: MasterpageComponent, // Master page + component: GridComponent, children: [ - { path: '', component: HomeComponent, title: 'Home' }, - { path: 'about-us', component: AboutUsComponent, title: 'About Us' }, - { path: 'our-services', component: OurServicesComponent, title: 'Our Services' }, - { path: 'contact-us', component: ContactUsComponent, title: 'Contact Us' }, - // Add other routes here - ] + { + path: '', + loadComponent: () => + import('./features/home/pages/home/home.component').then( + (m) => m.HomeComponent + ), // Lazy load Home + title: 'Home', + }, + + { + path: 'about-us', + loadComponent: () => + import('./features/about-us/pages/about-us/about-us.component').then( + (m) => m.AboutUsComponent + ), // Lazy load about-us + title: 'About Us', + }, + + { + path: 'our-services', + loadComponent: () => + import( + './features/our-services/pages/our-services/our-services.component' + ).then((m) => m.OurServicesComponent), // Lazy load our-services + title: 'Our Services', + }, + + { + path: 'contact-us', + loadComponent: () => + import( + './features/contact-us/pages/contact-us/contact-us.component' + ).then((m) => m.ContactUsComponent), // Lazy load contact-us + title: 'Contact Us', + }, + + { + path: 'page-not-found', + loadComponent: () => + import( + './features/page-not-found/pages/page-not-found/page-not-found.component' + ).then((m) => m.PageNotFoundComponent), // Lazy load page-not-found + title: 'Contact Us', + }, + ], }, - { path: '**', redirectTo: '' } // Catch-all route -]; \ No newline at end of file + { path: '**', redirectTo: '/page-not-found' }, // Catch-all route +]; diff --git a/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.html b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.html new file mode 100644 index 0000000..cc75e49 --- /dev/null +++ b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.html @@ -0,0 +1 @@ +

page-not-found works!

diff --git a/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.scss b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.spec.ts b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.spec.ts new file mode 100644 index 0000000..878de5b --- /dev/null +++ b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageNotFoundComponent } from './page-not-found.component'; + +describe('PageNotFoundComponent', () => { + let component: PageNotFoundComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PageNotFoundComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PageNotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.ts b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.ts new file mode 100644 index 0000000..0651958 --- /dev/null +++ b/src/app/features/page-not-found/pages/page-not-found/page-not-found.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-page-not-found', + imports: [], + templateUrl: './page-not-found.component.html', + styleUrl: './page-not-found.component.scss' +}) +export class PageNotFoundComponent { + +} diff --git a/src/app/layout/grid/grid.component.html b/src/app/layout/grid/grid.component.html new file mode 100644 index 0000000..9de5f03 --- /dev/null +++ b/src/app/layout/grid/grid.component.html @@ -0,0 +1,32 @@ +
+ +
+ +
+ +
+ YOUR PAGE NAME +
+ +
+ CALL TO ACTION +
+ +
+ +
+ +
+ +
+ SIDE BAR +
+ +
+ +
+ FOOTER HERE +
+ +
+ diff --git a/src/app/layout/grid/grid.component.scss b/src/app/layout/grid/grid.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/layout/grid/grid.component.spec.ts b/src/app/layout/grid/grid.component.spec.ts new file mode 100644 index 0000000..364235a --- /dev/null +++ b/src/app/layout/grid/grid.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GridComponent } from './grid.component'; + +describe('GridComponent', () => { + let component: GridComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [GridComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GridComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/layout/grid/grid.component.ts b/src/app/layout/grid/grid.component.ts new file mode 100644 index 0000000..20bc3c7 --- /dev/null +++ b/src/app/layout/grid/grid.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; +import { NavbarComponent } from '../navbar/navbar.component'; + +@Component({ + selector: 'app-grid', + imports: [RouterOutlet, NavbarComponent], + templateUrl: './grid.component.html', + styleUrl: './grid.component.scss' +}) +export class GridComponent { + +} diff --git a/src/app/layout/masterpage/masterpage.component.html b/src/app/layout/masterpage/masterpage.component.html index efe5132..e69de29 100644 --- a/src/app/layout/masterpage/masterpage.component.html +++ b/src/app/layout/masterpage/masterpage.component.html @@ -1,15 +0,0 @@ -
- -
- carousel goes here... -
-
-
- -
-
- Footer goes here... -
- \ No newline at end of file diff --git a/src/app/layout/navbar/navbar.component.html b/src/app/layout/navbar/navbar.component.html index 5e57b68..48568ba 100644 --- a/src/app/layout/navbar/navbar.component.html +++ b/src/app/layout/navbar/navbar.component.html @@ -1,5 +1,33 @@ -Home | -About Us | -Our Services | -Contact Us - + diff --git a/src/app/layout/navbar/navbar.component.ts b/src/app/layout/navbar/navbar.component.ts index f2b6ab0..fdcaa7b 100644 --- a/src/app/layout/navbar/navbar.component.ts +++ b/src/app/layout/navbar/navbar.component.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { RouterLink, RouterOutlet } from '@angular/router'; +import { RouterLink } from '@angular/router'; @Component({ selector: 'app-navbar', - imports: [RouterLink, RouterOutlet ], + imports: [RouterLink ], templateUrl: './navbar.component.html', styleUrl: './navbar.component.scss' }) diff --git a/src/scss/abstracts/_functions.scss b/src/scss/abstracts/_functions.scss index e69de29..9a4012d 100644 --- a/src/scss/abstracts/_functions.scss +++ b/src/scss/abstracts/_functions.scss @@ -0,0 +1,2 @@ + +@use "./variables" as *; diff --git a/src/scss/abstracts/_mixins.scss b/src/scss/abstracts/_mixins.scss index 36790e3..98b5da6 100644 --- a/src/scss/abstracts/_mixins.scss +++ b/src/scss/abstracts/_mixins.scss @@ -1,3 +1,5 @@ +@use "./variables" as *; + // Responsive breakpoints mixin @mixin respond-to($breakpoint) { @if $breakpoint == sm { diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss index 8a8fdad..7a24526 100644 --- a/src/scss/abstracts/_variables.scss +++ b/src/scss/abstracts/_variables.scss @@ -9,7 +9,7 @@ $light-color: #ecf0f1; // Typography $font-primary: 'Helvetica Neue', Arial, sans-serif; $font-secondary: Georgia, serif; -$font-size-base: 16px; +$font-size-base: 14px; $line-height-base: 1.6; // Spacing diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss index 352a7de..52ed2ea 100644 --- a/src/scss/base/_reset.scss +++ b/src/scss/base/_reset.scss @@ -1,7 +1,21 @@ -/* Rest to default setting */ -* { - //page align - margin: 0; - padding: 0; + +@use '../abstracts' as *; + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; } - \ No newline at end of file + +html { + font-size: $font-size-base; + line-height: $line-height-base; +} + +body { + font-family: $font-primary; + color: $dark-color; + background-color: white; +} \ No newline at end of file diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss index cebcd1d..c0967e8 100644 --- a/src/scss/base/_typography.scss +++ b/src/scss/base/_typography.scss @@ -1,8 +1,20 @@ @use '../abstracts' as *; -body { - font-family:Arial, Helvetica, sans-serif; - font-weight: 100; - font-size: 14px; - font-style: normal; +h1, h2, h3, h4, h5, h6 { + font-family: $font-secondary; + margin-bottom: $spacing-md; + line-height: 1.2; +} + +p { + margin-bottom: $spacing-md; +} + +a { + color: $primary-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } } \ No newline at end of file diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss index e69de29..35a1857 100644 --- a/src/scss/components/_buttons.scss +++ b/src/scss/components/_buttons.scss @@ -0,0 +1,56 @@ +.btn { + display: inline-block; + padding: $spacing-sm $spacing-md; + font-size: rem(14px); + font-weight: 500; + text-align: center; + text-decoration: none; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; + + // Button variants using isolated mixins + &--primary { + @include button-variant($primary-color); + } + + &--secondary { + @include button-variant($secondary-color); + } + + &--danger { + @include button-variant($danger-color); + } + + &--outline { + background-color: transparent; + color: $primary-color; + border: 2px solid $primary-color; + + &:hover { + background-color: $primary-color; + color: white; + } + } + + // Button sizes + &--small { + padding: $spacing-xs $spacing-sm; + font-size: rem(12px); + } + + &--large { + padding: $spacing-md $spacing-lg; + font-size: rem(18px); + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + + &:hover { + transform: none; + } + } +} \ No newline at end of file diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss index e69de29..4bd919d 100644 --- a/src/scss/components/_cards.scss +++ b/src/scss/components/_cards.scss @@ -0,0 +1,41 @@ +@use '../abstracts' as *; + +.card { + background-color: white; + border-radius: 8px; + overflow: hidden; + @include card-shadow(1); + transition: box-shadow 0.3s ease; + + &:hover { + @include card-shadow(2); + } + + &__header { + padding: $spacing-md; + border-bottom: 1px solid $light-color; + + h3 { + margin-bottom: 0; + } + } + + &__body { + padding: $spacing-md; + } + + &__footer { + padding: $spacing-md; + // background-color: lighten($light-color, 3%); + border-top: 1px solid $light-color; + } + + // Card variants + &--highlighted { + border-left: 4px solid $primary-color; + } + + &--danger { + border-left: 4px solid $danger-color; + } +} \ No newline at end of file diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss index e69de29..902c6d3 100644 --- a/src/scss/components/_index.scss +++ b/src/scss/components/_index.scss @@ -0,0 +1,2 @@ +/* bind the following _partials to scss/styles.scss */ +@forward 'cards'; \ No newline at end of file diff --git a/src/scss/layout/_masterpage.scss b/src/scss/layout/_grid.scss similarity index 81% rename from src/scss/layout/_masterpage.scss rename to src/scss/layout/_grid.scss index 437d307..1465f01 100644 --- a/src/scss/layout/_masterpage.scss +++ b/src/scss/layout/_grid.scss @@ -1,19 +1,20 @@ +@use '../abstracts' as *; /* Grid layout structure Mobile-first approach */ -.master-page-grid { +.site-grid { + background-color: red; + margin: auto; + max-width: 1200px; - margin: auto; - max-width: 900px; - display: grid; gap: 2px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr auto 1fr ; grid-template-areas:"navbar" "header" - "carousel" + "call-to-action" "main" "footer"; @@ -32,14 +33,14 @@ } /* Header Grid Area */ -.header-container { +.idetity-container { grid-area: header; display: grid; } /* Carousel Grid Area */ -.carousel-container { - grid-area: carousel; +.call-to-action-container { + grid-area: call-to-action; } /* Page Main Area */ @@ -75,9 +76,9 @@ /* Large screens - Grid Layout areas */ .master-page-grid { - grid-template-areas:"navbar " - "header " - "carousel " + grid-template-areas:"navbar" + "header" + "call-to-action" "main" "footer"; } diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss index 03dc577..caf263e 100644 --- a/src/scss/layout/_header.scss +++ b/src/scss/layout/_header.scss @@ -1,2 +1,26 @@ /* Site header */ @use '../abstracts' as *; + + +.header { + background: linear-gradient(135deg, $primary-color, $secondary-color); + color: white; + padding: $spacing-xl 0; + text-align: center; + + &__title { + font-size: $font-size-base; + margin-bottom: $spacing-md; + + @include respond-to(md) { + font-size: $font-size-base; + } + } + + &__subtitle { + font-size: $font-size-base; + opacity: 0.9; + max-width: 600px; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss index 02b9177..37446e8 100644 --- a/src/scss/layout/_index.scss +++ b/src/scss/layout/_index.scss @@ -1,6 +1,6 @@ +@forward 'grid'; @forward 'header'; @forward 'navbar'; -@forward 'masterpage'; @forward 'sidebar'; @forward 'footer'; diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss index 9640426..b542972 100644 --- a/src/scss/layout/_navbar.scss +++ b/src/scss/layout/_navbar.scss @@ -1,44 +1,54 @@ @use '../abstracts' as *; -//Navbar css .navbar { - padding: 0px; - - .nav-item { - margin-right: 10px; - padding-right: 0px; - } - - .nav-link { - color: lightgray; - } + background-color: white; + @include card-shadow(1); + position: sticky; + top: 0; + z-index: 1000; + + &__container { + max-width: 1200px; + margin: 0 auto; + padding: 0 $spacing-md; + @include flex-center; + justify-content: space-between; + height: 60px; + } + + &__brand { + // font-size: rem(24px); + font-weight: bold; + color: $primary-color; + } + + &__menu { + display: flex; + list-style: none; + gap: $spacing-lg; - .nav-link:hover { - color: #fff; - } - .nav-link:focus { - color: white; - font-weight: bold; - } -} - -// ---- Navigation-bar break-point -@media screen and (max-width: 575px) { + @include respond-to(sm) { + gap: $spacing-xl; + } + } + + &__link { + color: $dark-color; + font-weight: 500; + transition: color 0.3s ease; - .navbar-toggler { - border: none; - padding-left: 0; - } - .navbar-toggler:focus { - box-shadow: none; - } - .navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); - } - .nav-link { - border-top: 1px solid rgba(128,128,128, 0.3); - padding: 4px 0 2px 0; + &:hover, + &--active { + color: $primary-color; + } + } + + // Mobile menu (hidden by default) + &__toggle { + display: none; + + @media (max-width: #{$breakpoint-md - 1px}) { + display: block; } -} - - + } +} \ No newline at end of file diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss index d7f0b30..4076d83 100644 --- a/src/scss/pages/_home.scss +++ b/src/scss/pages/_home.scss @@ -1 +1,22 @@ @use '../abstracts' as *; + +.home { + &__hero { + background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); + height: 60vh; + @include flex-center; + color: white; + text-align: center; + } + + &__features { + padding: $spacing-xl 0; + + .feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: $spacing-lg; + margin-top: $spacing-lg; + } + } +} \ No newline at end of file diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 860b10e..91b7084 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -1,5 +1,6 @@ /* include all _partials from the following directories: */ /* You can add global styles to this file, and also import other style files */ + @use 'abstracts'; @use 'base'; @use 'layout'; diff --git a/src/styles.css.map b/src/styles.css.map index 33e8547..f5f409f 100644 --- a/src/styles.css.map +++ b/src/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["scss/styles.scss","scss/base/_index.scss","scss/base/_reset.scss","scss/base/_typography.scss","scss/layout/_header.scss","scss/layout/_navbar.scss","scss/layout/_masterpage.scss"],"names":[],"mappings":"AAAA;AACA;ACDA;ACAA;AACA;EAEQ;EACA;;;ACFR;EACI;EACA;EACA;EACA;;;ACNJ;ACGA;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEJ;EACI;EACA;;;AAKR;EAEI;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAEJ;IACI;IACA;;;ACvCR;AAAA;AAAA;AAAA;AAIA;EAEI;EACA;EAEA;EACA;EACA;EACA;EACA;EAMA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA,qBACoB;AAGhB;AAKA;;AAJA;EACI;;AAIJ;EACI;;;AAMZ;AACA;EACI;;;AAGJ;AACA;AAEI;EACC;IACI;;EAOJ;IACG;IACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["scss/styles.scss","scss/base/_index.scss","scss/base/_reset.scss","scss/abstracts/_variables.scss","scss/base/_typography.scss","scss/layout/_grid.scss","scss/layout/_header.scss","scss/abstracts/_mixins.scss","scss/layout/_navbar.scss","scss/components/_index.scss","scss/components/_cards.scss","scss/pages/_home.scss"],"names":[],"mappings":"AAAA;AACA;ACDA;ACGA;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE,WCDe;EDEf,aCDiB;;;ADInB;EACE,aCRa;EDSb,OCbW;EDcX;;;AEjBF;EACE,aDOe;ECNf,eDaW;ECZX;;;AAGF;EACE,eDQW;;;ACLb;EACE,ODZc;ECad;;AAEA;EACE;;;AChBJ;AAAA;AAAA;AAAA;AAIA;EACM;EACE;EACA;EAEJ;EACA;EACA;EACA;EACA;EAMA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;;;AAGJ;AACA;EACI;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA,qBACoB;AAGhB;AAKA;;AAJA;EACI;;AAIJ;EACI;;;AAMZ;AACA;EACI;;;AAGJ;AACA;AAEI;EACC;IACI;;EAOJ;IACG;IACA;;;ACvFR;AAIA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,eHKS;;AITT;EDEF;IAKI,WHJW;;;AGQf;EACE,WHTa;EGUb;EACA;EACA;;;AErBJ;EACE;EDyCE;ECvCF;EACA;EACA;;AAEA;EACE;EACA;EACA;EDwBF;EACA;EACA;ECxBE;EACA;;AAGF;EAEE;EACA,OLpBY;;AKuBd;EACE;EACA;EACA,KLTS;;AIbT;ECmBF;IAMI,KLXO;;;AKeX;EACE,OL9BS;EK+BT;EACA;;AAEA;EAEE,OLxCU;;AK6Cd;EACE;;AAEA;EAHF;IAII;;;;AClDN;ACEA;EACE;EACA;EACA;EHuCE;EGrCF;;AAEA;EHqCE;;AGjCF;EACE,SPGS;EOFT;;AAEA;EACE;;AAIJ;EACE,SPNS;;AOSX;EACE,SPVS;EOYT;;AAIF;EACE;;AAGF;EACE;;;ACnCA;EACI;EACA;EJ+BN;EACA;EACA;EI/BM;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA,KRCC;EQAD","file":"styles.css"} \ No newline at end of file