From 13ddaef4689ce7ff315113e17e6ab49727ca7e88 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Fri, 14 Jul 2017 20:45:25 +0200 Subject: Add random project layout --- _layouts/random-project.html | 21 +++++++++++++++ random-projects/example.html | 7 +++++ style/_random-project.scss | 62 ++++++++++++++++++++++++++++++++++++++++++++ style/main.scss | 5 ++++ 4 files changed, 95 insertions(+) create mode 100644 _layouts/random-project.html create mode 100644 random-projects/example.html create mode 100644 style/_random-project.scss 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 @@ +--- +--- + + + {% include head.html %} + +
+ +
Random Project
+
+ Go to main site +
+
+
+ {{ content }} +
+
+ + 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/ +--- +
+ This is an example of a random project. +
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; +} -- cgit v1.1