{"version":"https:\/\/jsonfeed.org\/version\/1","title":"diday-saarland Feed Initiative Redaktion","home_page_url":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion","feed_url":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion.json","description":"Neue Infos zur Website Redaktion","author":{"name":"Redaktion"},"items":[{"title":"Seitenerstellung","date_published":"2026-03-17T14:31:58+01:00","id":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/seitenerstellung","url":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/seitenerstellung","content_html":"<h2>Anlage einer neuen Seite<\/h2>\n<p>Zu Beginn steht immer das Hinzuf\u00fcgen einer neuen Seite zu der jeweiligen Rubrik. Vom System sind in der Regel gute Vorgabewerte eingestellt. Neue Seiten werden in der Regel als Blogbeitr\u00e4ge erstellt. Eine Zuordnung erfolgt \u00fcber die Kategorien und Tags.<\/p>\n<p>Bei <strong>Nachrichten<\/strong> gibt es zun\u00e4chst Informationen zu dieser Plattform selbst. Weiterhin gibt es f\u00fcr Betroffene wichtige Entwicklungen auf Seiten der Politik oder der Anbieter von Software. Wichtiger als viele, nur kurze Beitr\u00e4ge sind hier solche, die einen Mehrwert bieten, indem sie etwa Links zu bestimmten Themen zusammenfassen. Etwa, wo \u00fcberall im Netz erhalte ich gute (!) Informationen, wenn ich von propriet\u00e4ren Browsern zu Firefox wechseln m\u00f6chte? Es soll ein <strong>qualitativ hochwertiges Archiv<\/strong> entstehen. Diese Seiten sollen auch lebendig bleiben. Durch die eingebaute Volltextsuche erhalten Seitenbesucher gute Ergebnisse.<\/p>\n<p>Bei <strong>Veranstaltungen<\/strong> steht dagegen die Momentaufnahme im Vordergrund. Wenn eine aktuelle Veranstaltung vorbei ist, wird diese in das Veranstaltungsarchiv verschoben. Einfach, indem als Parent-Folder dieser Ordner angepasst wird. <\/p>\n<h3>Erstellung des Inhalts<\/h3>\n<p>Diese neu erstellte Seite kann sofort mit Inhalten bef\u00fcllt werden. Dazu wird die Seitenbeschreibungssprache <strong>Markdown<\/strong> verwendet. Zur Syntax gibt die Seite <a href=\"https:\/\/diday-saarland.de\/de\/redaktion\/typography\">Typography<\/a> weitere Hinweise. Langfristig wollen wir versuchen, den Veranstaltungshinweisen eine einheitliche Struktur zu geben. Sollte es an anderer Stelle im Netz bereits ausf\u00fchrlichere Hinweise geben, kann sich der Text auf einige Basisinformation plus Link beschr\u00e4nken. Aber auch eine ausf\u00fchrliche Beschreibung ist m\u00f6glich.<\/p>\n<h3>Mindestinhalt Veranstaltungen<\/h3>\n<p>Aus Sicht des Nutzers sollten in diesen Beitr\u00e4gen vorhanden sein:<\/p>\n<ul>\n<li>Titel der Veranstaltung<\/li>\n<li>Kurzbeschreibung<\/li>\n<li>Veranstalter (Name, als Link zur Vorstellungsseite)<\/li>\n<li>Datum und Uhrzeit (im ISO Format, etwa 2026-02-26 19:00)<\/li>\n<li>Ort (PLZ, Ort, Strasse, Hausnummer, Raum)<\/li>\n<li>Zugangsvoraussetzungen (Kosten, Anmeldung, Teilnehmerbegrenzung)<\/li>\n<li>Langbeschreibung<\/li>\n<li>Links und Kontakte<\/li>\n<\/ul>\n<h3>Nachbearbeitungen<\/h3>\n<p>Es ist jederzeit m\u00f6glich, den besehenden Text anzupassen und zu erg\u00e4nzen. Wenn der Termin bei Veranstaltungen abgelaufen ist, sollte zeitnah dieser Eintrag in das Veranstaltungsarchiv verschoben werden.<\/p>","date_modified":"2026-03-17T14:31:58+01:00","tags":["Plattform"]},{"title":"Kategorien und Tags","date_published":"2026-03-16T00:09:32+01:00","id":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/kategorien-und-tags","url":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/kategorien-und-tags","content_html":"<h2>Angaben zur Taxonomie<\/h2>\n<p>Es sind bisher einige Taxonomien eingerichtet mit verschiedenen Eingabem\u00f6glichkeiten<\/p>\n<table>\n<thead>\n<tr>\n<th>Taxonomie<\/th>\n<th>Wert<\/th>\n<th>Beschreibug<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Category<\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Webseite<\/td>\n<td>Informationen \u00fcber diese Website selbst<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Veranstaltung<\/td>\n<td>Beitr\u00e4ge zu Veranstaltungen<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Nachrichten<\/td>\n<td>Aktuelle Beitr\u00e4ge und Nachrichten<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Partner<\/td>\n<td>Wer macht mit<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Meldung<\/td>\n<td>Anzeige in Seitenleiste Hervorgehoben<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>...<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Tag<\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Berichte<\/td>\n<td>Eine Veranstaltung findet Online statt<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Plattform<\/td>\n<td>\u00dcber diese Plattform selbst<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Open Source<\/td>\n<td>Auch Open Data\/Access<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Treffen<\/td>\n<td>Eine Aktion vor Ort<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Hardware<\/td>\n<td>Basteln, L\u00f6sten, Bauen<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Online<\/td>\n<td>Eine Aktion Online<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>...<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Author<\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Administrator<\/td>\n<td>Wer bietet eine Nachricht\/Veranstaltung an<br \/>Jeder Partner erh\u00e4lt einen eigenen Tag<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>Opensaar<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>TechnikKulturSaar<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td>...<\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Einordnung in eine Kategorie und Vergabe von Tags<\/h4>\n<p><strong>category<\/strong> und <strong>tags<\/strong> werden im Redaktionsteam besprochen und dann zur Nutzung freigegeben. In der Startphase sammeln wir dazu Vorschl\u00e4ge. Diese k\u00f6nnen sich beziehen auf Veranstaltungen wie auch Nachrichten. Die Organisatoren ergeben sich aus deren Mitwirkung.<\/p>","date_modified":"2026-03-16T00:09:32+01:00","tags":["Plattform"]},{"title":"Shortcodes","date_published":"2026-03-16T00:00:56+01:00","id":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/shortcodes","url":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/shortcodes","content_html":"<p>Shortcodes included in Future2021 theme<\/p>\n<h2>Box Shortcode<\/h2>\n<h3>Usage<\/h3>\n<p>Wrap some content block in <code>[sc-box]<\/code> tags.  The <code>[sc-box]<\/code> shortcode has some optional parameters:<\/p>\n<ul>\n<li><code>heading<\/code> - The heading for box<\/li>\n<li><code>color<\/code> - <code>primary<\/code>, <code>secondary<\/code>, <code>success<\/code>, <code>warning<\/code> and <code>info<\/code>. <\/li>\n<li><code>class<\/code> - <code>alt<\/code> (this class remove border from box). <\/li>\n<\/ul>\n<p>An example of the Box shortcode is as follows:<\/p>\n<pre><code class=\"language-markdown\">[sc-box color=\"primary\" heading=\"Primary Box Shortcode\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. \n[\/sc-box]\n[sc-box color=\"secondary\" heading=\"Secondary Box Shortcode\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. \n[\/sc-box]\n[sc-box color=\"success\" heading=\"Success Box Shortcode\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. \n[\/sc-box]\n[sc-box color=\"info\" heading=\"Info Box Shortcode\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. \n[\/sc-box]\n[sc-box color=\"warning\" heading=\"Warning Box Shortcode\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. \n[\/sc-box]\n[sc-box color=\"danger\" heading=\"Danger Box Shortcode\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. \n[\/sc-box]<\/code><\/pre>\n<h4>Example<\/h4>\n\n\n\n<article class=\"box primary\">\n        <header>\n                    <h3>Primary Box Shortcode<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. <\/p>\n\n            <\/header>\n<\/article>\n\n\n\n\n<article class=\"box secondary\">\n        <header>\n                    <h3>Secondary Box Shortcode<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. <\/p>\n\n            <\/header>\n<\/article>\n\n\n\n\n<article class=\"box success\">\n        <header>\n                    <h3>Success Box Shortcode<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. <\/p>\n\n            <\/header>\n<\/article>\n\n\n\n\n<article class=\"box info\">\n        <header>\n                    <h3>Info Box Shortcode<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. <\/p>\n\n            <\/header>\n<\/article>\n\n\n\n\n<article class=\"box warning\">\n        <header>\n                    <h3>Warning Box Shortcode<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. <\/p>\n\n            <\/header>\n<\/article>\n\n\n\n\n<article class=\"box danger\">\n        <header>\n                    <h3>Danger Box Shortcode<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. <\/p>\n\n            <\/header>\n<\/article>\n\n<h2>Buttons Shortcode<\/h2>\n<h3>Usage<\/h3>\n<p>Wrap some buttons in <code>[sc-buttons]<\/code> tags.  The <code>[sc-buttons]<\/code> has the parameter <code>ulclass<\/code> with the following values:  <code>stacked<\/code>, <code>special<\/code> or<code>fit<\/code><\/p>\n<p>The <code>[sc-button]<\/code> shortcode that defines each <em>button<\/em> has the following parameters:<\/p>\n<ul>\n<li><code>class<\/code>- custom classes for button<\/li>\n<li><code>type<\/code> - <code>primary<\/code>, <code>secondary<\/code>, <code>success<\/code>, <code>info<\/code>, <code>warning<\/code> or <code>danger<\/code>. <\/li>\n<li><code>size<\/code> - <code>small<\/code>, <code>medium<\/code>or <code>large<\/code><\/li>\n<li><code>url<\/code>- The button url<\/li>\n<li><code>target<\/code>- The target of url<\/li>\n<\/ul>\n<p>An example of the Buttons shortcode is as follows:<\/p>\n<pre><code class=\"language-markdown\">[sc-buttons]\n    [sc-button type=\"primary\"  url=\"#\"]Primary[\/sc-button]\n    [sc-button type=\"secondary\" url=\"#\"]Secondary[\/sc-button]\n    [sc-button type=\"success\" url=\"#\"]Success[\/sc-button]\n    [sc-button type=\"info\" url=\"#\"]Info[\/sc-button]\n    [sc-button type=\"warning\" url=\"#\"]Warning[\/sc-button]\n    [sc-button type=\"danger\" url=\"#\"]Danger[\/sc-button]\n[\/sc-buttons]\n[sc-buttons]\n    [sc-button type=\"primary\" size=\"small\"  url=\"#\"]Primary[\/sc-button]\n    [sc-button type=\"secondary\" size=\"small\"   url=\"#\"]Secondary[\/sc-button]\n    [sc-button type=\"success\" size=\"small\"   url=\"#\"]Success[\/sc-button]\n    [sc-button type=\"info\" size=\"small\" url=\"#\"]Info[\/sc-button]\n    [sc-button type=\"warning\" size=\"small\" url=\"#\"]Warning[\/sc-button]\n    [sc-button type=\"danger\" size=\"small\" url=\"#\"]Danger[\/sc-button]\n[\/sc-buttons]\n[sc-buttons ulclass=\"special\"]\n    [sc-button type=\"primary\" size=\"small\"  url=\"#\"]Primary[\/sc-button]\n    [sc-button type=\"secondary\" size=\"small\"   url=\"#\"]Secondary[\/sc-button]\n[\/sc-buttons]\n[sc-buttons ulclass=\"stacked\"]\n    [sc-button type=\"primary\" size=\"small\"  url=\"#\"]Primary[\/sc-button]\n    [sc-button type=\"secondary\" size=\"small\"   url=\"#\"]Secondary[\/sc-button]\n[\/sc-buttons]\n[sc-buttons ulclass=\"fit\"]\n    [sc-button type=\"primary\" size=\"small\"  url=\"#\"]Primary[\/sc-button]\n    [sc-button type=\"secondary\" size=\"small\"   url=\"#\"]Secondary[\/sc-button]\n[\/sc-buttons]<\/code><\/pre>\n<h4>Example<\/h4>\n<ul class=\"actions \"><li><a class=\"button primary  \" href=\"#\" target=\"_self\">Primary<\/a><\/li><li><a class=\"button secondary  \" href=\"#\" target=\"_self\">Secondary<\/a><\/li><li><a class=\"button success  \" href=\"#\" target=\"_self\">Success<\/a><\/li><li><a class=\"button info  \" href=\"#\" target=\"_self\">Info<\/a><\/li><li><a class=\"button warning  \" href=\"#\" target=\"_self\">Warning<\/a><\/li><li><a class=\"button danger  \" href=\"#\" target=\"_self\">Danger<\/a><\/li><\/ul>\n<ul class=\"actions \"><li><a class=\"button primary small \" href=\"#\" target=\"_self\">Primary<\/a><\/li><li><a class=\"button secondary small \" href=\"#\" target=\"_self\">Secondary<\/a><\/li><li><a class=\"button success small \" href=\"#\" target=\"_self\">Success<\/a><\/li><li><a class=\"button info small \" href=\"#\" target=\"_self\">Info<\/a><\/li><li><a class=\"button warning small \" href=\"#\" target=\"_self\">Warning<\/a><\/li><li><a class=\"button danger small \" href=\"#\" target=\"_self\">Danger<\/a><\/li><\/ul>\n<ul class=\"actions special\"><li><a class=\"button primary small \" href=\"#\" target=\"_self\">Primary<\/a><\/li><li><a class=\"button secondary small \" href=\"#\" target=\"_self\">Secondary<\/a><\/li><\/ul>\n<ul class=\"actions stacked\"><li><a class=\"button primary small \" href=\"#\" target=\"_self\">Primary<\/a><\/li><li><a class=\"button secondary small \" href=\"#\" target=\"_self\">Secondary<\/a><\/li><\/ul>\n<ul class=\"actions fit\"><li><a class=\"button primary disable small \" href=\"#\" target=\"_self\">Primary<\/a><\/li><li><a class=\"button secondary small \" href=\"#\" target=\"_self\">Secondary<\/a><\/li><\/ul>\n<h2>Flex Shortcode<\/h2>\n<h3>Usage<\/h3>\n<p>Use the <code>[sc-flex]<\/code> shortcode to set the number of columns that best render your content and layout. The <code>[sc-flex]<\/code> has the following parameters: <\/p>\n<ul>\n<li><code>class<\/code>- Row classes from Editorial theme (space separated): <code>gtr-uniform<\/code>, <code>gtr-0<\/code>, <code>gtr-25<\/code>, <code>gtr-50<\/code>, <code>gtr-150<\/code>, <code>gtr-200<\/code>, <code>aln-between<\/code>, <code>aln-around<\/code>, <code>aln-evenly<\/code>, <code>aln-left<\/code>, <code>aln-center<\/code>, <code>aln-right<\/code>, <code>aln-top<\/code>, <code>aln-bottom<\/code> and <code>aln-middle<\/code> . <\/li>\n<\/ul>\n<p>The <code>[column]<\/code> shortcode that defines each to the individual columns (e.g., .col-4 col-12-medium),  has the following parameters:<\/p>\n<ul>\n<li><code>class<\/code>- Column classes  from Editorial theme (space separated), indicate the number of columns you\u2019d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use col-4. To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint : <code>xsmall<\/code>, <code>small<\/code>, <code>medium<\/code>, <code>large<\/code> and <code>xlarge<\/code>.<\/li>\n<\/ul>\n<p>An example of the Flex row shortcode is as follows:<\/p>\n<pre><code class=\"language-markdown\">[sc-flex class=\"gtr-50\"]\n[column class=\"col-3 col-12-medium\"]\n[sc-box color=\"primary\" heading=\"Primary\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.\n[\/sc-box]\n[\/column]\n\n[column class=\"col-3 col-12-medium\"]\n[sc-box color=\"secondary\" heading=\"Secondary\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.\n[\/sc-box]\n[\/column]\n\n[column class=\"col-3 col-12-medium\"]\n[sc-box color=\"success\" heading=\"Success\"]\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.\n[\/sc-box]\n[\/column]\n\n[column class=\"col-3 col-12-medium\"]\n[sc-buttons  ulclass=\"stacked fit\"]\n    [sc-button type=\"primary\"  url=\"#\"]Primary[\/sc-button]\n    [sc-button type=\"secondary\" url=\"#\"]Secondary[\/sc-button]\n    [sc-button type=\"success\" url=\"#\"]Success[\/sc-button]\n    [sc-button type=\"info\" url=\"#\"]Info[\/sc-button]\n    [sc-button type=\"warning\" url=\"#\"]Warning[\/sc-button]\n    [sc-button type=\"danger\" url=\"#\"]Danger[\/sc-button]\n[\/sc-buttons]\n[\/column]\n\n[\/sc-flex]<\/code><\/pre>\n<h4>Example<\/h4>\n<section  id=\"features\" >\n    <div class=\"row gtr-uniformgtr-50\" >\n                    <div class=\"col-3 col-12-medium\">\n                \n\n\n\n<article class=\"box primary\">\n        <header>\n                    <h3>Primary<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.<\/p>\n\n            <\/header>\n<\/article>\n\n\n            <\/div>\n                    <div class=\"col-3 col-12-medium\">\n                \n\n\n\n<article class=\"box secondary\">\n        <header>\n                    <h3>Secondary<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.<\/p>\n\n            <\/header>\n<\/article>\n\n\n            <\/div>\n                    <div class=\"col-3 col-12-medium\">\n                \n\n\n\n<article class=\"box success\">\n        <header>\n                    <h3>Success<\/h3>\n                    \n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed eleifend magna, non tempor urna. Integer maximus, velit non scelerisque ornare, ante libero porta lorem, ac eleifend felis sapien eu leo. Fusce mauris justo, ullamcorper ut urna a, scelerisque viverra magna.<\/p>\n\n            <\/header>\n<\/article>\n\n\n            <\/div>\n                    <div class=\"col-3 col-12-medium\">\n                \n<ul class=\"actions stacked fit\"><li><a class=\"button primary  \" href=\"#\" target=\"_self\">Primary<\/a><\/li><li><a class=\"button secondary  \" href=\"#\" target=\"_self\">Secondary<\/a><\/li><li><a class=\"button success  \" href=\"#\" target=\"_self\">Success<\/a><\/li><li><a class=\"button info  \" href=\"#\" target=\"_self\">Info<\/a><\/li><li><a class=\"button warning  \" href=\"#\" target=\"_self\">Warning<\/a><\/li><li><a class=\"button danger  \" href=\"#\" target=\"_self\">Danger<\/a><\/li><\/ul>\n\n            <\/div>\n            <\/div>\n<\/section>\n","date_modified":"2026-03-16T00:00:56+01:00","tags":["Plattform"]},{"title":"Markdown Syntax","date_published":"2026-03-16T00:00:01+01:00","id":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/markdown-syntax","url":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/markdown-syntax","content_html":"<p>! Details on the full capabilities of Spectre.css can be found in the <a href=\"https:\/\/picturepan2.github.io\/spectre\/elements.html\">Official Spectre Documentation<\/a><\/p>\n<p>The <a href=\"https:\/\/github.com\/getgrav\/grav-theme-quark\">Quark theme<\/a> is the new default theme for Grav built with <a href=\"https:\/\/picturepan2.github.io\/spectre\/\">Spectre.css<\/a> the lightweight, responsive and modern CSS framework. Spectre provides  basic styles for typography, elements, and a responsive layout system that utilizes best practices and consistent language design.<\/p>\n<h3>Headings<\/h3>\n<h1>H1 Heading <code>40px<\/code><\/h1>\n<h2>H2 Heading <code>32px<\/code><\/h2>\n<h3>H3 Heading <code>28px<\/code><\/h3>\n<h4>H4 Heading <code>24px<\/code><\/h4>\n<h5>H5 Heading <code>20px<\/code><\/h5>\n<h6>H6 Heading <code>16px<\/code><\/h6>\n<pre><code class=\"language-html\"># H1 Heading\n# H1 Heading `40px`&lt;\/small&gt;`\n\n&lt;span class=\"h1\"&gt;H1 Heading&lt;\/span&gt;<\/code><\/pre>\n<h3>Paragraphs<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur <a href=\"\/de\/initiative\/redaktion\/markdown-syntax\/\">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet<\/a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.<\/p>\n<p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.<\/p>\n<h3>Markdown Semantic Text Elements<\/h3>\n<p><strong>Bold<\/strong> <code>**Bold**<\/code><\/p>\n<p><em>Italic<\/em> <code>_Italic_<\/code><\/p>\n<p><del>Deleted<\/del> <code>~~Deleted~~<\/code><\/p>\n<p><code>Inline Code<\/code> <code>`Inline Code`<\/code><\/p>\n<h3>HTML Semantic Text Elements<\/h3>\n<p><abbr>I18N<\/abbr> <code>&lt;abbr&gt;<\/code><\/p>\n<p><cite>Citation<\/cite> <code>&lt;cite&gt;<\/code><\/p>\n<p><kbd>Ctrl + S<\/kbd> <code>&lt;kbd&gt;<\/code><\/p>\n<p>Text<sup>Superscripted<\/sup> <code>&lt;sup&gt;<\/code><\/p>\n<p>Text<sub>Subscripted<\/sub> <code>&lt;sub&gt;<\/code><\/p>\n<p><u>Underlined<\/u> <code>&lt;u&gt;<\/code><\/p>\n<p><mark>Highlighted<\/mark> <code>&lt;mark&gt;<\/code><\/p>\n<p><time>20:14<\/time> <code>&lt;time&gt;<\/code><\/p>\n<p><var>x = y + 2<\/var> <code>&lt;var&gt;<\/code><\/p>\n<h3>Blockquote<\/h3>\n<blockquote>\n<p>The advance of technology is based on making it fit in so that you don't really even notice it,\nso it's part of everyday life.<\/p>\n<p><cite>- Bill Gates<\/cite><\/p>\n<\/blockquote>\n<pre><code class=\"language-markdown\">&gt; The advance of technology is based on making it fit in so that you don't really even notice it,\n&gt; so it's part of everyday life.\n&gt;\n&gt; &lt;cite&gt;- Bill Gates&lt;\/cite&gt;<\/code><\/pre>\n<h3>Unordered List<\/h3>\n<ul>\n<li>list item 1<\/li>\n<li>list item 2\n<ul>\n<li>list item 2.1<\/li>\n<li>list item 2.2<\/li>\n<li>list item 2.3<\/li>\n<\/ul><\/li>\n<li>list item 3<\/li>\n<\/ul>\n<pre><code class=\"language-markdown\">* list item 1\n* list item 2\n    * list item 2.1\n    * list item 2.2\n    * list item 2.3\n* list item 3<\/code><\/pre>\n<h3>Ordered List<\/h3>\n<ol>\n<li>list item 1<\/li>\n<li>list item 2\n<ol>\n<li>list item 2.1<\/li>\n<li>list item 2.2<\/li>\n<li>list item 2.3<\/li>\n<\/ol><\/li>\n<li>list item 3<\/li>\n<\/ol>\n<pre><code class=\"language-markdown\">1. list item 1\n1. list item 2\n    1. list item 2.1\n    1. list item 2.2\n    1. list item 2.3\n1. list item 3<\/code><\/pre>\n<h3>Table<\/h3>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: left;\">Name<\/th>\n<th style=\"text-align: center;\">Genre<\/th>\n<th style=\"text-align: right;\">Release date<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: left;\">The Shawshank Redemption<\/td>\n<td style=\"text-align: center;\">Crime, Drama<\/td>\n<td style=\"text-align: right;\">14 October 1994<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">The Godfather<\/td>\n<td style=\"text-align: center;\">Crime, Drama<\/td>\n<td style=\"text-align: right;\">24 March 1972<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Schindler's List<\/td>\n<td style=\"text-align: center;\">Biography, Drama, History<\/td>\n<td style=\"text-align: right;\">4 February 1994<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Se7en<\/td>\n<td style=\"text-align: center;\">Crime, Drama, Mystery<\/td>\n<td style=\"text-align: right;\">22 September 1995<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre><code class=\"language-markdown\">| Name                        | Genre                         | Release date         |\n| :-------------------------- | :---------------------------: | -------------------: |\n| The Shawshank Redemption    | Crime, Drama                  | 14 October 1994      |\n| The Godfather               | Crime, Drama                  | 24 March 1972        |\n| Schindler's List            | Biography, Drama, History     | 4 February 1994      |\n| Se7en                       | Crime, Drama, Mystery         | 22 September 1995    |<\/code><\/pre>\n<h3>Notices<\/h3>\n<p>The notices styles are actually provided by the <code>markdown-notices<\/code> plugin but are useful enough to include here:<\/p>\n<p>! This is a warning notification<\/p>\n<p>!! This is a error notification<\/p>\n<p>!!! This is a default notification<\/p>\n<p>!!!! This is a success notification<\/p>\n<pre><code class=\"language-markdown\">! This is a warning notification\n\n!! This is a error notification\n\n!!! This is a default notification\n\n!!!! This is a success notification<\/code><\/pre>","date_modified":"2026-03-16T00:00:01+01:00","tags":["Plattform"]},{"title":"Theme Future2021","date_published":"2026-03-15T23:59:42+01:00","id":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/informationen-zum-theme","url":"https:\/\/diday-saarland.de\/de\/initiative\/redaktion\/informationen-zum-theme","content_html":"<h1>Future Theme for Grav CMS<\/h1>\n<p>Future Imperfect theme by HTML5UP ported from scratch to Grav. Version 2021 <\/p>\n<p><img src=\"https:\/\/user-images.githubusercontent.com\/60596353\/139574049-72553855-d447-4405-a364-c39f6eb8665c.png\" alt=\"future_screenshot\" \/><\/p>\n<p>Future Imperfect by HTML5UP, features a clean, minimalistic design, styling for all basic page elements and HTML5\/CSS3 code designed for quick and easy customization.<\/p>\n<p><strong>If you enjoy this theme, please consider sponsoring:<\/strong><\/p>\n<p><a href=\"https:\/\/www.buymeacoffee.com\/birdydesign\" target=\"_blank\"><img src=\"https:\/\/cdn.buymeacoffee.com\/buttons\/v2\/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" ><\/a><\/p>\n<h2>Features<\/h2>\n<p>Redesigned from scratch (version 2021)<\/p>\n<ul>\n<li>HTML5 and CSS3<\/li>\n<li>Fully Responsive<\/li>\n<li>Microdata for blogs<\/li>\n<li>ARIA accessibility conformance<\/li>\n<li>Various templates for presenting your content<\/li>\n<li>Full dropdown menu integrated in menu bar and sidebar.<\/li>\n<li>Styling for all basic page elements<\/li>\n<li>Styling for various modules<\/li>\n<li>Cross browser compatible<\/li>\n<li>Sharing buttons for Facebook, Twitter, Whatsapp and Telegram.<\/li>\n<li>Top content pages in sidebar<\/li>\n<li>Fully responsive with full-page mobile navigation<\/li>\n<li>SCSS based CSS source files for easy customization<\/li>\n<li>Blueprints for Footer, Slogan and Social icons.<\/li>\n<li>Full Portfolio template with Glightbox library<\/li>\n<li>Ready to work with Archives, Breadcrumbs, Editable with Contenttools, Feed, Langswitcher, Maintenance, Reading time, Related pages, Twig extensions, Simplesearch and Taxonomylist.<\/li>\n<\/ul>\n<h3>Supported Page Templates<\/h3>\n<ul>\n<li>Default view template <code>default.md<\/code><\/li>\n<li>Error view template <code>error.md<\/code><\/li>\n<li>Blog view template <code>blog.md<\/code><\/li>\n<li>Blog item view template <code>item.md<\/code><\/li>\n<li>Portfolio view template<\/li>\n<li>Form view template <code>form.md<\/code><\/li>\n<li>Modular view templates: <code>modular.md<\/code>\n<ul>\n<li>Features Modular view template <code>features.md<\/code><\/li>\n<li>Banner Modular view template <code>banner.md<\/code><\/li>\n<li>Contact Modular view template <code>contact.md<\/code><\/li>\n<\/ul><\/li>\n<li>Owlcarousel template<\/li>\n<li>Recent posts partial template<\/li>\n<li>Related posts partial template<\/li>\n<\/ul>\n<h1>Installation<\/h1>\n<p>Installing the Future 2021 theme can be done in one of two ways. Our GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.<\/p>\n<h2>GPM Installation (Preferred)<\/h2>\n<p>The simplest way to install this theme is via the <a href=\"https:\/\/learn.getgrav.org\/17\/cli-console\/grav-cli-gpm\">Grav Package Manager (GPM)<\/a> through your system's Terminal (also called the command line).  From the root of your Grav install type:<\/p>\n<pre><code>bin\/gpm install future2021<\/code><\/pre>\n<p>This will install the Future2021 theme into your <code>\/user\/themes<\/code> directory within Grav. Its files can be found under <code>\/your\/site\/grav\/user\/themes\/future2021<\/code>.<\/p>\n<h2>Manual Installation<\/h2>\n<p>To install this theme, just download the zip version of this repository and unzip it under <code>\/your\/site\/grav\/user\/themes<\/code>. Then, rename the folder to <code>future2021<\/code>. You can find these files either on <a href=\"https:\/\/github.com\/pmoreno-rodriguez\/grav-theme-future2021\">GitHub<\/a> or via <a href=\"http:\/\/getgrav.org\/downloads\/themes\">GetGrav.org<\/a>.<\/p>\n<p>You should now have all the theme files under<\/p>\n<pre><code>\/your\/site\/grav\/user\/themes\/future2021<\/code><\/pre>\n<h2>Default Options<\/h2>\n<p>Future2021 comes with a few default options that can be set site-wide.  These options are:<\/p>\n<pre><code class=\"language-yaml\">production-mode: true         # In production mode, only minified CSS is used. When disabled, nested CSS are enabled\nsidebar:                      # Enable\/Disable sidebar in non-editable pages such as simplesearch results, offline, etc.\ngoogle_fonts_local:           # Option to load Google Fonts from the theme or from Google servers.\nfavicon:                      # Choosse your own favicon\ncustom_logo:                  # A custom logo rather than the default (see below)  \ncustom_logo_mobile:           # A custom logo to use for mobile navigation\ntype_logo_header:             # Choose how the logo is displayed in header. Options: Image, Text or Both\nslogan:                       # Custom text for slogan\nmenu_langswitcher:            # Enable\/Disable langswitcher icon in menu (langswitcher plugin needed)\nmenu_search:                  # Enable\/Disable search icon in menu (simplesearch plugin needed)\nmenu_login:                   # Enable\/Disable login icon in menu\nblog-page: '\/blog'            # The route to the blog listing page, useful for a blog style layout\nminiposts:                    # Enable\/Disable miniposts in left sidebar\nminiposts_category:           # Select category name for miniposts (configured in taxonomies)\nminiposts_number:             # The number of mini posts will be displayed on the left sidebar\nrecent_posts_enabled:         # Enable\/Disable recent posts in left sidebar\nrecent_posts_number:          # The number of recent posts will be displayed on the left sidebar\nfooter.title:                 # Footer block title in left sidebar\nfooter.description:           # Footer block description in left sidebar\nfooter.copyright_text:        # Footer block copyright text in left sidebar\nfooter.button_text:           # Footer block button text in left sidebar\nfooter.button_url:            # Footer block button url in left sidebar\nenable_social:                # Enable\/Disable social icons in footer\nsocial_style:                 # Select the style for Fontawesome icons\ncustommenus.enabled:          # Enable\/Disable custom menus in top menu<\/code><\/pre>\n<p>To make modifications, you can copy the <code>user\/themes\/future2021\/future2021.yaml<\/code> file to <code>user\/config\/themes\/<\/code> folder and modify, or you can use the admin plugin.<\/p>\n<blockquote>\n<p>NOTE: Do not modify the <code>user\/themes\/future2021\/future2021.yaml<\/code> file directly or your changes will be lost with any updates<\/p>\n<h2>Custom Logos<\/h2>\n<\/blockquote>\n<p>To add a custom logo, you should put the log into the <code>user\/themes\/future2021\/images\/logo<\/code> folder.  Standard image formats are support (<code>.png<\/code>,<code>.jpg<\/code>, <code>.gif<\/code>, <code>.svg<\/code>, etc.).  Then reference the logo via the YAML like so:<\/p>\n<pre><code class=\"language-yaml\">custom_logo:\n    - name: 'my-custom-logo.png'\ncustom_logo_mobile:\n    - name: 'my-custom-mobile-logo.png'    <\/code><\/pre>\n<p>Alternatively, you can you use the drag-n-drop \"Custom Logo\" field in the Future2021 theme options.<\/p>\n<h2>Portfolio Options<\/h2>\n<table>\n<thead>\n<tr>\n<th>Option<\/th>\n<th>Type<\/th>\n<th>Default<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>openEffect<\/td>\n<td>string<\/td>\n<td><code>zoom<\/code><\/td>\n<td>Name of the effect on lightbox open. (zoom, fade, none)<\/td>\n<\/tr>\n<tr>\n<td>closeEffect<\/td>\n<td>string<\/td>\n<td><code>zoom<\/code><\/td>\n<td>Name of the effect on lightbox close. (zoom, fade, none)<\/td>\n<\/tr>\n<tr>\n<td>slideEffect<\/td>\n<td>string<\/td>\n<td><code>slide<\/code><\/td>\n<td>Name of the effect on slide change. (slide, fade, zoom, none)<\/td>\n<\/tr>\n<tr>\n<td>moreText<\/td>\n<td>string<\/td>\n<td><code>See more<\/code><\/td>\n<td>More text for descriptions on mobile devices.<\/td>\n<\/tr>\n<tr>\n<td>moreLength<\/td>\n<td>number<\/td>\n<td><code>60<\/code><\/td>\n<td>Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description.<\/td>\n<\/tr>\n<tr>\n<td>closeButton<\/td>\n<td>boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Show or hide the close button.<\/td>\n<\/tr>\n<tr>\n<td>touchNavigation<\/td>\n<td>boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Enable or disable the touch navigation (swipe).<\/td>\n<\/tr>\n<tr>\n<td>touchFollowAxis<\/td>\n<td>boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Image follow axis when dragging on mobile.<\/td>\n<\/tr>\n<tr>\n<td>keyboardNavigation<\/td>\n<td>boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Enable or disable the keyboard navigation.<\/td>\n<\/tr>\n<tr>\n<td>closeOnOutsideClick<\/td>\n<td>boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Close the lightbox when clicking outside the active slide.<\/td>\n<\/tr>\n<tr>\n<td>startAt<\/td>\n<td>number<\/td>\n<td><code>0<\/code><\/td>\n<td>Start lightbox at defined index.<\/td>\n<\/tr>\n<tr>\n<td>width<\/td>\n<td>number<\/td>\n<td><code>900px<\/code><\/td>\n<td>Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width<\/td>\n<\/tr>\n<tr>\n<td>height<\/td>\n<td>number<\/td>\n<td><code>506px<\/code><\/td>\n<td>Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vh <strong>For inline elements you can set the height to auto<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td>descPosition<\/td>\n<td>string<\/td>\n<td><code>bottom<\/code><\/td>\n<td>Global position for slides description, you can define a specific position on each slide (bottom, top, left, right).<\/td>\n<\/tr>\n<tr>\n<td>loop<\/td>\n<td>boolean<\/td>\n<td><code>false<\/code><\/td>\n<td>Loop slides on end.<\/td>\n<\/tr>\n<tr>\n<td>zoomable<\/td>\n<td>boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Enable or disable zoomable images you can also use data-zoomable=\"false\" on individual nodes.<\/td>\n<\/tr>\n<tr>\n<td>draggable<\/td>\n<td>boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable=\"false\" on individual nodes.<\/td>\n<\/tr>\n<tr>\n<td>dragToleranceX<\/td>\n<td>number<\/td>\n<td><code>40<\/code><\/td>\n<td>Used with draggable. Number of pixels the user has to drag to go to prev or next slide.<\/td>\n<\/tr>\n<tr>\n<td>dragToleranceY<\/td>\n<td>number<\/td>\n<td><code>65<\/code><\/td>\n<td>Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag).<\/td>\n<\/tr>\n<tr>\n<td>dragAutoSnap<\/td>\n<td>boolean<\/td>\n<td><code>false<\/code><\/td>\n<td>If true the slide will automatically change to prev\/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released.<\/td>\n<\/tr>\n<tr>\n<td>preload<\/td>\n<td>boolean<\/td>\n<td><code>true<\/code><\/td>\n<td>Enable or disable preloading.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h1>Downloads template<\/h1>\n<p>Future2021 theme includes a simple template to manage downloads of files uploaded to a page. These files are automatically found and processed by Grav using <code>page.media.all<\/code> and displayed in a table with four columns: name, size, modification date and download button.<\/p>\n<h1>Demo page<\/h1>\n<p><a href=\"https:\/\/future2021.pmdesign.dev\">https:\/\/future2021.pmdesign.dev<\/a><\/p>\n<h1>Documentation<\/h1>\n<p>You can read extra documentation of Future2021 Theme at <a href=\"https:\/\/pmoreno-rodriguez.github.io\/#\/.\/gravthemes\/future2021\/index\">https:\/\/pmoreno-rodriguez.github.io\/#\/.\/gravthemes\/future2021\/index<\/a>. This is <a href=\"https:\/\/pmdesign.dev\/temas\/future2021\">Spanish document site for Future2021 Theme<\/a><\/p>\n<h1>Future plans<\/h1>\n<ul>\n<li>Create a Flex Directory for authors and avatars.<\/li>\n<li>\n<\/li>\n<\/ul>","date_modified":"2026-03-15T23:59:42+01:00","tags":["Plattform"]}]}