Seznam software ve stránce

content/software/_index.md

@@ -0,0 +1,2 @@
++++
++++

content/software/hangouts.md

@@ -0,0 +1,16 @@
++++
+title = "Google Hangouts"
+description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor faucibus dapibus. Aliquam maximus nulla at viverra auctor. Sed vestibulum urna eget est sagittis vulputate."
+[extra]
+logo = "hangouts.png"
+positive = [
+	"Lorem Ipsum",
+	"Lorem Ipsum",
+	"Lorem Ipsum"
+]
+negative = [
+	"Lorem Ipsum",
+	"Lorem Ipsum",
+	"Lorem Ipsum"
+]
++++

content/software/jitsi.md

@@ -0,0 +1,16 @@
++++
+title = "Jitsi"
+description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor faucibus dapibus. Aliquam maximus nulla at viverra auctor. Sed vestibulum urna eget est sagittis vulputate."
+[extra]
+logo = "jitsi.png"
+positive = [
+	"Lorem Ipsum",
+	"Lorem Ipsum",
+	"Lorem Ipsum"
+]
+negative = [
+	"Lorem Ipsum",
+	"Lorem Ipsum",
+	"Lorem Ipsum"
+]
++++

content/software/skype.md

@@ -0,0 +1,16 @@
++++
+title = "Skype"
+description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor faucibus dapibus. Aliquam maximus nulla at viverra auctor. Sed vestibulum urna eget est sagittis vulputate."
+[extra]
+logo = "skype.png"
+positive = [
+	"Lorem Ipsum",
+	"Lorem Ipsum",
+	"Lorem Ipsum"
+]
+negative = [
+	"Lorem Ipsum",
+	"Lorem Ipsum",
+	"Lorem Ipsum"
+]
++++

content/software/zoom.md

@@ -0,0 +1,16 @@
++++
+title = "Zoom"
+description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor faucibus dapibus. Aliquam maximus nulla at viverra auctor. Sed vestibulum urna eget est sagittis vulputate."
+[extra]
+logo = "zoom.png"
+positive = [
+	"Lorem Ipsum",
+	"Lorem Ipsum",
+	"Lorem Ipsum"
+]
+negative = [
+	"Lorem Ipsum",
+	"Lorem Ipsum",
+	"Lorem Ipsum"
+]
++++

sass/style.scss

@@ -71,12 +71,35 @@ main {
 	}
 	h2 { font-size: 2.3em; }
 
-
 	.main-image {
 		float: right;
 		max-width: 48%;
 		margin-left: 2em;
 	}
+
+	section.software {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+
+		.program {
+			width: 43%;
+			box-sizing: border-box;
+			margin-top: 4em;
+
+			img {
+				max-height: 4em;
+				max-width: 100%;
+			}
+
+			div {
+				display: flex;
+				justify-content: space-between;
+
+				ul { padding-left: 1em; }
+			}
+		}
+	}
 }
 
 body.index {

templates/page.html

@@ -6,4 +6,30 @@
 	{% endif %}
 	<h2>{{ page.title }}</h2>
 	{{ page.content | safe }}
+
+	{% set section = get_section(path="software/_index.md") %}
+	{% if section.pages %}
+		<section class="software">
+		{% for program in section.pages %}
+			<div class="program">
+				<img src="/software/{{ program.extra.logo }}" alt="{{ program.title }}">
+				<p>{{ program.description }}</p>
+				{% if program.extra.positive and program.extra.negative %}
+				<div>
+					<ul>
+					{% for item in program.extra.positive %}
+						<li>{{ item }}</li>
+					{% endfor %}
+					</ul>
+					<ul>
+					{% for item in program.extra.negative %}
+						<li>{{ item }}</li>
+					{% endfor %}
+					</ul>
+				</div>
+				{% endif %}
+			</div>
+		{% endfor %}
+		</section>
+	{% endif %}
 {% endblock %}