Merge pull request #9 from bitshifters/updates2020

Updates2021

Author: simondotm

README.md

@@ -41,28 +41,29 @@ The overall site is designed to be a simple CMS to make it easy for us to add ne
 
 The site has 4 main pages, each with a custom layout:
  - home (default.html)
- - productions (prods.html)
  - archive (archive.html)
  - info (info.html)
+ - support (support.html)
+ - art (art.html)
 
 
- The site currently supports two types of post:
-  - production (prod)
-  - competition (compo)
+ The site currently supports 6 types of post:
+  - **Productions** (`prods` category, `_posts/prods`) - pieces of work created by the Bitshifters collective
+  - **Competitions** (`compo` category, `_posts/compos`) - competitions we've entered productions into
+  - **Archives** (`compos` category, `_posts/archives`) - pieces of work created by anyone else. They are treated by the site as productions also, but just categorised differently
+  - **Team** (`team` category, `_posts/team`) - one post per team member that wants to be listed in the `.NFO` page
+  - **Support** (`support` category, `_posts/support`) - one post per support topic that will be listed in the `support.html` page
+
 
 Some files (templates, layouts, includes etc.) are mostly HTML, with embedded Liquid templating commands that are compiled by Jekyll. 
 
 Some files (pages, posts, data) are YAML style configuration files, with embedded variables and markdown formatted content.
 
 
-**Productions** are pieces of work created by the Bitshifters collective (category 'prods')
-
-**Archives** are pieces of work created by anyone else. They are treated by the site as productions also, but just categorised differently (category 'archives')
-
-**Competitions** are posts releated to a specific challenge we'll be setting every so often, so kinda like a blog post. (category 'compos')
-
 ## How to use
 
+**THE FOLLOWING IS OUT OF DATE, BEWARE!**
+
 ### Productions (eg. new demos created by BitShifters)
 To add a new production:
  - Place a image and a disk image file (SSD or DSD) in `/content/`

_config.yml

@@ -24,8 +24,8 @@ disqus_shortname: myshortname
 
 # Color settings (hex-codes without the leading hash-tag)
 color:
-  primary: 18bc9c #80B3FF
-  primary-rgb: "24,288,156" #"128,179,255"
+  primary: 18bccc #18bc9c #80B3FF
+  primary-rgb: "24,288,204" #"24,288,156" #"128,179,255"
   secondary: 2c3e50 #FD6E8A
   secondary-dark: 233140 #A2122F
 

_includes/about.html

@@ -12,11 +12,11 @@
             <div class="row">
                 <div class="col-lg-4 col-lg-offset-2">
                     <h3>What</h3>
-                    <p>Bitshifters is a collective of like-minded creatives & developers with a shared love of the BBC Microcomputer and 8-bit retro computing in general.  We aim to share & celebrate this love through the production of demos, games and software freely available for all to enjoy.  We aim to foster the growing community of BBC Micro enthusiasts and encourage more people to join our cause.</p>
+                    <p>Bitshifters is a collective of like-minded creatives & developers with a shared love of the BBC Microcomputer and 8-bit retro computing in general.</p><p>We aim to share & celebrate this love through the production of demos, games and software freely available for all to enjoy, and foster the growing community of BBC Micro enthusiasts, plus hopefully encourage more people to join our collective!</p>
                 </div>
                 <div class="col-lg-4">
                     <h3>How</h3>
-                    <p>We organise releases every six months centred around a particular theme.  We issue guidelines for each release and provide as much framework and support as we can.  All will be welcome to submit contributions to the release and will be considered part of the collective at that point.  The only condition of submission is that all code be made open and freely available for reuse.</p>
+                    <p>We typically produce a couple of releases per year, usually centred around a particular theme, often in collaboration.</p><p>Our releases usually start life as technical, musical or visual ideas/doodles and evolve from there.</p><p>New contributors are very welcome to join us, just drop any of us a line on the contact channels below.</p>
                 </div>
                 <!--
                 <div class="col-lg-8 col-lg-offset-2 text-center">
@@ -30,5 +30,6 @@ <h3>How</h3>
 
         </div>
     </header>
+    
 
 

_includes/art.html

@@ -0,0 +1,178 @@
+
+    <style>
+        #art {
+            /* Prevent vertical gaps */
+            line-height: 0;
+            
+            -webkit-column-count: 8;
+            -webkit-column-gap:   2px;
+            -moz-column-count:    8;
+            -moz-column-gap:      2px;
+            column-count:         8;
+            column-gap:           2px;  
+        }
+
+        #art img {
+            /* Just in case there are inline attributes */
+            width: 100% !important;
+            height: auto !important;
+        }
+
+        @media (max-width: 1200px) {
+            #art {
+                -moz-column-count:    8;
+                -webkit-column-count: 8;
+                column-count:         8;
+            }
+        }
+        @media (max-width: 1000px) {
+            #art {
+                -moz-column-count:    7;
+                -webkit-column-count: 7;
+                column-count:         7;
+            }
+        }
+        @media (max-width: 800px) {
+            #art {
+                -moz-column-count:    5;
+                -webkit-column-count: 5;
+                column-count:         5;
+            }
+        }
+        @media (max-width: 400px) {
+            #art {
+                -moz-column-count:    4;
+                -webkit-column-count: 4;
+                column-count:         4;
+            }
+        }        
+        .art-container {
+            overflow:hidden;
+            margin-bottom: 2px;
+            opacity: 0;
+
+        }
+        .art-effect {
+            transform-origin: center;
+            transition: transform 250ms ease-in-out;
+            -webkit-transition: transform 250ms ease-in-out;
+            -moz-transition: transform 250ms ease-in-out;
+            -o-transition: transform 250ms ease-in-out;
+        }
+        .art-effect:hover {
+            transform: scale(1.05);
+        }
+        .art-fade {
+            animation: fadeInAnimation 1s;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+            animation-timing-function: ease-in-out;
+        }
+        @keyframes fadeInAnimation {
+            from {
+                opacity:0;
+            }
+            to {
+                opacity:1;
+            }
+        }
+
+
+    </style>
+    <script>
+
+
+        function compareElementVerticalPosition(a, b) {
+            const boundRect1 = a.getBoundingClientRect()
+            const boundRect2 = b.getBoundingClientRect()
+
+            const top1 = boundRect1.top + window.pageYOffset
+            const top2 = boundRect2.top + window.pageYOffset
+
+            if (top1 < top2) {
+                return -1;
+            }
+            if (top1 > top2) {
+                return 1;
+            }
+            // a must be equal to b
+            return 0;
+        }
+
+
+        function getSortedElements(elements) {
+            return elements.sort(compareElementVerticalPosition)
+        }
+
+        window.addEventListener('load', (event) => {
+
+
+
+            //console.log("loaded")
+
+
+
+            var myList = document.querySelector('#art')
+            const imageContainerList = []
+/*
+            for (const element of myList.children) {
+
+                imageContainerList.push(element)
+            }
+*/
+            for (var i = myList.children.length; i >= 0; i--) {
+                const element = myList.children[Math.random() * i | 0]
+                myList.appendChild(element)
+                imageContainerList.push(element)
+            }
+
+            const sortedImageContainers = getSortedElements(imageContainerList)
+            for (let i=0; i<sortedImageContainers.length; ++i) {
+                const element = sortedImageContainers[i]
+
+                /*
+                const rect = element.getBoundingClientRect()
+                var node = document.createElement("h6");
+                const ypos = rect.top + window.pageYOffset
+                //const ypos = element.offsetTop
+                const text = '#' + i + ', ' + ypos
+                var textnode = document.createTextNode(text);
+                node.appendChild(textnode);  
+                element.insertBefore(node, element.firstChild)
+                */
+
+                //console.log(element.className)
+                const animationDelay = 'animation-delay: '+ i*100 + 'ms'
+                //console.log(animationDelay)
+                element.setAttribute('style', animationDelay)
+                element.classList.add('art-fade')
+            }
+        })        
+    </script>
+
+
+    <section id="art">
+        {% for image in site.static_files %}
+            {% if image.path contains 'img/art' %}
+                <div class="art-container">
+                    <img src="{{ site.baseurl }}{{ image.path }}" class="art-effect" alt="">
+                </div>
+            {% endif %}
+        {% endfor %}
+    </section>
+
+    <!--
+    <div class="row">
+
+        {% for image in site.static_files %}
+            {% if image.path contains 'img/media' %}
+                <div class="col-lg-2 col-md-2 mb-4 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"">
+
+                    <img src="{{ site.baseurl }}{{ image.path }}" class="img-fluid mb-4" width="320px" alt="">
+
+                </div>
+            {% endif %}
+        {% endfor %}
+
+    </div>
+-->

_includes/compos.html

@@ -0,0 +1,33 @@
+<!-- Portfolio Grid Section -->
+<section id="portfolio">
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-12 text-center">
+                <h2>Competitions</h2>
+                <hr class="star-primary">
+            </div>
+        </div>
+        <div class="row">
+            {% assign compos = site.categories['compos'] | sort: 'date' | reverse %} 
+            {% for compo in compos %}
+                <div class="panel panel-warning">
+                    <div class="panel-heading"><h2>{{ compo.title }}</h2></div>
+                    <div class="panel-body">            
+                        <h4 class="text-muted">
+                            <span>{{ compo.date | date: "%a, %d %B %Y" }}</span>
+                            {% if compo.compo_location %}
+                            <span>, {{ compo.compo_location }}</span>
+                            {% endif %}
+                        </h4>
+                        {% for post in site.posts %} 
+                            {% if post.tags contains compo.compo_id %} 
+                                {% include compos_item.html %} 
+                            {% endif %}
+                    {% endfor %}
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+
+    </div>
+</section>

_includes/compos_item.html

@@ -1,32 +1,29 @@
-<!-- html code to present a compo item -->
-<div class="col-sm-4 portfolio-item">
+<!-- html code to present a compo production item -->
+<div class="col-lg-4 col-md-6 col-sm-12 portfolio-item">
     <div class="panel panel-default">
-        <div class="panel-body">
+        {% if post.rank %}
+        <div class="panel-heading" data-mh="group-newstext"><h5>{{ post.rank | truncate: 50 }}</h5></div>
+            {% endif %}
 
-
-            <!--           <a href="#portfolioModal-{{ post.modal-id }}" class="portfolio-link" data-toggle="modal">
--->
             <a href="{{ post.url }}" class="portfolio-link">
                 <div class="caption">
                     <div class="caption-content">
                         <i class="fa fa-search-plus fa-3x"></i>
                     </div>
                 </div>
-                <img src="/content/{{ post.img }}" class="img-responsive" alt="{{ post.alt }}">
-            </a>
-            <h4>{{ post.title | truncate: 25 }}</h4>
-            <h6>{{ post.excerpt | strip_html }}</h6>
+                <div data-mh="group-prods-images flex-grow-1 overflow-auto">
+                    <img src="/content/{{ post.img }}" class="img-responsive"  style='width:100%;' alt="{{ post.alt }}">
 
+                </div>
+            </a>
 
-            <a href="{{ post.url }}" class="btn btn-default">Read More</a>
-            <!--
-        <a href="{{ post.emulate }}" class="btn btn-default">
-            <i class="fa fa-play-circle"></i> Emulate
-    </a>
-        <a href="{{ post.download }}" class="btn btn-default">
-            <i class="fa fa-download"></i> Download
-    </a>
-    -->
+        <div class="panel-body" data-mh="group-prods">
+            <!-- data-mh attribute puts all the items into a group so that the div height can be matched -->
+            <div data-mh="group-prods-titles">
+                <h4>{{ post.title | truncate: 30 }}</h4> 
+            </div>
+            <h6>{{ post.team }}</h6> 
+            <a href="{{ post.url }}" class="btn btn-default">Read More</a>            
         </div>
     </div>
 </div>

_includes/css/__bootstrap.min.css

@@ -90,13 +90,21 @@ header .container {
     padding-bottom: 50px;
 }
 
+
 header img {
     display: block;
-    margin: 0 auto 20px;
+    /* margin: 0 auto 20px; */
+    margin: 8px;
+    width: auto;
+    height: 150px;
 }
 
-header .intro-text .name {
+header .intro-text {
     display: block;
+    align-items: center;
+}
+
+header .intro-text .name {
     text-transform: uppercase;
     font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 2em;

_includes/css/main.css

@@ -0,0 +1,12 @@
+
+.shaderView {
+  position: absolute;
+  width: 100%;
+  height: 500px;
+  /* background: #f00; */
+}
+#shaderOverlay {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+}