diff options
| author | Jan Tuomi <jans.tuomi@gmail.com> | 2017-12-22 15:00:09 +0200 |
|---|---|---|
| committer | Jan Tuomi <jans.tuomi@gmail.com> | 2017-12-22 15:00:54 +0200 |
| commit | 0fe65c416358c8e5ddf209c416e0fe46fb1bf7e9 (patch) | |
| tree | 613fbd1fba362a7f0ded9aeda7cdac258d7cbd01 /src | |
| parent | 8657d222aea2627188a991633b8aa63a3c0293bd (diff) | |
Initial commit
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/content.tag | 9 | ||||
| -rw-r--r-- | src/components/footer.tag | 71 | ||||
| -rw-r--r-- | src/components/header.tag | 10 | ||||
| -rw-r--r-- | src/components/list.tag | 7 | ||||
| -rw-r--r-- | src/components/site.tag | 5 | ||||
| -rw-r--r-- | src/components/subheading.tag | 3 | ||||
| -rw-r--r-- | src/index.html | 32 | ||||
| -rw-r--r-- | src/style.css | 39 |
8 files changed, 176 insertions, 0 deletions
diff --git a/src/components/content.tag b/src/components/content.tag new file mode 100644 index 0000000..67ea0d3 --- /dev/null +++ b/src/components/content.tag @@ -0,0 +1,9 @@ +<content> + <subheading text="Things of interest" /> + + <list items={ items } /> + + <script> + this.items = [{ title: 'My .vimrc', url: '/.vimrc'}]; + </script> +</content>
\ No newline at end of file diff --git a/src/components/footer.tag b/src/components/footer.tag new file mode 100644 index 0000000..f79e1b4 --- /dev/null +++ b/src/components/footer.tag @@ -0,0 +1,71 @@ +<footer> + <div> + <a href="https://www.linkedin.com/in/jantuomi/"> + <span class="icon"><i class="fa fa-linkedin fa-lg" aria-hidden="true" /></span> + <span class="url">linkedin.com/in/jantuomi</span> + </a> + </div> + <div> + <a href="https://t.me/jantuomi"> + <span class="icon"><i class="fa fa-telegram fa-lg" aria-hidden="true" /></span> + <span class="url">t.me/jantuomi</span> + </a> + </div> + <div> + <a href="mailto:jans.tuomi@gmail.com"> + <span class="icon"><i class="fa fa-envelope fa-lg" aria-hidden="true" /></span> + <span class="url">jans.tuomi@gmail.com</span> + </a> + </div> + + + <style> + footer { + position: fixed; + bottom: 1rem; + height: 5.6rem; + } + + a { + text-decoration: none; + white-space: nowrap; + } + + div { + margin: 0.5rem; + } + + span.icon { + text-align: center; + } + + span.icon i { + width: 2rem; + } + + span.url { + margin-left: 2rem; + } + + @media screen and (max-width: 600px) { + footer { + height: inherit; + left: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + footer div { + flex-grow: 1; + text-align: center; + } + + span.url { + display: none; + } + } + + </style> +</footer>
\ No newline at end of file diff --git a/src/components/header.tag b/src/components/header.tag new file mode 100644 index 0000000..7c2713a --- /dev/null +++ b/src/components/header.tag @@ -0,0 +1,10 @@ +<header> + <h1>Jan Tuomi</h1> + + <style> + h1 { + font-size: 3rem; + font-weight: 300; + } + </style> +</header>
\ No newline at end of file diff --git a/src/components/list.tag b/src/components/list.tag new file mode 100644 index 0000000..600603f --- /dev/null +++ b/src/components/list.tag @@ -0,0 +1,7 @@ +<list> + <ul> + <li each={ opts.items }> + <a href={ url }>{ title }</a> + </li> + </ul> +</list>
\ No newline at end of file diff --git a/src/components/site.tag b/src/components/site.tag new file mode 100644 index 0000000..1d09b0d --- /dev/null +++ b/src/components/site.tag @@ -0,0 +1,5 @@ +<site> + <header /> + <content /> + <footer /> +</site>
\ No newline at end of file diff --git a/src/components/subheading.tag b/src/components/subheading.tag new file mode 100644 index 0000000..fda52e4 --- /dev/null +++ b/src/components/subheading.tag @@ -0,0 +1,3 @@ +<subheading> + <h2>{ opts.text }</h2> +</subheading>
\ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..9492f35 --- /dev/null +++ b/src/index.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> + + <head> + <title>Jan Tuomi</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet"> + <script src="https://use.fontawesome.com/eaed73f4f5.js"></script> + <link rel="stylesheet" href="style.css"> + </head> + + <body> + <site></site> + + <!-- riot tags --> + <script src="components/site.tag" type="riot/tag"></script> + <script src="components/header.tag" type="riot/tag"></script> + <script src="components/footer.tag" type="riot/tag"></script> + <script src="components/content.tag" type="riot/tag"></script> + <script src="components/list.tag" type="riot/tag"></script> + <script src="components/subheading.tag" type="riot/tag"></script> + + <!-- scripts we need --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script> + <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script> + + <!-- mount this app --> + <script> riot.mount('*') </script> + </body> + +</html> diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..d2738f2 --- /dev/null +++ b/src/style.css @@ -0,0 +1,39 @@ +*, *:before, *:after { + box-sizing: inherit; +} + +html { + font-family: 'Lato', sans-serif; + font-size: 20px; + + background-color: #D9E0D7; + box-sizing: border-box; +} + +body { + border: 0; + + max-width: 600px; + margin-left: auto; + margin-right: auto; + + padding: 1rem; +} + +@media screen and (max-width: 600px) { + body { + text-align: center; + } + + ul { + padding: 0; + } + + li { + list-style: none; + } +} + +a { + color: #570C3D; +}
\ No newline at end of file |