Skip to content

fixed navbar color on media query 992px+ screen #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MoonTheRipper wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fixed navbar color on media query 992px+ screen #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5502a24
fixed navbar color on media query 992px+ screen
MoonTheRipper Sep 28, 2023
5717681
Added boxicons resources for optimal icons.
MoonTheRipper Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
6 changes: 6 additions & 0 deletions box_icons/LICENSE.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Boxicons License
-------------------------Boxicons is an open source project , you can use them in your commercial projects too.
The icons (.svg) files are free to download are licensed under CC 4.0 .
The fonts files are licensed under SIL OFL 1.1
Attribution is not required but is appreciated
Other files which are not fonts or icons are licensed under the MIT License
386 changes: 386 additions & 0 deletions box_icons/css/animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,386 @@
@-webkit-keyframes spin
{
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin
{
0%
{
-webkit-transform: rotate(0);
transform: rotate(0);
}
100%
{
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes burst
{
0%
{
-webkit-transform: scale(1);
transform: scale(1);

opacity: 1;
}
90%
{
-webkit-transform: scale(1.5);
transform: scale(1.5);

opacity: 0;
}
}
@keyframes burst
{
0%
{
-webkit-transform: scale(1);
transform: scale(1);

opacity: 1;
}
90%
{
-webkit-transform: scale(1.5);
transform: scale(1.5);

opacity: 0;
}
}
@-webkit-keyframes flashing
{
0%
{
opacity: 1;
}
45%
{
opacity: 0;
}
90%
{
opacity: 1;
}
}
@keyframes flashing
{
0%
{
opacity: 1;
}
45%
{
opacity: 0;
}
90%
{
opacity: 1;
}
}
@-webkit-keyframes fade-left
{
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);

opacity: 1;
}
75%
{
-webkit-transform: translateX(-20px);
transform: translateX(-20px);

opacity: 0;
}
}
@keyframes fade-left
{
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);

opacity: 1;
}
75%
{
-webkit-transform: translateX(-20px);
transform: translateX(-20px);

opacity: 0;
}
}
@-webkit-keyframes fade-right
{
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);

opacity: 1;
}
75%
{
-webkit-transform: translateX(20px);
transform: translateX(20px);

opacity: 0;
}
}
@keyframes fade-right
{
0%
{
-webkit-transform: translateX(0);
transform: translateX(0);

opacity: 1;
}
75%
{
-webkit-transform: translateX(20px);
transform: translateX(20px);

opacity: 0;
}
}
@-webkit-keyframes fade-up
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);

opacity: 1;
}
75%
{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);

opacity: 0;
}
}
@keyframes fade-up
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);

opacity: 1;
}
75%
{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);

opacity: 0;
}
}
@-webkit-keyframes fade-down
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);

opacity: 1;
}
75%
{
-webkit-transform: translateY(20px);
transform: translateY(20px);

opacity: 0;
}
}
@keyframes fade-down
{
0%
{
-webkit-transform: translateY(0);
transform: translateY(0);

opacity: 1;
}
75%
{
-webkit-transform: translateY(20px);
transform: translateY(20px);

opacity: 0;
}
}
@-webkit-keyframes tada
{
from
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

10%,
20%
{
-webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
}

30%,
50%,
70%,
90%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
}

40%,
60%,
80%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
}

to
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@keyframes tada
{
from
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

10%,
20%
{
-webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
}

30%,
50%,
70%,
90%
{
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
}

40%,
60%,
80%
{
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

to
{
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bx-spin
{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.bx-spin-hover:hover
{
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

.bx-tada
{
-webkit-animation: tada 1.5s ease infinite;
animation: tada 1.5s ease infinite;
}
.bx-tada-hover:hover
{
-webkit-animation: tada 1.5s ease infinite;
animation: tada 1.5s ease infinite;
}

.bx-flashing
{
-webkit-animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
}
.bx-flashing-hover:hover
{
-webkit-animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
}

.bx-burst
{
-webkit-animation: burst 1.5s infinite linear;
animation: burst 1.5s infinite linear;
}
.bx-burst-hover:hover
{
-webkit-animation: burst 1.5s infinite linear;
animation: burst 1.5s infinite linear;
}
.bx-fade-up
{
-webkit-animation: fade-up 1.5s infinite linear;
animation: fade-up 1.5s infinite linear;
}
.bx-fade-up-hover:hover
{
-webkit-animation: fade-up 1.5s infinite linear;
animation: fade-up 1.5s infinite linear;
}
.bx-fade-down
{
-webkit-animation: fade-down 1.5s infinite linear;
animation: fade-down 1.5s infinite linear;
}
.bx-fade-down-hover:hover
{
-webkit-animation: fade-down 1.5s infinite linear;
animation: fade-down 1.5s infinite linear;
}
.bx-fade-left
{
-webkit-animation: fade-left 1.5s infinite linear;
animation: fade-left 1.5s infinite linear;
}
.bx-fade-left-hover:hover
{
-webkit-animation: fade-left 1.5s infinite linear;
animation: fade-left 1.5s infinite linear;
}
.bx-fade-right
{
-webkit-animation: fade-right 1.5s infinite linear;
animation: fade-right 1.5s infinite linear;
}
.bx-fade-right-hover:hover
{
-webkit-animation: fade-right 1.5s infinite linear;
animation: fade-right 1.5s infinite linear;
}
Loading