-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cf1e83b
commit c4fed77
Showing
1 changed file
with
3 additions
and
216 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,216 +1,3 @@ | ||
| body { | ||
| font-family: Georgia; | ||
| } | ||
|
|
||
| h1 { | ||
| color: maroon; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* ------- Main Post ------- */ | ||
|
|
||
| .mainPost-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-wrap: wrap; | ||
| flex-direction: row; /* changed from column to row for better layout */ | ||
| padding: 10px; | ||
| margin: 10px; | ||
| gap: 10px; /* added gap for spacing between items */ | ||
| } | ||
|
|
||
| .mainPost-item { | ||
| flex: 1 1 calc(33.333% - 20px); | ||
|
|
||
| /* responsive width with space between items */ | ||
|
|
||
| border: 0.5px solid; | ||
| border-radius: 4px; | ||
| padding: 10px; | ||
| margin-top: 10px; | ||
| background-color: antiquewhite; | ||
| box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; | ||
| } | ||
|
|
||
| .user-content { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| } | ||
|
|
||
| .user-content h2 { | ||
| font-size: larger; | ||
| font-weight: bold; | ||
| font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .user-content h4 { | ||
| margin-bottom: 10px; | ||
| padding: 5px; | ||
| font-size: large; | ||
| font-family: sans-serif; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| /* ------- Show Post ------- */ | ||
|
|
||
| .ShowPost { | ||
| flex: 1 1 calc(33.333% - 20px); /* responsive width with space between items */ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| flex-wrap: wrap; | ||
| flex-direction: column; | ||
| padding: 10px; | ||
| margin: 10px; | ||
| border: 0.5px solid; | ||
| border-radius: 4px; | ||
| font-size: large; | ||
| font-weight: bold; | ||
| background-color: antiquewhite; | ||
| box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; | ||
| } | ||
|
|
||
| /* ------- Edit Post ------- */ | ||
|
|
||
| .EditPost { | ||
| flex: 1 1 calc(33.333% - 20px); /* responsive width with space between items */ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| flex-wrap: wrap; | ||
| flex-direction: column; | ||
| padding: 10px; | ||
| margin: 10px; | ||
| border: 0.5px solid; | ||
| border-radius: 4px; | ||
| font-size: large; | ||
| font-weight: bold; | ||
| background-color: antiquewhite; | ||
| box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; | ||
| } | ||
|
|
||
| .edit-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .edit-form textarea { | ||
| font-size: larger; | ||
| } | ||
|
|
||
| .edit-form button { | ||
| margin: 10px; | ||
| padding: 10px; | ||
| color: none; | ||
| background-color: none; | ||
| font-size: larger; | ||
| } | ||
|
|
||
| /* ------- New Post ------- */ | ||
|
|
||
|
|
||
| .newPost { | ||
| flex: 1 1 calc(33.333% - 20px); /* responsive width with space between items */ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| flex-wrap: wrap; | ||
| flex-direction: column; | ||
| padding: 10px; | ||
| margin: 10px; | ||
| border: 0.5px solid; | ||
| border-radius: 4px; | ||
| font-size: large; | ||
| font-weight: bold; | ||
| background-color: antiquewhite; | ||
| box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; | ||
| } | ||
|
|
||
| .new-element { | ||
| margin-top: 10px; | ||
| padding: 10px; | ||
| font-size: larger; | ||
| } | ||
|
|
||
| /* --- Buttons : Detailed Post, Delete Post, Edit Post ----*/ | ||
|
|
||
| .btn-container { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .btns { | ||
| color: brown; | ||
| text-decoration: none; | ||
| background-color: none; | ||
| color: none; | ||
| margin: 10px; | ||
| padding: 0; | ||
| border: 0; | ||
| } | ||
|
|
||
| /* ------- Create New Button ------- */ | ||
|
|
||
| .newBtn-Container { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: 10px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .newBtn:hover { | ||
| transition-duration: 0.7s; | ||
| transform: scale(1.5); | ||
| } | ||
|
|
||
| /* ------- Responsive Design ------- */ | ||
|
|
||
|
|
||
| /* For tablets and smaller devices */ | ||
| @media (max-width: 768px) { | ||
| .mainPost-container { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .mainPost-item, .ShowPost, .EditPost, .newPost { | ||
| width: 100%; | ||
| margin-top: 0; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .btn-container { | ||
| flex-direction: column; | ||
| align-items: stretch; | ||
| } | ||
| } | ||
|
|
||
| /* For mobile devices */ | ||
| @media (max-width: 480px) { | ||
| .user-content h2 { | ||
| font-size: medium; | ||
| } | ||
|
|
||
| .user-content h4 { | ||
| font-size: medium; | ||
| } | ||
|
|
||
| .new-element { | ||
| font-size: medium; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .edit-form textarea { | ||
| font-size: medium; | ||
| } | ||
|
|
||
| .edit-form button { | ||
| font-size: medium; | ||
| } | ||
|
|
||
| .ShowPost, .EditPost, .newPost { | ||
| padding: 5px; | ||
| margin: 5px; | ||
| } | ||
| } | ||
| body { | ||
| font-family: 'Poppins', sans-serif; | ||
| } |