Index: static/css/main.css |
=================================================================== |
--- a/static/css/main.css |
+++ b/static/css/main.css |
@@ -5,16 +5,21 @@ |
} |
body |
{ |
margin: 0; |
line-height: 1.5; |
} |
+#content |
+{ |
+ padding-bottom: 2em; |
+} |
+ |
a img |
{ |
border: none; |
} |
a:link, a:visited |
{ |
color: #555; |
@@ -144,16 +149,25 @@ |
} |
[dir="rtl"] .alert |
{ |
border-right: 5px solid #d14841; |
} |
/****************************************************************************** |
+ * .section |
+ *****************************************************************************/ |
+ |
+.section |
+{ |
+ padding: 2em 0; |
+} |
+ |
+/****************************************************************************** |
* .content |
*****************************************************************************/ |
.content h1, |
.content h2, |
.content h3, |
.content h4, |
.content h5 |
@@ -176,16 +190,90 @@ |
} |
.content a, |
.content a:visited |
{ |
color: #c70d2c; |
} |
+/* Buttons |
+ ******************************************************************************/ |
+ |
+.button |
+{ |
+ padding: 0.5em 2em; |
+ border: none; |
+ text-align: center; |
+} |
+ |
+.button:hover, |
+.button:active, |
+.button:focus |
+{ |
+ text-decoration: none; |
+} |
+ |
+@media(max-width: 767px) |
+{ |
+ .button |
+ { |
+ display: block; |
+ width: 100%; |
+ } |
+} |
+ |
+.button.primary |
+{ |
+ color: #fff; |
+ background-color: #c70d2c; |
+ box-shadow: 0px 2px 5px #95989A; |
+} |
+ |
+.button.primary:hover |
+{ |
+ background-color: #E00F32; |
+} |
+ |
+.button.primary:active |
+{ |
+ background-color: #AD102A; |
+} |
+ |
+.bg-accent .button.secondary |
ire
2017/12/07 12:36:27
NIT: I think this is a style of button that could
juliandoucette
2017/12/08 16:49:52
What about .button.inverse?
ire
2017/12/11 15:53:46
That works now, but what if we wanted to have an "
juliandoucette
2017/12/14 18:35:22
Will address separately if necessary.
|
+{ |
+ background: none; |
+ color: #fff; |
+ margin-left: 2px; |
+ margin-right: 2px; |
+ border: 1px solid #fff; |
+} |
+ |
+.bg-accent .button.secondary:hover, |
+.bg-accent .button.secondary:focus |
+{ |
+ box-shadow: inset 0 0 0 2px #fff; |
+} |
+ |
+.bg-accent .button.secondary:active |
+{ |
+ color: #077CA6; |
+ background-color: #fff; |
+} |
+ |
+/******************************************************************************* |
+ * .bg-* utilities |
+ ******************************************************************************/ |
+ |
+.bg-accent |
+{ |
+ color: #fff; |
+ background-color: #077CA6; |
+} |
+ |
/******************************************************************************* |
* #navbar |
******************************************************************************/ |
#navbar |
{ |
min-height: 4em; |
background-color: #c70d2c; |
@@ -452,17 +540,16 @@ |
/******************************************************************************* |
* #footer |
******************************************************************************/ |
#footer |
{ |
overflow: auto; |
- margin-top: 2em; |
padding: 2em 0em; |
color: #ececec; |
background-color: #292929; |
font-size: 0.9em; |
} |
/* #footer body |
******************************************************************************/ |