new layout

2019-07-13 21:11:13 +02:00 · 2019-07-13 21:11:13 +02:00 · 8a67b48dd0
parent a50fd5f791
commit 8a67b48dd0
6 changed files with 558 additions and 66 deletions
--- a/_sass/main.scss
+++ b/_sass/main.scss
@ -3,6 +3,7 @@ html {

 }
 body{
+  
  background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9));
  background-position: center;
  background-repeat: repeat;
@ -29,7 +30,34 @@ body{

 }
 a {
-  font-weight: normal;
+  color: #0000009f;
+  transition: background-size 0.5s ease-in-out;
+  border-radius: 3px;
+}
+a:hover {
+  color: #0000009f;
+  background: linear-gradient(230deg, rgba(218, 158, 142, 0.3), rgba(236, 0, 228, 0.3), rgba(0, 212, 236, 0.3), rgba(0, 236, 173, 0.3), rgba(110, 0, 236, 0.3));
+  background-size: 1000% 1000%;
+
+  -webkit-animation: AnimationName 30s ease infinite;
+  -moz-animation: AnimationName 30s ease infinite;
+  animation: AnimationName 30s ease infinite;
+  
+  @-webkit-keyframes AnimationName {
+      0%{background-position:0% 91%}
+      50%{background-position:100% 10%}
+      100%{background-position:0% 91%}
+  }
+  @-moz-keyframes AnimationName {
+      0%{background-position:0% 91%}
+      50%{background-position:100% 10%}
+      100%{background-position:0% 91%}
+  }
+  @keyframes AnimationName {
+      0%{background-position:0% 91%}
+      50%{background-position:100% 10%}
+      100%{background-position:0% 91%}
+  }
 }
 #hero {
  display: flex;
@ -39,9 +67,9 @@ a {
  position: relative;
  height: 100vh;
  width: 100%;
-  background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9));
+  background: linear-gradient(230deg, rgba(218, 159, 142, 0.8), rgba(236, 0, 228, 0.8), rgba(0, 212, 236, 0.8), rgba(0, 236, 173, 0.8), rgba(110, 0, 236, 0.8));
  background-size: 1000% 1000%;
-  
+  color: #fff;
  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;
@ -68,16 +96,18 @@ a {
    background-attachment: fixed;
    flex: wrap;
    background-color: rgba(68, 0, 124, 0.568);
-    border-radius: 40px;
+
    margin: auto;
    letter-spacing: -.05em;
    line-height: .95em;
    padding: 20px;
-    box-shadow: 5px 10px rgba(61, 0, 102, 0.5);
+    box-shadow: 5px 10px rgba(61, 0, 102, 0.2);
    border: #000 solid 1px;
    flex: 0 0 300px;;
    }
-
+    .pivot {
+      border-radius: 40px;
+    }
  h1 {

    font-size: 3em;
@ -89,7 +119,47 @@ a {
    font-size: 1em;
    line-height: .8em;
  }  
+  .fullscreen-bg {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    z-index: -100;
+  }
  
+  .fullscreen-bg__video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  
+  @media (min-aspect-ratio: 16/9) {
+    .fullscreen-bg__video {
+      height: 300%;
+      top: -100%;
+    }
+  }
+  
+  @media (max-aspect-ratio: 16/9) {
+    .fullscreen-bg__video {
+      width: 300%;
+      left: -100%;
+    }
+  }
+  
+  @media (max-width: 767px) {
+    .fullscreen-bg {
+      background: url('/assets/img/sakrecoer-logo.svg') center center / cover no-repeat;
+    }
+  
+    // .fullscreen-bg__video {
+    //   display: none;
+    // }
+  }
 }

 /* MUSIC INDEX */
@ -295,3 +365,11 @@ min-height: 80vh;
  bottom: 10px;
  right: 10px;
 }
+.aboutflex {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin: 0;
+  padding: 0;
+  background-color: #ffffffc9;
+}
--- a/about/index.html
+++ b/about/index.html
@ -2,39 +2,53 @@
 title: About Sakrecoer
 layout: default
 ---
-<a href="{{ site.baseurl }}/">
-  <h1>About Sakrecoer Uncorporated</h1>
-</a>
+<div id="hero" style="height: 75vh;">

-<p><b>Sakrecoer Uncorporated</b> Stands for independent fun-loving Activism, Art &amp; Music. I am a 1980 born
+
+  <div class="pivot">
+    <h2>About</h2>
+    <h1>Sakrecoer</h1>
+  </div>
+  <div class="fullscreen-bg">
+    <video loop muted autoplay poster="{{ site.baseurl }}/assets/img/sakrecoer-logo.svg" class="fullscreen-bg__video">
+        <source src="{{ site.baseurl }}/assets/vi/0001-0076.webm" type="video/webm">
+        <source src="{{ site.baseurl }}/assets/vi/0001-0076.mp4" type="video/mp4">
+        <!-- <source src="video/big_buck_bunny.ogv" type="video/ogg"> -->
+    </video>
+</div>
+
+
+</div>
+<div class="aboutflex">
+  <div class="trackcontainer">
+
+    <p><b>Sakrecoer Uncorporated</b> Stands for independent fun-loving Activism, Art &amp; Music. I am a 1980 born
      robot. If <a href="https://en.wikipedia.org/wiki/Monica_Zetterlund" target="_blank">Monica Zetterlund</a> was
      a cyberpunk making electronic music, I would probably be Her. The red thread in my music is African. Vocals,
      manually operated groove-boxes, bass and lots of rhythmics are populating my colorful soundscapes that often
      get associated to the the pop-culture. I aim for questions rather than answers and at pushing <i>your</i>
-  creativity. I move by feet in the streets and value my integrity.</p>
-<p>My 2016 motto is to record live versions of sexy beats i do right away and post them everywhere. This way I'm
+      creativity. I move by feet in the streets and value my integrity.
+      <br /><br />My 2016 motto is to record live versions of sexy beats i do right away and post them everywhere. This way I'm
      hoping to help people keep focused on making love rather than fu*king eachother up. In the midst of 2077, I
      hope to have a number of songs worth flying to venus with. Then I'll make them sound even nicer, but most
-  likeley just do better new ones or save the world.</p>
-<p>I go by many aliases that you will find if you scroll down this page.</p>
-<p style="font-size:9px">This website was deisgned and executed by <a href="http://set.hallstrom.ch"
+      likeley just do better new ones or save the world.
+      <br />I go by many aliases that you will find if you scroll down this page.</p>
+    <p style="font-size:9px">This website was deisgned and executed by <a href="http://set.hallstrom.ch"
        target="_blank">me</a> On these pages I push sounds, images, thoughts and passion for cool robots like you,
      thanks to the good Alsenet.com people and the Helevtico-Russian Linux Lovers Circle.</p>
+  </div>

+  <div class="trackcontainer">
+      <div class="track" style="background-image:url('images/live_original.gif');">
+      </div>
+  </div>
+  <div class="trackcontainer">
+    <div class="track" style="background-image:url('images/simio-photo.jpg');">
+    </div>
+  </div>

-
-<img src="images/live_original.gif" alt="reSet Sakrecoer Live In Barcelona" id="reset-photo" />
-
-
-
-<img src="images/simio-photo.jpg" alt="Visit Line25" id="simio-photo" />
-
-
-
-
-
-<h2>Sakrecoer</h2>
-<p>The past gig list is to longtimes and for forgotten
+  <div class="trackcontainer">
+    <p>The past gig list is to longtimes and for forgotten
      times! Recieved with enthusiasm by several venues, big and small such as: <br /><br />
      Apolo Nitsa - Barcelona<br />
      Dachkantine - Z&uuml;rich<br />
@ -45,12 +59,38 @@ layout: default
      <br />
      And many many other really really nice ones :) delivering good mood, beat, base and bass! </p>
    
+  </div>
+
+
+  <div class="trackcontainer">
+    <div class="track" style="background-image:url('images/cs-vid-1.jpg');">
+    </div>
+  </div>
+  <div class="trackcontainer">
+    <div class="track" style="background-image:url('images/cs-vid-2.jpg');">
+    </div>
+  </div>
+  <div class="trackcontainer">
+    <div class="track" style="background-image:url('images/cs-vid-3.jpg');">
+    </div>
+  </div>
+  <div class="trackcontainer">
+    <div class="track" style="background-image:url('images/cs-vid-4.jpg');">
+    </div>
+  </div>
+  <div class="trackcontainer">
+    <div class="track" style="background-image:url('images/cs-vid-5.jpg');">
+    </div>
+  </div>
+  <div class="trackcontainer">
+    <div class="track" style="background-image:url('images/cs-vid-6.jpg');">
+    </div>
+  </div>
+
+  </div>
+
+</div>
+

-<img src="images/cs-vid-1.jpg" alt="" />
-<img src="images/cs-vid-2.jpg" alt="" />
-<img src="images/cs-vid-3.jpg" alt="" />
-<img src="images/cs-vid-4.jpg" alt="" />
-<img src="images/cs-vid-5.jpg" alt="" />
-<img src="images/cs-vid-6.jpg" alt="" />

 {% include navmenu.html %}
--- a/assets/img/basspistol-Patches.svg
+++ b/assets/img/basspistol-Patches.svg
--- a/assets/img/sakrecoer-logo.svg
+++ b/assets/img/sakrecoer-logo.svg
@ -5,11 +5,35 @@
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg8"
   version="1.1"
   viewBox="0 0 40.030647 38.96828"
   height="38.968281mm"
-   width="40.030647mm">
+   width="40.030647mm"
+   sodipodi:docname="sakrecoer-logo.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1136"
+     inkscape:window-height="746"
+     id="namedview1019"
+     showgrid="false"
+     inkscape:zoom="1.6023716"
+     inkscape:cx="95.706842"
+     inkscape:cy="78.633445"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg8" />
  <defs
     id="defs2" />
  <metadata
@ -20,24 +44,25 @@
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
-     transform="translate(-15.84586,-127.02402)"
-     id="layer1">
+     id="g1568"
+     style="opacity:0.85">
    <ellipse
       ry="13.112915"
       rx="13.136927"
       transform="matrix(0.97529502,-0.22090637,0.22365011,0.9746695,0,0)"
-       cy="151.46916"
-       cx="5.1130805"
+       cy="24.082312"
+       cx="18.077591"
       id="path874"
-       style="opacity:0.997;fill:none;fill-opacity:0.6476684;stroke:#000000;stroke-width:7.4779706;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:0.6735751;paint-order:normal" />
+       style="opacity:0.997;fill:none;fill-opacity:0.6476684;stroke:#000000;stroke-width:7.4779706;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" />
    <path
-       style="fill:#8a916f;stroke-width:0.12279122"
-       d="m 42.245722,165.03592 -0.219499,-0.95657 -0.976174,0.2211 -0.976173,0.22111 -0.139529,-0.97469 -0.139529,-0.97469 -0.961744,0.21784 -0.961745,0.21783 -0.219496,-0.95656 -0.219498,-0.95658 -0.958941,0.2172 -0.958939,0.21721 -0.219498,-0.95658 -0.219498,-0.95657 -0.899007,0.20362 -0.899006,0.20363 -0.205778,-0.89678 -0.205779,-0.89679 -0.958941,0.2172 -0.958939,0.2172 -0.219498,-0.95657 -0.219498,-0.95658 -0.958941,0.2172 -0.95894,0.21721 -0.644774,-2.80994 -0.644774,-2.80993 0.958941,-0.2172 0.95894,-0.2172 -0.201754,-0.87925 -0.201753,-0.87924 0.899356,-0.28501 c 0.494633,-0.15682 1.32272,-0.38101 1.84019,-0.49821 l 0.940855,-0.21311 -0.219499,-0.95657 -0.219496,-0.95657 0.95894,-0.2172 0.95894,-0.2172 -0.425278,-1.85337 -0.425276,-1.85336 -1.852904,0.41969 -1.852904,0.41969 -0.247647,-0.91876 -0.247645,-0.91875 -2.77829,0.59552 -2.778289,0.59552 -0.202725,-0.5354 c -0.111505,-0.29447 -0.238044,-0.68931 -0.281209,-0.87743 l -0.07848,-0.34202 -0.95894,0.2172 -0.95894,0.21721 -0.219498,-0.95658 -0.219498,-0.95658 -0.899006,0.20363 -0.899006,0.20363 -0.20578,-0.89679 -0.205777,-0.89678 -0.958941,0.2172 -0.95894,0.2172 -0.237204,-1.03374 -0.237205,-1.03374 8.491463,-1.87365 8.491462,-1.87365 -0.477925,-1.87288 -0.477924,-1.87289 3.851582,-0.87239 3.851584,-0.87239 0.219498,0.95658 0.219499,0.95657 -0.950315,0.21525 -0.950315,0.21525 0.06631,0.65435 c 0.03647,0.35991 0.114796,0.78084 0.174043,0.93542 l 0.107733,0.28107 8.469721,-1.9684 8.469722,-1.9684 0.237253,1.03396 0.237256,1.03396 -0.95894,0.2172 -0.95894,0.2172 0.205777,0.89678 0.20578,0.89679 -0.899006,0.20363 -0.899006,0.20363 0.219498,0.95657 0.219498,0.95658 -0.948713,0.21488 -0.948712,0.21489 0.121238,0.91365 0.121239,0.91365 -2.765676,0.6602 -2.765675,0.6602 0.177631,0.93461 0.177633,0.93462 -1.792971,0.40611 -1.79297,0.40611 0.425276,1.85335 0.425278,1.85337 0.899006,-0.20363 0.899006,-0.20362 0.219496,0.95656 0.219498,0.95658 1.049035,-0.23672 c 0.576971,-0.13019 1.420993,-0.28493 1.875636,-0.34374 l 0.826596,-0.10704 0.201812,0.8795 0.20181,0.87949 0.95894,-0.2172 0.95894,-0.2172 0.644776,2.80994 0.644774,2.80993 -0.95894,0.2172 -0.95894,0.2172 0.219498,0.95658 0.219498,0.95657 -0.958939,0.21721 -0.95894,0.2172 0.205777,0.89678 0.20578,0.89679 -0.899006,0.20363 -0.899007,0.20362 0.218343,0.95155 0.218344,0.95154 -0.920962,0.24532 -0.920963,0.24533 0.177631,0.93461 0.17763,0.9346 -0.956702,0.2167 -0.956703,0.21669 0.299467,0.93847 0.299468,0.93846 -0.976173,0.2211 -0.976174,0.22111 0.219496,0.95656 0.219498,0.95658 -0.95894,0.2172 -0.958941,0.2172 -0.219498,-0.95657 z m -1.978205,-17.41358 -0.219498,-0.95658 0.899006,-0.20362 0.899006,-0.20363 -0.20578,-0.89679 -0.205777,-0.89678 -2.756953,0.62446 -2.756952,0.62445 0.205778,0.89678 0.205779,0.89679 0.899006,-0.20363 0.899006,-0.20362 0.219499,0.95657 0.219498,0.95658 0.95894,-0.2172 0.95894,-0.21721 z"
-       id="path867" />
+       style="fill:#445500;stroke-width:0.12279122;fill-opacity:1;opacity:1"
+       d="m 26.399862,38.0119 -0.219499,-0.95657 -0.976174,0.2211 -0.976173,0.22111 -0.139529,-0.97469 -0.139529,-0.97469 -0.961744,0.21784 -0.961745,0.21783 -0.219496,-0.95656 -0.219498,-0.95658 -0.958941,0.2172 -0.958939,0.21721 -0.219498,-0.95658 -0.219498,-0.95657 -0.899007,0.20362 -0.899006,0.20363 -0.205778,-0.89678 -0.205779,-0.89679 -0.958941,0.2172 -0.958939,0.2172 -0.219498,-0.95657 -0.219498,-0.95658 -0.958941,0.2172 -0.95894,0.21721 -0.644774,-2.80994 -0.644774,-2.80993 0.958941,-0.2172 0.95894,-0.2172 -0.201754,-0.87925 -0.201753,-0.87924 0.899356,-0.28501 c 0.494633,-0.15682 1.32272,-0.38101 1.84019,-0.49821 L 16.650499,21.3522 16.431,20.39563 l -0.219496,-0.95657 0.95894,-0.2172 0.95894,-0.2172 -0.425278,-1.85337 -0.425276,-1.85336 -1.852904,0.41969 -1.852904,0.41969 -0.247647,-0.91876 -0.247645,-0.91875 -2.77829,0.59552 -2.778289,0.59552 -0.202725,-0.5354 C 7.206921,14.66097 7.080382,14.26613 7.037217,14.07801 L 6.958737,13.73599 5.999797,13.95319 5.040857,14.1704 4.821359,13.21382 4.601861,12.25724 3.702855,12.46087 2.803849,12.6645 2.598069,11.76771 2.392292,10.87093 1.433351,11.08813 0.474411,11.30533 0.237207,10.27159 2e-6,9.23785 8.491465,7.3642 16.982927,5.49055 16.505002,3.61767 16.027078,1.74478 19.87866,0.87239 23.730244,0 23.949742,0.95658 24.169241,1.91315 23.218926,2.1284 22.268611,2.34365 22.334921,2.998 c 0.03647,0.35991 0.114796,0.78084 0.174043,0.93542 l 0.107733,0.28107 8.469721,-1.9684 8.469722,-1.9684 0.237253,1.03396 0.237256,1.03396 -0.95894,0.2172 -0.95894,0.2172 0.205777,0.89678 0.20578,0.89679 -0.899006,0.20363 -0.899006,0.20363 0.219498,0.95657 0.219498,0.95658 -0.948713,0.21488 -0.948712,0.21489 0.121238,0.91365 0.121239,0.91365 -2.765676,0.6602 -2.765675,0.6602 0.177631,0.93461 0.177633,0.93462 -1.792971,0.40611 -1.79297,0.40611 0.425276,1.85335 0.425278,1.85337 0.899006,-0.20363 0.899006,-0.20362 0.219496,0.95656 0.219498,0.95658 1.049035,-0.23672 c 0.576971,-0.13019 1.420993,-0.28493 1.875636,-0.34374 l 0.826596,-0.10704 0.201812,0.8795 0.20181,0.87949 0.95894,-0.2172 0.95894,-0.2172 0.644776,2.80994 0.644774,2.80993 -0.95894,0.2172 -0.95894,0.2172 0.219498,0.95658 0.219498,0.95657 -0.958939,0.21721 -0.95894,0.2172 0.205777,0.89678 0.20578,0.89679 -0.899006,0.20363 -0.899007,0.20362 0.218343,0.95155 0.218344,0.95154 -0.920962,0.24532 -0.920963,0.24533 0.177631,0.93461 0.17763,0.9346 -0.956702,0.2167 -0.956703,0.21669 0.299467,0.93847 0.299468,0.93846 -0.976173,0.2211 -0.976174,0.22111 0.219496,0.95656 0.219498,0.95658 -0.95894,0.2172 -0.958941,0.2172 -0.219498,-0.95657 z m -1.978205,-17.41358 -0.219498,-0.95658 0.899006,-0.20362 0.899006,-0.20363 -0.20578,-0.89679 -0.205777,-0.89678 -2.756953,0.62446 -2.756952,0.62445 0.205778,0.89678 0.205779,0.89679 0.899006,-0.20363 0.899006,-0.20362 0.219499,0.95657 0.219498,0.95658 0.95894,-0.2172 0.95894,-0.21721 z"
+       id="path867"
+       inkscape:connector-curvature="0" />
  </g>
 </svg>
--- a/index.html
+++ b/index.html
@ -18,22 +18,35 @@ layout: default
    <h1><a href="/about/" alt="About Sakrecoer">Where am I?</a></h1>
  </div>
  <div class="pivot">
-    
+    <h2>Stream</h2>
    <h1><a href="/music/" alt="Music of Sakrecoer">Music</a></h1>

  </div>
+  <div class="fullscreen-bg">
+    <video loop muted autoplay poster="{{ site.baseurl }}/assets/img/sakrecoer-logo.svg" class="fullscreen-bg__video">
+        <source src="{{ site.baseurl }}/assets/vi/0001-0076.webm" type="video/webm">
+        <source src="{{ site.baseurl }}/assets/vi/0001-0076.mp4" type="video/mp4">
+        <!-- <source src="video/big_buck_bunny.ogv" type="video/ogg"> -->
+    </video>
+  </div>
+
 </div>

-<div class="musiflex">
-  <div class="trackcontainer">
-    <div class="editable">
-      <p>I push sounds, images, thoughts and passion for <b>cool robots like you.</b><br /><br />I
-        am funky, I deliver and <b>I was born tomorrow.</b></p>
-    </div>
-  </div>
+<div class="aboutflex">
  <div class="trackcontainer">
+    
    <div class="editable">
+        <h3>I push sounds, images, thoughts and passion for <b>cool robots like you.</b><br /><br />I
+          am funky, I deliver and <b>I was born tomorrow.</b></h3>
+            <img src="{{ site.baseurl }}/assets/img/sakrecoer-logo.svg" width="100%" alt="sakrecoer logo">
+
  
    </div>
  </div>
+
+  <div class="trackcontainer">
+    <img src="{{site.baseurl }}/assets/img/basspistol-Patches.svg" width="100%">
+  </div>
 </div>
+</div>
+
--- a/music.html
+++ b/music.html
@ -5,7 +5,11 @@ layout: default
 ---
 {% include navmenu.html %}
 <div class="musiflex">
+  
  <div class="trackcontainer">
+     
+          <img src="{{site.baseurl }}/assets/img/sakrecoer-logo.svg" width="100%" alt="sakrecoer logo">
+       
    <h1>Music</h1>
  </div>
  {% for track in site.tracks reversed %}