melscience.github.io/index.html at master · MELScience/melscience.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
---
layout: mainpage
---
<style>
.img-flat-bottom {
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-left-radius: 0px;
  border-bottom-left-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-bottom-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

div.animated-by-hover div.animated-image {display: none}
div.animated-by-hover:hover div.animated-image {display: block}
div.animated-by-hover:hover div.static-image {display: none}

.square-container {
  position: relative;
  width: 100%;   /* desired width */
}
.square-container:before {
  content: "";
  display: block;
  padding-top: 56.25%;  /* initial ratio of 16:9*/
}
.square-content {
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.experiment-description {
  margin-top: 12px;
}
.experiment-title {
  margin-top: 5px;
  font-weight: bold;
}
</style>

          <div class="jumbotron">
            <h1>Chemistry Demonstrations</h1>
            <p>A database of chemistry experiments that everyone can edit. If you know any chemistry demonstration not listed here you can add it.</p>
          </div>
          <div class="row" style="margin-bottom: 20px; padding-right: 30px; padding-left: 30px;">
            <a href="/edit/add_experiment.html" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Add Experiment</a>
            <div class="btn-group pull-right">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                All Categories <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="/">All Categories</a></li>
                <li class="divider"></li>
{% for c in site.pages %}{% if c.type == "category" %}{% assign any_experiment_in_category = 0 %}{% for e in site.pages %}{% if e.type == "experiment" %}{% for ec in e.category %}{% if ec == c.id %}{% assign any_experiment_in_category = 1 %}{% endif %}{% endfor %}{% endif %}{% endfor %}{% if any_experiment_in_category == 1 %}<li><a href="categories/{{ c.id }}.html">{{ c.category_name | capitalize }}</a></li>{% endif %}{% endif %}{% endfor %}
              </ul>
            </div>
            </span>
          </div>

{% for e in site.pages %}
{% if e.type == "experiment" %}
            <div class="col-4 col-sm-4 col-lg-3">
              <div class="panel panel-default">
                <div>
                  <div class="static-image square-container"><a class="square-content" href="experiments/{{ e.id }}.html"><img src="{{ e.youtube_video_for_thumbnail | replace: 'http://www.youtube.com/watch?v=', 'http://i.ytimg.com/vi/' | append: '/mqdefault.jpg'}}" alt="Experiment thumbnail" style="width: 100%; height: auto;" class="img-rounded img-flat-bottom"></a></div>
                </div>
                <div class="panel-heading" style="background-color: white; height: 110px;">
                  <h3 class="panel-title experiment-title"><a href="experiments/{{ e.id }}.html">{{ e.title_name }}</a></h3>
                  <h3 class="panel-title experiment-description"><a href="experiments/{{ e.id }}.html">{{ e.descriptive_name }}</a></h3>
                </div>
              </div>
            </div><!--/span-->
{% endif %}
{% endfor %}