Verified Commit 495c202e authored by insert's avatar insert

Work on website design.

parent 4dd81316
......@@ -5,11 +5,39 @@ html, body {
margin: 0;
}
:global(.prettyprint) {
margin: 0;
padding: 1em !important;
}
.container {
margin: auto;
max-width: 640px;
}
.md {
img {
display: block;
margin: auto;
}
h6 {
text-align: center;
font-size: 0.8em;
margin: 0;
margin-bottom: 1em;
}
}
.hero {
width: 100%;
height: 480px;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.overline {
font-weight: 300;
font-size: 0.9em;
......@@ -22,6 +50,32 @@ img {
h1 {
font-weight: 700;
font-size: 4em;
}
h2 {
font-weight: 700;
font-size: 2em;
}
h3 {
font-weight: 700;
font-size: 1.6em;
}
h4 {
font-weight: 500;
font-size: 1.4em;
}
h5 {
font-weight: 500;
font-size: 1.2em;
}
h6 {
font-weight: 500;
font-size: 1em;
}
em {
......@@ -31,3 +85,8 @@ em {
font-style: normal;
color: white;
}
hr {
border: none;
border-top: 1px dotted gray;
}
......@@ -58,12 +58,25 @@ export function Header(props: { title: string }) {
</Head>
<div className={styles.header}>
<div className={styles.innerHeader}>
<h1
onMouseEnter={() => animateTo(strings[Math.floor(Math.random() * strings.length)])}
onMouseLeave={() => animateTo("insrt")}>
&gt;{text}<span className={styles.blink}>_</span></h1>
<div>
<h2
onMouseEnter={() => animateTo(strings[Math.floor(Math.random() * strings.length)])}
onMouseLeave={() => animateTo("insrt")}>
&gt;{text}<span className={styles.blink}>_</span></h2>
</div>
<div></div>
<span>projects</span>
<span>posts</span>
<span>gitlab</span>
</div>
</div>
</Fragment>
);
}
export function Footer() {
return (
<div className={styles.footer}>&copy; { new Date().getFullYear() } Paul Makles</div>
);
}
.header {
width: 100%;
user-select: none;
border-bottom: 2px dotted rgba(25, 25, 25, 0.14);
margin-bottom: 1em;
}
.innerHeader {
display: flex;
max-width: 640px;
margin: auto;
padding: 0.7em 0;
> h1 {
> :nth-child(1) > h2 {
margin: 0;
min-width: 108px;
}
> :nth-child(2) {
flex-grow: 1;
}
> span {
padding: 0 .6em;
line-height: 40px;
font-weight: 600;
}
}
......@@ -24,3 +38,15 @@
opacity: 0;
}
}
.footer {
text-align: center;
font-size: 0.9em;
font-weight: 300;
padding: 3em;
margin: auto;
border-top: 2px dotted rgba(25, 25, 25, 0.14);
margin-top: 1em;
}
import { NextPage } from 'next'
import { global, Header } from '../components/global';
const Page: NextPage = () => (
<main>
<Header title="design" />
<div className={global.container}>
webiste title idk
<br/><br/><br/>
<p className={global.overline}>this is an overline &middot; 22nd January 2020</p>
<h1>doing cool things with <em>css</em> adn yes</h1>
<p>this is a paragraph of text </p>
</div>
</main>
)
export default Page;
\ No newline at end of file
import { NextPage } from 'next'
import styles from './index.scss';
import { global, Header, Footer } from '../components/global';
const Page: NextPage = () => (
<main>
<head>
<title>Paul Makles – insrt.uk</title>
</head>
<body>
<h1 className={styles.title}>hello!</h1>
</body>
<Header title="Paul Makles" />
<div className={global.container}>
this site is a work in progress<br/>
<a href="/post/website-design">see design reference post</a>
</div>
<Footer />
</main>
)
......
......@@ -5,7 +5,7 @@ import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import ReactUtterences from 'react-utterances'
import { global, Header } from '../../components/global';
import { global, Header, Footer } from '../../components/global';
interface PostProps {
data: {
......@@ -14,6 +14,7 @@ interface PostProps {
overline: string,
published: string,
hero?: string,
'hero-wide'?: string,
},
content: string,
......@@ -26,6 +27,19 @@ const Page: NextPage = (props: PostProps) => {
return <Error statusCode={404} />
let { slug, title, overline, published, hero } = props.data;
let heroWide = props.data['hero-wide'];
useEffect(() => {
// load prettifier
const classInjector = document.createElement('script');
classInjector.innerHTML = `Array.from(document.querySelectorAll('code')).forEach(x => x.parentNode.tagName === 'PRE' && (x.setAttribute('source', x.innerHTML) || x.parentNode.classList.add('prettyprint')))`;
document.body.appendChild(classInjector);
const styleInjector = document.createElement('script');
styleInjector.src = 'https://cdn.jsdelivr.net/gh/google/[email protected]/loader/run_prettify.js';
styleInjector.async = true;
document.body.appendChild(styleInjector);
}, []);
return (
<main>
......@@ -33,16 +47,21 @@ const Page: NextPage = (props: PostProps) => {
<div className={global.container}>
<p className={global.overline}>{overline} &middot; {published}</p>
{ hero && <img src={hero} /> }
<ReactMarkdown escapeHtml={false} skipHtml={false} source={props.content} />
{/*<ReactUtterences repo="insertish/comments" type="pathname" />*/}
</div>
{ heroWide && <div style={{ backgroundImage: `url('${heroWide}')` }} className={global.hero}></div> }
<div className={global.container}>
<ReactMarkdown className={global.md} escapeHtml={false} skipHtml={false} source={props.content} />
<hr/>
{<ReactUtterences repo="insertish/comments" type="pathname" />}
</div>
<Footer />
<link href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/atelier-cave-dark.min.css" rel="stylesheet" type="text/css" />
</main>
)
}
import { readFileSync, existsSync } from 'fs';
import { ReactChild } from 'react'
import { ReactChild, useEffect } from 'react'
Page.getInitialProps = async context => {
const { slug } = context.query;
......
---
slug: how-do-i-make-a-website
title: aaaaaaaaaaaaaaaa
overline: A quick introduction to a, b, and c.
published: 22nd January 2020
hero: https://upload.wikimedia.org/wikipedia/en/thumb/b/bc/Garfield_the_Cat.svg/1200px-Garfield_the_Cat.svg.png
---
# how do i make a *website* i dont know
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?
```
test
```
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quo reiciendis ipsa, fugit qui aut totam sint minus deserunt nihil facere ex, eum velit libero aliquam, assumenda animi provident delectus?
---
slug: website-design
title: Website Design
overline: This is an overline.
published: 23nd January 2020
hero-wide: /hero.png
---
## reference for website *design*
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Morbi tincidunt ornare massa eget. Habitasse platea dictumst vestibulum rhoncus. Felis eget nunc lobortis mattis aliquam faucibus purus. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Eu lobortis elementum nibh tellus. Consectetur lorem donec massa sapien faucibus et molestie ac. Ipsum a arcu cursus vitae congue mauris. Ipsum dolor sit amet consectetur adipiscing.
### paragraphs and text
---
This is how **bold** text looks.
This is text with *emphasis*.
This text has `inline code`.
Vitae tortor condimentum lacinia quis vel eros donec. **This is bold text.** Nisi vitae suscipit tellus mauris. Gravida neque convallis a cras semper auctor neque vitae tempus. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Diam sit amet nisl __suscipit adipiscing__. Urna nunc id cursus metus aliquam eleifend mi in. Dignissim enim sit amet venenatis urna cursus. Lectus arcu __bibendum__ at varius. Purus in massa tempor nec.
### code blocks
---
Code blocks are automatically prettified, specify a language at the beginning of the fence. Prettification is done using Google's [code-prettify](https://github.com/google/code-prettify).
```typescript
// this is a code block
async function add(a: number, b: number) {
return a + b;
}
async function square(x: number) {
return x ** 2;
}
console.log("(4 ** 2) + 6 =", ${add(square(4), 6)});
```
### headings
---
There are different headings, h6 is reserved for captions.
# h1 title
Velit scelerisque in dictum non. Nunc sed id semper risus in hendrerit. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Varius vel pharetra vel turpis nunc eget lorem. Velit ut tortor pretium viverra. Et malesuada fames ac turpis egestas maecenas.
## h2 heading
Eget nunc scelerisque viverra mauris in aliquam. Egestas tellus rutrum tellus pellentesque eu tincidunt.
### h3 heading
Nunc sed blandit libero volutpat sed cras ornare arcu dui. Aliquet enim tortor at auctor. Egestas maecenas pharetra convallis posuere morbi.
#### h4 subtitle
Nisl purus in mollis nunc sed id semper risus. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Mauris a diam maecenas sed. Elementum nisi quis eleifend quam adipiscing vitae proin.
##### h5 subtitle
Lectus magna fringilla urna porttitor rhoncus dolor purus non. Est sit amet facilisis magna etiam.
#### h4 subtitle
Euismod lacinia at quis risus sed. Et netus et malesuada fames ac. Posuere morbi leo urna molestie at elementum eu.
### images and captions
---
All images within markdown blocks are automatically centred, use h5 to caption them.
![hopper](/hopper.png)
###### Minecraft hopper (source: Minecraft Wiki)
### lists and items
Here is a simpled unordered list:
- these translate 1:1 from markdown
- and can be used anywhere
- you can also **style** them
Likewise, an ordered list:
1. This is the first element.
1. The second.
1. And the ultimate element.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment