Completed
This commit is contained in:
Nithin A
GitHub
parent
e9bf79f65c
commit
8e0baf709b
1 changed files with 618 additions and 547 deletions
211
css/style.css
211
css/style.css
|
|
@ -26,7 +26,7 @@
|
|||
--card-border-radius-5: 5rem;
|
||||
}
|
||||
|
||||
/* #region GENERAL */
|
||||
/* START GENERAL */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--color-gray-200);
|
||||
overflow-x: hidden;
|
||||
|
|
@ -99,9 +99,9 @@ img {
|
|||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
/* #endregion */
|
||||
/* END */
|
||||
|
||||
/* #region NAV */
|
||||
/* START NAV */
|
||||
|
||||
nav {
|
||||
background: var(--color-primary);
|
||||
|
|
@ -179,9 +179,9 @@ nav button {
|
|||
background: var(--color-red);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
/* #endregion NAV */
|
||||
/* END NAV */
|
||||
|
||||
/* #region CATEGORY BUTTON */
|
||||
/* START CATEGORY BUTTON */
|
||||
|
||||
.category__button {
|
||||
background: var(--color-primary-light);
|
||||
|
|
@ -195,9 +195,9 @@ nav button {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* #endregion CATEGORY BUTTON */
|
||||
/* END CATEGORY BUTTON */
|
||||
|
||||
/* #region GENERAL POST */
|
||||
/* START GENERAL POST */
|
||||
|
||||
.post__thumbnail {
|
||||
border-radius: var(--card-border-radius-5) 0;
|
||||
|
|
@ -224,9 +224,9 @@ nav button {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* #endregion GENERAL POST */
|
||||
/* END GENERAL POST */
|
||||
|
||||
/* #region FEATURED */
|
||||
/* START FEATURED */
|
||||
|
||||
.featured {
|
||||
margin-top: 8rem;
|
||||
|
|
@ -242,9 +242,9 @@ nav button {
|
|||
height: fit-content;
|
||||
}
|
||||
|
||||
/* #endregion FEATURED */
|
||||
/* END FEATURED */
|
||||
|
||||
/* #region POSTS */
|
||||
/* START POSTS */
|
||||
|
||||
.posts__container {
|
||||
display: grid;
|
||||
|
|
@ -252,9 +252,9 @@ nav button {
|
|||
gap: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
/* #endregion POSTS */
|
||||
/* END POSTS */
|
||||
|
||||
/* #region CATEGORY BUTTONS */
|
||||
/* START CATEGORY BUTTONS */
|
||||
.category__buttons {
|
||||
padding: 4rem 0;
|
||||
border-top: 2px solid var(--color-gray-900);
|
||||
|
|
@ -267,9 +267,9 @@ nav button {
|
|||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
/* #endregion CATEGORY BUTTONS */
|
||||
/* END CATEGORY BUTTONS */
|
||||
|
||||
/* #region CATEGORY FOOTER */
|
||||
/* START CATEGORY FOOTER */
|
||||
footer {
|
||||
background: var(--color-gray-900);
|
||||
padding: 5rem 0 0;
|
||||
|
|
@ -321,6 +321,8 @@ footer ul a {
|
|||
footer ul a:hover {
|
||||
letter-spacing: 0.1rem;
|
||||
opacity: 1;
|
||||
transition: var(--transition);
|
||||
|
||||
}
|
||||
|
||||
.footer__copyright {
|
||||
|
|
@ -329,9 +331,9 @@ footer ul a:hover {
|
|||
border-top: 2px solid var(--color-bg);
|
||||
margin-top: 4rem;
|
||||
}
|
||||
/* #endregion CATEGORY FOOTER */
|
||||
/* END CATEGORY FOOTER */
|
||||
|
||||
/* #region CATEGORY SEARCH */
|
||||
/* START CATEGORY SEARCH */
|
||||
.search__bar {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
|
@ -367,7 +369,7 @@ footer ul a:hover {
|
|||
color: var(--color-gray-200);
|
||||
}
|
||||
|
||||
/* #region CATEGORY BUTTON */
|
||||
/* START CATEGORY BUTTON */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
|
|
@ -391,11 +393,12 @@ footer ul a:hover {
|
|||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
/* #endregion CATEGORY BUTTON */
|
||||
/* END CATEGORY BUTTON */
|
||||
|
||||
/* #region DASHBOARD */
|
||||
/* START DASHBOARD */
|
||||
.dashboard {
|
||||
margin-top: 6rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.sidebar__toggle {
|
||||
|
|
@ -405,13 +408,14 @@ footer ul a:hover {
|
|||
.dashboard__container {
|
||||
display: grid;
|
||||
grid-template-columns: 14rem auto;
|
||||
gap: 1rem;
|
||||
gap: 2rem;
|
||||
background: var(--color-gray-900);
|
||||
padding: 2rem;
|
||||
margin-bottom: 5rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.dashboard aside a {
|
||||
color: var(--color-green);
|
||||
color: var(--color-white);
|
||||
background: var(--color-primary);
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
|
@ -427,7 +431,26 @@ footer ul a:hover {
|
|||
.dashboard aside a.active {
|
||||
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 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
|
@ -456,30 +479,66 @@ footer ul a:hover {
|
|||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* #endregion DASHBOARD */
|
||||
/* END DASHBOARD */
|
||||
|
||||
/* #region SINGLE POST */
|
||||
.singlePost {
|
||||
/* START SINGLE POST */
|
||||
.singlepost {
|
||||
margin: 6rem 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.singlePost__container {
|
||||
width: var(--form-width);
|
||||
.singlepost__container {
|
||||
width: 45%;
|
||||
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;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.singlePost__thumbnail {
|
||||
margin: 1.5rem 0 1rem;
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-gray-100);
|
||||
text-align: justify;
|
||||
}
|
||||
/* END SINGLE POST */
|
||||
|
||||
/* #endregion SINGLE POST */
|
||||
/* END CATEGORY SEARCH */
|
||||
|
||||
/* #endregion CATEGORY SEARCH */
|
||||
|
||||
/* #region CATEGORY POSTS */
|
||||
/* START CATEGORY POSTS */
|
||||
.category__title {
|
||||
height: 11rem;
|
||||
margin-top: 4.5rem;
|
||||
|
|
@ -487,18 +546,18 @@ footer ul a:hover {
|
|||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
/* #endregion CATEGORY POSTS */
|
||||
/* END CATEGORY POSTS */
|
||||
|
||||
/* #region EMPTY PAGES */
|
||||
/* START EMPTY PAGES */
|
||||
.empty__page {
|
||||
height: 70vh;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
/* #endregion EMPTY PAGES */
|
||||
/* END EMPTY PAGES */
|
||||
|
||||
/* #region GENERAL FORM */
|
||||
/* START GENERAL FORM */
|
||||
.form__section {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
|
@ -556,9 +615,9 @@ form {
|
|||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
/* #region GENERAL DASHBAORD */
|
||||
/* START GENERAL DASHBAORD */
|
||||
|
||||
/* #endregion GENERAL DASHBAORD */
|
||||
/* END GENERAL DASHBAORD */
|
||||
|
||||
input,
|
||||
textarea,
|
||||
|
|
@ -570,11 +629,11 @@ select {
|
|||
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) {
|
||||
/* #region GENERAL STYLES */
|
||||
/* START GENERAL STYLES */
|
||||
.container {
|
||||
width: var(--container-width-md);
|
||||
}
|
||||
|
|
@ -587,9 +646,9 @@ select {
|
|||
h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
/* #endregion GENERAL STYLES */
|
||||
/* END GENERAL STYLES */
|
||||
|
||||
/* #region NAV STYLES */
|
||||
/* START NAV STYLES */
|
||||
nav button {
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -675,6 +734,14 @@ select {
|
|||
top: 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 {
|
||||
margin-left: 2rem;
|
||||
|
|
@ -693,21 +760,21 @@ select {
|
|||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
/* #region BLOG */
|
||||
/* START BLOG */
|
||||
.search__bar-container {
|
||||
width: 60%;
|
||||
}
|
||||
/* #endregion BLOG */
|
||||
/* END BLOG */
|
||||
|
||||
/* #region GENERAL FORM */
|
||||
/* START GENERAL FORM */
|
||||
.form__section-container {
|
||||
padding: 3rem;
|
||||
}
|
||||
/* #endregion GENERAL FORM */
|
||||
/* END GENERAL FORM */
|
||||
|
||||
/* #endregion GENERAL STYLES */
|
||||
/* END GENERAL STYLES */
|
||||
|
||||
/* #region DASHBOARD (Tablets)*/
|
||||
/* START DASHBOARD (Tablets)*/
|
||||
.dashboard__container {
|
||||
grid-template-columns: 4.5rem auto;
|
||||
}
|
||||
|
|
@ -731,15 +798,15 @@ select {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
/* #endregion DASHBOARD */
|
||||
/* END DASHBOARD */
|
||||
|
||||
.sidebar__toggle {
|
||||
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) {
|
||||
section {
|
||||
|
|
@ -767,29 +834,29 @@ select {
|
|||
text-align: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
/* #region BLOG */
|
||||
/* START BLOG */
|
||||
.search__bar-container {
|
||||
width: var(--container-width-md);
|
||||
}
|
||||
/* #endregion BLOG */
|
||||
/* END BLOG */
|
||||
|
||||
/* #region SINGLE POST */
|
||||
.singlePost__container {
|
||||
/* START SINGLE POST */
|
||||
.singlepost__container {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
/* #endregion SINGLE POST */
|
||||
/* END SINGLE POST */
|
||||
|
||||
/* #region GENERAL FORM*/
|
||||
/* START GENERAL FORM*/
|
||||
.form__section-container {
|
||||
padding: 0;
|
||||
}
|
||||
.form__section form a {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
/* #endregion GENERAL FORM*/
|
||||
/* END GENERAL FORM*/
|
||||
|
||||
/* #region DASHBAORD*/
|
||||
/* START DASHBAORD*/
|
||||
.dashboard {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
|
@ -806,11 +873,15 @@ select {
|
|||
.dashboard aside {
|
||||
position: fixed;
|
||||
box-shadow: 2rem 0 4rem rgba(0, 0, 0, 0.4);
|
||||
left: -100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
height: 100vh;
|
||||
transition: var(--transition);
|
||||
background: var(--color-primary);
|
||||
}
|
||||
.singlepost__container{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dashboard .sidebar__toggle {
|
||||
display: inline-block;
|
||||
|
|
@ -832,9 +903,9 @@ select {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
#hide__sidebar-btn {
|
||||
#hide_sidebar-btn {
|
||||
display: none;
|
||||
}
|
||||
/* #endregion DASHBAORD*/
|
||||
/* END DASHBAORD*/
|
||||
}
|
||||
/* #endregion MEDIA QUERIES (Small-Sized Devices) */
|
||||
/* END MEDIA QUERIES (Small-Sized Devices) */
|
||||
|
|
|
|||
Loading…
Reference in a new issue