balsoft/ligo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated logo and favicon

Browse Source
This commit is contained in:
Maksym Bykovskyy 2020-03-23 16:39:11 -07:00
parent 5eada8c5e4
commit cb592dfd9c
4 changed files with 76 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
tools/webide/packages/client/public/circle.svg Normal file
View File

@ -0,0 +1,27 @@
<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="180" height="180">
<path d="M180 90C180 139.706 139.706 180 90 180C40.2944 180 0 139.706 0 90C0 40.2944 40.2944 0 90 0C139.706 0 180 40.2944 180 90Z" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<path d="M0 0H89.8213C139.625 0 179.998 40.3736 179.998 90.1769V180H0V0Z" fill="#3AA0FF"/>
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="180" height="180">
<path d="M0 0H89.8213C139.625 0 179.998 40.3736 179.998 90.1769V180H0V0Z" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask1)">
<path d="M-97.3224 277.21L218.678 -38.7931L358.935 101.465L42.934 417.468L-97.3224 277.21Z" fill="#2888FF"/>
</g>
<path d="M63.2759 116.724V0H0V116.724V180H63.2759H179.998V116.724H63.2759Z" fill="#0E74FF"/>
<mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="180" height="180">
<path d="M63.2759 116.724V0H0V116.724V180H63.2759H179.998V116.724H63.2759Z" fill="black"/>
</mask>
<g mask="url(#mask2)">
<path d="M-77.562 257.039L238.438 -58.9644L378.695 81.2934L62.6944 397.297L-77.562 257.039Z" fill="#0540FF"/>
</g>
<mask id="mask3" mask-type="alpha" maskUnits="userSpaceOnUse" x="90" y="0" width="90" height="91">
<path d="M90.0007 0.000366211C139.706 0.000366211 180 40.2952 180 90.0004H90.0007V0.000366211Z" fill="#AAA4A4"/>
</mask>
<g mask="url(#mask3)">
<path d="M125.584 -44.9172H224.893V54.3931H125.584V-44.9172Z" fill="#B4DBFF"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
tools/webide/packages/client/public/index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo.svg" /> <link rel="icon" href="%PUBLIC_URL%/circle.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="The LIGO Playground for learning LIGO" /> <meta name="description" content="The LIGO Playground for learning LIGO" />

39
tools/webide/packages/client/public/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

34
tools/webide/packages/client/src/components/header.tsx
View File

@ -1,13 +1,14 @@
import React from 'react'; import React from 'react';
import styled, { css } from 'styled-components'; import styled from 'styled-components';
const Container = styled.div` const Container = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.2em 1em; padding: 0.5em 1em;
font-family: 'DM Sans', 'Open Sans', sans-serif; font-family: 'DM Sans', 'Open Sans', sans-serif;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
`; `;
@ -16,42 +17,27 @@ const Group = styled.div`
align-items: center; align-items: center;
`; `;
const Logo = styled.div` const Logo = styled.img`
font-size: 1.25em; height: 32px;
`; `;
const Link = styled.a` const Link = styled.a`
text-decoration: none; text-decoration: none;
color: black; color: black;
padding: 0.5em 1em; padding: 0em 1em;
&:hover { &:hover {
color: #3aa0ff; color: #0e74ff;
} }
${(props: { versionStyle?: boolean }) =>
props.versionStyle &&
css`
background-color: #efefef;
font-weight: 600;
margin-left: 3em;
&:hover {
color: black;
}
`}
`; `;
export const HeaderComponent = () => { export const HeaderComponent = () => {
return ( return (
<Container> <Container>
<Group> <Group>
<Link href="https://ligolang.org"> <a href="https://ligolang.org">
<Logo>LIGO</Logo> <Logo src="logo.svg" />
</Link> </a>
<Link versionStyle href="https://ligolang.org/versions">
next
</Link>
</Group> </Group>
<Group> <Group>
<Link href="https://ligolang.org/docs/intro/installation">Docs</Link> <Link href="https://ligolang.org/docs/intro/installation">Docs</Link>