-
-
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.
Signed-off-by: Muhammad Umer Farooq <[email protected]>
- Loading branch information
Showing
1 changed file
with
122 additions
and
120 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,139 +1,141 @@ | ||
| @import url(https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css); | ||
|
|
||
|
|
||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
|
|
||
| @layer utilities { | ||
| .container { | ||
| @apply w-full mx-auto px-6 max-w-5xl; | ||
| } | ||
|
|
||
| @media only screen and (max-width: 986px) { | ||
| .container { | ||
| @apply px-6 max-w-xl; | ||
| } | ||
| } | ||
|
|
||
| section .title { | ||
| @apply text-lg md:text-4xl lg:text-5xl font-bold mb-0; | ||
| } | ||
|
|
||
| section .subtitle, | ||
| h1 { | ||
| @apply text-3xl md:text-4xl; | ||
| } | ||
|
|
||
| section p { | ||
| @apply mt-5; | ||
| } | ||
|
|
||
| h4 { | ||
| @apply font-semibold; | ||
| } | ||
|
|
||
| .active { | ||
| @apply text-blue-500; | ||
| } | ||
| hr.short { | ||
| /* But center */ | ||
| @apply w-32 border-t-2 border-gray-300 my-4 mx-auto; | ||
| } | ||
| .project-headings { | ||
| @apply font-semibold text-xl mb-2; | ||
| line-height: 1.6; | ||
| } | ||
|
|
||
| a.arrow { | ||
| @apply font-semibold hover:underline transform transition hover:scale-105 duration-300 ease-in-out | ||
| } | ||
|
|
||
| a.arrow:before { | ||
| content: ' ' | ||
| } | ||
|
|
||
| a.arrow:hover:before, | ||
| a.hover:hover:after { | ||
| width: calc(100% + 4px); | ||
| } | ||
|
|
||
| /* For Light theme */ | ||
| .light a.arrow:after { | ||
| content: url("../assets/icons/arrow-above.svg") !important; | ||
| } | ||
|
|
||
| .light a.arrow:hover:after, | ||
| .light a.arrow:focus:after { | ||
| content: url("../assets/icons/arrow-right.svg") !important; | ||
| } | ||
|
|
||
| /* For dark theme */ | ||
| .dark a.arrow:after { | ||
| content: url("../assets/icons/white/arrow-above.svg")!important; | ||
| } | ||
|
|
||
| .dark a.arrow:hover:after, | ||
| .dark a.arrow:focus:after { | ||
| content: url("../assets/icons/white/arrow-right.svg")!important; | ||
| } | ||
| .container { | ||
| @apply w-full mx-auto px-6 max-w-5xl; | ||
| } | ||
|
|
||
|
|
||
| .light .github { | ||
| background-image: url("../assets/icons/github.svg"); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .dark .github { | ||
| background-image: url("../assets/icons/white/github.svg"); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .light .linkedin { | ||
| background-image: url("../assets/icons/linkedin.svg"); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .dark .linkedin { | ||
| background-image: url("../assets/icons/white/linkedin.svg"); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .backtotop { | ||
| @apply cursor-pointer text-sm p-2 fixed; | ||
| bottom: 80px; | ||
| right: 20px; | ||
| z-index: 99; | ||
| outline: none; | ||
| } | ||
|
|
||
| .light-text-color { | ||
| @apply text-gray-800; | ||
| } | ||
|
|
||
| .dark .prose h1, .dark .prose h2, .dark .prose h3, .dark .prose h4, .dark .prose h5, .dark .prose h6 { | ||
| @apply text-gray-300; | ||
| } | ||
|
|
||
| summary { | ||
| cursor: pointer; | ||
| } | ||
| @media only screen and (max-width: 986px) { | ||
| .container { | ||
| @apply px-6 max-w-xl; | ||
| } | ||
| } | ||
|
|
||
| section .title { | ||
| @apply text-lg md:text-4xl lg:text-5xl font-bold mb-0; | ||
| } | ||
|
|
||
| section .subtitle, | ||
| h1 { | ||
| @apply text-3xl md:text-4xl; | ||
| } | ||
|
|
||
| section p { | ||
| @apply mt-5; | ||
| } | ||
|
|
||
| h4 { | ||
| @apply font-semibold; | ||
| } | ||
|
|
||
| .active { | ||
| @apply text-blue-500; | ||
| } | ||
| hr.short { | ||
| /* But center */ | ||
| @apply w-32 border-t-2 border-gray-300 my-4 mx-auto; | ||
| } | ||
| .project-headings { | ||
| @apply font-semibold text-xl mb-2; | ||
| line-height: 1.6; | ||
| } | ||
|
|
||
| a.arrow { | ||
| @apply font-semibold hover:underline transform transition hover:scale-105 duration-300 ease-in-out; | ||
| } | ||
|
|
||
| a.arrow:before { | ||
| content: ' '; | ||
| } | ||
|
|
||
| a.arrow:hover:before, | ||
| a.hover:hover:after { | ||
| width: calc(100% + 4px); | ||
| } | ||
|
|
||
| /* For Light theme */ | ||
| .light a.arrow:after { | ||
| content: url('../assets/icons/arrow-above.svg') !important; | ||
| } | ||
|
|
||
| .light a.arrow:hover:after, | ||
| .light a.arrow:focus:after { | ||
| content: url('../assets/icons/arrow-right.svg') !important; | ||
| } | ||
|
|
||
| /* For dark theme */ | ||
| .dark a.arrow:after { | ||
| content: url('../assets/icons/white/arrow-above.svg') !important; | ||
| } | ||
|
|
||
| .dark a.arrow:hover:after, | ||
| .dark a.arrow:focus:after { | ||
| content: url('../assets/icons/white/arrow-right.svg') !important; | ||
| } | ||
|
|
||
| .light .github { | ||
| background-image: url('../assets/icons/github.svg'); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .dark .github { | ||
| background-image: url('../assets/icons/white/github.svg'); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .light .linkedin { | ||
| background-image: url('../assets/icons/linkedin.svg'); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .dark .linkedin { | ||
| background-image: url('../assets/icons/white/linkedin.svg'); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .backtotop { | ||
| @apply cursor-pointer text-sm p-2 fixed; | ||
| bottom: 80px; | ||
| right: 20px; | ||
| z-index: 99; | ||
| outline: none; | ||
| } | ||
|
|
||
| .light-text-color { | ||
| @apply text-gray-800; | ||
| } | ||
|
|
||
| .dark .prose h1, | ||
| .dark .prose h2, | ||
| .dark .prose h3, | ||
| .dark .prose h4, | ||
| .dark .prose h5, | ||
| .dark .prose h6 { | ||
| @apply text-gray-300; | ||
| } | ||
|
|
||
| summary { | ||
| cursor: pointer; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 900px) { | ||
| .backtotop { | ||
| bottom: 20px; | ||
| } | ||
| .backtotop { | ||
| bottom: 20px; | ||
| } | ||
| } | ||
|
|
||
| img[data-fancybox="default"], | ||
| img[data-fancybox="certificate"] { | ||
| cursor: zoom-in; | ||
| img[data-fancybox='default'], | ||
| img[data-fancybox='certificate'] { | ||
| cursor: zoom-in; | ||
| } | ||
|
|
||
| /* Hide Google reCaptcha badge */ | ||
| /* https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */ | ||
| .grecaptcha-badge { | ||
| visibility: hidden; | ||
| visibility: hidden; | ||
| } |