Refactor CSS (#785)

* Refactor CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor about section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor CSS for experiences section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Update education section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Update projects section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Update publication + accomplishment section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Update achievements section Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor footer CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Re-use section title adjustment css for top header Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor navbar CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor sidebar CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Use unified navbar for all pages Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor 404 page CSS Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor list page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Fix notes page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Refactor single page css Signed-off-by: hossainemruz <hossainemruz@gmail.com> * Introduce color variables Signed-off-by: hossainemruz <hossainemruz@gmail.com> --------- Signed-off-by: hossainemruz <hossainemruz@gmail.com>
2023-09-29 04:27:19 +06:00 · 2023-09-29 04:27:19 +06:00 · 6dc9d1d33d
commit 6dc9d1d33d
parent 77447b7723
64 changed files with 2532 additions and 3593 deletions
--- a/assets/styles/variables.scss
+++ b/assets/styles/variables.scss
@ -0,0 +1,52 @@
+@use 'sass:map';
+
+$breakpoints: (
+  tiny: 320px,
+  small: 640px,
+  medium: 768px,
+  large: 1024px,
+  very-large: 1280px,
+  extra-large: 1536px,
+  ultra-large: 2560px,
+);
+
+// Color are chosen from TailwindCSS color scheme
+// https://tailwindcss.com/docs/customizing-colors
+
+// accent-color
+$accent-color: #0891b2; // cyan 600
+$hover-over-accent-color: #06b6d4; // cyan 500
+$text-over-accent-color: #e4e4e7; // zinc 200
+
+// background-color
+$bg-primary: #f8fafc; // slate 50
+$bg-primary-inverse: #0f172a; // slate 900
+$bg-secondary: #e2e8f0; // slate 200
+$bg-card: #fff;
+
+// text-color
+$heading-color: #1e293b; // slate 800
+$text-color: #334155; // slate 700
+$inverse-text-color: #cbd5e1; // slate 300
+$muted-text-color: #64748b; // slate 500
+$inline-code-color: #dc2626; // red 600
+$highlight-color: #fde68a; // amber 200
+
+// transitions
+$transition-duration: 0.3s;
+$transition-type: ease-out;
+
+// borders and shadows
+$border-color: rgba($accent-color, 0.1);
+$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+
+$brand-colors: (
+  'facebook': #3b5998,
+  'twitter': #1da1f2,
+  'linkedin': #0077b5,
+  'reddit': #ff4500,
+  'tumblr': #35465c,
+  'pocket': #ef4056,
+  'diaspora': #1e1e1e,
+  'whatsapp': #25d366,
+);