css-team: do homepage

git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@140 a672b425-5310-4d7a-af5c-997e18724b81
2018-11-12 12:48:24 +00:00 · 2018-11-12 12:48:24 +00:00 · ed69d76082
commit ed69d76082
parent 154de0d631
6 changed files with 89 additions and 3 deletions
--- a/site/_layouts/home.html
+++ b/site/_layouts/home.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+  <body onload="typing_shell()" style="background-color:#000;">
+    <header class="spec-header">
+    	<div class="search-box" style="text-align:right;">
+	    	<input type="text" id="search-bar"><label for="search-bar"><img src="/assets/style/search_icon.png"></label>
+	   		<ul id="search-results"></ul>
+	  	</div>
+     	<div><h1 id="title-home" style="display:inline-block;"></h1><span id="blikli"></span></div>
+    </header>
+    <main class="container">
+    {{ content }}
+    </main>
+    {% include footer.html %}
+		<script src="https://cdn.rawgit.com/christian-fei/Simple-Jekyll-Search/master/dest/simple-jekyll-search.min.js"></script>
+		<script>
+		document.addEventListener('DOMContentLoaded', function() {
+			var searchBar = document.getElementById('search-bar');
+			var results = document.getElementById('search-results');
+
+			var sjs = SimpleJekyllSearch({
+				searchInput: searchBar,
+				resultsContainer: results,
+				json: '/search.json',
+				searchResultTemplate:
+					'<li><a href="{url}"><h3>{title}</h3><h4>{category}</h4></a></li>',
+				success: function(sr) {
+					results.setAttribute("class", sr.length <= 1 ? "" : "show");
+				}
+			});
+
+			searchBar.addEventListener('keypress', function () {
+				sjs.search();
+			});
+		});
+
+		var sentence =["T", "H", "E", " ", "S", "H", "E", "L", "L"];
+		var shell = "";
+		var counter = 0;
+
+		function typing_shell(){
+			if(counter < 9){
+				write(counter);
+				counter++;
+			}else{
+				document.getElementById("blikli").classList.add("bli");
+			}
+
+		}
+
+		
+
+		setInterval(
+			typing_shell
+		, 200);
+
+		function write(position){
+			shell = shell + sentence[position];
+			document.getElementById("title-home").innerHTML = shell;
+		}
+		</script>
+  </body>
--- a/site/_sass/_global.scss
+++ b/site/_sass/_global.scss
@ -28,6 +28,10 @@ main {
  padding-bottom: 2em;
 }

+.post-content{
+  line-height: 25px;
+}
+
 a {
  color: #6a6;
 }
--- a/site/_sass/_header.scss
+++ b/site/_sass/_header.scss
@ -126,3 +126,10 @@ header{
    display: block;
  }
 }
+
+
+@keyframes cursor {
+  from, to { border-color: transparent }
+  20% { border-color: orange; }
+}
+
--- a/site/_sass/_home.scss
+++ b/site/_sass/_home.scss
@ -6,6 +6,7 @@
 }

 .home-tile {
+    display:block;
    text-align: center;
    font-size: 1rem;
    margin: .5em;
@ -35,6 +36,10 @@
    width: 100%;
 }

+.hide{
+    opacity:0;
+}
+
@media screen and (max-width: 500px) {

    .home-tiles {
--- a/site/_sass/_topics.scss
+++ b/site/_sass/_topics.scss
@ -59,3 +59,10 @@
  padding: 20px;
  margin: 50px 0;
 }
+
+.bli:after{
+    content:"_";
+    font-size:9vh;
+    animation: blink 800ms linear infinite;
+  }
+
--- a/site/index.html
+++ b/site/index.html
@ -1,12 +1,12 @@
 ---
-layout: main
+layout: home
 category: nosearch
 author: A bunch of people
 title: Home page
 ---
-<video autoplay muted loop id="videoHome">
+<!--<video autoplay muted loop id="videoHome">
 	<source src="assets/style/prew.mp4" type="video/mp4">
-</video>
+</video>-->

 <div class="home-tiles">