Port c0defox.es to bootstrap 5
This commit is contained in:
parent
8d60e5eedb
commit
53f6e290bb
79
social_links/links/static/cover.css
Normal file
79
social_links/links/static/cover.css
Normal file
@ -0,0 +1,79 @@
|
||||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
|
||||
/* Custom default button */
|
||||
.btn-light,
|
||||
.btn-light:hover,
|
||||
.btn-light:focus {
|
||||
color: #333;
|
||||
text-shadow: none; /* Prevent inheritance from `body` */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
body {
|
||||
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
||||
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.nav-masthead .nav-link {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link + .nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-masthead .active {
|
||||
color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.cover-heading img {
|
||||
border-radius: 32%;
|
||||
-webkit-box-shadow: 0 8px 6px -6px black;
|
||||
-moz-box-shadow: 0 8px 6px -6px black;
|
||||
box-shadow: 0 8px 6px -6px black;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.masthead-brand {
|
||||
float: left;
|
||||
/* margin-top: -2rem; */
|
||||
/* margin-left: -8rem; */
|
||||
margin-top: -2.5rem;
|
||||
margin-left: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.masthead-brand {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.masthead-brand img {
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: -5.5rem;
|
||||
}
|
||||
59
social_links/links/templates/links/index.html
Normal file
59
social_links/links/templates/links/index.html
Normal file
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-100">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="{{ author }}" />
|
||||
<title>{{ title }}</title>
|
||||
<link rel="icon" type="image/png" href="{{ favicon }}" />
|
||||
|
||||
{% load django_bootstrap5 %}
|
||||
{% bootstrap_css %}
|
||||
|
||||
{% load static %}
|
||||
<link href="{% static 'cover.css' %}" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex h-100 text-center text-bg-dark">
|
||||
|
||||
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
|
||||
<header class="mb-auto">
|
||||
<div>
|
||||
<h3 class="masthead-brand float-md-start mb-0"><a href="https://c0de.fox.pet"><img style="width: 12rem;" src="https://c0defox.es/paw-tail.svg" /></a></h3>
|
||||
<nav class="nav nav-masthead justify-content-center float-md-end">
|
||||
<a class="nav-link fw-bold py-1 px-0 active" href="https://c0defox.es"><i class="fas fa-home"></i> Home</a>
|
||||
<a class="nav-link fw-bold py-1 px-0" href="https://storage.c0de.cloud" title="Personal cloud"><i class="fal fa-cloud"></i> c0de.cloud</a>
|
||||
<a class="nav-link fw-bold py-1 px-0" href="https://lob.li" title="Link Shortener"><i class="fas fa-compress-alt"></i> lob.li</a>
|
||||
<a class="nav-link fw-bold py-1 px-0" href="https://xn--l3h7012o.ws" title="foxcloud :3">🦊☁️</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% bootstrap_alert "Something went wrong" alert_type="danger" %}
|
||||
|
||||
<main role="main" class="px-3">
|
||||
<h1 class="cover-heading"><a href="https://c0de.fox.pet"><img src="https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d?s=200" /></a></h1>
|
||||
<h1 class="cover-heading">c0de</h1>
|
||||
<p class="lead">Some weird fox on the internet</p>
|
||||
<p class="lead"></p>
|
||||
<p class="lead">Here's some ways to get in touch with me</p>
|
||||
<p class="lead">
|
||||
<a href="https://teitter.com/foxyc0de" class="btn btn-secondary"><i class="bi bi-twitter"></i> Twitter</a>
|
||||
<a href="https://t.me/c0defox" class="btn btn-secondary"><i class="bi bi-telegram"></i> Telegram</a>
|
||||
<a href="https://github.com/alopexc0de" class="btn btn-secondary"><i class="bi bi-github"></i> Github</a>
|
||||
<a href="https://keybase.io/alopexc0de" class="btn btn-secondary"><i class="bi bi-keycdn"></i> Keybase</a>
|
||||
<a href="https://www.reddit.com/user/alopexc0de" class="btn btn-secondary"><i class="bi bi-reddit"></i> Reddit</a>
|
||||
<a href="https://discord.com/users/c0de#0689" class="btn btn-secondary"><i class="bi bi-discord"></i> Discord</a>
|
||||
<a href="http://steamcommunity.com/id/c0defox" class="btn btn-secondary"><i class="bi bi-steam"></i> Steam</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<footer class="mt-auto text-white-50">
|
||||
<p>I'm apparently unique enough to have a name that others don't; ask one of my known accounts if unsure.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{% bootstrap_javascript %}
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user