Merge pull request #4 from mystackbox/css-files

mystackbox · web-flow · commit 2ed6770639b5 · 2025-06-01T11:13:00.000+02:00
added scss folders and files
diff --git a/angular.json b/angular.json
@@ -32,7 +32,7 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.css"
             ],
             "scripts": [],
             "server": "src/main.server.ts",
@@ -96,7 +96,7 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.css"
             ],
             "scripts": []
           }
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "serve:ssr:angular-masterpage": "node dist/angular-masterpage/server/server.mjs"
+    "serve:ssr:angular-masterpage": "node dist/angular-masterpage/server/server.mjs",
+    "watch-css": "sass ./src/scss/styles.scss ./src/styles.css --watch"
   },
   "private": true,
   "dependencies": {
diff --git a/src/index.html b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>AngularMasterpage</title>
+  <title>Angular Masterpage</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
diff --git a/src/scss/abstracts/_functions.scss b/src/scss/abstracts/_functions.scss
diff --git a/src/scss/abstracts/_index.scss b/src/scss/abstracts/_index.scss
@@ -0,0 +1,4 @@
+@forward 'variables';
+@forward 'mixins';
+@forward 'functions';
+@forward 'media-query';
diff --git a/src/scss/abstracts/_media-query.scss b/src/scss/abstracts/_media-query.scss
diff --git a/src/scss/abstracts/_mixins.scss b/src/scss/abstracts/_mixins.scss
diff --git a/src/scss/abstracts/_variables.scss b/src/scss/abstracts/_variables.scss
@@ -0,0 +1,26 @@
+/* global font size */
+$global-font-size: 14px;
+
+/* global font color */
+$global-font-color: rgba(0,0,0, 1);
+
+/* global border radius */
+$global-border-radius: 6px;
+
+/* 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;
diff --git a/src/scss/base/_index.scss b/src/scss/base/_index.scss
@@ -0,0 +1,3 @@
+/* bind the following _partials to scss/styles.scss */
+@forward 'reset';
+@forward 'typography';
diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss
@@ -0,0 +1,7 @@
+/*  Rest to default setting */
+* {
+        //page align
+        margin: 0;
+        padding: 0;
+}
+    
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
@@ -0,0 +1,8 @@
+@use '../abstracts' as *;
+
+body {
+    font-family:Arial, Helvetica, sans-serif;
+    font-weight: 100;
+    font-size: 14px;
+    font-style: normal;
+}
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
diff --git a/src/scss/components/_carousel.scss b/src/scss/components/_carousel.scss
diff --git a/src/scss/components/_form.scss b/src/scss/components/_form.scss
diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss
diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
@@ -0,0 +1,2 @@
+
+@use '../abstracts' as *;
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
@@ -0,0 +1,2 @@
+/*  Site header */
+@use '../abstracts' as *;
diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss
@@ -0,0 +1,6 @@
+@forward 'header';
+@forward 'navbar';
+@forward 'masterpage';
+@forward 'sidebar';
+@forward 'footer';
+
diff --git a/src/scss/layout/_masterpage.scss b/src/scss/layout/_masterpage.scss
@@ -0,0 +1,90 @@
+/*  
+    Grid layout structure 
+    Mobile-first approach
+*/
+.master-page-grid { 
+    
+    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"
+                        "main"
+                        "footer";
+
+    background-color: #fff;
+    height: 0vh;
+}
+
+.grid-area-common {
+    background-color: #f8f9fa;
+    padding: 15px;
+}
+
+/* Navbar Grid Area */
+.navbar-container {
+    grid-area: navbar;
+}
+
+/* Header Grid Area */
+.header-container {
+    grid-area: header;
+    display: grid;
+}
+
+/* Carousel Grid Area */
+.carousel-container {
+    grid-area: carousel;
+}
+
+/* Page Main Area */
+.page-content-container {
+    grid-area: main; 
+    display: grid;
+    gap: 2px;
+    grid-template-rows:1fr;
+    grid-template-areas: 
+                        "page-content-main"
+                        "page-content-sidebar";
+
+        /* Carousel Grid Area */
+        .page-content-main {
+            grid-area: page-content-main;
+        }
+
+        /* Sidebar Grid Area */
+        .sidebar-container {
+            grid-area: page-content-sidebar; 
+
+        }
+}
+ 
+
+/*   Footer Grid Area */
+.footer-container {
+    grid-area: footer;
+}
+
+/*   Medium screens, laptops  */
+@media screen and (min-width: 768px){
+    
+    /*  Large screens - Grid Layout areas */
+     .master-page-grid { 
+         grid-template-areas:"navbar "
+                             "header "
+                             "carousel "
+                             "main"
+                             "footer";
+     } 
+
+     .page-content-container { 
+        grid-template-columns: 3fr 1fr;
+        grid-template-areas:"page-content-main page-content-sidebar";
+    }
+
+ }
diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
@@ -0,0 +1,44 @@
+@use '../abstracts' as *;
+
+//Navbar css
+.navbar {
+    padding: 0px;
+
+    .nav-item {
+        margin-right: 10px;
+        padding-right: 0px;
+    }
+
+    .nav-link {
+        color: lightgray;
+    }
+    
+    .nav-link:hover {
+        color: #fff;
+    }
+    .nav-link:focus {
+        color: white;
+        font-weight: bold;
+    }
+}
+
+// ---- Navigation-bar break-point
+@media screen and (max-width: 575px) {
+    
+    .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;
+    }
+}
+
+
diff --git a/src/scss/layout/_sidebar.scss b/src/scss/layout/_sidebar.scss
@@ -0,0 +1 @@
+@use '../abstracts' as *;
diff --git a/src/scss/pages/_about.scss b/src/scss/pages/_about.scss
@@ -0,0 +1,5 @@
+@use '../abstracts' as *;
+
+
+
+
diff --git a/src/scss/pages/_contact.scss b/src/scss/pages/_contact.scss
@@ -0,0 +1 @@
+@use '../abstracts' as *;
diff --git a/src/scss/pages/_faq.scss b/src/scss/pages/_faq.scss
@@ -0,0 +1 @@
+@use '../abstracts' as *;
diff --git a/src/scss/pages/_home.scss b/src/scss/pages/_home.scss
@@ -0,0 +1 @@
+@use '../abstracts' as *;
diff --git a/src/scss/pages/_index.scss b/src/scss/pages/_index.scss
@@ -0,0 +1,6 @@
+@forward 'home';
+@forward 'about';
+@forward 'services';
+@forward 'contact';
+@forward 'page-not-found';
+@forward 'faq';
diff --git a/src/scss/pages/_page-not-found.scss b/src/scss/pages/_page-not-found.scss
@@ -0,0 +1 @@
+@use '../abstracts' as *;
diff --git a/src/scss/pages/_services.scss b/src/scss/pages/_services.scss
@@ -0,0 +1 @@
+@use '../abstracts' as *;
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -0,0 +1,7 @@
+/* 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';
+@use 'components';
+@use 'pages';
diff --git a/src/styles.css.map b/src/styles.css.map
diff --git a/src/styles.scss b/src/styles.scss
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@`
`32`	`32`	`}`
`33`	`33`	`],`
`34`	`34`	`"styles": [`
`35`		`- "src/styles.scss"`
	`35`	`+ "src/styles.css"`
`36`	`36`	`],`
`37`	`37`	`"scripts": [],`
`38`	`38`	`"server": "src/main.server.ts",`
`@@ -96,7 +96,7 @@`
`96`	`96`	`}`
`97`	`97`	`],`
`98`	`98`	`"styles": [`
`99`		`- "src/styles.scss"`
	`99`	`+ "src/styles.css"`
`100`	`100`	`],`
`101`	`101`	`"scripts": []`
`102`	`102`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/* bind the following _partials to scss/styles.scss */`
	`2`	`+@forward 'reset';`
	`3`	`+@forward 'typography';`