ingenuity17/index.html at master · electron0zero/ingenuity17 · 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
77
78
79
---
layout: default
---

<nav style="opacity: 0.5;">
  <ul>
    {% assign sorted_pages = site.homepages | sort:"order" %}
    {% for node in sorted_pages %}
    {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
    <li class="p-{{id}} "><a href="#{{id}}" style="text-decoration:none;color: white;" >{{node.title}}</a></li>
    {% endfor %}
  </ul>
</nav>

{% assign sorted_pages = site.homepages | sort:"order" %}
{% for page in sorted_pages %}
    {% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
    <!--style="background-image:url({{ post.bg-img }});" This line gets and sets the bg image of page-->
    <div id="{{id}}" class="section p-{{id}}" style="background-image:url({{ page.bg-img }});  overflow: auto;
    background-attachment: fixed; background-repeat: no-repeat; background-size: cover;">
        <div class="container {{ page.style }}">
            {{ page.content }}
        </div>
    </div>
{% endfor %}

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>-->

<!--add Trianglify background -->
<!--{% for page in site.homepages reversed %}
    {% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
        {% if page.home %}-->
            <!--it's home page set random color-->
            <!--<script>
            // get
            var page_id = {{ id | jsonify }}
            // console.log( "page_id:" + page_id)
                var pattern = Trianglify({
                    width: window.innerWidth,
                    height: window.innerHeight,
                    cell_size: Math.random()*200 + 40,
                    variance: Math.random(),
                    stroke_width: Math.random()
                });
                var canvas = pattern.canvas()
                // i am converting canvas to image/png and then using it as background-image
                // it's not good, plz find a better way to do this
                document.getElementById(page_id).style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
                document.getElementById(page_id).style.backgroundRepeat = "no-repeat";
                document.getElementById(page_id).style.backgroundSize = "cover";
            </script>-->
        <!--{% else %}-->
            <!--set fixed color-->
            <!--<script>
            var page_id = {{ id | jsonify }}
            console.log( "page_id:" + page_id)
                var pattern = Trianglify({
                    width: window.innerWidth,
                    height: window.innerHeight,
                    cell_size: 70,
                    variance: 0.9,
                    stroke_width: 0.6,
                    x_colors: 'Spectral',
                    y_colors: 'Spectral'
                    // color_function : function(x, y) {
                        // return '#1565c0';
                    // }
                });
                var canvas = pattern.canvas()
                // i am converting canvas to image/png and then using it as background-image
                // it's not good, plz find a better way to do this
                document.getElementById(page_id).style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
                document.getElementById(page_id).style.backgroundRepeat = "no-repeat";
                document.getElementById(page_id).style.backgroundSize = "cover";
            </script>-->
        <!--{% endif %}-->
            <!--document.getElementById({{id}}).style.backgroundImage = 'url(buttons/' + imagePrefix + '.png)';-->
    <!--</div>
{% endfor %}-->