init

static/site.css

@@ -0,0 +1,232 @@
+body {
+	background-color: #b0b0b0;
+}
+
+.vertical-center {
+	z-index:-1;
+	min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
+	min-height: 100vh; /* These two lines are counted as one :-)       */
+	
+	display: flex;
+	align-items: center;
+	/*background-color: rgba(0, 0, 0,0.5);*/
+}
+
+.gradient-fill {
+	opacity: 50%;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	position: absolute;
+}
+
+.bg-fill-s1 {
+	background: rgb(2,0,36);
+	background: linear-gradient(30deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 33%, rgba(0,212,255,1) 100%);;
+	opacity: 50%;
+}
+
+.bg-fill-s2 {
+	background: rgb(131,58,180);
+	background: linear-gradient(127deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
+	opacity: 50%;
+}
+
+.bg-fill-s3 {
+	background: rgb(34,193,195);
+	background: linear-gradient(320deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
+	opacity: 50%;
+}
+
+.background {
+	z-index:0;
+	font-family: 'Bowlby One SC', cursive;
+	display: flex;
+	position: absolute;
+	
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	max-width: 100%;
+	max-height: 100%;
+	
+
+}
+
+.header-bar {
+	display: flex;
+	position : absolute;
+	z-index:20;
+	font-family: 'Bowlby One SC', cursive;
+	top: 0px;
+	width:100%;
+	/*background-color: rgba(0, 0, 0,0.5);*/
+	color: rgb(255,255,255);
+	padding:1rem;
+	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0,0));
+}
+
+.score-bar {
+	display: flex;
+	position : absolute;
+	z-index:19;
+	font-family: 'Bowlby One SC', cursive;
+	bottom: 0px;
+	width:100%;
+	/*background-color: rgba(0, 0, 0,0.5);*/
+	color: rgb(255,255,255);
+	padding:1rem;
+	background-image: linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0,0.5));
+}
+
+#bg-content {
+	
+    position : absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+    -moz-transform: translate(-50%, -50%) rotate(-45deg);
+    -ms-transform: translate(-50%, -50%) rotate(-45deg);
+    transform: translate(-50%, -50%) rotate(-45deg);
+	
+	position: absolute;
+	transform-origin: 50% 50%;
+
+}
+
+.scr {
+	margin-right: 1rem;
+}
+
+.single-line {
+	
+	background: url("go-next-8.png") repeat-x;
+	white-space: nowrap;
+	overflow:hidden;
+	color:rgb(153, 136, 136);
+	padding-bottom:48px;
+	width: 5000px;
+	height: 32px;
+	
+	
+
+	background-size: auto;
+}
+
+
+@keyframes slide {
+  from {
+    background-position-x: 0;
+  }
+  to {
+    background-position-x: -653px;
+  }
+}
+
+@keyframes slide_out {
+  from {
+    position-x: 0;
+  }
+  to {
+    position-x: -100%;
+  }
+}
+@keyframes slide_in {
+  from {
+    position-x: 100%;
+  }
+  to {
+    position-x: 0;
+  }
+}
+
+.heart > path{
+	fill: transparent;
+}
+
+
+.heart-en > svg > path {
+	animation: heartClickEn 0.3s linear;
+	color: red;
+	fill: lightcoral;
+}
+.heart-en > svg {
+	animation: heartPopIn 0.3s linear;
+	color: red;
+}
+
+
+@keyframes dash {
+	to {
+	  stroke-dashoffset: 200;
+	}
+}
+
+@keyframes heartClickEn {
+	0%   {
+		color: #007bff ;
+		
+	}
+	50%  {
+		fill: transparent;
+		
+	}
+	100% {
+		color: red ;
+		fill: lightcoral;
+	}
+}
+
+@keyframes heartPopIn {
+	0%   {
+		transform: scale(1.0);
+		
+	}
+	50%  {
+		transform: scale(2);
+		
+	}
+	100% {
+		transform: scale(1.0);
+	}
+}
+
+@keyframes heartPopOut {
+	0%   {
+		transform: scale(1.0);
+		
+	}
+	50%  {
+		transform: scale(2);
+		
+	}
+	100% {
+		transform: scale(1.0);
+	}
+}
+
+.heart-da > svg > path {
+	animation: heartClickDa 0.3s linear;
+	fill: transparent;
+}
+.heart-da > svg {
+	animation: heartPopOut 0.3s linear;
+	color: 007bff;
+}
+
+@keyframes heartClickDa {
+	0%   {
+		color: red ;
+		fill: lightcoral;
+		
+	}
+	50%  {
+		fill: transparent;
+		
+	}
+	100% {
+		color: #007bff ;
+		
+	}
+}