Browse Source

added fonts

Federico Bonelli 2 years ago
parent
commit
c104c26895

BIN
media/Logo-Screen/Cairotronica-logo-2.png


BIN
media/Logo-Screen/LogoDyne.png


BIN
media/Logo-Screen/dyne-TV-White.png


BIN
media/Logo-Screen/dyne.png


File diff suppressed because it is too large
+ 77 - 0
media/dyne.svg


BIN
media/fonts/OfficinaSans/OfficinaSansStd-Bold.otf


BIN
media/fonts/OfficinaSans/OfficinaSansStd-BoldItalic.otf


BIN
media/fonts/OfficinaSans/OfficinaSansStd-Book.otf


BIN
media/fonts/OfficinaSans/OfficinaSansStd-BookItalic.otf


File diff suppressed because it is too large
+ 1 - 0
www/_templates/timeline-02.css


+ 61 - 0
www/_templates/timeline-02.html

@@ -0,0 +1,61 @@
1
+<div class="container">
2
+    <ul class="timeline">
3
+        <li>
4
+          <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
5
+          <div class="timeline-panel">
6
+            <div class="timeline-heading">
7
+              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
8
+              <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
9
+            </div>
10
+            <div class="timeline-body">
11
+              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
12
+            </div>
13
+          </div>
14
+        </li>
15
+        <li>
16
+          <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
17
+          <div class="timeline-panel">
18
+            <div class="timeline-heading">
19
+              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
20
+            </div>
21
+            <div class="timeline-body">
22
+              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
23
+            </div>
24
+          </div>
25
+        </li>
26
+        <li>
27
+          <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
28
+          <div class="timeline-panel">
29
+            <div class="timeline-heading">
30
+              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
31
+            </div>
32
+            <div class="timeline-body">
33
+              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
34
+              <hr>
35
+              <div class="btn-group">
36
+                <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
37
+                  <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
38
+                </button>
39
+                <ul class="dropdown-menu" role="menu">
40
+                  <li><a href="#">Action</a></li>
41
+                  <li><a href="#">Another action</a></li>
42
+                  <li><a href="#">Something else here</a></li>
43
+                  <li class="divider"></li>
44
+                  <li><a href="#">Separated link</a></li>
45
+                </ul>
46
+              </div>
47
+            </div>
48
+          </div>
49
+        </li>
50
+        <li>
51
+          <div class="timeline-panel">
52
+            <div class="timeline-heading">
53
+              <h4 class="timeline-title">Mussum ipsum cacilds</h4>
54
+            </div>
55
+            <div class="timeline-body">
56
+              <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
57
+            </div>
58
+          </div>
59
+        </li>
60
+    </ul>
61
+</div>

+ 211 - 0
www/_templates/timeline.css

@@ -0,0 +1,211 @@
1
+body { background: #333; }
2
+
3
+img { border: 0; max-width: 100%; }
4
+
5
+.page-header h1 {
6
+  font-size: 3.26em;
7
+  text-align: center;
8
+  color: #efefef;
9
+  text-shadow: 1px 1px 0 #000;
10
+}
11
+
12
+/** timeline box structure **/
13
+.timeline {
14
+  list-style: none;
15
+  padding: 20px 0 20px;
16
+  position: relative;
17
+}
18
+
19
+.timeline:before {
20
+  top: 0;
21
+  bottom: 0;
22
+  position: absolute;
23
+  content: " ";
24
+  width: 3px;
25
+  background-color: #eee;
26
+  left: 50%;
27
+  margin-left: -1.5px;
28
+}
29
+
30
+.tldate {
31
+  display: block;
32
+  width: 200px;
33
+  background: #414141;
34
+  border: 3px solid #212121;
35
+  color: #ededed;
36
+  margin: 0 auto;
37
+  padding: 3px 0;
38
+  font-weight: bold;
39
+  text-align: center;
40
+  -webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);
41
+}
42
+
43
+.timeline li {
44
+  margin-bottom: 25px;
45
+  position: relative;
46
+}
47
+
48
+.timeline li:before, .timeline li:after {
49
+  content: " ";
50
+  display: table;
51
+}
52
+.timeline li:after {
53
+  clear: both;
54
+}
55
+.timeline li:before, .timeline li:after {
56
+  content: " ";
57
+  display: table;
58
+}
59
+
60
+/** timeline panels **/
61
+.timeline li .timeline-panel {
62
+  width: 46%;
63
+  float: left;
64
+  background: #fff;
65
+  border: 1px solid #d4d4d4;
66
+  padding: 20px;
67
+  position: relative;
68
+  -webkit-border-radius: 8px;
69
+  -moz-border-radius: 8px;
70
+  border-radius: 8px;
71
+  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
72
+  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
73
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
74
+}
75
+
76
+/** panel arrows **/
77
+.timeline li .timeline-panel:before {
78
+  position: absolute;
79
+  top: 26px;
80
+  right: -15px;
81
+  display: inline-block;
82
+  border-top: 15px solid transparent;
83
+  border-left: 15px solid #ccc;
84
+  border-right: 0 solid #ccc;
85
+  border-bottom: 15px solid transparent;
86
+  content: " ";
87
+}
88
+
89
+.timeline li .timeline-panel:after {
90
+  position: absolute;
91
+  top: 27px;
92
+  right: -14px;
93
+  display: inline-block;
94
+  border-top: 14px solid transparent;
95
+  border-left: 14px solid #fff;
96
+  border-right: 0 solid #fff;
97
+  border-bottom: 14px solid transparent;
98
+  content: " ";
99
+}
100
+.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
101
+  top:0;
102
+  right:0;
103
+  display: none;
104
+  border: 0;
105
+}
106
+
107
+.timeline li.timeline-inverted .timeline-panel {
108
+  float: right;
109
+}
110
+
111
+.timeline li.timeline-inverted .timeline-panel:before {
112
+  border-left-width: 0;
113
+  border-right-width: 15px;
114
+  left: -15px;
115
+  right: auto;
116
+}
117
+
118
+.timeline li.timeline-inverted .timeline-panel:after {
119
+  border-left-width: 0;
120
+  border-right-width: 14px;
121
+  left: -14px;
122
+  right: auto;
123
+}
124
+
125
+
126
+/** timeline circle icons **/
127
+.timeline li .tl-circ {
128
+  position: absolute;
129
+  top: 23px;
130
+  left: 50%;
131
+  text-align: center;
132
+  background: #6a8db3;
133
+  color: #fff;
134
+  width: 35px;
135
+  height: 35px;
136
+  line-height: 35px;
137
+  margin-left: -16px;
138
+  border: 3px solid #90acc7;
139
+  border-top-right-radius: 50%;
140
+  border-top-left-radius: 50%;
141
+  border-bottom-right-radius: 50%;
142
+  border-bottom-left-radius: 50%;
143
+  z-index: 99999;
144
+}
145
+
146
+
147
+/** timeline content **/
148
+
149
+.tl-heading h4 {
150
+  margin: 0;
151
+  color: #c25b4e;
152
+}
153
+
154
+.tl-body p, .tl-body ul {
155
+  margin-bottom: 0;
156
+}
157
+
158
+.tl-body > p + p {
159
+  margin-top: 5px;
160
+}
161
+
162
+/** media queries **/
163
+@media (max-width: 991px) {
164
+  .timeline li .timeline-panel {
165
+    width: 44%;
166
+  }
167
+}
168
+
169
+@media (max-width: 700px) {
170
+  .page-header h1 { font-size: 1.8em; }
171
+
172
+  ul.timeline:before {
173
+    left: 40px;
174
+  }
175
+
176
+  .tldate { width: 140px; }
177
+
178
+  ul.timeline li .timeline-panel {
179
+    width: calc(100% - 90px);
180
+    width: -moz-calc(100% - 90px);
181
+    width: -webkit-calc(100% - 90px);
182
+  }
183
+
184
+  ul.timeline li .tl-circ {
185
+    top: 22px;
186
+    left: 22px;
187
+    margin-left: 0;
188
+
189
+  }
190
+  ul.timeline > li > .tldate {
191
+    margin: 0;
192
+  }
193
+
194
+  ul.timeline > li > .timeline-panel {
195
+    float: right;
196
+  }
197
+
198
+  ul.timeline > li > .timeline-panel:before {
199
+    border-left-width: 0;
200
+    border-right-width: 15px;
201
+    left: -15px;
202
+    right: auto;
203
+  }
204
+
205
+  ul.timeline > li > .timeline-panel:after {
206
+    border-left-width: 0;
207
+    border-right-width: 14px;
208
+    left: -14px;
209
+    right: auto;
210
+  }
211
+}

+ 114 - 0
www/_templates/timeline.html

@@ -0,0 +1,114 @@
1
+<div class="container">
2
+  <header class="page-header">
3
+    <h1>Dark Responsive Timeline with Bootstrap</h1>
4
+  </header>
5
+
6
+  <ul class="timeline">
7
+    <li><div class="tldate">Apr 2014</div></li>
8
+
9
+    <li>
10
+      <div class="tl-circ"></div>
11
+      <div class="timeline-panel">
12
+        <div class="tl-heading">
13
+          <h4>Surprising Headline Right Here</h4>
14
+          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p>
15
+        </div>
16
+        <div class="tl-body">
17
+          <p>Lorem Ipsum and such.</p>
18
+        </div>
19
+      </div>
20
+    </li>
21
+
22
+    <li class="timeline-inverted">
23
+      <div class="tl-circ"></div>
24
+      <div class="timeline-panel">
25
+        <div class="tl-heading">
26
+          <h4>Breaking into Spring!</h4>
27
+          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p>
28
+        </div>
29
+        <div class="tl-body">
30
+          <p>Hope the weather gets a bit nicer...</p>
31
+
32
+          <p>Y'know, with more sunlight.</p>
33
+        </div>
34
+      </div>
35
+    </li>
36
+
37
+    <li><div class="tldate">Mar 2014</div></li>
38
+
39
+    <li>
40
+      <div class="tl-circ"></div>
41
+      <div class="timeline-panel">
42
+        <div class="tl-heading">
43
+          <h4>New Apple Device Release Date</h4>
44
+          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/22/2014</small></p>
45
+        </div>
46
+        <div class="tl-body">
47
+          <p>In memory of Steve Jobs.</p>
48
+        </div>
49
+      </div>
50
+    </li>
51
+    <li class="timeline-inverted">
52
+      <div class="timeline-panel">
53
+        <div class="tl-heading">
54
+          <h4>No icon here</h4>
55
+          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/16/2014</small></p>
56
+        </div>
57
+        <div class="tl-body">
58
+          <p>Here you'll find some beautiful photography for your viewing pleasure, courtesy of <a href="http://lorempixel.com/">lorempixel</a>.</p>
59
+
60
+          <p><img src="http://lorempixel.com/600/300/nightlife/" alt="lorem pixel"></p>
61
+        </div>
62
+      </div>
63
+    </li>
64
+    <li>
65
+      <div class="tl-circ"></div>
66
+      <div class="timeline-panel">
67
+        <div class="tl-heading">
68
+          <h4>Some Important Date!</h4>
69
+          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/03/2014</small></p>
70
+        </div>
71
+        <div class="tl-body">
72
+          <p>Write up a quick summary of the event.</p>
73
+        </div>
74
+      </div>
75
+    </li>
76
+    <li>
77
+      <div class="timeline-panel noarrow">
78
+        <div class="tl-heading">
79
+          <h4>Secondary Timeline Box</h4>
80
+          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/01/2014</small></p>
81
+        </div>
82
+        <div class="tl-body">
83
+          <p>This might be a follow-up post with related info. Maybe we include some extra links, tweets, user comments, photos, etc.</p>
84
+        </div>
85
+      </div>
86
+    </li>
87
+
88
+    <li><div class="tldate">Feb 2014</div></li>
89
+
90
+    <li class="timeline-inverted">
91
+      <div class="tl-circ"></div>
92
+      <div class="timeline-panel">
93
+        <div class="tl-heading">
94
+          <h4>The Winter Months</h4>
95
+          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/23/2014</small></p>
96
+        </div>
97
+        <div class="tl-body">
98
+          <p>Gee time really flies when you're having fun.</p>
99
+        </div>
100
+      </div>
101
+    </li>
102
+    <li>
103
+      <div class="tl-circ"></div>
104
+      <div class="timeline-panel">
105
+        <div class="tl-heading">
106
+          <h4>Yeah we're pretty much done here</h4>
107
+          <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/11/2014</small></p>
108
+        </div>
109
+        <div class="tl-body">
110
+          <p>Wasn't this fun though?</p>
111
+        </div>
112
+      </div>
113
+    </li>
114
+  </ul>