diff options
| author | Noah Loomans <noahloomans@gmail.com> | 2017-07-14 20:45:25 +0200 |
|---|---|---|
| committer | Noah Loomans <noahloomans@gmail.com> | 2017-07-14 20:45:25 +0200 |
| commit | 13ddaef4689ce7ff315113e17e6ab49727ca7e88 (patch) | |
| tree | af050c3f9c8d03135affaba446f64b878665d4e7 | |
| parent | 6b92ee4dd90c0fe900c5fd58f2f073b989684efb (diff) | |
Add random project layout
| -rw-r--r-- | _layouts/random-project.html | 21 | ||||
| -rw-r--r-- | random-projects/example.html | 7 | ||||
| -rw-r--r-- | style/_random-project.scss | 62 | ||||
| -rw-r--r-- | style/main.scss | 5 |
4 files changed, 95 insertions, 0 deletions
diff --git a/_layouts/random-project.html b/_layouts/random-project.html new file mode 100644 index 0000000..ecf3691 --- /dev/null +++ b/_layouts/random-project.html @@ -0,0 +1,21 @@ +--- +--- +<!DOCTYPE html> +<html> + {% include head.html %} + <body class="random-project"> + <div class="random-project__header"> + <div class="logo"> + <img src="/assets/face.jpg" alt="Noah Loomans" class="logo"> + </div> + <div class="text">Random Project</div> + <div class="grow"></div> + <a href="/">Go to main site</a> + </div> + <div class="page"> + <main> + {{ content }} + </main> + </div> + </body> +</html> diff --git a/random-projects/example.html b/random-projects/example.html new file mode 100644 index 0000000..b4efe2d --- /dev/null +++ b/random-projects/example.html @@ -0,0 +1,7 @@ +--- +layout: random-project +permalink: /random-project/example/ +--- +<div> + This is an example of a random project. +</div> diff --git a/style/_random-project.scss b/style/_random-project.scss new file mode 100644 index 0000000..3ddcf04 --- /dev/null +++ b/style/_random-project.scss @@ -0,0 +1,62 @@ +body.random-project { + margin: 0; +} + +.random-project__header { + display: flex; + align-items: center; + padding: 16px; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + + .logo img { + width: 80px; + height: 80px; + border-radius: 50%; + margin-left: 32px; + } + + .text { + margin-left: 32px; + font-size: 2em; + } + + a { + margin-right: 32px; + border: 1px #1a0dab solid; + border-radius: 4px; + padding: 16px 32px; + } +} + +@media screen and (max-width: 768px) { + .random-project__header { + .logo img { + width: 60px; + height: 60px; + } + + .text { + font-size: 1.5em; + } + } +} + +@media screen and (max-width: 625px) { + .random-project__header { + .text { + display: none; + } + } +} + +@media screen and (max-width: 400px) { + .random-project__header { + .logo, .text, .grow { + display: none; + } + + a { + margin: 0 auto; + } + } +} diff --git a/style/main.scss b/style/main.scss index ad36906..bc913c5 100644 --- a/style/main.scss +++ b/style/main.scss @@ -10,6 +10,7 @@ $page-padding-between: 40px; @import 'markdown'; @import 'projects'; @import 'responsive'; +@import 'random-project'; * { box-sizing: border-box; @@ -57,3 +58,7 @@ a { background-color: #ececec; } } + +.grow { + flex-grow: 1; +} |