HOLD THY HORSES
This is a template page used internally by the Topiary.
PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION
UwU
[[html]]
<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:900i|Roboto+Condensed:300&display=swap');
- {
box-sizing: border-box;
}
body {
font-family: 'Roboto Condensed', sans-serif;
font-size: +1em;
line-height: 0.02em;
font-weight: 300;
}
p {
margin-bottom: 0.6em;
color: {$color2};
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 2.5em;
margin-block-start: 0.5em;
margin-block-end: 0.6em;
}
.container {
width: 100%;
margin: 0 auto;
background:transparent;
color: white;
background-position: bottom right;
background-size: 1px 1px;
position:relative;
z-index:1;
padding: 0px 0px 5px 0px;
}
.container:before{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:70%;
content:"";
background-color:{$color};
}
ul {
padding-inline-start: 0px;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: white;
padding-bottom: 12px;
}
.button {
border: none;
background-color: inherit;
font-size: 16px;
cursor: pointer;
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: white;
padding-bottom: 12px;
font-family: inherit;
}
.one:hover ~ hr {
margin-left: 4.5%;
}
.two:hover ~ hr {
margin-left: 29.5%;
}
.three:hover ~ hr {
margin-left: 54.5%;
}
.four:hover ~ hr {
margin-left: 79.5%;
}
hr {
height: .25rem;
width: 15%;
margin: 0;
background: {$color2};
border: none;
transition: .3s ease-in-out;
margin-left: {$start2};
position: relative;
top: 3px;
}
</style>
<body>
<div class="container">
<ul>
<li class="one"><a href="#">Old</a></li><!
—><li class="two"><a href="#">Old</a></li><!
><li class="three"><a href="#">Popular</a></li><!
><li class="four"><a href="#">Number</a></li>
<hr />
</ul>
</div>
<br>
<br>
<div class="container">
<ul>
<li class="one"><button class="button" onclick="myFunction()">Try it</button></li><!
><li class="two"><a href="#">Old</a></li><!
><li class="three"><a href="#">Popular</a></li><!
—><li class="four"><a href="#">Number</a></li>
<hr />
</ul>
</div>
<br>
<br>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
{$modEnd}]]