beenull/PHP-MySQL-Blog-Website-with-Admin-Panel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Completed

Browse source
This commit is contained in:
Nithin A 2024-03-28 17:44:46 +05:30 committed by GitHub
parent e9bf79f65c
commit 8e0baf709b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 618 additions and 547 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

211
css/style.css
View file

@ -26,7 +26,7 @@
--card-border-radius-5: 5rem; --card-border-radius-5: 5rem;
} }
/* #region GENERAL */ /* START GENERAL */
* { * {
margin: 0; margin: 0;
@ -40,7 +40,7 @@
} }
body { body {
font-family: 'Montserrat', sans-serif; font-family: "Montserrat", sans-serif;
line-height: 1.6; line-height: 1.6;
color: var(--color-gray-200); color: var(--color-gray-200);
overflow-x: hidden; overflow-x: hidden;
@ -99,9 +99,9 @@ img {
object-fit: cover; object-fit: cover;
height: 100%; height: 100%;
} }
/* #endregion */ /* END */
/* #region NAV */ /* START NAV */
nav { nav {
background: var(--color-primary); background: var(--color-primary);
@ -179,9 +179,9 @@ nav button {
background: var(--color-red); background: var(--color-red);
color: var(--color-bg); color: var(--color-bg);
} }
/* #endregion NAV */ /* END NAV */
/* #region CATEGORY BUTTON */ /* START CATEGORY BUTTON */
.category__button { .category__button {
background: var(--color-primary-light); background: var(--color-primary-light);
@ -195,9 +195,9 @@ nav button {
text-align: center; text-align: center;
} }
/* #endregion CATEGORY BUTTON */ /* END CATEGORY BUTTON */
/* #region GENERAL POST */ /* START GENERAL POST */
.post__thumbnail { .post__thumbnail {
border-radius: var(--card-border-radius-5) 0; border-radius: var(--card-border-radius-5) 0;
@ -224,9 +224,9 @@ nav button {
overflow: hidden; overflow: hidden;
} }
/* #endregion GENERAL POST */ /* END GENERAL POST */
/* #region FEATURED */ /* START FEATURED */
.featured { .featured {
margin-top: 8rem; margin-top: 8rem;
@ -242,9 +242,9 @@ nav button {
height: fit-content; height: fit-content;
} }
/* #endregion FEATURED */ /* END FEATURED */
/* #region POSTS */ /* START POSTS */
.posts__container { .posts__container {
display: grid; display: grid;
@ -252,9 +252,9 @@ nav button {
gap: 4rem; gap: 4rem;
margin-bottom: 4rem; margin-bottom: 4rem;
} }
/* #endregion POSTS */ /* END POSTS */
/* #region CATEGORY BUTTONS */ /* START CATEGORY BUTTONS */
.category__buttons { .category__buttons {
padding: 4rem 0; padding: 4rem 0;
border-top: 2px solid var(--color-gray-900); border-top: 2px solid var(--color-gray-900);
@ -267,9 +267,9 @@ nav button {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1rem; gap: 1rem;
} }
/* #endregion CATEGORY BUTTONS */ /* END CATEGORY BUTTONS */
/* #region CATEGORY FOOTER */ /* START CATEGORY FOOTER */
footer { footer {
background: var(--color-gray-900); background: var(--color-gray-900);
padding: 5rem 0 0; padding: 5rem 0 0;
@ -321,6 +321,8 @@ footer ul a {
footer ul a:hover { footer ul a:hover {
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
opacity: 1; opacity: 1;
transition: var(--transition);
} }
.footer__copyright { .footer__copyright {
@ -329,9 +331,9 @@ footer ul a:hover {
border-top: 2px solid var(--color-bg); border-top: 2px solid var(--color-bg);
margin-top: 4rem; margin-top: 4rem;
} }
/* #endregion CATEGORY FOOTER */ /* END CATEGORY FOOTER */
/* #region CATEGORY SEARCH */ /* START CATEGORY SEARCH */
.search__bar { .search__bar {
margin-top: 7rem; margin-top: 7rem;
} }
@ -367,7 +369,7 @@ footer ul a:hover {
color: var(--color-gray-200); color: var(--color-gray-200);
} }
/* #region CATEGORY BUTTON */ /* START CATEGORY BUTTON */
.btn { .btn {
display: inline-block; display: inline-block;
width: fit-content; width: fit-content;
@ -391,11 +393,12 @@ footer ul a:hover {
color: var(--color-bg); color: var(--color-bg);
} }
/* #endregion CATEGORY BUTTON */ /* END CATEGORY BUTTON */
/* #region DASHBOARD */ /* START DASHBOARD */
.dashboard { .dashboard {
margin-top: 6rem; margin-top: 6rem;
padding: 2rem;
} }
.sidebar__toggle { .sidebar__toggle {
@ -405,13 +408,14 @@ footer ul a:hover {
.dashboard__container { .dashboard__container {
display: grid; display: grid;
grid-template-columns: 14rem auto; grid-template-columns: 14rem auto;
gap: 1rem; gap: 2rem;
background: var(--color-gray-900); background: var(--color-gray-900);
padding: 2rem; padding: 2rem;
margin-bottom: 5rem; margin-bottom: 5rem;
border-radius: 2rem;
} }
.dashboard aside a { .dashboard aside a {
color: var(--color-green); color: var(--color-white);
background: var(--color-primary); background: var(--color-primary);
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@ -427,7 +431,26 @@ footer ul a:hover {
.dashboard aside a.active { .dashboard aside a.active {
background-color: var(--color-gray-700); background-color: var(--color-gray-700);
} }
.dashboard aside ul li:not(:last-child):not(:first-child) a {
border-bottom: 1px solid var(--color-gray-700);
}
.dashboard aside ul li:first-child a {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.dashboard main table th:first-child {
border-top-left-radius: 10px;
}
.dashboard main table th:last-child {
border-top-right-radius: 10px;
}
.dashboard aside ul li:last-child a {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.dashboard main { .dashboard main {
margin-left: 1.5rem; margin-left: 1.5rem;
} }
@ -456,30 +479,66 @@ footer ul a:hover {
transition: var(--transition); transition: var(--transition);
} }
/* #endregion DASHBOARD */ /* END DASHBOARD */
/* #region SINGLE POST */ /* START SINGLE POST */
.singlePost { .singlepost {
margin: 6rem 0 2rem; margin: 6rem 0 2rem;
display: flex;
flex-direction: column;
align-items: center;
} }
.singlePost__container { .singlepost__container {
width: var(--form-width); width: 45%;
background: var(--color-gray-900); background: var(--color-gray-900);
padding: 1rem 2rem 3rem; padding: 3rem 4rem;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
border-radius: var(--card-border-radius-4);
} }
.singlePost__container p { .singlepost__container h2 {
margin-top: 0;
font-size: 2.5rem;
font-weight: bold;
color: var(--color-primary);
text-align: center;
}
.singlepost__author {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
}
.post__author-info h5 {
margin: 0.5rem 0;
font-size: 1rem;
font-weight: 600;
color: var(--color-gray-500);
}
.post__author-info small {
font-size: 0.9rem;
color: var(--color-gray-500);
text-align: center;
}
.singlepost__thumbnail img {
max-width: 100%;
height: auto;
border-radius: var(--card-border-radius-4);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin: 2rem 0;
}
.singlepost__container p {
margin-top: 1rem; margin-top: 1rem;
line-height: 1.7; line-height: 1.8;
} font-size: 1.1rem;
.singlePost__thumbnail { color: var(--color-gray-100);
margin: 1.5rem 0 1rem; text-align: justify;
} }
/* END SINGLE POST */
/* #endregion SINGLE POST */ /* END CATEGORY SEARCH */
/* #endregion CATEGORY SEARCH */ /* START CATEGORY POSTS */
/* #region CATEGORY POSTS */
.category__title { .category__title {
height: 11rem; height: 11rem;
margin-top: 4.5rem; margin-top: 4.5rem;
@ -487,18 +546,18 @@ footer ul a:hover {
display: grid; display: grid;
place-items: center; place-items: center;
} }
/* #endregion CATEGORY POSTS */ /* END CATEGORY POSTS */
/* #region EMPTY PAGES */ /* START EMPTY PAGES */
.empty__page { .empty__page {
height: 70vh; height: 70vh;
text-align: center; text-align: center;
display: grid; display: grid;
place-content: center; place-content: center;
} }
/* #endregion EMPTY PAGES */ /* END EMPTY PAGES */
/* #region GENERAL FORM */ /* START GENERAL FORM */
.form__section { .form__section {
display: grid; display: grid;
place-items: center; place-items: center;
@ -556,9 +615,9 @@ form {
margin-left: 1rem; margin-left: 1rem;
} }
/* #region GENERAL DASHBAORD */ /* START GENERAL DASHBAORD */
/* #endregion GENERAL DASHBAORD */ /* END GENERAL DASHBAORD */
input, input,
textarea, textarea,
@ -570,11 +629,11 @@ select {
color: var(--color-white); color: var(--color-white);
} }
/* #endregion GENERAL FORM */ /* END GENERAL FORM */
/* #region MEDIA QUERIES (Medium-Sized Devices) */ /* START MEDIA QUERIES (Medium-Sized Devices) */
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
/* #region GENERAL STYLES */ /* START GENERAL STYLES */
.container { .container {
width: var(--container-width-md); width: var(--container-width-md);
} }
@ -587,9 +646,9 @@ select {
h5 { h5 {
font-size: 0.8rem; font-size: 0.8rem;
} }
/* #endregion GENERAL STYLES */ /* END GENERAL STYLES */
/* #region NAV STYLES */ /* START NAV STYLES */
nav button { nav button {
display: inline-block; display: inline-block;
font-size: 1.5rem; font-size: 1.5rem;
@ -675,6 +734,14 @@ select {
top: 100%; top: 100%;
width: 100%; width: 100%;
} }
.nav__profile ul li a {
padding: 0 2rem;
display: block;
width: 100%;
text-align: left;
align-self: center;
display: flex;
}
.nav__profile .avatar { .nav__profile .avatar {
margin-left: 2rem; margin-left: 2rem;
@ -693,21 +760,21 @@ select {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
/* #region BLOG */ /* START BLOG */
.search__bar-container { .search__bar-container {
width: 60%; width: 60%;
} }
/* #endregion BLOG */ /* END BLOG */
/* #region GENERAL FORM */ /* START GENERAL FORM */
.form__section-container { .form__section-container {
padding: 3rem; padding: 3rem;
} }
/* #endregion GENERAL FORM */ /* END GENERAL FORM */
/* #endregion GENERAL STYLES */ /* END GENERAL STYLES */
/* #region DASHBOARD (Tablets)*/ /* START DASHBOARD (Tablets)*/
.dashboard__container { .dashboard__container {
grid-template-columns: 4.5rem auto; grid-template-columns: 4.5rem auto;
} }
@ -731,15 +798,15 @@ select {
background: transparent; background: transparent;
} }
/* #endregion DASHBOARD */ /* END DASHBOARD */
.sidebar__toggle { .sidebar__toggle {
display: none; display: none;
} }
/* #endregion MEDIA QUERIES *(Medium-Sized Devices) */ /* END MEDIA QUERIES *(Medium-Sized Devices) */
} }
/* #region MEDIA QUERIES (Small-Sized Devices) */ /* START MEDIA QUERIES (Small-Sized Devices) */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
section { section {
@ -767,29 +834,29 @@ select {
text-align: center; text-align: center;
gap: 2rem; gap: 2rem;
} }
/* #region BLOG */ /* START BLOG */
.search__bar-container { .search__bar-container {
width: var(--container-width-md); width: var(--container-width-md);
} }
/* #endregion BLOG */ /* END BLOG */
/* #region SINGLE POST */ /* START SINGLE POST */
.singlePost__container { .singlepost__container {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
} }
/* #endregion SINGLE POST */ /* END SINGLE POST */
/* #region GENERAL FORM*/ /* START GENERAL FORM*/
.form__section-container { .form__section-container {
padding: 0; padding: 0;
} }
.form__section form a { .form__section form a {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
/* #endregion GENERAL FORM*/ /* END GENERAL FORM*/
/* #region DASHBAORD*/ /* START DASHBAORD*/
.dashboard { .dashboard {
margin-top: 5rem; margin-top: 5rem;
} }
@ -806,11 +873,15 @@ select {
.dashboard aside { .dashboard aside {
position: fixed; position: fixed;
box-shadow: 2rem 0 4rem rgba(0, 0, 0, 0.4); box-shadow: 2rem 0 4rem rgba(0, 0, 0, 0.4);
left: -100%; left: 0;
z-index: 2;
height: 100vh; height: 100vh;
transition: var(--transition); transition: var(--transition);
background: var(--color-primary); background: var(--color-primary);
} }
.singlepost__container{
box-shadow: none;
}
.dashboard .sidebar__toggle { .dashboard .sidebar__toggle {
display: inline-block; display: inline-block;
@ -832,9 +903,9 @@ select {
display: inline-block; display: inline-block;
} }
#hide__sidebar-btn { #hide_sidebar-btn {
display: none; display: none;
} }
/* #endregion DASHBAORD*/ /* END DASHBAORD*/
} }
/* #endregion MEDIA QUERIES (Small-Sized Devices) */ /* END MEDIA QUERIES (Small-Sized Devices) */