archive/gradient_container
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design fixes

Browse source
This commit is contained in:
shyamtala003 2022-12-25 12:50:54 +05:30
parent 34020086bd
commit 2422613f0e
2 changed files with 93 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
css/dark.css
View file

@ -135,8 +135,7 @@ span#notify_toast {
z-index: 1;
}
.container::before
{
.container::before {
content: '';
position: absolute;
bottom: 0;
@ -148,8 +147,7 @@ span#notify_toast {
z-index: -1;
}
nav
{
nav {
display: flex;
width: 100%;
justify-content: space-between;
@ -164,8 +162,7 @@ nav h1.logo_text {
color: #ffffffd6;
}
nav #theme_toggler
{
nav #theme_toggler {
position: relative;
background: rgba(255, 255, 255, 0.2);
padding: 20px;
@ -176,13 +173,11 @@ nav #theme_toggler
border: 2px solid #fcfcfb9d;
}
nav #theme_toggler:hover
{
nav #theme_toggler:hover {
scale: 1.1;
}
nav #theme_toggler ion-icon
{
nav #theme_toggler ion-icon {
position: absolute;
top: 50%;
left: 50%;
@ -266,6 +261,9 @@ main.hero_section {
/* make hero section fully responsive */
@media screen and (max-width: 640px) {
.container {
padding-inline: 15px;
}
.hero_section h2 {
font-size: 30px;
@ -286,16 +284,13 @@ main.hero_section {
}
.container {
padding-inline: 15px;
background: linear-gradient(
90deg,
background: linear-gradient(90deg,
#f12711,
#6d28d9,
#db2777,
#feac5e,
#c779d0,
#4bc0c8
);
#4bc0c8);
background-size: 600% 600%;
animation: gradient 16s ease infinite;
}
@ -313,6 +308,7 @@ main.hero_section {
background-position: 0% 50%;
}
}
/* gradient container section */
.gradient_container {
@ -336,8 +332,7 @@ main.hero_section {
.gradient_container .gradient_card:hover
{
.gradient_container .gradient_card:hover {
filter: blur(0px);
transform: translateY(-5px);
opacity: 1;
@ -396,8 +391,7 @@ main.hero_section {
background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .6));
}
.gradient_code
{
.gradient_code {
width: 100%;
font-family: 'Fira Code', monospace;
font-size: 14px;
@ -407,23 +401,21 @@ main.hero_section {
padding: 10px 20px;
}
.dummy_txt_gradient
{
.dummy_txt_gradient {
color: #f472b6;
}
.dummy_txt_comma,.dummy_txt_bracket_open,.dummy_txt_bracket_close
{
.dummy_txt_comma,
.dummy_txt_bracket_open,
.dummy_txt_bracket_close {
color: #64748b;
}
.dummy_txt_gradient_pos
{
.dummy_txt_gradient_pos {
color: #7dd3fc;
}
.dummy_txt_color_code
{
.dummy_txt_color_code {
color: #f8fafc;
}
@ -488,8 +480,7 @@ input[type="color"]::-moz-color-swatch {
background: transparent;
}
.title_with_copy_btn button:hover
{
.title_with_copy_btn button:hover {
transform: scale(1.1);
}
@ -541,14 +532,12 @@ footer {
font-size: 18px;
line-height: 28px;
color: #374151;
background: linear-gradient(
90deg,
background: linear-gradient(90deg,
#6d28d9,
#db2777,
#feac5e,
#c779d0,
#4bc0c8
);
#4bc0c8);
background-size: 600% 600%;
animation: gradient_footer 16s ease infinite;
}

26
css/white.css
View file

@ -131,8 +131,7 @@ span#notify_toast {
z-index: 1;
}
.container::before
{
.container::before {
content: '';
position: absolute;
bottom: 0;
@ -258,6 +257,9 @@ main.hero_section {
/* make hero section fully responsive */
@media screen and (max-width: 640px) {
.container {
padding-inline: 15px;
}
.hero_section h2 {
font-size: 30px;
@ -276,8 +278,8 @@ main.hero_section {
}
}
.container {
padding-inline: 15px;
background: linear-gradient(90deg,
#f12711,
#6d28d9,
@ -288,6 +290,7 @@ main.hero_section {
background-size: 600% 600%;
animation: gradient 16s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
@ -387,8 +390,7 @@ input[type="color"]::-moz-color-swatch {
border: none;
}
.gradient_code
{
.gradient_code {
width: 100%;
font-family: 'Fira Code', monospace;
font-size: 14px;
@ -399,23 +401,21 @@ input[type="color"]::-moz-color-swatch {
padding: 10px 20px;
}
.dummy_txt_gradient
{
.dummy_txt_gradient {
color: #0069c2;
}
.dummy_txt_comma,.dummy_txt_bracket_open,.dummy_txt_bracket_close
{
.dummy_txt_comma,
.dummy_txt_bracket_open,
.dummy_txt_bracket_close {
color: #858585;
}
.dummy_txt_gradient_pos
{
.dummy_txt_gradient_pos {
color: #d35538;
}
.dummy_txt_color_code
{
.dummy_txt_color_code {
color: #1b1b1b;
}