Commit 814b1c99 authored by Erik Faye-Lund 's avatar Erik Faye-Lund

home: move all custom CSS to dedicated CSS file

It's not really legal to have style-tags outside of the head-tag, even
though most browsers support it. Let's please the standard, and move
all of the home-page specific CSS definitions into a dedicated CSS file
for the homepage.
Acked-by: Eric Engestrom's avatarEric Engestrom <eric@engestrom.ch>
parent df031f01
Pipeline #174675 passed with stages
in 8 seconds
...@@ -4,29 +4,9 @@ Title: Home ...@@ -4,29 +4,9 @@ Title: Home
Weight: -10 Weight: -10
outputs: outputs:
- html - html
CustomCSS: /assets/home.css
--- ---
<style>
[data-toggle="collapse"] > a > svg {
display: inline-block;
float: right;
width: 1em;
height: 1em;
transition: all 0.2s;
}
[data-toggle="collapse"].collapsed > a > svg {
transform: rotate(180deg);
}
@media (min-width: 1200px) {
.collapse.open-on-xl {
display: block !important;
height: auto !important;
visibility: visible;
}
}
</style>
<h2 class="collapsed d-xl-none" data-toggle="collapse" data-target="#apis-collapse" aria-expanded="false" aria-controls="apis-collapse"> <h2 class="collapsed d-xl-none" data-toggle="collapse" data-target="#apis-collapse" aria-expanded="false" aria-controls="apis-collapse">
<a role="button"> <a role="button">
Featured APIs Featured APIs
......
...@@ -9,6 +9,8 @@ ...@@ -9,6 +9,8 @@
<link rel="icon" href="{{ "/favicon.ico" | relURL }}"> <link rel="icon" href="{{ "/favicon.ico" | relURL }}">
{{ with .Params.CustomCSS }} <link rel="stylesheet" href="{{ . | relURL }}"> {{ end }}
<link rel="stylesheet" href="{{ "/assets/screen.css" | relURL }}"> <link rel="stylesheet" href="{{ "/assets/screen.css" | relURL }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
......
<svg id="gears" viewBox="0,0,130,130"> <svg id="gears" viewBox="0,0,130,130">
<style>
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.cog {
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.red {
animation-duration: 5.142857s;
animation-direction: reverse;
}
.green,
.blue {
animation-duration: 2.5714285s;
}
</style>
<g transform="translate(75,65)"> <g transform="translate(75,65)">
<g transform="translate(-30,20)"> <g transform="translate(-30,20)">
<path d="M36.5 0l6.866-3.413-.402-3.392-7.472-1.716-.778-2.758 5.475-5.368-1.43-3.102-7.638.678-1.592-2.383 3.549-6.797-2.319-2.508-7.054 3.004-2.25-1.774 1.274-7.56-2.98-1.67-5.781 5.037-2.689-.992-1.124-7.584-3.35-.666-3.941 6.577L0-36.5l-3.413-6.866-3.392.402-1.716 7.472-2.758.778-5.368-5.475-3.102 1.43.678 7.638-2.383 1.592-6.797-3.549-2.508 2.319 3.004 7.054-1.774 2.25-7.56-1.274-1.67 2.98 5.037 5.781-.992 2.689-7.584 1.124-.666 3.35 6.577 3.941L-36.5 0l-6.866 3.413.402 3.392 7.472 1.716.778 2.758-5.475 5.368 1.43 3.102 7.638-.678 1.592 2.383-3.549 6.797 2.319 2.508 7.054-3.004 2.25 1.774-1.274 7.56 2.98 1.67 5.781-5.037 2.689.992 1.124 7.584 3.35.666 3.941-6.577L0 36.5l3.413 6.866 3.392-.402 1.716-7.472 2.758-.778 5.368 5.475 3.102-1.43-.678-7.638 2.383-1.592 6.797 3.549 2.508-2.319-3.004-7.054 1.774-2.25 7.56 1.274 1.67-2.98-5.037-5.781.992-2.689 7.584-1.124.666-3.35-6.577-3.941M10 0l-.49 3.09-1.42 2.788L5.878 8.09 3.09 9.51 0 10l-3.09-.49-2.788-1.42-2.212-2.212-1.42-2.788L-10 0l.49-3.09 1.42-2.788 2.212-2.212 2.788-1.42L0-10l3.09.49 2.788 1.42L8.09-5.878 9.51-3.09" fill="#cc1a00" class="cog red"/> <path d="M36.5 0l6.866-3.413-.402-3.392-7.472-1.716-.778-2.758 5.475-5.368-1.43-3.102-7.638.678-1.592-2.383 3.549-6.797-2.319-2.508-7.054 3.004-2.25-1.774 1.274-7.56-2.98-1.67-5.781 5.037-2.689-.992-1.124-7.584-3.35-.666-3.941 6.577L0-36.5l-3.413-6.866-3.392.402-1.716 7.472-2.758.778-5.368-5.475-3.102 1.43.678 7.638-2.383 1.592-6.797-3.549-2.508 2.319 3.004 7.054-1.774 2.25-7.56-1.274-1.67 2.98 5.037 5.781-.992 2.689-7.584 1.124-.666 3.35 6.577 3.941L-36.5 0l-6.866 3.413.402 3.392 7.472 1.716.778 2.758-5.475 5.368 1.43 3.102 7.638-.678 1.592 2.383-3.549 6.797 2.319 2.508 7.054-3.004 2.25 1.774-1.274 7.56 2.98 1.67 5.781-5.037 2.689.992 1.124 7.584 3.35.666 3.941-6.577L0 36.5l3.413 6.866 3.392-.402 1.716-7.472 2.758-.778 5.368 5.475 3.102-1.43-.678-7.638 2.383-1.592 6.797 3.549 2.508-2.319-3.004-7.054 1.774-2.25 7.56 1.274 1.67-2.98-5.037-5.781.992-2.689 7.584-1.124.666-3.35-6.577-3.941M10 0l-.49 3.09-1.42 2.788L5.878 8.09 3.09 9.51 0 10l-3.09-.49-2.788-1.42-2.212-2.212-1.42-2.788L-10 0l.49-3.09 1.42-2.788 2.212-2.212 2.788-1.42L0-10l3.09.49 2.788 1.42L8.09-5.878 9.51-3.09" fill="#cc1a00" class="cog red"/>
......
...@@ -19,58 +19,4 @@ ...@@ -19,58 +19,4 @@
</div> </div>
</div> </div>
</div> </div>
<style>
.jumbotron {
flex-shrink: 0;
}
#jumbotron-content {
position: relative;
z-index: 1;
}
#jumbotron-text {
text-shadow: 0 0 5px #f8f9fa;
}
#gears-container {
position: absolute;
top: 0;
right: 0;
width: 100%;
max-height: 100%;
z-index: 0;
height: 100%;
}
svg#gears {
opacity: 0.25;
float: right;
height: 100%;
transform: scale(1.75);
}
@media (min-width: 576px) {
svg#gears {
transform: scale(2);
}
}
@media (min-width: 768px) {
svg#gears {
transform: translateX(-75%) scale(2.5);
}
}
.jumbotron .cog {
animation-play-state: paused;
}
@media (hover: hover) {
.jumbotron:hover .cog {
animation-play-state: running;
}
}
</style>
</header> </header>
[data-toggle="collapse"] > a > svg {
display: inline-block;
float: right;
width: 1em;
height: 1em;
transition: all 0.2s;
}
[data-toggle="collapse"].collapsed > a > svg {
transform: rotate(180deg);
}
@media (min-width: 1200px) {
.collapse.open-on-xl {
display: block !important;
height: auto !important;
visibility: visible;
}
}
.jumbotron {
flex-shrink: 0;
}
#jumbotron-content {
position: relative;
z-index: 1;
}
#jumbotron-text {
text-shadow: 0 0 5px #f8f9fa;
}
#gears-container {
position: absolute;
top: 0;
right: 0;
width: 100%;
max-height: 100%;
z-index: 0;
height: 100%;
}
svg#gears {
opacity: 0.25;
float: right;
height: 100%;
transform: scale(1.75);
}
@media (min-width: 576px) {
svg#gears {
transform: scale(2);
}
}
@media (min-width: 768px) {
svg#gears {
transform: translateX(-75%) scale(2.5);
}
}
.jumbotron .cog {
animation-play-state: paused;
}
@media (hover: hover) {
.jumbotron:hover .cog {
animation-play-state: running;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.cog {
animation-name: spin;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.red {
animation-duration: 5.142857s;
animation-direction: reverse;
}
.green,
.blue {
animation-duration: 2.5714285s;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment