From a76caf717fd2c60f30bc62baa2522a16e4467268 Mon Sep 17 00:00:00 2001 From: Peter Wu Date: Wed, 4 Mar 2015 17:02:38 +0100 Subject: Initial commit --- style/colors.less | 25 ++++++++++++++++++++++ style/main.less | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ style/menu.less | 28 +++++++++++++++++++++++++ 3 files changed, 115 insertions(+) create mode 100644 style/colors.less create mode 100644 style/main.less create mode 100644 style/menu.less (limited to 'style') diff --git a/style/colors.less b/style/colors.less new file mode 100644 index 0000000..2518b5c --- /dev/null +++ b/style/colors.less @@ -0,0 +1,25 @@ +/* Color scheme from http://paletton.com/#uid=53v0u0k7UUa3cZA5wXlaiQ5cFL3 */ + +@color-primary-0: #B5D6EB; /* Main Primary color */ +@color-primary-1: #E3F2FB; +@color-primary-2: #CDE5F5; +@color-primary-3: #9CC5E0; +@color-primary-4: #83B3D1; + +@color-secondary-1-0: #BCBFEE; /* Main Secondary color (1) */ +@color-secondary-1-1: #E6E7FC; +@color-secondary-1-2: #D2D4F6; +@color-secondary-1-3: #A6A9E5; +@color-secondary-1-4: #8F93D8; + +@color-secondary-2-0: #FFEFC0; /* Main Secondary color (2) */ +@color-secondary-2-1: #FFF8E6; +@color-secondary-2-2: #FFF4D3; +@color-secondary-2-3: #FFEAAD; +@color-secondary-2-4: #FFE59A; + +@color-complement-0: #FFE3C0; /* Main Complement color */ +@color-complement-1: #FFF4E6; +@color-complement-2: #FFECD3; +@color-complement-3: #FFDBAD; +@color-complement-4: #FFD29A; diff --git a/style/main.less b/style/main.less new file mode 100644 index 0000000..0ad9c47 --- /dev/null +++ b/style/main.less @@ -0,0 +1,62 @@ +/* main.less */ +@import "../node_modules/normalize.css/normalize.css"; +@import "colors.less"; + +/* page layout */ +body { + text-align: center; + line-height: 2em; +} + +@import "menu.less"; + +/* main content */ +main { + background: @color-secondary-1-3; + margin: auto; + padding: 1em; + border-radius: 2px; + + max-width: 800px; + text-align: left; +} + +body[data-page="home"] { + .intro { + height: 300px; + padding: 1em; + margin: 1em; + background-color: @color-secondary-2-1; + } + .block { + background: no-repeat url(../images/filler.png); + height: 200px; + background-color: @color-secondary-2-1; + padding: 1em; + margin: 1em; + + transition: background 0.2s; /* TODO floats over text */ + &:hover { + background-color: @color-secondary-2-0; + } + + p { + margin: 1em; + } + + &:nth-child(2n+1) { + padding-left: 200px; + } + &:nth-child(2n) { + background-position: right; + padding-right: 200px; + } + } +} + +/* footer */ +footer { + background: @color-secondary-1-4; +} + +/* vim: set sw=4 et ts=4: */ diff --git a/style/menu.less b/style/menu.less new file mode 100644 index 0000000..60d87ec --- /dev/null +++ b/style/menu.less @@ -0,0 +1,28 @@ +/* menu */ +@import "colors.less"; + +nav { + margin: 3em 0; + + ul { + background: @color-primary-0; + } + + li { + display: inline-block; + } + /* links */ + a:link { + margin: 3px; + padding: 0.5em 1em; + background: @color-secondary-1-1; + border-radius: 5px; + box-shadow: @color-secondary-1-2 0 0 0px 1px; + display: inline-block; + } + a:link:hover { + background: @color-secondary-1-2; + } +} + +/* vim: set sw=4 et ts=4: */ -- cgit v1.2.1