Switch text-based logo in header to image with RoadRunner

This commit is contained in:
Xevion
2022-03-27 13:05:24 -05:00
parent 4bf568c0fe
commit 4704bd5c6e
7 changed files with 76 additions and 22 deletions

View File

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

View File

@@ -21,18 +21,37 @@ body, html {
padding: 2em;
}
#logo {
#about .about-img {
float: left;
max-width: 15em;
max-height: 15em;
margin: 1em;
filter: drop-shadow(5px 7px 6px rgba(0, 0, 0, 0.1));
}
#about p {
text-align: justify;
}
.header-primary {
background-color: #1b53a8;
position: relative;
max-height: 100px;
padding: 10px 0;
}
.header-primary #text-logo {
text-decoration: none;
color: #ef7900;
font-size: 2.5em;
letter-spacing: -2.8px;
font-family: "Arial Rounded MT Bold", sans-serif;
}
.header-primary {
background-color: #1b53a8;
padding: 10px;
position: relative;
.header-primary #img-logo {
height: 100%;
box-sizing: border-box;
}
.header-primary #img-logo img {
max-width: 100%;
max-height: 80px;
}
.header-primary .header-login {
position: absolute;
@@ -275,11 +294,14 @@ form button {
text-decoration: none;
}
.new-users, .statistics {
margin-top: 0 !important;
}
.new-users > div, .statistics > div {
border: 1px solid grey;
padding: 0.2em;
width: fit-content;
padding-right: 1.2em;
padding-right: 1.5em;
}
.new-users > div a, .statistics > div a {
text-decoration: none;

View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AAON;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;;AAMR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EAEE;EACA;EACA;;;AAON;EACE;EACF;EACA;EACA;;AACE;EACE;;;AAKN;EACE;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAOE;;AALA;EAEE;;;AASJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;;;AAMR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAMF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;;AAMR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAIJ;EAEE;EACA;EACA;;;AAMR;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA","file":"styles.css"}

View File

@@ -26,18 +26,44 @@ body, html {
}
}
#logo {
text-decoration: none;
color: #ef7900;
font-size: 2.5em;
letter-spacing: -2.8px;
font-family: "Arial Rounded MT Bold", sans-serif;
#about {
.about-img {
float: left;
max-width: 15em;
max-height: 15em;
margin: 1em;
filter: drop-shadow(5px 7px 6px rgba(0, 0, 0, 0.1));
}
p {
text-align: justify;
}
}
.header-primary {
background-color: #1b53a8;
padding: 10px;
position: relative;
max-height: 100px;
padding: 10px 0;
#text-logo {
text-decoration: none;
color: #ef7900;
font-size: 2.5em;
letter-spacing: -2.8px;
font-family: "Arial Rounded MT Bold", sans-serif;
}
#img-logo {
height: 100%;
box-sizing: border-box;
img {
max-width: 100%;
max-height: 80px;
}
}
.header-login {
position: absolute;
@@ -323,11 +349,13 @@ form {
}
.new-users, .statistics {
margin-top: 0 !important;
> div {
border: 1px solid grey;
padding: 0.2em;
width: fit-content;
padding-right: 1.2em;
padding: 0.2em;
width: fit-content;
padding-right: 1.5em;
a {
text-decoration: none;
}

View File

@@ -9,6 +9,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/js/all.min.js"
integrity="sha512-YUwFoN1yaVzHxZ1cLsNYJzVt1opqtVLKgBQ+wDj+JyfvOkH66ck1fleCm8eyJG9O1HpKIf86HrgTXkWDyHy9HA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="preload" href="{{ url_for('static', filename='roadrunner_header.png') }}" as="image">
{% endblock %}
</head>
<body>

View File

@@ -1,6 +1,9 @@
<div class="header">
<div class="header-primary">
<a id="logo" href="{{ url_for('main.index') }}">runnerspace</a>
<a id="img-logo" href="{{ url_for('main.index') }}">
<img src="{{ url_for('static', filename='roadrunner_header.png') }}">
</a>
{# <a id="text-logo" href="{{ url_for('main.index') }}">runnerspace</a>#}
<div class="header-login">
{% if current_user.is_authenticated %}
Logged in as
@@ -18,9 +21,9 @@
<li><a href="{{ url_for('main.feed') }}">My Feed</a></li>
<li><a href="{{ url_for('main.browse') }}">Browse</a></li>
<li><a href="{{ url_for('main.search') }}">Search</a></li>
{# <li><a href="{{ url_for('main.messages') }}">My Messages</a></li>#}
{# <li><a href="{{ url_for('main.blogs') }}">Blog</a></li>#}
{# <li><a href="{{ url_for('main.groups') }}">Groups</a></li>#}
{# <li><a href="{{ url_for('main.messages') }}">My Messages</a></li>#}
{# <li><a href="{{ url_for('main.blogs') }}">Blog</a></li>#}
{# <li><a href="{{ url_for('main.groups') }}">Groups</a></li>#}
<li><a href="{{ url_for('main.about') }}">About</a></li>
</ul>
</nav>