Initial commit
This commit is contained in:
15
.htaccess
Normal file
15
.htaccess
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
RewriteEngine On
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteRule ^([^\.]+)$ $1.html [NC,L]
|
||||||
|
|
||||||
|
AddDefaultCharset utf-8
|
||||||
|
AddCharset utf-8 .html .css .js
|
||||||
|
DefaultLanguage cs-CZ
|
||||||
|
|
||||||
|
ErrorDocument 404 /~michal.prochazka/sp/404.html
|
||||||
|
|
||||||
|
Options +Includes
|
||||||
|
|
||||||
|
AddType text/html .html
|
||||||
|
AddOutputFilter INCLUDES .html
|
||||||
|
|
||||||
18
404.html
Normal file
18
404.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<!--#include virtual="components/head.html" -->
|
||||||
|
<title>Stránka nenalezena - Svobodný software Liberec</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--#include virtual="components/header.html" -->
|
||||||
|
<!--#include virtual="components/nav.html" -->
|
||||||
|
<main style="text-align: center">
|
||||||
|
<h1>Stránka nenalezena.</h1>
|
||||||
|
<p>Pokusili jste se načíst stránku, která na tomto serveru neexistuje.</p>
|
||||||
|
<p>Klikněte prosím na jeden z odkazů uvedených výše.</p>
|
||||||
|
</main>
|
||||||
|
<!--#include virtual="components/footer.html" -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
5
components/footer.html
Normal file
5
components/footer.html
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<footer>
|
||||||
|
<!--#set var="URL" value="https://${HTTP_HOST}${DOCUMENT_URI}"-->
|
||||||
|
<p>Tato webová stránka podléhá licenci GNU Free Documentation License v1.3.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
8
components/head.html
Normal file
8
components/head.html
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="theme-color" content="darkred">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
<link href="icons.css" rel="stylesheet">
|
||||||
|
<link href="styles.css" rel="stylesheet">
|
||||||
|
<script src="js/theme.js"></script>
|
||||||
|
|
||||||
7
components/header.html
Normal file
7
components/header.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<header>
|
||||||
|
<div class="header-title">Svobodný software Liberec</div>
|
||||||
|
<div class="header-subtitle">Richard Stallman na Technické univerzitě v Liberci</div>
|
||||||
|
<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
|
||||||
|
<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
|
||||||
|
</header>
|
||||||
|
|
||||||
9
components/nav.html
Normal file
9
components/nav.html
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href=".">Domovská stránka</a></li>
|
||||||
|
<li><a href="stallman">Richard Stallman</a></li>
|
||||||
|
<li><a href="free">Svobodný software</a></li>
|
||||||
|
<li><a href="javascript">JavaScript</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 B |
132
free.html
Normal file
132
free.html
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<!--#include virtual="components/head.html" -->
|
||||||
|
<title>Svobodný software - Svobodný software Liberec</title>
|
||||||
|
<meta name="description" content="Vysvětlení pojmu svobodný software.">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--#include virtual="components/header.html" -->
|
||||||
|
<!--#include virtual="components/nav.html" -->
|
||||||
|
<main>
|
||||||
|
<a id="contents"></a>
|
||||||
|
<h1>Obsah</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="#contents">Obsah</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#freesoftware">Svobodný software</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#definition">Co je to?</a></li>
|
||||||
|
<li><a href="#inception">Jak vznikl?</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#othermovements">Jak se liší od ostatních hnutí?</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#freeware">Freeware</a></li>
|
||||||
|
<li><a href="#opensource">Open Source</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a id="freesoftware"></a>
|
||||||
|
<h1>Svobodný software</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Tato stránka slouží pro jedince, kteří buď o svobodném softwaru
|
||||||
|
(anglicky "free software") slyší poprvé, nebo o něm již někdy slyšeli,
|
||||||
|
ale nejsou si úplně jisti, co tento pojem opravdu znamená.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Většina informací na této stránce pochází webových stránek
|
||||||
|
<a href="https://www.gnu.org/">operačního systému GNU</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a id="definition"></a>
|
||||||
|
<h2>Co je to?</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet lectus.
|
||||||
|
Vestibulum hendrerit, arcu vel ullamcorper lacinia, nisi nibh mollis lacus,
|
||||||
|
a dapibus neque odio id risus. Quisque ultricies congue mi.
|
||||||
|
Proin eget nisl nec nisi aliquet interdum vitae quis metus.
|
||||||
|
Nunc id eros volutpat, hendrerit magna ut, vulputate dolor.
|
||||||
|
Duis ut ex et justo interdum aliquam. Phasellus ultrices, orci et facilisis sagittis,
|
||||||
|
ligula nulla gravida augue, nec maximus tortor tortor sit amet purus.
|
||||||
|
Quisque rhoncus commodo arcu, in condimentum lectus mollis ut.
|
||||||
|
Aenean pellentesque orci ac ex ullamcorper, at pharetra eros vestibulum.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Nullam eget ligula ac ante dapibus rhoncus. Aenean interdum, erat vel auctor congue,
|
||||||
|
metus elit gravida metus, et gravida dolor metus at nunc.
|
||||||
|
Aliquam auctor dolor at erat mollis, sit amet placerat massa commodo.
|
||||||
|
Fusce ultricies odio sed tortor interdum hendrerit.
|
||||||
|
Ut posuere lobortis dui, commodo placerat lacus pharetra eu.
|
||||||
|
Curabitur eu dolor eget nibh sagittis semper eu eget dolor.
|
||||||
|
Sed laoreet mi in viverra vulputate. Etiam posuere sem est, at malesuada enim auctor quis.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a id="inception"></a>
|
||||||
|
<h2>Jak vznikl?</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
In tempor lacus nec odio ornare, vitae pretium ante faucibus.
|
||||||
|
Donec mattis justo quis condimentum accumsan. Phasellus lacinia elementum ultricies.
|
||||||
|
Morbi facilisis suscipit quam, eu porta sem consectetur in.
|
||||||
|
Vestibulum pretium pretium eros non blandit.
|
||||||
|
Nunc varius metus in felis facilisis pellentesque.
|
||||||
|
Cras placerat dolor nulla, sit amet venenatis lectus sagittis eu.
|
||||||
|
Duis tellus sem, porta eget faucibus at, efficitur eleifend libero.
|
||||||
|
Nunc eu felis urna. In dignissim lectus eget dui consequat fringilla.
|
||||||
|
Etiam sodales tincidunt finibus. Sed facilisis ex sed tellus posuere, a consequat magna malesuada.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a id="othermovements"></a>
|
||||||
|
<h2>Jak se liší od ostatních hnutí?</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Maecenas ut congue massa. Nullam finibus lorem ligula, ut faucibus diam hendrerit a.
|
||||||
|
Proin quis massa in ligula vulputate ultrices et ac neque. Donec mollis massa turpis.
|
||||||
|
Suspendisse potenti. In vel venenatis mi. Sed egestas nulla tortor, eu ornare nibh accumsan nec.
|
||||||
|
Donec egestas a justo eu ullamcorper. Vivamus feugiat lectus non justo vehicula viverra.
|
||||||
|
Phasellus eleifend ante sed felis sollicitudin scelerisque.
|
||||||
|
Proin sit amet leo in enim varius auctor. Mauris blandit rhoncus mauris.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a id="freeware"></a>
|
||||||
|
<h3>Freeware</h3>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Sed ac lorem viverra, tempor libero id, ullamcorper turpis.
|
||||||
|
Donec dapibus diam risus, non rutrum mauris pharetra ut.
|
||||||
|
Vivamus lobortis in massa faucibus congue.
|
||||||
|
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
||||||
|
Aenean sed tempor justo. Phasellus volutpat massa quis eleifend interdum.
|
||||||
|
Donec non lobortis leo. Maecenas vel lacus ut risus pretium fringilla.
|
||||||
|
Aliquam fermentum ex elit, non sagittis dui vestibulum ut.
|
||||||
|
Sed ipsum tellus, dictum eu molestie quis, tempor vitae ipsum.
|
||||||
|
Pellentesque laoreet porttitor felis, sit amet fermentum ante aliquet sed.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a id="opensource"></a>
|
||||||
|
<h3>Open Source</h3>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Nunc sodales dolor ut auctor porta. Proin rhoncus ultricies felis vel posuere.
|
||||||
|
In posuere velit vulputate, lobortis turpis pretium, porta nisi.
|
||||||
|
Vivamus elementum lobortis lacus nec lobortis.
|
||||||
|
Praesent lobortis dictum tortor, eget egestas nunc tempus at.
|
||||||
|
Curabitur rhoncus in dolor ut consectetur. Suspendisse aliquam aliquet magna ut ultrices.
|
||||||
|
Sed non magna sodales, rhoncus sapien vel, aliquam urna.
|
||||||
|
Quisque gravida est non diam mollis, et posuere sapien congue.
|
||||||
|
Quisque id nunc sed tortor hendrerit laoreet.
|
||||||
|
Sed tortor neque, porta ut laoreet in, mollis quis velit.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
<!--#include virtual="components/footer.html" -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
13
icons.css
Normal file
13
icons.css
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
:root {
|
||||||
|
--light-theme-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path id='path1' style='fill:%23ffff00;fill-opacity:1;stroke:%23808000;stroke-width:1.93183;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13.23697,0.96583465 A 9.3801207,9.39062 0 0 1 13.913872,4.465394 9.3801207,9.39062 0 0 1 4.5342249,13.855541 9.3801207,9.39062 0 0 1 0.96583659,13.131355 9.3801207,9.39062 0 0 0 9.652417,19.034079 9.3801207,9.39062 0 0 0 19.034085,9.6439329 9.3801207,9.39062 0 0 0 13.23697,0.96583465 Z' /> </g> </svg>");
|
||||||
|
--dark-theme-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <circle style='fill:%23ffff00;fill-opacity:1;stroke:%23808000;stroke-width:1.86627;stroke-dasharray:none;stroke-opacity:1' id='path1' cx='9.9999981' cy='9.9999981' r='9.0668631' /> </g> </svg>");
|
||||||
|
|
||||||
|
--light-narrow-layout-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 H 7' id='path8' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,1 h 6' id='path8-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,19 h 6' id='path8-3-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 H 7' id='path8-3-2-7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 V 7' id='path9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 19,1 V 7' id='path9-9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 19,13 v 6' id='path9-9-4' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 1,13 v 6' id='path9-9-4-6' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 7,13' id='path6-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,7 19,1' id='path6-2-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 7,7' id='path7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path10' /> </g> </svg>");
|
||||||
|
|
||||||
|
--light-wide-layout-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 7,13' id='path6-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,7 19,1' id='path6-2-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 7,7' id='path7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path7-1' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,7 H 7' id='path8' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,7 h 6' id='path8-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 h 6' id='path8-3-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,13 H 7' id='path8-3-2-7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 7,1 V 7' id='path9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,1 V 7' id='path9-9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 v 6' id='path9-9-4' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 7,13 v 6' id='path9-9-4-6' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path10' /> </g> </svg>");
|
||||||
|
|
||||||
|
--dark-narrow-layout-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 H 7' id='path8' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,1 h 6' id='path8-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,19 h 6' id='path8-3-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 H 7' id='path8-3-2-7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 V 7' id='path9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 19,1 V 7' id='path9-9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 19,13 v 6' id='path9-9-4' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 1,13 v 6' id='path9-9-4-6' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 7,13' id='path6-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,7 19,1' id='path6-2-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 7,7' id='path7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path10' /> </g> </svg>");
|
||||||
|
|
||||||
|
--dark-wide-layout-switch-icon: url("data:image/svg+xml;utf8,<svg width='20' height='20' viewBox='0 0 20 20' version='1.1' id='svg1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <defs id='defs1' /> <g id='layer1'> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,19 7,13' id='path6-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,7 19,1' id='path6-2-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,1 7,7' id='path7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path7-1' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,7 H 7' id='path8' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,7 h 6' id='path8-3' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 h 6' id='path8-3-2' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 1,13 H 7' id='path8-3-2-7' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 7,1 V 7' id='path9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='M 13,1 V 7' id='path9-9' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 v 6' id='path9-9-4' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 7,13 v 6' id='path9-9-4-6' /> <path style='fill:%23ffff00;fill-opacity:1;stroke:%23ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1' d='m 13,13 6,6' id='path10' /> </g> </svg>");
|
||||||
|
}
|
||||||
|
|
||||||
BIN
images/stallman.jpg
Normal file
BIN
images/stallman.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
images/stallman_2024.jpg
Normal file
BIN
images/stallman_2024.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
49
index.html
Normal file
49
index.html
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<!--#include virtual="components/head.html" -->
|
||||||
|
<title>Svobodný software Liberec</title>
|
||||||
|
<meta name="description" content="Richard Stallman na Technické univerzitě v Liberci.">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--#include virtual="components/header.html" -->
|
||||||
|
<!--#include virtual="components/nav.html" -->
|
||||||
|
<main>
|
||||||
|
<h1>Richard Stallman o svobodném softwaru</h1>
|
||||||
|
|
||||||
|
<div class="img-text-container">
|
||||||
|
<div class="img-text">
|
||||||
|
<div class="countdown">--:--:--:--</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://commons.wikimedia.org/wiki/File:Richard_Stallman_Bologna_2024_abc23.jpg">
|
||||||
|
<figure>
|
||||||
|
<img class="countdown-bg" src="images/stallman_2024.jpg" alt="Pan Stallman v Itálii">
|
||||||
|
<figcaption>Snímek z přednášky pana Stallmana z roku 2024</figcaption>
|
||||||
|
</figure>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Akce se bude konat <b>7. května od 16:30 do 19:30</b> v aule budovy G na Technické univerzitě v Liberci.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Hlavní částí akce bude přednáška pana Richarda Stallmana týkající se svobodného softwaru –
|
||||||
|
hnutí, které sám pan Stallman v roce 1983 založil.
|
||||||
|
Zaměří se na nebezpečí neustálé rozšiřování nesvobodného softwaru v naší digitální společnosti,
|
||||||
|
jak nás jako uživatele takový software omezuje a jak proti němu můžeme pomocí svobodného softwaru bojovat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Tato akce je organizována Fakultou mechatroniky, informatiky a mezioborových studií
|
||||||
|
Technické univerzity v Liberci. Jako většina přednášek pana Stallmana je i tato akce
|
||||||
|
určená pro širokou veřejnost. Bude se vybírat pouze dobrovolné vstupné,
|
||||||
|
po přednášce bude rovněž možné zakoupit předměty s tematikou operačního systému GNU
|
||||||
|
a Free Software Foundation.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
<script src="js/countdown.js"></script>
|
||||||
|
<!--#include virtual="components/footer.html" -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
57
javascript.html
Normal file
57
javascript.html
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<!--#include virtual="components/head.html" -->
|
||||||
|
<title>JavaScript - Svobodný software Liberec</title>
|
||||||
|
<meta name="description" content="Vysvětlení využití JavaScriptu na této stránce.">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--#include virtual="components/header.html" -->
|
||||||
|
<!--#include virtual="components/nav.html" -->
|
||||||
|
<main>
|
||||||
|
<h1>Použitý JavaScript na tomto webu</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Pro tvorbu tohoto webu jsme použili stopové množství JavaScriptu.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Tato stránka Vám zajišťuje, že návštěva tohoto webu nenačítá žádný nesvobodný software
|
||||||
|
(tzn. tento web načtete i s rozšířením LibreJS).
|
||||||
|
</p>
|
||||||
|
<p>Zkontrolujte si prosím níže uvedené skripty a jejich licence.</p>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<caption>Seznam klientských skriptů</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th rowspan=2>Skript</th>
|
||||||
|
<th colspan=2>Popis skriptu</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Funkce</th>
|
||||||
|
<th>Licence</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><a href="js/countdown.js">countdown.js</a></td>
|
||||||
|
<td>Odpočet do začátku akce.</td>
|
||||||
|
<td><a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU GPL v3</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="js/lang.js">lang.js</a></td>
|
||||||
|
<td>Přepínání jazyka vybraných prvků stránky.</td>
|
||||||
|
<td><a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU GPL v3</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><a href="js/theme.js">theme.js</a></td>
|
||||||
|
<td>Přepínání mezi světlým a tmavým režimem.</td>
|
||||||
|
<td><a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GNU GPL v3</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</main>
|
||||||
|
<!--#include virtual="components/footer.html" -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
33
js/countdown.js
Normal file
33
js/countdown.js
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
|
||||||
|
|
||||||
|
const target = new Date("May 7, 2025 16:30:00 GMT+0100");
|
||||||
|
|
||||||
|
function update_time() {
|
||||||
|
let countdown = document.querySelector(".countdown");
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
if(now >= target) {
|
||||||
|
countdown.innerHTML = "Akce již proběhla.<br>Děkujeme všem za návštěvu.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dur = Math.floor((target - now) / 1000);
|
||||||
|
|
||||||
|
const day = Math.floor(dur / 86400).toFixed(0).padStart(2, "0");
|
||||||
|
const hour = Math.floor((dur / 3600) % 24).toFixed(0).padStart(2, "0");
|
||||||
|
const min = Math.floor((dur / 60) % 60).toFixed(0).padStart(2, "0");
|
||||||
|
const sec = Math.floor(dur % 60).toFixed(0).padStart(2, "0");
|
||||||
|
|
||||||
|
//const targetdate = `${target.getDate()}. ${target.getMonth()+1}. ${target.getFullYear()}`
|
||||||
|
//const targettime = `${target.getHours()}:${target.getMinutes()}`
|
||||||
|
|
||||||
|
//countdown.innerHTML = `${targetdate} v ${targettime}<br><br>${day}:${hour}:${min}:${sec}`;
|
||||||
|
countdown.innerHTML = `${day}:${hour}:${min}:${sec}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
update_time();
|
||||||
|
setInterval(update_time, 1000);
|
||||||
|
|
||||||
|
// @license-end
|
||||||
|
|
||||||
17
js/lang.js
Normal file
17
js/lang.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
|
||||||
|
|
||||||
|
function change_lang(base) {
|
||||||
|
let cz = document.querySelector(base + "_cz");
|
||||||
|
let en = document.querySelector(base + "_en");
|
||||||
|
|
||||||
|
if(cz.style.display == "none") {
|
||||||
|
cz.style.display = "";
|
||||||
|
en.style.display = "none";
|
||||||
|
} else {
|
||||||
|
cz.style.display = "none";
|
||||||
|
en.style.display = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// @license-end
|
||||||
|
|
||||||
34
js/theme.js
Normal file
34
js/theme.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
|
||||||
|
|
||||||
|
function switch_theme() {
|
||||||
|
let el = document.documentElement;
|
||||||
|
if(el.getAttribute("data-color-scheme") === "invert") {
|
||||||
|
el.setAttribute("data-color-scheme", "normal");
|
||||||
|
localStorage.setItem("color-scheme", "normal");
|
||||||
|
} else {
|
||||||
|
el.setAttribute("data-color-scheme", "invert");
|
||||||
|
localStorage.setItem("color-scheme", "invert");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function switch_layout() {
|
||||||
|
let el = document.documentElement;
|
||||||
|
if(el.getAttribute("data-layout") === "wide") {
|
||||||
|
el.setAttribute("data-layout", "normal");
|
||||||
|
localStorage.setItem("layout", "normal");
|
||||||
|
} else {
|
||||||
|
el.setAttribute("data-layout", "wide");
|
||||||
|
localStorage.setItem("layout", "wide");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(localStorage.getItem("color-scheme") === "invert") {
|
||||||
|
switch_theme();
|
||||||
|
}
|
||||||
|
|
||||||
|
if(localStorage.getItem("layout") === "wide") {
|
||||||
|
switch_layout();
|
||||||
|
}
|
||||||
|
|
||||||
|
// @license-end
|
||||||
|
|
||||||
89
stallman.html
Normal file
89
stallman.html
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<!--#include virtual="components/head.html" -->
|
||||||
|
<title>Richard Stallman - Svobodný software Liberec</title>
|
||||||
|
<meta name="description" content="Krátký životopis pana Stallmana.">
|
||||||
|
<script src="js/lang.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--#include virtual="components/header.html" -->
|
||||||
|
<!--#include virtual="components/nav.html" -->
|
||||||
|
<main>
|
||||||
|
<p>
|
||||||
|
Tato stránka obsahuje překlad textu v angličtině,
|
||||||
|
který nám poskytl sám pan Stallman.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<a href="javascript:change_lang('#stallman_bio');">Kliknutím zde</a>
|
||||||
|
si zobrazíte původní znění textu (či znovu překlad po opakovaném kliknutí).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h1>Kdo je Richard Stallman?</h1>
|
||||||
|
|
||||||
|
<a href="https://commons.wikimedia.org/wiki/File:Richard_Stallman_Bologna_2024_abc1.jpg">
|
||||||
|
<figure class="aside">
|
||||||
|
<img src="images/stallman.jpg" alt="Richard Stallman">
|
||||||
|
<figcaption>Richard Stallman, 2024</figcaption>
|
||||||
|
</figure>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div id="stallman_bio_cz">
|
||||||
|
<p>
|
||||||
|
Dr. Richard Stallman v roce 1983 založil hnutí svobodného softwaru
|
||||||
|
a následující rok započal vývoj operačního systému GNU
|
||||||
|
(vizte <a href="https://www.gnu.org">www.gnu.org</a>).
|
||||||
|
GNU je svobodný software, každý má možnost ho množit
|
||||||
|
a šířit dál, bez změn nebo i se změnami.
|
||||||
|
GNU/Linux (operační systém GNU s jádrem <a href="https://kernel.org/">Linux</a>)
|
||||||
|
se dnes využívá na desítkách milionů osobních počítačů.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Stallmanovi byla udělena <i>Cena Grace Hopperové</i> a <i>Cena Softwarových Systémů</i>
|
||||||
|
neziskovou organizací Association for Computing Machinery,
|
||||||
|
<i>Cena za sociální/ekonomické zlepšení</i> organizací Takeda Foundation a
|
||||||
|
<i>Cena Electronic Frontier Foundation</i> a mnoho čestných doktorátů.
|
||||||
|
Stallman je členem programu <i>MacArthur Fellowship</i>
|
||||||
|
a je členem <i><a href="https://www.internethalloffame.org/">Síně slávy Internetu</a></i>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Dr. Richard Stallman<br>
|
||||||
|
Zakladatel <a href="https://www.fsf.org/">Free Software Foundation</a><br>
|
||||||
|
Zakladatel a vedoucí vývoje <a href="https://www.gnu.org/">operačního systému GNU</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="stallman_bio_en" style="display: none">
|
||||||
|
<p>
|
||||||
|
Dr. Richard Stallman launched the free software movement in 1983 and
|
||||||
|
started the development of the GNU operating system
|
||||||
|
(see <a href="https://www.gnu.org">www.gnu.org</a>) in 1984.
|
||||||
|
GNU is free software: everyone has the freedom to copy it
|
||||||
|
and redistribute it, with or without changes. The GNU/Linux system,
|
||||||
|
basically the GNU operating system with <a href="https://kernel.org/">Linux</a>
|
||||||
|
as the kernel, is used on tens of millions of computers today.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Stallman has received the ACM Grace
|
||||||
|
Hopper Award and the ACM Software and Systems Award, a MacArthur
|
||||||
|
Foundation fellowship, the Electronic Frontier Foundation's Pioneer
|
||||||
|
Award, and the the Takeda Award for Social/Economic Betterment, as
|
||||||
|
well as many doctorates honoris causa, and has been inducted into the
|
||||||
|
<a href="https://www.internethalloffame.org/">Internet Hall of Fame</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Dr Richard Stallman<br>
|
||||||
|
Founder of the <a href="https://www.fsf.org/">Free Software Foundation</a><br>
|
||||||
|
Founder and development leader of the <a href="https://www.gnu.org/">GNU operating system</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!--#include virtual="components/footer.html" -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
367
styles.css
Normal file
367
styles.css
Normal file
@@ -0,0 +1,367 @@
|
|||||||
|
:root {
|
||||||
|
--light-fg-color: black;
|
||||||
|
--light-bg-color: white;
|
||||||
|
--light-outer-shadow-color: #BBBBBB;
|
||||||
|
--light-outer-bg-color: #E4E4E4;
|
||||||
|
--light-alt-bg-color: #FFFFD0;
|
||||||
|
--light-field-hover-bg-color: #F0F0F0;
|
||||||
|
--light-field-active-bg-color: #E0E0E0;
|
||||||
|
--light-link-idle-color: blue;
|
||||||
|
|
||||||
|
--dark-fg-color: white;
|
||||||
|
--dark-bg-color: #202020;
|
||||||
|
--dark-outer-shadow-color: #000000;
|
||||||
|
--dark-outer-bg-color: black;
|
||||||
|
--dark-alt-bg-color: #101010;
|
||||||
|
--dark-field-hover-bg-color: #000000;
|
||||||
|
--dark-field-active-bg-color: #404040;
|
||||||
|
--dark-link-idle-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
|
||||||
|
--nav-fg-color: white;
|
||||||
|
--nav-bg-color: darkred;
|
||||||
|
--nav-bg-color-selected: #C00000;
|
||||||
|
--sep-color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vím, že by se dalo použít light-dark(...). Ale to funguje jen v nejnovějších prohlížečích. */
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
--fg-color: var(--light-fg-color);
|
||||||
|
--bg-color: var(--light-bg-color);
|
||||||
|
--outer-shadow-color: var(--light-outer-shadow-color);
|
||||||
|
--outer-bg-color: var(--light-outer-bg-color);
|
||||||
|
--alt-bg-color: var(--light-alt-bg-color);
|
||||||
|
--field-hover-bg-color: var(--light-field-hover-bg-color);
|
||||||
|
--field-active-bg-color: var(--light-field-active-bg-color);
|
||||||
|
--link-idle-color: var(--light-link-idle-color);
|
||||||
|
|
||||||
|
--theme-switch-icon: var(--light-theme-switch-icon);
|
||||||
|
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
|
||||||
|
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
|
||||||
|
--fg-gnu-head: var(--dark-gnu-head);
|
||||||
|
--bg-gnu-head: var(--light-gnu-head);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-scheme="invert"] {
|
||||||
|
--fg-color: var(--dark-fg-color);
|
||||||
|
--bg-color: var(--dark-bg-color);
|
||||||
|
--outer-shadow-color: var(--dark-outer-shadow-color);
|
||||||
|
--outer-bg-color: var(--dark-outer-bg-color);
|
||||||
|
--alt-bg-color: var(--dark-alt-bg-color);
|
||||||
|
--field-hover-bg-color: var(--dark-field-hover-bg-color);
|
||||||
|
--field-active-bg-color: var(--dark-field-active-bg-color);
|
||||||
|
--link-idle-color: var(--dark-link-idle-color);
|
||||||
|
|
||||||
|
--theme-switch-icon: var(--dark-theme-switch-icon);
|
||||||
|
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
|
||||||
|
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
|
||||||
|
--fg-gnu-head: var(--light-gnu-head);
|
||||||
|
--bg-gnu-head: var(--dark-gnu-head);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--fg-color: var(--dark-fg-color);
|
||||||
|
--bg-color: var(--dark-bg-color);
|
||||||
|
--outer-shadow-color: var(--dark-outer-shadow-color);
|
||||||
|
--outer-bg-color: var(--dark-outer-bg-color);
|
||||||
|
--alt-bg-color: var(--dark-alt-bg-color);
|
||||||
|
--field-hover-bg-color: var(--dark-field-hover-bg-color);
|
||||||
|
--field-active-bg-color: var(--dark-field-active-bg-color);
|
||||||
|
--link-idle-color: var(--dark-link-idle-color);
|
||||||
|
|
||||||
|
--theme-switch-icon: var(--dark-theme-switch-icon);
|
||||||
|
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
|
||||||
|
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
|
||||||
|
--fg-gnu-head: var(--light-gnu-head);
|
||||||
|
--bg-gnu-head: var(--dark-gnu-head);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-color-scheme="invert"] {
|
||||||
|
--fg-color: var(--light-fg-color);
|
||||||
|
--bg-color: var(--light-bg-color);
|
||||||
|
--outer-shadow-color: var(--light-outer-shadow-color);
|
||||||
|
--outer-bg-color: var(--light-outer-bg-color);
|
||||||
|
--alt-bg-color: var(--light-alt-bg-color);
|
||||||
|
--field-hover-bg-color: var(--light-field-hover-bg-color);
|
||||||
|
--field-active-bg-color: var(--light-field-active-bg-color);
|
||||||
|
--link-idle-color: var(--light-link-idle-color);
|
||||||
|
|
||||||
|
--theme-switch-icon: var(--light-theme-switch-icon);
|
||||||
|
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
|
||||||
|
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
|
||||||
|
--fg-gnu-head: var(--dark-gnu-head);
|
||||||
|
--bg-gnu-head: var(--light-gnu-head);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--layout-switch-icon: var(--narrow-layout-switch-icon);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-layout="wide"] {
|
||||||
|
--layout-switch-icon: var(--wide-layout-switch-icon)
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--outer-bg-color);
|
||||||
|
min-height: calc(100% - 32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Noto Sans", sans-serif; /* Svobodný font. */
|
||||||
|
font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: var(--fg-color);
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: calc(16px - 8px) 16px;
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-dark-switch {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
content: var(--theme-switch-icon);
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-switch {
|
||||||
|
position: absolute;
|
||||||
|
top: 48px;
|
||||||
|
right: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
content: var(--layout-switch-icon);
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--link-idle-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
header * {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-subtitle {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-text-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 100%;
|
||||||
|
color: var(--fg-color);
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown {
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 48px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-bg {
|
||||||
|
opacity: 40%;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: var(--nav-bg-color);
|
||||||
|
color: var(--nav-fg-color);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gnu-head {
|
||||||
|
content: var(--fg-gnu-head);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 2px solid var(--sep-color);
|
||||||
|
padding: calc(16px - 8px) 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer>* {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
border: 1px solid var(--sep-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
background-color: var(--alt-bg-color);
|
||||||
|
border: 1px solid var(--sep-color);
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol li {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width >= 500px) {
|
||||||
|
figure.aside {
|
||||||
|
width: 200px;
|
||||||
|
margin: 0 0 16px 16px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Jinak to neudělá nic. */
|
||||||
|
}
|
||||||
|
|
||||||
|
figure img,svg,inserted-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width < 750px) {
|
||||||
|
nav ul {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-basis: 0;
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 8px 16px;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--nav-fg-color);
|
||||||
|
|
||||||
|
transition: background-color .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a:hover {
|
||||||
|
background-color: var(--nav-bg-color-selected);
|
||||||
|
color: var(--nav-fg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a:active {
|
||||||
|
color: var(--nav-fg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li a:visited {
|
||||||
|
color: var(--nav-fg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width >= 900px) {
|
||||||
|
html:not([data-layout="wide"]) {
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not([data-layout="wide"]) body {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 800px;
|
||||||
|
box-shadow: 0 0 5px 5px var(--outer-shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-layout="wide"] body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (width < 900px) {
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.img-text {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
.layout-switch {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.light-dark-switch {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.layout-switch {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user