mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-13 01:24:36 +02:00
Tweak the header
This commit is contained in:
Phuoc Nguyen
@@ -4,6 +4,7 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
--background-color: #e7d900;
|
||||
--text-color: #1e1d6e;
|
||||
}
|
||||
body {
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const Github: React.FC<{}> = () => {
|
||||
return (
|
||||
<a href="https://github.com/phuoc-ng/csslayout" rel="noopener noreferrer" target="_blank">
|
||||
<svg
|
||||
className="z-10"
|
||||
width="80"
|
||||
height="80"
|
||||
viewBox="0 0 250 250"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
right: 0,
|
||||
top: 0,
|
||||
}}
|
||||
aria-hidden={true}
|
||||
>
|
||||
<path d={`M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z`} fill="#00449E" />
|
||||
<path
|
||||
d={`M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6
|
||||
C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2`}
|
||||
fill="#ffffff"
|
||||
style={{ transformOrigin: '130px 106px' }}
|
||||
/>
|
||||
<path
|
||||
d={`M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6
|
||||
C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1
|
||||
C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6
|
||||
C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5
|
||||
C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5
|
||||
C139.8,137.7 141.6,141.9 141.8,141.8 Z`}
|
||||
fill="#ffffff"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default Github;
|
||||
27
client/layouts/Header.tsx
Normal file
27
client/layouts/Header.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
|
||||
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import './header.css';
|
||||
|
||||
const Header: React.FC<{}> = () => {
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="container">
|
||||
<div className="header__nav">
|
||||
<Link to="/">
|
||||
<img src="/assets/logo.svg" />
|
||||
</Link>
|
||||
<Link to="/patterns">Patterns</Link>
|
||||
<a href="https://github.com/phuoc-ng/csslayout">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -3,22 +3,20 @@
|
||||
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
|
||||
*/
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import Footer from './Footer';
|
||||
import Github from './Github';
|
||||
import Header from './Header';
|
||||
|
||||
const Layout: React.FC<{}> = ({ children }) => {
|
||||
useEffect(() => {
|
||||
React.useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Github />
|
||||
<div className="ml-auto mr-auto max-w-4xl mb-12">
|
||||
{children}
|
||||
</div>
|
||||
<Header />
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
||||
16
client/layouts/header.css
Normal file
16
client/layouts/header.css
Normal file
@@ -0,0 +1,16 @@
|
||||
.header {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.header__nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.header__nav a:first-child {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
.header__nav a {
|
||||
color: var(--text-color);
|
||||
margin-left: 1rem;
|
||||
}
|
||||
16
public/assets/logo.svg
Normal file
16
public/assets/logo.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64" viewBox="0 0 1024 1024">
|
||||
<g transform="translate(512 512) scale(8.24 8.24)">
|
||||
<line x1="-46" y1="0" x2="46" y2="0" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 -32.49)"/>
|
||||
<line x1="0" y1="-32.489999999999995" x2="0" y2="32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(46 0)"/>
|
||||
<line x1="46" y1="0" x2="-46" y2="0" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 32.49)"/>
|
||||
<line x1="0" y1="32.489999999999995" x2="0" y2="-32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-46 0)"/>
|
||||
<line x1="0" y1="-32.489999999999995" x2="0" y2="32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 0)"/>
|
||||
<line x1="-23" y1="0" x2="23" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-23 0)"/>
|
||||
<line x1="0" y1="-16.244999999999997" x2="0" y2="16.244999999999997" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-23 16.245)"/>
|
||||
<line x1="11.5" y1="0" x2="-11.5" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-34.5 16.245)"/>
|
||||
<line x1="0" y1="-8.122499999999995" x2="0" y2="8.122499999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-34.5 24.3675)"/>
|
||||
<line x1="5.75" y1="0" x2="-5.75" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-40.25 24.367)"/>
|
||||
<line x1="0" y1="-4.061499999999995" x2="0" y2="4.061499999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-40.25 28.4285)"/>
|
||||
<line x1="2.875" y1="0" x2="-2.875" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-43.125 28.429)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
Reference in New Issue
Block a user