- Adding templates for Alerts
- Moving tempaltes to correct directories
- Added React-UI template for future use of embedded React UI's.
This commit is contained in:
ZanzyTHEbar 2022-06-03 17:42:51 +02:00
parent 6474c04296
commit db957f8ec9
16 changed files with 323 additions and 10 deletions

View File

@ -37,11 +37,7 @@ When files and resources are released <ins>**DO NOT BYPASS (OR NOT DO) ANY SAFET
The safety measures were put in place to REDUCE the potential failure risk. All further safety responsibilities is on the user.
This includes visually checking with an IR camera that the brightness is correct.
> <p>
> <span class="icon-span-warning"><svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg><b>Warning:</b></span>
> Make sure you are using **NON-focused** emitters and at around ***5ma total power***.
{: .fs-5 .fw-300 }
> </p>
{% include templates/alerts/warning.html content="Make sure you are using <b>NON-focused</b> emitters and at around <i><b>5ma total power</b></i>." %}
<p style="page-break-after:always;"></p>

16
docs/_data/FAQ/FAQ.yml Normal file
View File

@ -0,0 +1,16 @@
---
# Use this YAML file to create a list of FAQ questions and answers
- Question: 'How do I contribute to the project?'
Answer: 'Lead Documentation Manager'
- Question: 'How do I contribute to the project?'
Answer: 'Lead Documentation Manager'
- Question: 'How do I contribute to the project?'
Answer: 'Lead Documentation Manager'
- Question: 'How do I contribute to the project?'
Answer: 'Lead Documentation Manager'
---

View File

@ -3,12 +3,12 @@
{% assign maxposts = 5 %}
<ul class="post-list text-muted list-unstyled">
{% for post in site.posts limit: maxposts %}
<li>
<p>
<a class="article-link" href="">
<li>
<p>
<a class="article-link" href="">
{{ post.title | escape }}</a>
</p>
</li>
</p>
</li>
{% endfor %}
</ul>
</div>

View File

View File

@ -0,0 +1,5 @@
> <p>
> <span class="icon-span-warning"><svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg><b>Warning:</b></span>
> {{ include.content}}
{: .fs-5 .fw-300 }
> </p>

View File

@ -0,0 +1,38 @@
<!--
This is a list of posts.
Note that the post variable only exists inside the for loop above.
If you wish to access the currently-rendering page/postss variables
(the variables of the post/page that has the for loop in it), use the page variable instead.
Here is the official documentation:
http://jekyllrb.com/docs/posts/
-->
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
<!-- <ul>
Here's an example of outputting a list of blog posts with an excerpt:
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
{{ post.excerpt }}
</li>
{% endfor %}
</ul> -->
<!-- {% for tag in site.tags %}
<h3>{{ tag[0] }}</h3>
<ul>
{% for post in tag[1] %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
{% endfor %} -->

View File

@ -0,0 +1,70 @@
<!-- <figure class="image">
<img src="{{ include.url }}" alt="{{ include.description }}">
<figcaption>{{ include.description }}</figcaption>
</figure> -->
<style>
.image-{{ include.image }} {
display: flex;
flex-direction: column;
/* align-items: center; */
justify-content: space-between;
/* justify-content: center; */
overflow: hidden;
}
.image-{{ include.image }} img {
flex-shrink: 0;
width: {{ include.width }}px;
height: {{ include.height }}px;
object-fit: cover;
border-radius: 20px;
}
.image-{{ include.image }} figcaption {
text-align: center;
}
.image-card-grid-{{ include.image }} {
max-width: {{ include.width }}px;
margin: 0 auto;
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.image-card-{{ include.image }} {
flex-shrink: 0;
width: {{ include.width }}px;
height: {{ include.height }}px;
object-fit: cover;
background-color: white;
box-shadow: 2px 2px 12px 1px rgba(8, 8, 8, 0.5);
border-radius: 20px;
}
.image-content-form-{{ include.image }} {
padding: 5%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
/* justify-content: center; */
overflow: hidden;
}
.p-image-{{ include.image }}{
align-self: center;
}
</style>
<p class="p-image-{{ include.image }}" align="center">
<div class="image-content-form-{{ include.image }}">
<div class="image-card-grid-{{ include.image }}">
<div class="image-card-{{ include.image }}">
<figure class="image-{{ include.image }}">
<img draggable="false" class="image-{{ include.image }}" src="{{ include.src }}" alt="{{ include.tags }}">
<div style="padding-top: 10px"></div>
<figcaption><i>{{ include.description }}</i></figcaption>
</figure>
</div>
</div>
</div>
</p>

View File

@ -0,0 +1,186 @@
<!-- Trigger/Open The Modal -->
<style>
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 2;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 100%;
max-width: 700px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
animation: fadeIn 0.8s;
-webkit-animation: fadeIn 0.8s;
-moz-animation: fadeIn 0.8s;
-o-animation: fadeIn 0.8s;
-ms-animation: fadeIn 0.8s;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 100%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
.modal::-webkit-scrollbar {
display: none;
/* Safari and Chrome */
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<!-- The Modal -->
<div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="toggleCloseModal()">&times;</span>
{% if include.header %}
<h2>Modal Header</h2>
{% endif %}
</div>
{% include modal/image.html height=include.height width=include.width title=include.title
image=include.category description=include.description src=include.src %}
{% if include.footer ==true %}
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
{% endif %}
</div>
</div>
<a href="#" onclick="toggleModal()" title="Toggle Modal" id="myImg">
{% include modal/image.html height=include.height width=include.width title=include.title
image=include.category description=include.description src=include.src %}
</a>
</div>

View File

@ -0,0 +1,2 @@
<div id="root"></div>
<div id="react-ui-build"></div>