From 3bfa83334855d04218f4df61001088c23646b1f4 Mon Sep 17 00:00:00 2001 From: Emiel Hollander Date: Sun, 28 Oct 2018 14:12:32 +0100 Subject: Initial commit --- assets/scss/hallo.scss | 3 +++ assets/scss/hallo/_base.scss | 46 +++++++++++++++++++++++++++++++++++++++ assets/scss/hallo/_layout.scss | 40 ++++++++++++++++++++++++++++++++++ assets/scss/hallo/_variables.scss | 14 ++++++++++++ 4 files changed, 103 insertions(+) create mode 100644 assets/scss/hallo.scss create mode 100644 assets/scss/hallo/_base.scss create mode 100644 assets/scss/hallo/_layout.scss create mode 100644 assets/scss/hallo/_variables.scss (limited to 'assets') diff --git a/assets/scss/hallo.scss b/assets/scss/hallo.scss new file mode 100644 index 0000000..a9598db --- /dev/null +++ b/assets/scss/hallo.scss @@ -0,0 +1,3 @@ +@import 'hallo/variables'; +@import 'hallo/base'; +@import 'hallo/layout'; \ No newline at end of file diff --git a/assets/scss/hallo/_base.scss b/assets/scss/hallo/_base.scss new file mode 100644 index 0000000..6dea8c5 --- /dev/null +++ b/assets/scss/hallo/_base.scss @@ -0,0 +1,46 @@ +html, +body { + color: $default-light; + margin: 1rem; + padding: 0; +} + +html { + font-family: $sans-serif; + font-size: 16px; + overflow-y: auto; + + @media (min-width: 600px) { + font-size: 18px; + } +} + +body { + background-color: $background-1; +} + +a { + @include transition(color .2s ease-out); + color: $default-light; + + &:hover { + color: $default-dark; + } +} + +h1 { + font-size: 9rem; +} + +h2 { + font-size: 3rem; + font-weight: normal; +} + +img.portrait { + border-radius: 50%; + border: 10px solid $default-light; + margin: 2em 3em; + width: 300px; + height: 300px; +} \ No newline at end of file diff --git a/assets/scss/hallo/_layout.scss b/assets/scss/hallo/_layout.scss new file mode 100644 index 0000000..cb28c1c --- /dev/null +++ b/assets/scss/hallo/_layout.scss @@ -0,0 +1,40 @@ +.column { + flex: 1; +} + +main { + display: flex; + margin-top: 20vh; + + .column.left { + text-align: end; + } + + .column.right { + h1 { + margin-left: -10px; /* Correction for margin of leftmost character. */ + margin-bottom: 0.4em; + } + + h2 { + margin-left: -4px; /* Correction for margin of leftmost character. */ + margin-top: 0; + } + + .links { + margin-top: 2.5rem; + font-size: 1.5rem; + + a { + margin-right: 0.5rem; + text-decoration: none; + } + } + } +} + +footer { + display: flex; + margin-top: 3rem; + font-size: 0.75rem; +} diff --git a/assets/scss/hallo/_variables.scss b/assets/scss/hallo/_variables.scss new file mode 100644 index 0000000..e7d88c9 --- /dev/null +++ b/assets/scss/hallo/_variables.scss @@ -0,0 +1,14 @@ +// Colours +$background-1: #6fcdbd; // #48e5c2; +$background-2: #81c6ff; +$default-light: #fff; +$default-dark: #333; + +// Fonts +$sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; + +@mixin transition($args...) { + -webkit-transition: $args; + -moz-transition: $args; + transition: $args; +} \ No newline at end of file -- cgit v1.2.3