217 lines
3.5 KiB
CSS
217 lines
3.5 KiB
CSS
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
|
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* my personal css */
|
|
body {
|
|
@apply bg-slate-100 !important;
|
|
}
|
|
|
|
main {
|
|
font-family: "Poppins", sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#bg {
|
|
background: url("/wallpapers/dark-mountains.jpg") no-repeat center center
|
|
fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
section {
|
|
@apply backdrop-blur-md;
|
|
}
|
|
|
|
.font-satisfy {
|
|
font-family: "Satisfy", cursive;
|
|
}
|
|
.font-poppins {
|
|
font-family: "Poppins", sans-serif;
|
|
}
|
|
|
|
.text-teal {
|
|
color: teal;
|
|
}
|
|
|
|
#main-title {
|
|
font-family: "Satisfy", cursive;
|
|
@apply text-teal-600;
|
|
}
|
|
#side-note {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
p {
|
|
font-size: 2em;
|
|
}
|
|
|
|
#marquee-text {
|
|
font-style: italic;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
/* Mobile :320px. */
|
|
@media (max-width: 767px) {
|
|
main {
|
|
padding: 0em;
|
|
}
|
|
#main-title {
|
|
font-size: 2em;
|
|
color: teal;
|
|
}
|
|
#side-note {
|
|
font-size: 1em;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
#marquee-text {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.ant-tabs-nav {
|
|
@apply m-0 !important;
|
|
}
|
|
.ant-tabs-tab {
|
|
@apply text-gray-300 pb-3 pt-1 !important;
|
|
}
|
|
.ant-tabs-tab-btn {
|
|
@apply text-gray-300 !important;
|
|
}
|
|
.ant-tabs-tab-active {
|
|
@apply text-gray-300 !important;
|
|
}
|
|
.ant-tabs-ink-bar {
|
|
@apply text-white bg-white !important;
|
|
}
|
|
|
|
.ant-radio-button-wrapper {
|
|
@apply bg-transparent text-gray-200 !important;
|
|
}
|
|
.ant-radio-button-checked {
|
|
@apply bg-white text-black !important;
|
|
}
|
|
.ant-radio-button-wrapper-checked {
|
|
@apply bg-white text-black rounded !important;
|
|
}
|
|
|
|
.slick-dots > li {
|
|
@apply bg-teal-600 !important;
|
|
}
|
|
li.slick-active button {
|
|
@apply bg-orange-500 !important;
|
|
}
|
|
|
|
/* scrollbar customization */
|
|
::-webkit-scrollbar {
|
|
height: 8px;
|
|
width: 8px;
|
|
@apply rounded;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-gray-200 rounded;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
}
|
|
|
|
/* Handle on hover */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #555;
|
|
}
|
|
|
|
.landing-page-bg {
|
|
background-image: url("/wallpapers/glassmorphic.jpg");
|
|
/* background-size: 150% 150%;
|
|
background-repeat: no-repeat; */
|
|
}
|
|
|
|
.flippingWords {
|
|
animation: spin_words 6s infinite;
|
|
}
|
|
|
|
@keyframes spin_words {
|
|
10% {
|
|
transform: translateY(-95%);
|
|
}
|
|
25% {
|
|
transform: translateY(-85%);
|
|
}
|
|
35% {
|
|
transform: translateY(-195%);
|
|
}
|
|
50% {
|
|
transform: translateY(-185%);
|
|
}
|
|
60% {
|
|
transform: translateY(-295%);
|
|
}
|
|
75% {
|
|
transform: translateY(-285%);
|
|
}
|
|
85% {
|
|
transform: translateY(-395%);
|
|
}
|
|
100% {
|
|
transform: translateY(-385%);
|
|
}
|
|
}
|
|
|
|
/* CSS transition for react */
|
|
/* slide enter */
|
|
.slide-enter {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(5px);
|
|
z-index: 1;
|
|
}
|
|
.slide-enter.slide-enter-active {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
transition: opacity 200ms linear 100ms, transform 200ms ease-in-out 100ms;
|
|
}
|
|
|
|
/* slide exit */
|
|
.slide-exit {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
.slide-exit.slide-exit-active {
|
|
opacity: 0;
|
|
transform: scale(0.97) translateY(5px);
|
|
transition: opacity 100ms linear, transform 100ms ease-out;
|
|
}
|
|
.slide-exit-done {
|
|
opacity: 0;
|
|
}
|
|
|
|
.ant-select-selector {
|
|
@apply bg-slate-50 rounded placeholder-slate-300 !important;
|
|
}
|