removed bootstrap dependency and made my own css

This commit is contained in:
Lynne Megido 2019-08-28 13:53:44 +10:00
parent 2e952c3342
commit 0703c4df2c
4 changed files with 98 additions and 26 deletions

View File

@ -1,8 +1,83 @@
.btn-primary {
body {
font-family: "Roboto", sans-serif;
margin: 2.5%;
background-color: #282c37;
color: white;
box-sizing: border-box;
}
.container {
background-color: #444a5c;
padding:10px;
}
.column {
flex-grow: 1;
flex-basis: 0;
padding: 10px;
}
.large {
font-size: 1.2em;
}
a.button {
color: white;
line-height:1.2em;
padding:10px;
text-decoration: none;
display: inline-block;
margin: 5px 0;
transition: 0.2s linear;
}
a.button:visited {
color:white;
}
a.btn-primary {
background-color: #9370db;
border-color: #9370db;
}
.btn-primary:hover {
a.btn-primary:hover {
background-color: #7859b6;
border-color: #7859b6;
}
a.btn-secondary {
background-color: #999;
}
a.btn-secondary:hover {
background-color: #777;
}
a.btn-large {
font-size: 1.6em;
}
a {
color: mediumpurple;
text-decoration: none;
}
a:visited {
color: white;
}
h1 {
font-size: 4em;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
margin: 0;
}
.centred {
text-align: center;
}
.thin {
font-weight: 300;
}
.subtle {
color: #dddddd;
}
.row {
display: flex;
}

View File

@ -6,51 +6,44 @@
{% include 'imports.html' %}
</head>
<body>
<div class="jumbotron jumbotron-fluid main-jumbo">
<div class='container'>
<h1 class='display-3'>FediBooks</h1>
<p>Easily create your own Mastodon/Pleroma ebooks bot from your browser. No coding required.</p>
<p>
<a class="btn btn-primary btn-lg" href="/login" role="button"><i class="fas fa-play"></i> Get started</a>
<a class="btn btn-secondary btn-lg" href="https://github.com/Lynnesbian/FediBooks" role="button"><i class="fas fa-code"></i> Source code</a>
</p>
</div>
</div>
<div class='alert alert-danger text-center'>
FediBooks isn't ready yet. It might behave unexpectedly or not work at all.
<div class="container">
<h1 class='thin centred'>FediBooks</h1>
<p class="centred large">Easily create your own Mastodon/Pleroma ebooks bot from your browser. No coding required.</p>
<p class="centred">
<a class="button btn-primary btn-large" href="/login" role="button"><i class="fas fa-play"></i> Get started</a>
<br>
<a class="button btn-secondary" href="https://github.com/Lynnesbian/FediBooks" role="button"><i class="fas fa-code"></i> Source code</a>
</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="column">
<h2>Easy <i class="fas fa-check"></i></h2>
<p>FediBooks is easy to use. Everything from the profile picture to the accounts learned from is customisable with an intuitive web UI.</p>
</div>
<div class="col-md-4">
<div class="column">
<h2>Truly Free <i class="fab fa-osi"></i></h2>
<p>FediBooks is licensed under the GNU AGPLv3, a libre, copyleft license. This means that it will always be not only free of charge, but also free to distribute, free from access restrictions, and free to modify.</p>
</div>
<div class="col-md-4">
<div class="column">
<h2>Personal <i class="fas fa-user-friends"></i></h2>
<p>Found a bug, or have an idea for a feature? <a href='https://github.com/Lynnesbian/FediBooks/issues'>Open a GitHub issue</a>. Want something a little more personal? Get in touch with <a href='https://fedi.lynnesbian.space/@LynnearSoftware'>the developer</a>.</p>
</div>
</div>
<hr />
</div>
<div class="container">
<h2>Support the author <i class="fas fa-heart"></i></h2>
<p>FediBooks is a passion project I develop and maintain in my free time. If you'd like to contribute, you can do so here.</p>
<a class="btn btn-primary btn-lg" href="https://patreon.com/Lynnesbian" role="button"><i class="fab fa-patreon"></i> Patreon</a>
<a class="btn btn-primary btn-lg" href="https://paypal.me/Lynnesbian" role="button"><i class="fab fa-paypal"></i> PayPal</a>
<a class="btn btn-primary btn-lg" href="https://ko-fi.com/Lynnesbian" role="button"><i class="fas fa-coffee"></i> Ko-fi</a>
<hr />
<a class="button btn-primary" href="https://patreon.com/Lynnesbian" role="button"><i class="fab fa-patreon"></i> Patreon</a>
<a class="button btn-primary" href="https://paypal.me/Lynnesbian" role="button"><i class="fab fa-paypal"></i> PayPal</a>
<a class="button btn-primary" href="https://ko-fi.com/Lynnesbian" role="button"><i class="fas fa-coffee"></i> Ko-fi</a>
</div>
<footer>
<div class='container text-muted'>
<p>Website design and FediBooks program by <a href='https://fedi.lynnesbian.space/@LynnearSoftware'>Lynne</a>. This site uses <a href='https://getbootstrap.com/'>Bootstrap CSS</a> and <a href="https://fontawesome.com">Font Awesome</a>. Source code available <a href="https://github.com/Lynnesbian/Fedibooks">here</a>.</p>
<div class='subtle'>
<p>Website design and FediBooks program by <a href='https://fedi.lynnesbian.space/@LynnearSoftware'>Lynne</a>. This site uses <a href="https://fontawesome.com">Font Awesome</a>. Source code available <a href="https://github.com/Lynnesbian/Fedibooks">here</a>.</p>
</div>
</footer>
</body>

View File

@ -1,4 +1,4 @@
<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">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
<link rel='stylesheet' type='text/css' href="{{ url_for('static', filename='style.css') }}" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap">

View File

@ -5,3 +5,7 @@ app = Flask(__name__)
@app.route("/")
def hello():
return render_template("front_page.html")
@app.route("/login")
def show_login_page():
return render_template("login.html")