-
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
Showing
8 changed files
with
537 additions
and
338 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,166 +1,215 @@ | ||
| *{ | ||
| margin: 0px; | ||
| padding: 0px; | ||
| font-family: poppins; | ||
| box-sizing: border-box; | ||
| } | ||
| a{ | ||
| text-decoration: none; | ||
| } | ||
| ul{ | ||
| list-style: none; | ||
| :root { | ||
| --main-bg-color: #AEB4A9; | ||
| --left-bg-color: #2B3A67; | ||
| --right-bg-color: #66999B; | ||
| --nav-bg-color: #CAD2C5; | ||
| --bot-bg-color: #202030; | ||
| --border-color: #3A3042; | ||
| --text-color: #B47978; | ||
| } | ||
|
|
||
| body{ | ||
| margin: 0px; | ||
| padding: 0px; | ||
| font-family: poppins; | ||
| background-color: lavenderblush; | ||
| padding-left: 5%; | ||
| padding-right: 5%; | ||
| background-image: radial-gradient( | ||
| rgba(0,0,0,0.1) 9%, | ||
| transparent 9% | ||
| ); | ||
| /* background-image: url("/assets/images/space.jpg"); */ | ||
| background-size: 10vmin 10vmin; | ||
| animation: reverse-background-pan 30s infinite linear; | ||
| display: flex; | ||
| flex-direction: column; | ||
| /* Reset some default styles */ | ||
| body, h1, h2, h3, p, ul, li { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| } | ||
| @keyframes background-pan{ | ||
| 0% { | ||
| background-position: 0% 200%; | ||
| } | ||
| a:hover{ | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| 100% { | ||
| background-position: 0% 0%; | ||
| } | ||
| } | ||
| @keyframes reverse-background-pan{ | ||
| 0% { | ||
| background-position: 0% 0%; | ||
| } | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| } | ||
|
|
||
| header { | ||
| background-color: var(--main-bg-color); | ||
| color: #fff; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| header h1 { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .recent-posts ul { | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| 100% { | ||
| background-position: 0% 200%; | ||
| } | ||
| } | ||
| #blog{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| padding: 40px; | ||
| border-bottom: 1px solid rgba(0,0,0,0.05) | ||
| } | ||
| .blog-heading{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| } | ||
| .blog-heading span{ | ||
| color: #f33c3c; | ||
| } | ||
| .blog-heading h3{ | ||
| font-size: 2.4rem; | ||
| color: #2b2b2b; | ||
| font-weight: 600; | ||
| } | ||
| .blog-container{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin: 20px 0px; | ||
| flex-wrap: wrap; | ||
| } | ||
| .blog-box{ | ||
| width: 350px; | ||
| background-color: #ffffff; | ||
| border: 1px solid #9b9b9b; | ||
| margin: 20px; | ||
| } | ||
| .blog-img{ | ||
| width: 100%; | ||
| .recent-posts ul li { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| nav { | ||
| padding: 10px; | ||
| } | ||
|
|
||
| nav ul { | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| nav ul li { | ||
| display: inline; | ||
| margin-right: 20px; | ||
| } | ||
|
|
||
| nav ul li a { | ||
| color: #fff; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| main { | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .featured { | ||
| margin-bottom: 30px; | ||
| border-bottom: rgba(128, 128, 128,0.75) 5px dashed; | ||
| } | ||
|
|
||
| .featured h2 { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .featured article { | ||
| border: 1px solid #ccc; | ||
| padding: 10px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .featured article h3 { | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .featured article p { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .featured article a { | ||
| text-decoration: none; | ||
| color: #333; | ||
| background-color: #ccc; | ||
| padding: 5px 10px; | ||
| } | ||
|
|
||
| .recent-posts h2 { | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .recent-posts ul { | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| .post{ | ||
| margin-bottom: 10px; | ||
| border-bottom: rgba(128, 128, 128,0.25) 2px dashed; | ||
| padding-bottom: 10px; | ||
| } | ||
|
|
||
| .post a { | ||
| text-decoration: none; | ||
| color: #333; | ||
| } | ||
|
|
||
| footer { | ||
| background-color: var(--main-bg-color); | ||
| color: #fff; | ||
| padding: 10px 20px; | ||
| text-align: left; | ||
| } | ||
| footer img{ | ||
| width: 50px; | ||
| height: auto; | ||
| transition: box-shadow 0.5s ease; | ||
| } | ||
| footer img:hover{ | ||
| /* Offset-x | Offset-y | Blur-radius | Spread-radius | Color */ | ||
| box-shadow: 5px 5px 10px 0px rgba(255, 0, 0, 0.25); /* Red shadow with 50% opacity */ | ||
|
|
||
| } | ||
| .blog-img img{ | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| object-position: center; | ||
| } | ||
| .blog-text{ | ||
| padding: 30px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .blog-text span{ | ||
| color:#f33c3c; | ||
| font-size: 0.9rem; | ||
| } | ||
| .blog-text .blog-title{ | ||
| font-size: 1.3rem; | ||
| font-weight: 500; | ||
| color: #272727; | ||
| } | ||
|
|
||
| .post-title { | ||
| font-size: 24px; /* Adjust the font size as desired */ | ||
| margin-bottom: 2px; | ||
| } | ||
|
|
||
| .publication-date { | ||
| font-style: italic; /* Optionally, style the publication date */ | ||
| } | ||
|
|
||
| .blog-text .blog-title:hover{ | ||
| color:#f33c3c; | ||
| transition: all ease 0.5s; | ||
| } | ||
| .blog-text p{ | ||
| color:#9b9b9b; | ||
| font-size: 0.9rem; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 3; | ||
| -webkit-box-orient: vertical; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| margin: 20px 0px; | ||
| } | ||
| .blog-text p:hover{ | ||
| color:#272727; | ||
| transition: ease-in-out 0.5s; | ||
| } | ||
| .blog-text a{ | ||
| color: #0f0f0f; | ||
| } | ||
| .blog-text a:hover{ | ||
| color: #f33c3c; | ||
| transition: ease-in 0.5s; | ||
| } | ||
| #kwargs{ | ||
|
|
||
| align-self: center; | ||
| font-size: 5rem; | ||
| } | ||
| #kwargs >a{ | ||
| color: grey; | ||
| } | ||
| #kwargs > a:hover{ | ||
| color: limegreen; | ||
| } | ||
| .tags { | ||
| list-style: none; | ||
| margin: 10px; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .tags li { | ||
| display: inline; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| @media(max-width:1250px){ | ||
| .blog-box{ | ||
| width: 300px; | ||
| } | ||
| } | ||
| /* @media(max-width:1100px){ | ||
| .blog-box{ | ||
| width:50%; | ||
| } | ||
|
|
||
|
|
||
| .tags li { | ||
| text-decoration: none; | ||
| background-color: #f0f0f0; | ||
| color: #333; | ||
| padding: 5px 10px; | ||
| border-radius: 8px; | ||
| user-select: none; | ||
| border: var(--left-bg-color) 1px solid; | ||
| border-radius: 8px; | ||
| transition: box-shadow 0.5s ease; | ||
| } | ||
|
|
||
| .tags li:hover { | ||
| box-shadow: 5px 5px 10px 0px rgba(43,58,103, 0.75); | ||
| } | ||
| @media(max-width:550px){ | ||
| .blog-box{ | ||
| margin: 20px 10px; | ||
| width: 100%; | ||
| } | ||
| #blog{ | ||
| padding: 20px; | ||
| } | ||
| } */ | ||
|
|
||
|
|
||
| .tags-menu { | ||
| list-style-type: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .tags-menu li { | ||
| display: inline; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| .tags-menu li a { | ||
| text-decoration: none; | ||
| color: #333; | ||
| padding: 5px 10px; | ||
| border-radius: 5px; | ||
| background-color: #f0f0f0; | ||
| } | ||
|
|
||
| .tags-menu li a:hover { | ||
| color: white; | ||
| background-color: var(--left-bg-color); | ||
| } | ||
|
|
||
|
|
||
| #subtitle{ | ||
| margin-left: 20px; | ||
| opacity: 50%; | ||
| color: white; | ||
| font-style: italic; | ||
| } | ||
|
|
||
| .tag { | ||
| font-family: "Open Sans"; | ||
| } | ||
|
|
||
| .recent-posts h2 { | ||
| font-style: bolder; | ||
| color: var(--text-color); | ||
| font-size: 2.5rem; | ||
| margin-bottom: 10px; | ||
| } |
Oops, something went wrong.