mirror of
https://github.com/safing/web
synced 2025-09-01 18:49:06 +00:00
Add cards
This commit is contained in:
Luke
parent
0f09748a66
commit
731c190e83
3 changed files with 265 additions and 0 deletions
58
_includes/roadmap_card.html
Normal file
58
_includes/roadmap_card.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<div class="card text-left transform scale-95">
|
||||
<div class="block shadowthing p-8 rounded-lg">
|
||||
<div class="tabs">
|
||||
<div class="tab ">
|
||||
<input class="dropinput" type="checkbox" id="chck1">
|
||||
<label style="min-width: 90%; min-height: 150px; display: block;" class=" absolute" for="chck1">
|
||||
<img class="absolute right-0" style="margin-right: 1rem;" id="icon" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
|
||||
</label>
|
||||
<div>
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-blue-100 text-blue-800 mr-2">
|
||||
Portmaster
|
||||
</span>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800 mr-2">
|
||||
Spn
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex pt-6 items-center">
|
||||
<div>
|
||||
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/tick.svg" alt="">
|
||||
<!-- cross <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cross.svg" alt=""> -->
|
||||
<!-- cross <img style="min-width: 19px;" src="{{ site.assets_url }}icons/files.svg" alt=""> -->
|
||||
<!-- cog <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cog.svg" alt=""> -->
|
||||
</div>
|
||||
<h1 class="pl-3 font-bold text-lg">SPN Community Node Support</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-left: 0;" class="tab-content opacity-50 text-md">
|
||||
All details will be finished to fully support community
|
||||
nodes in the network. (This does not include the planned
|
||||
compensation for running a node.) There will be a website
|
||||
to easily get you started.
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-3">
|
||||
<hr>
|
||||
<div class="flex relative pb-2 pt-6 -mt-1">
|
||||
<span style="font-size: 0.8rem;">#866 opened by <strong>BinaryMuse</strong> to atom/github</span>
|
||||
<div class="absolute right-0">
|
||||
<div class="flex-shrink-0 mt-0">
|
||||
<div class="flex overflow-hidden">
|
||||
<img class="inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/raphael.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/daniel.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/patrick.png" alt="">
|
||||
<!-- <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/tabitha.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/luke.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/alex.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/martin.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/david.png" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
116
_includes/roadmap_tablecard.html
Normal file
116
_includes/roadmap_tablecard.html
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<div class="card text-left transform scale-95">
|
||||
<div class="block shadowthing px-8 py-6 rounded-lg">
|
||||
<div class="tabs">
|
||||
<div class="tab relative">
|
||||
<input class="dropinput" type="checkbox" id="chck1">
|
||||
<label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute cursor-pointer" for="chck1">
|
||||
<img class="absolute right-0" style="margin-right: 1rem; margin-top: 1.2rem;" id="icon" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
|
||||
</label>
|
||||
<div class="flex relative ">
|
||||
<div class="self-center -mt-5 hidden md:block">
|
||||
<div class="absolute right-0 mr-12 transform scale-110">
|
||||
<div class="flex-shrink-0 mt-0">
|
||||
<div class="flex overflow-hidden">
|
||||
<img class="inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/raphael.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/daniel.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/patrick.png" alt="">
|
||||
<!-- <img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/tabitha.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/luke.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/alex.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/martin.png" alt="">
|
||||
<img class="-ml-1 inline-block h-6 w-6 rounded-full text-white shadow-solid border-2 border-white" src="http://localhost:4000/assets/img/profiles/david.png" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-blue-100 text-blue-800 mr-2">
|
||||
Portmaster
|
||||
</span>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800 mr-2">
|
||||
Spn
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex pt-3 items-center">
|
||||
<div>
|
||||
<img style="min-width: 19px;" src="{{ site.assets_url }}icons/tick.svg" alt="">
|
||||
<!-- cross <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cross.svg" alt=""> -->
|
||||
<!-- cross <img style="min-width: 19px;" src="{{ site.assets_url }}icons/files.svg" alt=""> -->
|
||||
<!-- cog <img style="min-width: 19px;" src="{{ site.assets_url }}icons/cog.svg" alt=""> -->
|
||||
</div>
|
||||
<h1 class="pl-3 font-bold text-lg">SPN Community Node Support will be releaced</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-left: 0; padding-right: 0;" class="tab-content text-md">
|
||||
<div class="block py-3">
|
||||
<hr>
|
||||
<div class="tab relative" id="tabtwo">
|
||||
<input class="dropinput" type="checkbox" id="chck2">
|
||||
<label style="min-width: 100%; min-height: 115px; display: block;" class="z-10 absolute" for="chck2">
|
||||
<img class="absolute right-0" style="margin-right: 1rem; margin-top: 0.5rem;" id="icontwo" src="{{ site.assets_url }}/icons/arrow.svg" alt="">
|
||||
</label>
|
||||
<div class="flex relative">
|
||||
<div class="self-center -mt-5">
|
||||
<div class="absolute right-0 mr-12 transform scale-110">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex py-3" style="margin-left: 1rem;">
|
||||
<div>
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<span class=" text-md opacity-50">Description</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-left: 3; padding-right: 1em; padding-top: 0;" class="tab-content text-md">
|
||||
<p class="">
|
||||
All details will be finished to fully support community
|
||||
nodes in the network. (This does not include the planned
|
||||
compensation for running a node.) There will be a website
|
||||
to easily get you started.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="pt-5">
|
||||
<h3 class="opacity-75">The Challenge</h3>
|
||||
<p class="">
|
||||
All details will be finished to fully support community
|
||||
nodes in the network. (This does not include the planned
|
||||
compensation for running a node.) There will be a website
|
||||
to easily get you started.
|
||||
</p>
|
||||
</div>
|
||||
<div class="pt-5">
|
||||
<h3 class="opacity-75">The Challenge</h3>
|
||||
<p class="">
|
||||
All details will be finished to fully support community
|
||||
nodes in the network. (This does not include the planned
|
||||
compensation for running a node.) There will be a website
|
||||
to easily get you started.
|
||||
</p>
|
||||
</div>
|
||||
<div class="pt-5">
|
||||
<h3 class="opacity-75">The Challenge</h3>
|
||||
<p class="">
|
||||
All details will be finished to fully support community
|
||||
nodes in the network. (This does not include the planned
|
||||
compensation for running a node.) There will be a website
|
||||
to easily get you started.
|
||||
</p>
|
||||
</div>
|
||||
<div class="pt-12">
|
||||
<hr>
|
||||
<div class="flex relative pb-2 pt-6 -mt-1">
|
||||
<span style="font-size: 0.8rem;">#866 opened by <strong>BinaryMuse</strong> to atom/github</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,6 +180,97 @@ a.link {
|
|||
.hover\:opacity-55:hover {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
|
||||
.dropinput {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/* Accordion styles */
|
||||
.tabs {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.tab {
|
||||
width: 100%;
|
||||
color: black;
|
||||
overflow: hidden;
|
||||
&-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1em;
|
||||
background: transparent;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
/* Icon */
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
&::after {
|
||||
content: " ";
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
transition: all .0s;
|
||||
transition-timing-function: ease;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
}
|
||||
&-content {
|
||||
max-height: 0;
|
||||
padding: 0 1em;
|
||||
color: black;
|
||||
background: transparent;
|
||||
transition: all .2s;
|
||||
transition-timing-function: ease;
|
||||
|
||||
}
|
||||
&-close {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 1em;
|
||||
font-size: 0.75em;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#icon {
|
||||
width: 35px;
|
||||
position: fixed;
|
||||
|
||||
}
|
||||
|
||||
#icontwo {
|
||||
width: 35px;
|
||||
|
||||
}
|
||||
|
||||
// :checked
|
||||
input:checked {
|
||||
|
||||
+ label #icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
+ label #icontwo {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
~ .tab-content {
|
||||
max-height: 100vh;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue