From 1c02ee2f5136fd56bb480344af59e735974697ff Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Thu, 26 Jan 2017 17:09:56 +0100 Subject: Create new layout Signed-off-by: Noah Loomans --- style/_header.scss | 48 +++++++++++++++++ style/_markdown.scss | 16 ++++++ style/_normalize.scss | 2 +- style/_projects.scss | 27 ++++++++++ style/_responsive.scss | 25 +++++++++ style/main.scss | 144 +++++++------------------------------------------ 6 files changed, 135 insertions(+), 127 deletions(-) create mode 100644 style/_header.scss create mode 100644 style/_markdown.scss create mode 100644 style/_projects.scss create mode 100644 style/_responsive.scss (limited to 'style') diff --git a/style/_header.scss b/style/_header.scss new file mode 100644 index 0000000..a5a33d4 --- /dev/null +++ b/style/_header.scss @@ -0,0 +1,48 @@ +header { + display: flex; + max-width: $page-width; + margin: 0 auto; + + .logo-container { + max-width: $page-width; + height: 100%; + margin: 0 auto; + position: fixed; + display: flex; + flex-direction: column; + + .dotted-line { + border-style: dotted; + border-image-source: url('/assets/dots.svg'); + border-image-slice: 33% 33%; + border-image-repeat: round; + border-width: 0 8px 0 0; + margin-top: 32px; + width: 50%; + flex-grow: 1; + } + } + + a { + text-decoration: none; + } + + .logo { + width: $logo-width; + height: $logo-width; + border-radius: 50%; + } + + .title { + padding-left: $logo-width + $page-padding-between; + height: $logo-width; + display: flex; + flex-direction: column; + justify-content: center; + + .name { + font-weight: bold; + font-size: 1.5em; + } + } +} diff --git a/style/_markdown.scss b/style/_markdown.scss new file mode 100644 index 0000000..57d17dd --- /dev/null +++ b/style/_markdown.scss @@ -0,0 +1,16 @@ +h1, h2, h3 { + font-size: 1em; + font-weight: bold; +} + +h1::before { + content: '# '; +} + +h2::before { + content: '## '; +} + +h3::before { + content: '### '; +} diff --git a/style/_normalize.scss b/style/_normalize.scss index 01ee697..9b77e0e 100644 --- a/style/_normalize.scss +++ b/style/_normalize.scss @@ -458,4 +458,4 @@ template { [hidden] { display: none; -} \ No newline at end of file +} diff --git a/style/_projects.scss b/style/_projects.scss new file mode 100644 index 0000000..fa0ba51 --- /dev/null +++ b/style/_projects.scss @@ -0,0 +1,27 @@ +.projects { + display: flex; + .project { + padding: 8px; + color: black; + text-decoration: none; + background-color: #ececec; + margin: 8px; + outline: none; + border-radius: 2px; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + transition: all 0.3s cubic-bezier(.25,.8,.25,1); + + &:hover, &:focus { + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); + } + + img { + width: 100%; + } + + header { + padding: 8px; + font-style: italic; + } + } +} diff --git a/style/_responsive.scss b/style/_responsive.scss new file mode 100644 index 0000000..bf35644 --- /dev/null +++ b/style/_responsive.scss @@ -0,0 +1,25 @@ +@media screen and (max-width: 750px) { + main, footer { + padding-left: 0 !important; + } + + .dotted-line { + display: none; + } + + header { + .logo { + width: 100px; + height: 100px; + } + + .title { + height: 100px; + padding-left: 140px; + } + + .logo-container { + position: absolute; + } + } +} diff --git a/style/main.scss b/style/main.scss index 884713c..9641e7a 100644 --- a/style/main.scss +++ b/style/main.scss @@ -1,148 +1,40 @@ --- --- +$page-width: 840px; +$logo-width: 150px; +$page-padding-between: 40px; + @import 'normalize'; +@import 'header'; +@import 'markdown'; +@import 'projects'; +@import 'responsive'; * { box-sizing: border-box; } body { - background-color: #31363b; font-family: 'Roboto Mono', monospace; margin: 16px; + color: #212121; word-wrap: break-word; } -.logo { - background-image: url(/assets/logo.png); - height: 144px; - background-repeat: no-repeat; - background-position: center center; - background-size: contain; - zoom: 0.6; - margin-top: 64px; - margin-bottom: 64px; -} - -.page { - max-width: 700px; +main, footer { + padding-left: $logo-width + $page-padding-between; + max-width: $page-width; margin: 0 auto; - background-color: white; -} - -nav { - background-color: #93a1a1; - overflow-y: auto; - - ul { - display: flex; - margin: 0; - padding: 0; - } - - ul::before, ul::after { - content: ''; - margin: auto; - } - - li { - list-style: none; - padding: 8px; - - a { - text-decoration: none; - color: black; - padding: 8px; - display: inline-block; - &:hover, &:focus { - background-color: #b8c5c5; - outline: none; - } - } - } - - li.seperator { - padding: 16px; - display: inline-block; - } } main { - padding: 16px; -} - -h1, h2, h3 { - font-size: 1em; - font-weight: bold; -} - -h1::before { - content: '# '; -} - -h2::before { - content: '## '; -} - -h3::before { - content: '### '; -} - -main ul { - padding: 0; - - li { - list-style: none; - padding-left: 30px; - position: relative; - - &::before { - content: "\00a0- "; - position: absolute; - top: 0; - left: 0; - } - } -} - -.projects { - display: flex; - - .project { - padding: 8px; - color: black; - text-decoration: none; - background-color: #93a1a1; - margin: 8px; - outline: none; - - &:hover, &:focus { - background-color: #b8c5c5; - } - - img { - width: 100%; - } - - header { - padding: 8px; - font-style: italic; - } - } -} - -@media screen and (max-width: 425px) { - .projects { - flex-wrap: wrap; - } + margin-top: 32px; } footer { - color: rgba(147, 161, 161, 0.5); - font-size: 0.8em; - max-width: 300px; - margin: 0 auto; - margin-top: 16px; - padding: 16px; -} \ No newline at end of file + color: #757575; + font-style: italic; + padding-top: 16px; + padding-bottom: 16px; +} -- cgit v1.1