hq/sakrecoer-mother-web
hq/sakrecoer-mother-web
4
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

new layout

Browse source
This commit is contained in:
Set Sakrecoer 2019-07-13 21:11:13 +02:00
parent a50fd5f791
commit 8a67b48dd0
6 changed files with 558 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
_sass/main.scss
View file

@ -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 */
@ -294,4 +364,12 @@ min-height: 80vh;
position: fixed;
bottom: 10px;
right: 10px;
}
.aboutflex {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0;
padding: 0;
background-color: #ffffffc9;
}

122
about/index.html
View file

@ -2,55 +2,95 @@
title: About Sakrecoer
layout: default
---
<a href="{{ site.baseurl }}/">
<h1>About Sakrecoer Uncorporated</h1>
</a>
<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
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"
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 id="hero" style="height: 75vh;">
<img src="images/live_original.gif" alt="reSet Sakrecoer Live In Barcelona" id="reset-photo" />
<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">
<img src="images/simio-photo.jpg" alt="Visit Line25" id="simio-photo" />
<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.
<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.
<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>
<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 />
Center Of Contemporary Art - Geneva<br />
Alcazar - Stockholm<br />
Microdisco Festival - Berlin<br />
Button Factory - Dublin<br />
<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>
<h2>Sakrecoer</h2>
<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 />
Center Of Contemporary Art - Geneva<br />
Alcazar - Stockholm<br />
Microdisco Festival - Berlin<br />
Button Factory - Dublin<br />
<br />
And many many other really really nice ones :) delivering good mood, beat, base and bass! </p>
<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 %}

332
assets/img/basspistol-Patches.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 80 KiB

45
assets/img/sakrecoer-logo.svg
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

29
index.html
View file

@ -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="aboutflex">
<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>
<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">
<div class="editable">
</div>
<img src="{{site.baseurl }}/assets/img/basspistol-Patches.svg" width="100%">
</div>
</div>
</div>
</div>

4
music.html
View file

@ -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 %}