vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-09-01 18:49:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Move custom style to its own file

Browse source
This commit is contained in:
davegson 2020-05-11 16:48:33 +02:00
parent 7272377cd1
commit de9a2864f0
3 changed files with 143 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
_includes/custom_style.html Normal file
View file

@ -0,0 +1,141 @@
<style>
* {
font-family: "Roboto";
}
body {
overflow-x: hidden;
}
.not-allowed {
cursor: not-allowed;
}
.spn-shadow {
box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
}
.hover:hover {
box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
}
.shake-horizontal {
-webkit-animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both;
animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both
}
@-webkit-keyframes shake-horizontal {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
10%, 30%, 50%, 70% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
20%, 40%, 60% {
-webkit-transform: translateX(10px);
transform: translateX(10px)
}
80% {
-webkit-transform: translateX(8px);
transform: translateX(8px)
}
90% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px)
}
}
@keyframes shake-horizontal {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
10%, 30%, 50%, 70% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
20%, 40%, 60% {
-webkit-transform: translateX(10px);
transform: translateX(10px)
}
80% {
-webkit-transform: translateX(8px);
transform: translateX(8px)
}
90% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px)
}
}
.spin {
animation-name: spin;
animation-duration: 21000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.heart {
animation: .8s infinite beatHeart;
}
@keyframes beatHeart {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#menu-toggle:checked+#menu {
display: block;
}
.wiggle {
animation: wiggle .2s infinite alternate;
}
@keyframes wiggle {
0% {
transform: rotate(4deg);
}
100% {
transform: rotate(10deg);
}
}
</style>

2
_layouts/page.html
View file

@ -7,5 +7,7 @@
{% include nav.html %}
{{ content }}
{% include footer.html %}
{% include custom_style.html %}
</body>
</html>

102
index.html
View file

@ -255,105 +255,3 @@ title: Safing
</div>
</div>
</section>
<style>
*{
font-family: "Roboto";
}
body{
overflow-x: hidden;
}
.shake-horizontal{
-webkit-animation:shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both;
animation:shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both
}
@-webkit-keyframes shake-horizontal{
0%,100%{
-webkit-transform:translateX(0);
transform:translateX(0)
}
10%,30%,50%,70%{
-webkit-transform:translateX(-10px);
transform:translateX(-10px)
}
20%,40%,60%{
-webkit-transform:translateX(10px);
transform:translateX(10px)}80%
{
-webkit-transform:translateX(8px);
transform:translateX(8px)
}
90%{
-webkit-transform:translateX(-8px);
transform:translateX(-8px)
}
}
@keyframes shake-horizontal{
0%,100%{
-webkit-transform:translateX(0);
transform:translateX(0)
}
10%,30%,50%,70%{
-webkit-transform:translateX(-10px);
transform:translateX(-10px)
}
20%,40%,60%{
-webkit-transform:translateX(10px);
transform:translateX(10px)
}
80%{
-webkit-transform:translateX(8px);
transform:translateX(8px)
}
90%{
-webkit-transform:translateX(-8px);
transform:translateX(-8px)
}
}
.spin {
animation-name: spin;
animation-duration: 21000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.heart {
animation: .8s infinite beatHeart;
}
@keyframes beatHeart {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
40% {
transform: scale(1);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#menu-toggle:checked + #menu {
display: block;
}
</style>