remove dummy text + add stylesheets

yqni13 · May 1, 2024 · 95b14c5 · 95b14c5
1 parent f0ba777
commit 95b14c5
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 332 deletions.
diff --git a/angular.json b/angular.json
@@ -37,7 +37,9 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "src/stylesheets/colors.scss",
+              "src/stylesheets/media.scss"
             ],
             "scripts": []
           },
@@ -97,12 +99,17 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "src/stylesheets/colors.scss",
+              "src/stylesheets/media.scss"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/desktop.ini b/desktop.ini
@@ -0,0 +1,6 @@
+[.ShellClassInfo]
+IconResource=D:\Dokumente\GitHub\Private_Projects\portfolio\src\assets\img\folder.ico,0
+[ViewState]
+Mode=
+Vid=
+FolderType=Documents
diff --git a/src/app/app.component.html b/src/app/app.component.html
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -0,0 +1,3 @@
+h1 {
+    color: var(--phtalo-green);
+}
diff --git a/src/assets/img/folder.ico b/src/assets/img/folder.ico
diff --git a/src/assets/img/yqni13-small.png b/src/assets/img/yqni13-small.png
diff --git a/src/index.html b/src/index.html
@@ -5,7 +5,8 @@
   <title>Portfolio</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="icon" type="image/x-icon" href="./assets/img/yqni13-small.png">
 </head>
 <body>
   <app-root></app-root>

diff --git a/src/styles.scss b/src/styles.scss
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "./stylesheets/colors.scss";
+@import "./stylesheets/media.scss";
diff --git a/src/stylesheets/colors.scss b/src/stylesheets/colors.scss
@@ -0,0 +1,55 @@
+:root {
+    /* yqni13 colors */
+    --yqni13-purple: #650D88;
+    --yqni13-pink: #BC0C79;
+
+    /* white type colors */
+    --snow-white: #FFFAFA;
+    --ghost-white: #F8F8FF;
+    --alice-blue: #F0F8FF;
+    --antiflesh-white: #FAFAFA;
+    --gainsboro-white: #F1EFF2;
+    --off-white: #FBFBFB;
+    --ivory-white: #FFFFF0;
+
+    /* dark mode theme#1 dark-red */
+    --darkmode1-black1: #000000;
+    --darkmode1-red1: #3D0000;
+    --darkmode1-red2: #950101;
+    --darkmode1-red3: #FF0000;
+
+    /* dark mode theme#2 dark-orange */
+    --darkmode2-black1: #222831;
+    --darkmode2-grey1: #393E46;
+    --darkmode2-orange1: #FD7014;
+    --darkmode2-white1: #EEEEEE;
+
+    /* dark mode theme#3 dark-pink */
+    --darkmode3-black1: #000000;
+    --darkmode3-pink1: #86003C;
+    --darkmode3-pink2: #E41F7B;
+    --darkmode3-pink3: #FF8BA0;
+
+    /* dark mode theme#4 dark-turquoise */
+    --darkmode4-black1: #222831;
+    --darkmode4-grey1: #393E46;
+    --darkmode4-torquoise1: #00ADB5;
+    --darkmode4-torquoise2: #00FFF5;
+
+    /* dark mode theme#5 dark-purple */
+    --darkmode5-black1: #000000;
+    --darkmode5-purple1: #3E065F;
+    --darkmode5-purple2: #700B97;
+    --darkmode5-purple3: #8E05C2;
+
+    /* dark mode theme6 dark-grey */
+    --darkmode6-black1: #2A2438;
+    --darkmode6-grey1: #352F44;
+    --darkmode6-grey2: #5C5470;
+    --darkmode6-grey3: #DBD8E3;
+
+    /* other defined colors */
+    --phtalo-green: #0D413A;
+    --bordeau-red: #420116;
+    --formel1-red: #910001;
+}
diff --git a/src/stylesheets/media.scss b/src/stylesheets/media.scss
@@ -0,0 +1,31 @@
+/* media queries for responsive design regarding devices */
+
+@media screen and (min-width: 1440px) { /* large desktop devices */
+    body {
+        background-color: #4A516D;
+    }
+}
+
+@media screen and (max-width: 1440px) { /* small desktop devices */
+    body {
+        background-color: #d6f5d6;
+    }
+}
+
+@media screen and (max-width: 1024px) { /* tablet device [landscape] */
+    body {
+        background-color: #9999ff;
+    }
+}
+
+@media screen and (max-width: 768px) { /* mobile devices [landscape] */
+    body {
+        background-color: #ffb3cc;
+    }
+
+}
+@media screen and (max-width: 480px) { /* mobile devices [portrait] */
+    body {
+        background-color: #ffcc99;
+    }
+}