From 1736e7e4577987ca75c7ff89565651cd31738e80 Mon Sep 17 00:00:00 2001 From: Gregory Ballantine Date: Wed, 7 Dec 2022 18:55:12 -0500 Subject: [PATCH] Added some styles; added a basic main navigation side bar --- assets/styles/kraken.scss | 59 +++++++++++++++++++++++++++++++++++++++ views/layout.erb | 13 ++++++++- 2 files changed, 71 insertions(+), 1 deletion(-) diff --git a/assets/styles/kraken.scss b/assets/styles/kraken.scss index c5c0c9f..a4a83fe 100644 --- a/assets/styles/kraken.scss +++ b/assets/styles/kraken.scss @@ -1,3 +1,62 @@ +$nav-width: 200px; + +$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); +$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); + body{ background: lightgrey; } + +#main-nav{ + position: fixed; + top: 0; + left: 0; + width: $nav-width; + height: 100%; + padding: 20px 0; + background: #212121; + color: white; + box-shadow: $box-shadow-1; + box-sizing: border-box; + + h3{ + text-align: center; + } + + ul{ + list-style: none; + + li{ + margin: 0; + border-bottom: 1px solid #999; + + &:first-child{ + border-top: 1px solid #999; + } + } + + a{ + display: block; + box-sizing: border-box; + width: $nav-width; + padding: 10px 15px; + color: limegreen; + font-size: 2.5rem; + text-decoration: none; + transition: all 230ms ease-in-out; + + &:hover{ + background: rgba(255, 255, 255, 0.1); + } + } + } +} + +#main-wrapper{ + max-width: 1200px; + margin-top: 25px; + padding: 20px 30px; + background: white; + border-radius: 5px; + box-shadow: $box-shadow-2; +} diff --git a/views/layout.erb b/views/layout.erb index 6947b9a..37e298e 100644 --- a/views/layout.erb +++ b/views/layout.erb @@ -9,6 +9,17 @@ - <%= yield %> + + + +
+ <%= yield %> +