Fix inspire text position and size

2 files changed, 77 insertions, 76 deletions

diff --git a/service/app.py b/service/app.py
index a9e58fc..19102b5 100644
--- a/service/app.py
+++ b/service/app.py
@@ -136,7 +136,7 @@ inspire_template = base_template.format(body="""
 """)
 
 inspire_navbar_html = """
-<div class="glitch">
+<div id="glitch">
     <a href="/inspire">
     <span class="glitch__color glitch__color--red">Inspire</span>
     <span class="glitch__color glitch__color--blue">Inspire</span>
diff --git a/service/static/glitch.css b/service/static/glitch.css
index 6825a7b..62e522e 100644
--- a/service/static/glitch.css
+++ b/service/static/glitch.css
@@ -1,109 +1,110 @@
-.glitch {
-    animation: glitch-skew 2s cubic-bezier(.25, .46, .45, .94) 4s infinite;
-    position: relative;
-    text-align: center;
-    transform-origin: center top;
+#glitch {
+	animation: glitch-skew 2s cubic-bezier(.25, .46, .45, .94) 4s infinite;
+	position: relative;
+	text-align: center;
+	transform-origin: center top;
+	height: 1em !important;
+	padding: 0px !important;
 }
 
 .glitch__color {
-    height: 100%;
-    left: 0;
-    opacity: 0.8;
-    position: absolute;
-    top: -2px;
-    transform-origin: center center;
-    width: 100%;
-    z-index: -1;
+	height: 100%;
+	left: 0;
+	opacity: 0.8;
+	position: absolute;
+	transform-origin: center center;
+	width: 100%;
+	z-index: -1;
 }
 
 .glitch__color--red {
-    animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) infinite;
-    color: red;
+	animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) infinite;
+	color: red;
 }
 
 .glitch__color--blue {
-    animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) infinite reverse;
-    color: blue;
+	animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) infinite reverse;
+	color: blue;
 }
 
 .glitch__color--green {
-    animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) 100ms infinite;
-    color: green;
+	animation: glitch 300ms cubic-bezier(.25, .46, .45, .94) 100ms infinite;
+	color: green;
 }
 
 .glitch__line {
-    animation: glitch-line 2s linear infinite;
-    background: #000;
-    content: '';
-    height: 1px;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 1;
+	animation: glitch-line 2s linear infinite;
+	background: #000;
+	content: '';
+	height: 1px;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+	z-index: 1;
 }
 
 .glitch--first {
-    animation: glitch-line 2s linear infinite;
+	animation: glitch-line 2s linear infinite;
 }
 
 .glitch--second {
-    animation: glitch-line 1s linear 1s infinite;
+	animation: glitch-line 1s linear 1s infinite;
 }
 
 @keyframes glitch {
-    0% {
-        transform: translate(0);
-    }
-    20% {
-        transform: translate(-1px, 1px);
-    }
-    40% {
-        transform: translate(-1px, -1px);
-    }
-    60% {
-        transform: translate(1px, 1px);
-    }
-    80% {
-        transform: translate(1px, -1px);
-    }
-    100% {
-        transform: translate(0);
-    }
+	0% {
+		transform: translate(0);
+	}
+	20% {
+		transform: translate(-1px, 1px);
+	}
+	40% {
+		transform: translate(-1px, -1px);
+	}
+	60% {
+		transform: translate(1px, 1px);
+	}
+	80% {
+		transform: translate(1px, -1px);
+	}
+	100% {
+		transform: translate(0);
+	}
 
 }
 
 @keyframes glitch-skew {
-    0% {
-        transform: skew(0deg, 0deg);
-    }
-    48% {
-        transform: skew(0deg, 0deg);
-        filter: blur(0);
-    }
-    50% {
-        transform: skew(-20deg, 0deg);
-        filter: blur(4px);
-    }
-    52% {
-        transform: skew(20deg, 0deg);
-    }
-    54% {
-        transform: skew(0deg, 0deg);
-        filter: blur(0);
-    }
-    100% {
-        transform: skew(0deg, 0deg);
-    }
+	0% {
+		transform: skew(0deg, 0deg);
+	}
+	48% {
+		transform: skew(0deg, 0deg);
+		filter: blur(0);
+	}
+	50% {
+		transform: skew(-20deg, 0deg);
+		filter: blur(4px);
+	}
+	52% {
+		transform: skew(20deg, 0deg);
+	}
+	54% {
+		transform: skew(0deg, 0deg);
+		filter: blur(0);
+	}
+	100% {
+		transform: skew(0deg, 0deg);
+	}
 
 }
 
 @keyframes glitch-line {
-    0% {
-        top: 0;
-    }
+	0% {
+		top: 0;
+	}
 
-    100% {
-        top: 100%;
-    }
+	100% {
+		top: 100%;
+	}
 }