he4et/huge-link
1
0
Fork 0
mirror of https://github.com/He4eT/huge-link.git synced 2026-05-04 16:37:23 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add styles

Browse source
This commit is contained in:
He4eT 2020-12-18 00:09:42 +05:00
commit 49a57910dd
6 changed files with 118 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/index.js
View file

@ -1,4 +1,6 @@
import './style/typography.css'
import './style'
import App from './app'
export default App

5
src/routes/editor/index.js
View file

@ -1,16 +1,21 @@
import {h} from 'preact'
import {Link} from 'preact-router/match'
import style from './style.css'
const Editor = ({markdown, setMarkdown}) => (
<section>
<textarea
class={ style.textarea }
onInput={ ({target}) => setMarkdown(target.value) }>
{ markdown }
</textarea>
<nav>
<Link href='/preview'>
Preview
</Link>
</nav>
</section>)
export default Editor

14
src/routes/editor/style.css Normal file
View file

@ -0,0 +1,14 @@
.textarea {
font-family: 'Fira Code', monospace;
display: block;
resize: vertical;
min-height: 50vh;
width: 100%;
box-sizing: border-box;
outline: none;
border: 4px solid hsl(0, 0%, 0%, 0.7);
padding: 0.7em 1em;
margin-bottom: 1em;
}

80
src/style/index.css
View file

@ -1,3 +1,81 @@
html, body {
/* Links */
a {
border-bottom: 2px solid hsl(0, 0%, 0%, 0.2);
color: inherit;
text-decoration: none;
}
a:focus {
background-color: hsl(0, 0%, 0%, 0.1);
}
a:hover {
border-color: currentColor;
}
/* Code and quotes*/
pre, blockquote {
border-left: 4px solid hsl(0, 0%, 0%, 0.7);
margin-left: 0;
padding-left: 1.0rem;
}
pre {
background-color: hsl(0, 0%, 0%, 0.04);
overflow-x: auto;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
pre > code {
background-color: unset;
padding: 0;
}
code {
font-family: 'Fira Code', monospace;
background-color: hsl(0, 0%, 0%, 0.04);
padding: 0.2rem 0.4rem;
}
/* Lists */
ul {
list-style: square;
}
/* Layout */
main {
box-sizing: content-box;
max-width: 45rem;
padding: 3% 5%;
}
header ul {
display: flex;
flex-wrap: wrap;
font-size: 1.5rem;
list-style: none;
margin: 0;
margin-bottom: 3%;
}
header li {
margin-bottom: 0;
}
header li::after {
content: ' / ';
white-space: pre;
}
header li:last-child::after {
content: '';
}
footer {
color: hsl(0, 0%, 0%, 0.6);
}

1
src/style/typography.css Normal file
View file

File diff suppressed because one or more lines are too long

1
src/template.html
View file

@ -7,6 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans+Condensed:wght@700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap">
<% preact.headEnd %>
</head>
<body>