add logo and page titles

This commit is contained in:
Ilion Beyst 2022-11-03 21:49:45 +01:00
parent b1f8062b85
commit 698ae8d15e
6 changed files with 110 additions and 20 deletions

View file

@ -1,2 +1,2 @@
name = "simplebot" command = "python simplebot.py"
command = ["python", "../simplebot/simplebot.py"] working_directory = "../simplebot"

View file

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; import { page } from "$app/stores";
export let href: string; export let href: string;
$: isActive = $page.url.pathname == href; $: isActive = $page.url.pathname == href;
</script> </script>
<a class="nav-tab" {href} class:active={isActive}> <a class="nav-tab" {href} class:active={isActive}>
<slot></slot> <slot />
</a> </a>
<style lang="scss"> <style lang="scss">

View file

@ -15,12 +15,17 @@
}); });
</script> </script>
<svelte:head>
<title>Planetwars</title>
</svelte:head>
<div class="outer-container"> <div class="outer-container">
<div class="navbar" class:expanded={isExpanded}> <div class="navbar" class:expanded={isExpanded}>
<div class="navbar-left"> <div class="navbar-left">
<div class="navbar-header"> <a href="/" class="navbar-header">
<a href="/">PlanetWars</a> <img alt="logo" src="/ship.svg" height="32px'" />
</div> PlanetWars
</a>
<div class="navbar-item"> <div class="navbar-item">
<a href="/editor">Editor</a> <a href="/editor">Editor</a>
</div> </div>
@ -30,17 +35,14 @@
<div class="navbar-item"> <div class="navbar-item">
<a href="/docs/rules">How to play</a> <a href="/docs/rules">How to play</a>
</div> </div>
<div class="navbar-divider"></div> <div class="navbar-divider" />
<div class="navbar-item"> <div class="navbar-item">
<UserControls /> <UserControls />
</div> </div>
</div> </div>
<!-- <div class="navbar-right"> <!-- <div class="navbar-right">
</div> --> </div> -->
<div class="navbar-expand" on:click={toggleExpanded}> <div class="navbar-expand" on:click={toggleExpanded}>expand</div>
expand
</div>
</div> </div>
<slot /> <slot />
</div> </div>
@ -48,7 +50,7 @@
<style lang="scss" global> <style lang="scss" global>
@import "src/styles/global.scss"; @import "src/styles/global.scss";
$navbarHeight: 48px; $navbarHeight: 52px;
.outer-container { .outer-container {
width: 100vw; width: 100vw;
@ -59,6 +61,7 @@
.navbar { .navbar {
height: $navbarHeight; height: $navbarHeight;
// height: 52px;
background-color: $bg-color; background-color: $bg-color;
border-bottom: 1px solid; border-bottom: 1px solid;
flex-shrink: 0; flex-shrink: 0;
@ -70,6 +73,7 @@
.navbar-left { .navbar-left {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center;
} }
.navbar-right { .navbar-right {
@ -82,13 +86,20 @@
.navbar-header { .navbar-header {
height: $navbarHeight; height: $navbarHeight;
padding-top: 12px;
padding-right: 24px; padding-right: 24px;
display: flex;
align-items: center;
gap: 12px;
} }
.navbar-header a { .navbar-header img {
display: block;
}
.navbar-header {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
font-weight: 500;
text-decoration: none; text-decoration: none;
} }
.navbar-item { .navbar-item {
@ -104,10 +115,9 @@
.navbar-expand { .navbar-expand {
color: white; color: white;
// margin: auto 0px;
display: none; display: none;
font-size: 16px; font-size: 16px;
padding-top: 14px; height: $navbarHeight;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.navbar-item { .navbar-item {
@ -124,6 +134,7 @@
.navbar.expanded .navbar-left { .navbar.expanded .navbar-left {
flex-direction: column; flex-direction: column;
align-items: flex-start;
} }
.navbar.expanded .navbar-item { .navbar.expanded .navbar-item {
@ -140,7 +151,8 @@
} }
.navbar-expand { .navbar-expand {
display: block; display: flex;
align-items: center;
} }
} }
</style> </style>

View file

@ -17,12 +17,16 @@
<script lang="ts"> <script lang="ts">
import NavTab from "$lib/components/NavTab.svelte"; import NavTab from "$lib/components/NavTab.svelte";
import { currentUser } from "$lib/stores/current_user"; import { currentUser } from "$lib/stores/current_user";
export let bot; export let bot;
export let owner; export let owner;
</script> </script>
<svelte:head>
<title>{bot["name"]}</title>
</svelte:head>
<div class="header"> <div class="header">
<div class="header-title-line"> <div class="header-title-line">
<h1 class="bot-name">{bot["name"]}</h1> <h1 class="bot-name">{bot["name"]}</h1>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View file

@ -0,0 +1,74 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="256"
height="256"
viewBox="0 0 67.733334 67.733335"
version="1.1"
id="svg8"
sodipodi:docname="ship.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.5547069"
inkscape:cx="84.581859"
inkscape:cy="96.159603"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1048"
inkscape:window-x="0"
inkscape:window-y="32"
inkscape:window-maximized="1"
gridtolerance="10"
inkscape:pagecheckerboard="0"
units="px"
showguides="false">
<inkscape:grid
type="xygrid"
id="grid894"
originx="-160.50747"
originy="118.75037" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(68.546255,1.4712222)">
<path
style="opacity:1;fill:#0080ff;fill-opacity:1;stroke:none;stroke-width:2.62496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -1.1653786,-1.1187634 c 0,0 -19.8066244,-3.951813 -38.3679054,14.6094684 -5.638557,5.638556 -9.079741,12.298673 -9.944061,18.242693 -8.171129,0.01575 -17.778639,2.559512 -19.011539,6.258199 -0.74245,2.227353 5.93962,10.394311 7.42452,10.394311 3.24176,4e-6 8.709863,-4.641736 12.41807,-8.122587 0.570451,1.375968 1.37667,2.613603 2.43095,3.66788 1.054279,1.054281 2.291914,1.860502 3.667882,2.430951 -3.480854,3.70821 -8.122589,9.176312 -8.122591,12.418075 0,1.484901 8.16696,8.166962 10.394318,7.424513 3.698681,-1.232896 6.242428,-10.8404 6.258196,-19.011536 5.94402,-0.86432 12.604136,-4.305506 18.242693,-9.94406 C 2.7864384,18.687863 -1.1653786,-1.1187634 -1.1653786,-1.1187634 Z m -7.184953,7.184956 c 0,0 2.691421,13.4887954 -9.9492834,26.1294974 -6.981267,6.981265 -16.262764,9.018566 -20.730775,4.550557 -4.46801,-4.46801 -2.430709,-13.749507 4.550559,-20.730773 C -21.839127,3.3747706 -8.3503346,6.0661926 -8.3503316,6.0661926 Z"
id="path4600" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3 KiB