dec18
This commit is contained in:
Xsivax
parent
d06c3868e0
commit
b2d623faad
4 changed files with 326 additions and 34 deletions
|
|
@ -1,9 +1,9 @@
|
|||
/* Test */
|
||||
/* only load with child template */
|
||||
|
||||
|
||||
.mobile_placeholder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.open {
|
||||
|
|
@ -18,22 +18,23 @@
|
|||
border-image: linear-gradient(#BDD4E7, #8693AB) 30;
|
||||
}
|
||||
|
||||
.open .box {
|
||||
/* background-image: url('/assets/img/spider_out_bw.webp'); */
|
||||
/* .open .box {
|
||||
background-image: url('/assets/img/spider_out_bw.webp');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
opacity: 20%;
|
||||
grid-row: 1/5;
|
||||
}
|
||||
} */
|
||||
|
||||
.content {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
display: grid;
|
||||
grid-template-rows: .5fr .25fr 1fr .45fr;
|
||||
grid-template-rows: .35fr .25fr 1fr .45fr;
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
|
|
@ -60,7 +61,7 @@
|
|||
font-size: 1.5vh;
|
||||
text-align: center;
|
||||
line-height: 3.5vh;
|
||||
margin-top: 2vh;
|
||||
margin: 2vh 2vw;
|
||||
}
|
||||
|
||||
.content a {
|
||||
|
|
@ -88,8 +89,16 @@
|
|||
background-size: 200% 100%;
|
||||
background-position: left bottom;
|
||||
border: .5vw solid #8693AB;
|
||||
color: #BDD4E7;
|
||||
}
|
||||
|
||||
.content a:active {
|
||||
background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%);
|
||||
background-size: 100% 120%;
|
||||
background-position: left bottom;
|
||||
border: .25vw solid #8693AB;
|
||||
color: #BDD4E7;
|
||||
}
|
||||
|
||||
|
||||
.close {
|
||||
|
|
@ -99,7 +108,7 @@
|
|||
color: #e5e7e6;
|
||||
position: fixed;
|
||||
top: 15vh;
|
||||
left: 80vw;
|
||||
left: 70vw;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -110,21 +119,9 @@ input {
|
|||
cursor: pointer;
|
||||
position: fixed;
|
||||
top: 15vh;
|
||||
left: 80vw;
|
||||
left: 70vw;
|
||||
}
|
||||
|
||||
input:checked ~ .open {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked ~ .close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:hover ~ .close {
|
||||
animation: shine 4s ease-in forwards;
|
||||
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
|
|
@ -141,6 +138,43 @@ input:hover ~ .close {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
input:hover ~ .close {
|
||||
animation: shine 4s ease-in forwards;
|
||||
|
||||
}
|
||||
|
||||
input:active ~ .close {
|
||||
animation: shine 4s ease-in forwards;
|
||||
|
||||
}
|
||||
|
||||
/* test */
|
||||
|
||||
@keyframes shine2 {
|
||||
0% {
|
||||
stroke: #8693AB;
|
||||
|
||||
}
|
||||
|
||||
25% {
|
||||
stroke:#BDD4E7;
|
||||
}
|
||||
50% {
|
||||
stroke: #8693AB;
|
||||
|
||||
}
|
||||
75% {
|
||||
stroke:#BDD4E7;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke: #8693AB
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-height: 750px) {
|
||||
.open {
|
||||
max-height: 60vh;
|
||||
|
|
@ -153,10 +187,66 @@ input:hover ~ .close {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-height: 880px) {
|
||||
@media (min-height: 800px) and (max-width: 768px) {
|
||||
.open {
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.25vh !important;
|
||||
margin: 3vh 0 2vh 0 !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5vh !important;
|
||||
line-height: 2.5vh !important;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.05vh !important;
|
||||
line-height: 2.5vh !important;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.45vh !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 840px) and (max-width: 1080px) {
|
||||
|
||||
h2 {
|
||||
font-size: 3.25vh !important;
|
||||
margin: 3vh 0 2vh 0 !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5vh !important;
|
||||
line-height: 2.5vh !important;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.05vh !important;
|
||||
line-height: 2.5vh !important;
|
||||
}
|
||||
|
||||
.content a {
|
||||
font-size: 1.45vh !important;
|
||||
margin: 0 !important;
|
||||
width: 15vw !important;
|
||||
height: 3.5vh !important;
|
||||
border: .25vw solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-height: 1020px) and (max-width: 768px) {
|
||||
p {
|
||||
font-size: 1.25vh !important;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 1000px) {
|
||||
|
|
@ -177,6 +267,39 @@ input:hover ~ .close {
|
|||
max-width: inherit;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
input:hover ~ .close {
|
||||
animation: shine2 3s ease-in forwards;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
|
||||
.open {
|
||||
max-width: 35vw;
|
||||
top: 20vh;
|
||||
right: 10vw;
|
||||
}
|
||||
|
||||
.close {
|
||||
top: 10vh;
|
||||
left: 75vw;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 10vh;
|
||||
top: 10vh;
|
||||
left: 80vw;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -25,17 +25,17 @@ svg {
|
|||
.nodes:active, .nodes:hover {
|
||||
|
||||
animation: svg_pulse 2s ease-in-out forwards;
|
||||
|
||||
}
|
||||
|
||||
#circle_one:active {
|
||||
opacity: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@keyframes svg_pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
stroke: #8693AB;
|
||||
fill-opacity: 100%;
|
||||
}
|
||||
|
||||
20% {
|
||||
|
|
@ -54,6 +54,7 @@ svg {
|
|||
100% {
|
||||
transform: scale(1);
|
||||
stroke: #8693AB;
|
||||
fill-opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -78,6 +79,16 @@ svg {
|
|||
|
||||
}
|
||||
|
||||
.group_1:hover > #edge_11 {
|
||||
animation: glowing 2s ease-in forwards;
|
||||
|
||||
}
|
||||
|
||||
.group_1:active > #edge_11 {
|
||||
animation: glowing 2s ease-in forwards;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.group_2:hover > #edge_3 {
|
||||
animation: glowing 2s ease-in forwards;
|
||||
|
|
@ -129,6 +140,18 @@ svg {
|
|||
animation: glowing 2s ease-in forwards;
|
||||
}
|
||||
|
||||
|
||||
.group_3:hover > #edge_10 {
|
||||
animation: glowing 2s ease-in forwards;
|
||||
}
|
||||
|
||||
.group_3:active > #edge_10 {
|
||||
animation: glowing 2s ease-in forwards;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.group_4:hover > #edge_9 {
|
||||
animation: glowing 2s ease-in forwards;
|
||||
}
|
||||
|
|
@ -162,14 +185,62 @@ svg {
|
|||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
svg {
|
||||
max-height: 100vh;
|
||||
max-width: 65vw;
|
||||
|
||||
|
||||
@media (min-width: 0 ) {
|
||||
#tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
svg {
|
||||
max-height: 70vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tablet {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
svg {
|
||||
max-height: 70vh;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
svg {
|
||||
max-height: 77.5vh;
|
||||
width: 50vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media (min-height: 1070px) {
|
||||
svg {
|
||||
max-height: 64vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 840px) and (max-width: 768px) {
|
||||
svg {
|
||||
max-height: 70vh;
|
||||
top: 15vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -98,7 +98,104 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->
|
||||
|
||||
<!--Tablet & Desktop -->
|
||||
<div id="tablet">
|
||||
<svg id="a" width="768" height="1024" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
|
||||
<defs>
|
||||
<pattern id="tekla" height="100%" width="100%">
|
||||
<image href="/assets/img/spider_out.webp" width="44" height="30"></image>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<defs>
|
||||
<pattern id="rootwork" height="100%" width="100%">
|
||||
<image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<defs>
|
||||
<pattern id="cyberb" height="100%" width="100%">
|
||||
<image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<defs>
|
||||
<pattern id="kaosk" height="100%" width="100%">
|
||||
<image href="/assets/img/cube_space.webp " width="25" height="25"></image>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<defs>
|
||||
<pattern id="hempium" height="100%" width="100%">
|
||||
<image href="/assets/img/hemp.webp" width="30" height="45"></image>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<defs>
|
||||
<pattern id="machinalala" height="100%" width="100%">
|
||||
<image href="/assets/img/boat_construction.webp" width="26" height="31"></image>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
|
||||
<g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
|
||||
|
||||
<g class="group_1">
|
||||
<path id="edge_1" class="edges" d="m-10 20 l90 15 " stroke-width="2.6458"/>
|
||||
<path id="edge_2" class="edges" d="m-10 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
|
||||
<path id="edge_11" class="edges" d="m-5 30 l80 55"/>
|
||||
<a href="/robot">
|
||||
<ellipse id="circle_one" class="nodes" cx="0" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#tekla)" fill-opacity="1"/>
|
||||
</a>
|
||||
</g>
|
||||
|
||||
<g class="group_2">
|
||||
<path id="edge_3" class="edges" d="m-10 70 l80 -30" stroke-width="2.6458"/>
|
||||
<path id="edge_6" class="edges" d="m75 40 l -60 65" stroke-width=".52917"/>
|
||||
<path id="edge_4" class="edges" d="m70 85 l5 -50" stroke-width="3.4396"/>
|
||||
<path id="edge_5" class="edges" d="m90 100 l -10 -60" stroke-width=".48836px"/>
|
||||
<a href="/app">
|
||||
<circle id="circle_2" class="nodes" cx="80" cy="35" r="13" style="paint-order:fill stroke markers" fill="url(#rootwork)"/>
|
||||
</a>
|
||||
</g>
|
||||
|
||||
<g class="group_3">
|
||||
<path id="edge_10" class="edges" d="m20 95.5 l-35 -25"/>
|
||||
<path id="edge_7" class="edges" d="m1 75 l70 3" stroke-width=".52917"/>
|
||||
<path id="edge_8" class="edges" d="m-1 77.5 l90 30"/>
|
||||
|
||||
|
||||
<a href="/virtual">
|
||||
<circle id="circle_3" class="nodes" cx="-10" cy="70" r="13" style="paint-order: fill stroke markers" fill="url(#cyberb)"/>
|
||||
</a>
|
||||
</g>
|
||||
|
||||
<g class="group_4">
|
||||
<path id="edge_9" class="edges" d="m75 87.5 l10 10"/>
|
||||
<circle id="circle_4" class="nodes" cx="70" cy="80" r="12" style="paint-order: fill stroke markers" fill="url(#kaosk)"/>
|
||||
</g>
|
||||
|
||||
<g class="group_5">
|
||||
|
||||
<a id="link_1" href="/spider" style="paint-order: fill stroke markers">
|
||||
<circle id="circle_5" class="nodes" cx="20.734" cy="102.5" r="12.5" style="paint-order: fill stroke markers" fill="url(#hempium)"/>
|
||||
</a>
|
||||
</g>
|
||||
|
||||
<circle id="circle_6" class="nodes" cx="90" cy="105" r="12" style="paint-order: fill stroke markers" fill="url(#machinalala)"/>
|
||||
</g>
|
||||
|
||||
<g fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".12003">
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{% block child %} {% endblock %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -17,13 +17,14 @@
|
|||
<stop offset="95%" stop-color="#8693AB" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</form>
|
||||
<div class="open">
|
||||
{# Test - add language handling#}
|
||||
<div class="box">
|
||||
</div>
|
||||
<!-- <div class="box">
|
||||
</div> -->
|
||||
<div class="content">
|
||||
<h2>Tekla</h2>
|
||||
<h3>Automatic Biodynamic Gardening for Everyone</h3>
|
||||
|
|
|
|||
Loading…
Reference in a new issue