Mercurial > sat_legacy_website
annotate static/css/sat_website.css @ 29:b45621706d83
use Bootstrap carousels to display images and videos galeries:
- one carousel for a 3x3 thumbnails grid
- a second one in a modal window to view bigger pictures when a thumbnail is clicked
| author | souliane <souliane@mailoo.org> |
|---|---|
| date | Wed, 21 Jan 2015 20:13:19 +0100 |
| parents | 30a1edf90fae |
| children | 73c6333fd124 |
| rev | line source |
|---|---|
| 0 | 1 /* |
| 2 SàT Website: Salut à Toi presentation website | |
| 3 Copyright (C) 2012 Jérôme Poisson <goffi@goffi.org> | |
| 4 | |
| 5 This program is free software: you can redistribute it and/or modify | |
| 6 it under the terms of the GNU Affero General Public License as published by | |
| 7 the Free Software Foundation, either version 3 of the License, or | |
| 8 (at your option) any later version. | |
| 9 | |
| 10 This program is distributed in the hope that it will be useful, | |
| 11 but WITHOUT ANY WARRANTY; without even the implied warranty of | |
| 12 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | |
| 13 GNU Affero General Public License for more details. | |
| 14 | |
| 15 You should have received a copy of the GNU Affero General Public License | |
| 16 along with this program. If not, see <http://www.gnu.org/licenses/>. | |
| 17 */ | |
| 18 | |
| 26 | 19 |
| 20 /* Overriding Bootstrap styles */ | |
| 21 | |
| 22 | |
| 0 | 23 body { |
| 26 | 24 padding-top: 60px; |
| 0 | 25 } |
| 26 | |
| 27 header { | |
| 26 | 28 margin-bottom: 20px; |
| 29 } | |
| 30 | |
| 31 h1, h2, h3, h4, h5, h6 { | |
| 32 font-weight: bold; | |
| 0 | 33 } |
| 34 | |
| 26 | 35 .navbar { |
| 36 font-size: 13px; | |
| 37 } | |
| 38 | |
|
29
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
39 .carousel-inner { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
40 padding: 10px 30px 10px 30px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
41 border-radius: 5px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
42 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
43 |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
44 .carousel-inner > .item { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
45 text-align: center; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
46 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
47 |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
48 .carousel-caption { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
49 padding: 10px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
50 bottom: -55px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
51 color: black; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
52 font-style: italic; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
53 font-size: 14px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
54 text-shadow: none; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
55 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
56 |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
57 .carousel-indicators { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
58 bottom: -5px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
59 color: black; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
60 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
61 |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
62 .carousel-indicators li { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
63 border: 1px solid black; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
64 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
65 |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
66 .carousel-indicators .active { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
67 background-color: black; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
68 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
69 |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
70 .carousel-control.left, .carousel-control.right{ |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
71 width: 30px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
72 border-radius: 5px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
73 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
74 |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
75 .modal-header .close { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
76 margin-top: -10px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
77 padding-right: 5px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
78 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
79 |
| 26 | 80 |
| 81 /* sat_website own styles */ | |
| 82 | |
| 83 | |
|
2
0df46e87537d
i18n: marked translatable texts + add change language form on pages footer
Goffi <goffi@goffi.org>
parents:
0
diff
changeset
|
84 #language { |
|
0df46e87537d
i18n: marked translatable texts + add change language form on pages footer
Goffi <goffi@goffi.org>
parents:
0
diff
changeset
|
85 text-align: center; |
|
29
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
86 padding-top: 10px; |
|
2
0df46e87537d
i18n: marked translatable texts + add change language form on pages footer
Goffi <goffi@goffi.org>
parents:
0
diff
changeset
|
87 } |
|
0df46e87537d
i18n: marked translatable texts + add change language form on pages footer
Goffi <goffi@goffi.org>
parents:
0
diff
changeset
|
88 |
| 0 | 89 #sat_logo { |
| 90 float: left; | |
| 91 margin-right: 5px; | |
| 26 | 92 margin-top: 5px; |
| 0 | 93 } |
| 94 | |
| 95 #overview_logo { | |
| 96 vertical-align: middle; | |
| 97 margin-top: -25px; | |
| 98 margin-right: 15px; | |
| 99 } | |
| 100 | |
| 101 #bigmark { | |
| 26 | 102 font-size:165px; |
| 0 | 103 font-weight:bold; |
| 104 text-align: center; | |
| 26 | 105 margin: 0px; |
| 0 | 106 } |
| 107 | |
| 108 #bigmark_subtext { | |
| 109 text-align: center; | |
| 26 | 110 margin: 0px; |
| 0 | 111 } |
| 112 | |
| 113 #social_contract { | |
| 114 font-size: 14px; | |
| 115 } | |
| 116 | |
| 117 .wip { | |
| 118 text-align: center; | |
| 119 color: #A52A2A; | |
| 120 margin: 10px; | |
| 121 } | |
| 122 | |
| 123 .desc { | |
| 124 text-align: justify; | |
| 125 font-size: 16px; | |
| 126 } | |
| 127 | |
| 128 .info { | |
| 129 margin: 10px 5px 60px 5px; | |
| 130 } | |
| 131 | |
| 132 .feature { | |
| 133 padding-bottom: 10px; | |
| 134 margin-bottom: 10px; | |
| 135 border-bottom-style: solid; | |
| 136 border-bottom-width: 1px; | |
| 137 } | |
| 138 | |
| 139 div:last-child>div.feature { | |
|
29
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
140 /* we don't want the line on the last feature */ |
| 0 | 141 border-bottom-style: none; |
| 142 } | |
| 143 | |
|
29
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
144 #carousel-screenshots img, #carousel-screenshots video { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
145 cursor: pointer; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
146 height: 200px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
147 width: auto; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
148 display: table-cell; |
| 0 | 149 } |
| 150 | |
|
29
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
151 #modal-screenshots .modal-dialog { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
152 max-width: 90%; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
153 width: auto; |
| 0 | 154 } |
| 155 | |
|
29
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
156 #carousel-screenshots-modal .carousel-inner { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
157 padding-bottom: 80px; |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
158 } |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
159 |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
160 #carousel-screenshots-modal img, #carousel-screenshots-modal video { |
|
b45621706d83
use Bootstrap carousels to display images and videos galeries:
souliane <souliane@mailoo.org>
parents:
28
diff
changeset
|
161 margin: auto; |
| 0 | 162 } |
|
28
30a1edf90fae
move the language selector to the main menu
souliane <souliane@mailoo.org>
parents:
26
diff
changeset
|
163 |
|
30a1edf90fae
move the language selector to the main menu
souliane <souliane@mailoo.org>
parents:
26
diff
changeset
|
164 #language_form { |
|
30a1edf90fae
move the language selector to the main menu
souliane <souliane@mailoo.org>
parents:
26
diff
changeset
|
165 padding-top: 12px; |
|
30a1edf90fae
move the language selector to the main menu
souliane <souliane@mailoo.org>
parents:
26
diff
changeset
|
166 padding-bottom: 12px; |
|
30a1edf90fae
move the language selector to the main menu
souliane <souliane@mailoo.org>
parents:
26
diff
changeset
|
167 } |