From bee932e70a2a15d150a66401c31a6e2b5545c31a Mon Sep 17 00:00:00 2001
From: Josh Borrow <joshua.borrow@durham.ac.uk>
Date: Mon, 14 Aug 2017 14:41:42 +0100
Subject: [PATCH] added sidebar items and card css
---
design/about.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++-
design/about.haml | 31 ++++++++++++++-----------
2 files changed, 75 insertions(+), 15 deletions(-)
diff --git a/design/about.css b/design/about.css
index 7a49f8c..780df42 100644
--- a/design/about.css
+++ b/design/about.css
@@ -5,12 +5,13 @@ html, body {
.container {
max-width: 80em;
margin: 1em auto;
+ padding: 0 1em;
}
/* Header Styles */
.header {
- padding: 1em;
+ padding: 2em 0 1em 0;
width: 100%;
color: white;
@@ -84,10 +85,33 @@ html, body {
.cards {
display: flex;
justify-content: space-between;
+
+ margin-top: 1em; /* Spacing Between Navbar */
}
.card {
width: 30%;
+
+ border: 1px solid #555;
+ border-radius: 4px;
+
+ box-shadow: 2px 2px 3px #BBB;
+}
+
+.card:hover {
+ box-shadow: 3px 3px 3px #888;
+}
+
+
+.card-content {
+ margin: 1em;
+ text-align: center;
+}
+
+.caret {
+ width: 100%;
+ color: #298BDF;
+ font-size: 2em;
}
/* Breaking Styles */
@@ -110,4 +134,37 @@ html, body {
.text {
width: 75%;
+}
+
+/* Sidebar */
+
+.sidebar ul {
+ list-style: none;
+ float: right;
+ margin: 0;
+}
+
+.sidebar ul li {
+ border: 1px solid #145289;
+ border-radius: 4px;
+
+ padding: 0.5em;
+ margin-bottom: 0.5em;
+
+ background-color: white;
+ color: #145289;
+
+ display: block;
+}
+
+.sidebar ul li.active {
+ background-color: #298BDF;
+ color: white;
+}
+
+.sidebar h2 {
+ color: #145289;
+ text-align: right;
+ float: right;
+ width: 100%;
}
\ No newline at end of file
diff --git a/design/about.haml b/design/about.haml
index 916ae48..b91b059 100644
--- a/design/about.haml
+++ b/design/about.haml
@@ -32,30 +32,33 @@
.cards
.card
- %img
- %h1 Card 1
- %h2 About Card 1
- .caret
+ .card-content
+ %h1 Card 1
+ %p About Card 1
+ .caret
+ <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
.card
- %img
- %h1 Card 2
- %h2 About Card 2
- .caret
+ .card-content
+ %h1 Card 2
+ %p About Card 2
+ .caret
+ <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
.card
- %img
- %h1 Card 3
- %h2 About Card 3
- .caret
-
+ .card-content
+ %h1 Card 3
+ %p About Card 3
+ .caret
+ <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
+
.break
.content
.sidebar
%h2 Card 1
%ul
- %li Item 1
+ %li.active Item 1
%li Item 2
%li Item 3
--
GitLab