| 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 |
| ******************************************************************************/ |