From 778a41bbf43f547001fc519e2ae51b79a747dcfc Mon Sep 17 00:00:00 2001 From: dqnid Date: Sun, 2 Jun 2024 19:15:08 +0200 Subject: [PATCH] trillo basic layout + sprite --- Trillo/starter/css/style.css | 73 ++++++++++++++++ Trillo/starter/img/sprite.svg | 108 +++--------------------- Trillo/starter/img/sprite_old.svg | 120 +++++++++++++++++++++++++++ Trillo/starter/index.html | 76 +++++++++++++---- Trillo/starter/sass/_base.scss | 63 ++++++++++++++ Trillo/starter/sass/_components.scss | 0 Trillo/starter/sass/_layout.scss | 27 ++++++ Trillo/starter/sass/main.scss | 20 +---- 8 files changed, 358 insertions(+), 129 deletions(-) mode change 100755 => 100644 Trillo/starter/img/sprite.svg create mode 100755 Trillo/starter/img/sprite_old.svg create mode 100644 Trillo/starter/sass/_base.scss create mode 100644 Trillo/starter/sass/_components.scss create mode 100644 Trillo/starter/sass/_layout.scss diff --git a/Trillo/starter/css/style.css b/Trillo/starter/css/style.css index e69de29..a855a20 100644 --- a/Trillo/starter/css/style.css +++ b/Trillo/starter/css/style.css @@ -0,0 +1,73 @@ +/* +COLORS + +Primary: #eb2f64 +Primary light: #FF3366 +Primary dark: #BA265D + +Grey light 1: #faf9f9 +Grey light 2: #f4f2f2 +Grey light 3: #f0eeee +Grey light 4: #ccc + +Grey dark 1: #333 +Grey dark 2: #777 +Grey dark 3: #999 +*/ +:root { + --color-primary: #eb2f64; + --color-primary-light: #ff3366; + --color-primary-dark: #ba265d; + --color-grey-light-1: #faf9f9; + --color-grey-light-2: #f4f2f2; + --color-grey-light-3: #f0eeee; + --color-grey-light-4: #ccc; + --color-grey-dark-1: #333; + --color-grey-dark-2: #777; + --color-grey-dark-3: #999; + --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3); } + +* { + margin: 0; + padding: 0; } + +*, +*::before, +*::after { + box-sizing: inherit; } + +html { + box-sizing: border-box; + font-size: 62.5%; } + +body { + font-family: "Open Sans", sans-serif; + font-weight: 400; + color: var(--color-grey-dark-2); + line-height: 1.6; + background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark)); + background-size: cover; + min-height: 100vh; } + +.container { + max-width: 120rem; + min-height: 50rem; + margin: 8rem auto; + background-color: var(--color-grey-light-1); + box-shadow: var(--shadow-dark); } + +.header { + height: 7rem; + background-color: #fff; + border-bottom: var(--color-grey-light-2); } + +.content { + display: flex; } + +.sidebar { + background-color: var(--color-grey-dark-1); + flex: 0 0 18%; } + +.hotel-view { + flex: 1; + background-color: #fff; } diff --git a/Trillo/starter/img/sprite.svg b/Trillo/starter/img/sprite.svg old mode 100755 new mode 100644 index d1e1f42..0092855 --- a/Trillo/starter/img/sprite.svg +++ b/Trillo/starter/img/sprite.svg @@ -1,120 +1,34 @@ - + diff --git a/Trillo/starter/img/sprite_old.svg b/Trillo/starter/img/sprite_old.svg new file mode 100755 index 0000000..d1e1f42 --- /dev/null +++ b/Trillo/starter/img/sprite_old.svg @@ -0,0 +1,120 @@ + + + +bookmark + + + +chevron-down + + + +chevron-left + + + +chevron-right + + + +chevron-thin-down + + + +chevron-thin-left + + + +chevron-thin-right + + + +chevron-thin-up + + + +chevron-up + + + +cloud + + + +aircraft-take-off + + + +bell + + + +calendar + + + +camera + + + +chat + + + +cog + + + +home + + + +key + + + +light-up + + + +location-pin + + + +magnifying-glass + + + +mail + + + +map + + + +squared-cross + + + +star-outlined + + + +star + + + +user + + + +facebook + + + +instagram + + + + diff --git a/Trillo/starter/index.html b/Trillo/starter/index.html index 69f8322..f4bcc74 100644 --- a/Trillo/starter/index.html +++ b/Trillo/starter/index.html @@ -1,16 +1,62 @@ - + - - - - - - - - - trillo — Your all-in-one booking app - - - - - \ No newline at end of file + + + + + + + + + trillo — Your all-in-one booking app + + +
+
+ +
+ + +
+ + +
+
+ +
Hotel view
+
+
+ + diff --git a/Trillo/starter/sass/_base.scss b/Trillo/starter/sass/_base.scss new file mode 100644 index 0000000..10546f8 --- /dev/null +++ b/Trillo/starter/sass/_base.scss @@ -0,0 +1,63 @@ +/* +COLORS + +Primary: #eb2f64 +Primary light: #FF3366 +Primary dark: #BA265D + +Grey light 1: #faf9f9 +Grey light 2: #f4f2f2 +Grey light 3: #f0eeee +Grey light 4: #ccc + +Grey dark 1: #333 +Grey dark 2: #777 +Grey dark 3: #999 +*/ + +:root { + // like html selector but with higher specificity, like a global parent element + --color-primary: #eb2f64; + --color-primary-light: #ff3366; + --color-primary-dark: #ba265d; + --color-grey-light-1: #faf9f9; + --color-grey-light-2: #f4f2f2; + --color-grey-light-3: #f0eeee; + --color-grey-light-4: #ccc; + --color-grey-dark-1: #333; + --color-grey-dark-2: #777; + --color-grey-dark-3: #999; + + --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3); +} + +* { + margin: 0; + padding: 0; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; + font-size: 62.5%; // 1rem = 10px +} + +body { + font-family: "Open Sans", sans-serif; + font-weight: 400; + color: var(--color-grey-dark-2); + line-height: 1.6; + background-image: linear-gradient( + to right bottom, + var(--color-primary-light), + var(--color-primary-dark) + ); + background-size: cover; + + min-height: 100vh; +} diff --git a/Trillo/starter/sass/_components.scss b/Trillo/starter/sass/_components.scss new file mode 100644 index 0000000..e69de29 diff --git a/Trillo/starter/sass/_layout.scss b/Trillo/starter/sass/_layout.scss new file mode 100644 index 0000000..9a6a9e9 --- /dev/null +++ b/Trillo/starter/sass/_layout.scss @@ -0,0 +1,27 @@ +.container { + max-width: 120rem; + min-height: 50rem; + margin: 8rem auto; + background-color: var(--color-grey-light-1); + box-shadow: var(--shadow-dark); +} + +.header { + height: 7rem; + background-color: #fff; + border-bottom: var(--color-grey-light-2); +} + +.content { + display: flex; +} + +.sidebar { + background-color: var(--color-grey-dark-1); + flex: 0 0 18%; +} + +.hotel-view { + flex: 1; + background-color: #fff; +} diff --git a/Trillo/starter/sass/main.scss b/Trillo/starter/sass/main.scss index 3c036e0..dc985d8 100644 --- a/Trillo/starter/sass/main.scss +++ b/Trillo/starter/sass/main.scss @@ -1,17 +1,3 @@ -/* -COLORS - -Primary: #eb2f64 -Primary light: #FF3366 -Primary dark: #BA265D - -Grey light 1: #faf9f9 -Grey light 2: #f4f2f2 -Grey light 3: #f0eeee -Grey light 4: #ccc - -Grey dark 1: #333 -Grey dark 2: #777 -Grey dark 3: #999 - -*/ \ No newline at end of file +@import "base"; +@import "components"; +@import "layout";