Change the whole layout to (semantic-ui-forest)
This commit is contained in:
8
templates/follow-header.html
Normal file
8
templates/follow-header.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="ui blue inverted large top fixed hidden menu">
|
||||
<div class="ui container">
|
||||
<!--<a class="toc item"><i class="sidebar icon"></i>-->
|
||||
{% for entry in header_links %}
|
||||
<a class="{% if entry["endpoint"] == request.endpoint %}active{% endif %} item" href="{{ entry["href"] }}">{{entry["name"]}}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
18
templates/footer.html
Normal file
18
templates/footer.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<div class="ui blue inverted vertical footer segment">
|
||||
<div class="ui container">
|
||||
<div class="ui stackable inverted divided equal height stackable grid">
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header">About</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="https://github.com/osufx/osu-wayback" class="item">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thirteen wide column">
|
||||
<h4 class="ui inverted header">Info</h4>
|
||||
<p>
|
||||
This app uses scraped data from osu.ppy.sh to generate this list. It is fully opensource and licensed under GPL-3.0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
11
templates/header.html
Normal file
11
templates/header.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<div class="ui container">
|
||||
<div class="ui large secondary blue inverted menu">
|
||||
<a class="toc item"><i class="sidebar icon"></i>
|
||||
{% for entry in header_links %}
|
||||
<a class="{% if entry["endpoint"] == request.endpoint %}active{% endif %} item toosmall" href="{{ entry["href"] }}">{{entry["name"]}}</a>
|
||||
{% endfor %}
|
||||
<div class="right item">
|
||||
<a class="ui blue inverted button">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,9 +1,94 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block body %}
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
|
||||
<div class="ui blue inverted vertical masthead center aligned segment">
|
||||
{% include "header.html" %}
|
||||
<div class="ui text container">
|
||||
<h1 class="ui inverted header">
|
||||
osu!wayback
|
||||
</h1>
|
||||
<h2>
|
||||
{{
|
||||
[
|
||||
"Library for osu! history",
|
||||
"Archive of old osu! files",
|
||||
"Download osu! from 2014"
|
||||
] | random
|
||||
}}
|
||||
</h2>
|
||||
<div class="ui huge primary button">
|
||||
Get Started<i class="right arrow icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui vertical stripe segment">
|
||||
<div class="ui middle aligned stackable grid container">
|
||||
<div class="row">
|
||||
<div class="eight wide column">
|
||||
<h3 class="ui header">
|
||||
We Help Companies and Companions
|
||||
</h3>
|
||||
<p>
|
||||
We can give your company superpowers to do things that they never thought possible. Let us delight your customers and empower your needs...through pure data analytics.
|
||||
</p>
|
||||
<h3 class="ui header">
|
||||
We Make Bananas That Can Dance
|
||||
</h3>
|
||||
<p>
|
||||
Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.
|
||||
</p>
|
||||
</div>
|
||||
<div class="six wide right floated column">
|
||||
<img class="ui large bordered rounded image" src="../../static/images/templates/semantic-ui/wireframe/white-image.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="center aligned column">
|
||||
<a class="ui huge button">Check Them Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui vertical stripe quote segment">
|
||||
<div class="ui equal width stackable internally celled grid">
|
||||
<div class="center aligned row">
|
||||
<div class="column">
|
||||
<h3>
|
||||
"What a Company"
|
||||
</h3>
|
||||
<p>
|
||||
That is what they all say about us
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3>
|
||||
"I shouldn't have gone with their competitor."
|
||||
</h3>
|
||||
<p>
|
||||
<img class="ui avatar image" src="../../static/images/templates/semantic-ui/avatar/nan.jpg" /><b>Nan</b>Chief Fun Officer Acme Toys
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui vertical stripe segment">
|
||||
<div class="ui text container">
|
||||
<h3 class="ui header">
|
||||
Breaking The Grid, Grabs Your Attention
|
||||
</h3>
|
||||
<p>
|
||||
Instead of focusing on content creation and hard work, we have learned how to master the art of doing nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic and worth your attention.
|
||||
</p>
|
||||
<a class="ui large button">Read More</a>
|
||||
<h4 class="ui horizontal header divider">
|
||||
<a href="homepage.html#"> Case Studies</a>
|
||||
</h4>
|
||||
<h3 class="ui header">
|
||||
Did We Tell You About Our Bananas?
|
||||
</h3>
|
||||
<p>
|
||||
Yes I know you probably disregarded the earlier boasts as non-sequitur filler content, but its really true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.
|
||||
</p>
|
||||
<a class="ui large button">I'm Still Quite Interested</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -9,104 +9,58 @@
|
||||
"name": "Download",
|
||||
"endpoint": "download_index",
|
||||
"href": "/download"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "API",
|
||||
"endpoint": "api_index",
|
||||
"href": "/api"
|
||||
}
|
||||
]
|
||||
%}
|
||||
<html>
|
||||
<head>
|
||||
<title>osu!wayback</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="semantic.min.css") }}">
|
||||
<style>
|
||||
.secondary.pointing.menu .toc.item {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-width: 400px) {
|
||||
.ui.fixed.menu {
|
||||
display: none !important;
|
||||
}
|
||||
.secondary.pointing.menu .item,
|
||||
.secondary.pointing.menu .menu {
|
||||
display: none;
|
||||
}
|
||||
.secondary.pointing.menu .toc.item {
|
||||
display: block;
|
||||
}
|
||||
.masthead.segment {
|
||||
min-height: 73px;
|
||||
}
|
||||
.masthead h1.ui.header {
|
||||
font-size: 2em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.masthead h2 {
|
||||
margin-top: 0.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="{{ url_for("static", filename="jquery-3.2.1.min.js") }}"></script>
|
||||
<script src="{{ url_for("static", filename="semantic.min.js") }}"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.masthead').visibility({
|
||||
once: false,
|
||||
onBottomPassed: function() {
|
||||
$('.fixed.menu').transition('fade in');
|
||||
},
|
||||
onBottomPassedReverse: function() {
|
||||
$('.fixed.menu').transition('fade out');
|
||||
}
|
||||
});
|
||||
$('.ui.sidebar').sidebar('attach events', '.toc.item');
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="dist/semantic-ui/semantic.min.css") }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="stylesheets/default.css") }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="stylesheets/pandoc-code-highlight.css") }}">
|
||||
|
||||
<script src="{{ url_for("static", filename="dist/jquery/jquery.min.js") }}"></script>
|
||||
{% block headextra %}{% endblock %}
|
||||
</head>
|
||||
<body class="pushable">
|
||||
<div class="ui large top fixed inverted menu transition hidden">
|
||||
<div class="ui container">
|
||||
{% for entry in header_links %}
|
||||
<a class="{% if entry["endpoint"] == request.endpoint %}active{% endif %} item" href="{{ entry["href"] }}">{{entry["name"]}}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui vertical inverted sidebar menu left">
|
||||
{% for entry in header_links %}
|
||||
<a class="{% if entry["endpoint"] == request.endpoint %}active{% endif %} item" href="{{ entry["href"] }}">{{entry["name"]}}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="pusher">
|
||||
<div class="ui inverted vertical masthead center aligned segment">
|
||||
<div class="ui container">
|
||||
<div class="ui large secondary inverted pointing menu">
|
||||
<a class="toc item">
|
||||
<i class="sidebar icon"></i>
|
||||
</a>
|
||||
{% for entry in header_links %}
|
||||
<a class="{% if entry["endpoint"] == request.endpoint %}active{% endif %} item" href="{{ entry["href"] }}">{{entry["name"]}}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% block body %}{% endblock %}
|
||||
<div class="ui inverted vertical footer segment">
|
||||
<div class="ui container">
|
||||
<div class="ui stackable inverted divided equal height stackable grid">
|
||||
<div class="three wide column">
|
||||
<h4 class="ui inverted header">About</h4>
|
||||
<div class="ui inverted link list">
|
||||
<a href="https://github.com/osufx/osu-wayback" class="item">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seven wide column">
|
||||
<h4 class="ui inverted header">Info</h4>
|
||||
<p>
|
||||
This app uses scraped data from osu.ppy.sh to generate this list. It is fully opensource and licensed under GPL-3.0
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<body>
|
||||
<!--Header Menu-->
|
||||
{% include "follow-header.html" %}
|
||||
<!--Sidebar Menu-->
|
||||
{% include "sidebar.html" %}
|
||||
<!--Page-->
|
||||
<div class="pusher">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
<!--Footer-->
|
||||
{% include "footer.html" %}
|
||||
<script src="{{ url_for("static", filename="dist/semantic-ui/semantic.min.js") }}"></script>
|
||||
<script>
|
||||
$(document)
|
||||
.ready(function() {
|
||||
// fix menu when passed
|
||||
$('.masthead')
|
||||
.visibility({
|
||||
once: false,
|
||||
onBottomPassed: function() {
|
||||
$('.fixed.menu').transition('fade in');
|
||||
},
|
||||
onBottomPassedReverse: function() {
|
||||
$('.fixed.menu').transition('fade out');
|
||||
}
|
||||
})
|
||||
;
|
||||
|
||||
// create sidebar and attach to menu open
|
||||
$('.ui.sidebar')
|
||||
.sidebar('attach events', '.toc.item')
|
||||
;
|
||||
})
|
||||
;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
5
templates/sidebar.html
Normal file
5
templates/sidebar.html
Normal file
@@ -0,0 +1,5 @@
|
||||
<div class="ui vertical blue inverted sidebar menu">
|
||||
{% for entry in header_links %}
|
||||
<a class="{% if entry["endpoint"] == request.endpoint %}active{% endif %} item" href="{{ entry["href"] }}">{{entry["name"]}}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
Reference in New Issue
Block a user