From db0fc0d78eb26534bcfce647e57faed36be0fc86 Mon Sep 17 00:00:00 2001 From: A-Tetarwal Date: Sun, 11 Aug 2024 19:22:18 +0530 Subject: [PATCH] Polity-Dance --- views/article.ejs | 77 +++++++++++++------- views/createarticle.ejs | 68 ++++++++++++----- views/editprofile.ejs | 57 ++++++++++++++- views/index.ejs | 102 +++++++++++++++++--------- views/login.ejs | 46 ++++++++++++ views/profile.ejs | 153 ++++++++++++++++++++++++++++++++++++--- views/profileAll.ejs | 157 ++++++++++++++++++++++++++++++++++++---- views/register.ejs | 46 ++++++++++++ views/tech.ejs | 81 +++++++++++++++++++-- 9 files changed, 671 insertions(+), 116 deletions(-) diff --git a/views/article.ejs b/views/article.ejs index fa6e961..1773862 100644 --- a/views/article.ejs +++ b/views/article.ejs @@ -17,21 +17,34 @@ pointer-events: none; cursor: default; } + + * { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + } - .grid-masonry { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-template-rows: masonry; - gap: 1rem; + /* Navbar Styles */ + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 1rem; + background-color: black; + color: white; } - .grid-item img { - border-radius: 0.5rem; - width: 100%; /* Ensure images fit within the grid item */ + .navbar a { + padding: 0.5rem 1rem; + font-size: 1rem; } - - * { - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + + .navbar button { + padding: 0.5rem 1rem; + font-size: 1rem; + border: none; + border-radius: 0.5rem; + background-color: #333; + color: white; } /* Light Mode Styles */ @@ -57,29 +70,41 @@ .dark-mode .navbar { background-color: black; color: #ffffff; - box-shadow: 0 2px 2px 0.5px #232323; + border-bottom: 1px solid rgb(130, 130, 130); } - /* Grid Item Light Mode */ - .light-mode .grid-item { - background-color: #ffffff; - color: #000000; + .peacock { + box-shadow: 5px 2.5px 0px 2px #1a1a1a; } - /* Grid Item Dark Mode */ - .dark-mode .grid-item { - background-color: black; - color: #ffffff; + /* Responsive Navbar */ + @media (max-width: 768px) { + .navbar { + flex-direction: column; + text-align: center; + } + + .navbar .navmore { + margin-top: 1rem; + display: flex; + /* flex-direction: column; */ + gap: 0.5rem; + } + + #theme-toggle{ + position: fixed; + top: 10px; + right: 10px; + } } - .peacockk { - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; - border: 1px solid #505050; + .light-mode .peacock { + box-shadow: 5px 5px 10px 3.5px #f0f0f0; + border: none; } - .peacockk:hover { - transform: scale(1.01); - box-shadow: 2.5px 2.5px 0px 0px #505050; + .light-mode .bg-transparent { + border: 1px solid rgb(172, 172, 172); } diff --git a/views/createarticle.ejs b/views/createarticle.ejs index cb8c2ba..fdd75fd 100644 --- a/views/createarticle.ejs +++ b/views/createarticle.ejs @@ -20,6 +20,31 @@ * { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } + + /* Navbar Styles */ + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 1rem; + background-color: black; + color: white; + } + + .navbar a { + padding: 0.5rem 1rem; + font-size: 1rem; + } + + .navbar button { + padding: 0.5rem 1rem; + font-size: 1rem; + border: none; + border-radius: 0.5rem; + background-color: #333; + color: white; + } /* Light Mode Styles */ .light-mode { @@ -47,10 +72,31 @@ border-bottom: 1px solid rgb(130, 130, 130); } - .peacock { + .peacock { box-shadow: 5px 2.5px 0px 2px #1a1a1a; } + /* Responsive Navbar */ + @media (max-width: 768px) { + .navbar { + flex-direction: column; + text-align: center; + } + + .navbar .navmore { + margin-top: 1rem; + display: flex; + /* flex-direction: column; */ + gap: 0.5rem; + } + + #theme-toggle{ + position: fixed; + top: 10px; + right: 10px; + } + } + .light-mode .peacock { box-shadow: 5px 5px 10px 3.5px #f0f0f0; border: none; @@ -59,22 +105,6 @@ .light-mode .bg-transparent { border: 1px solid rgb(172, 172, 172); } - - /* Quill editor */ - .ql-editor { - min-height: 150px; - border: 1px solid #ccc; - padding: 10px; - background-color: #fff; - color: #000; - } - .dark-mode .ql-editor { - min-height: 150px; - border: 1px solid #ccc; - padding: 10px; - background-color: #000000; - color: #ffffff; - } @@ -112,10 +142,10 @@
-
+
- + diff --git a/views/editprofile.ejs b/views/editprofile.ejs index 8c17747..8df7309 100644 --- a/views/editprofile.ejs +++ b/views/editprofile.ejs @@ -17,9 +17,34 @@ cursor: default; } - *{ + * { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } + + /* Navbar Styles */ + .navbar { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 1rem; + background-color: black; + color: white; + } + + .navbar a { + padding: 0.5rem 1rem; + font-size: 1rem; + } + + .navbar button { + padding: 0.5rem 1rem; + font-size: 1rem; + border: none; + border-radius: 0.5rem; + background-color: #333; + color: white; + } /* Light Mode Styles */ .light-mode { @@ -46,14 +71,38 @@ color: #ffffff; border-bottom: 1px solid rgb(130, 130, 130); } - .peacock { + + .peacock { box-shadow: 5px 2.5px 0px 2px #1a1a1a; } - .light-mode .peacock{ + + /* Responsive Navbar */ + @media (max-width: 768px) { + .navbar { + flex-direction: column; + text-align: center; + } + + .navbar .navmore { + margin-top: 1rem; + display: flex; + /* flex-direction: column; */ + gap: 0.5rem; + } + + #theme-toggle{ + position: fixed; + top: 10px; + right: 10px; + } + } + + .light-mode .peacock { box-shadow: 5px 5px 10px 3.5px #f0f0f0; border: none; } - .light-mode .bg-transparent{ + + .light-mode .bg-transparent { border: 1px solid rgb(172, 172, 172); } diff --git a/views/index.ejs b/views/index.ejs index f7c9475..81ba7ee 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -13,105 +13,135 @@ -