diff --git a/docs/calendar_dark2.html b/docs/calendar_dark2.html
index fbc40d87a7a38340e32e2c74bfbc4af856ae0491..54d9240bef80797862de77255c197e970e31333e 100644
--- a/docs/calendar_dark2.html
+++ b/docs/calendar_dark2.html
@@ -2,148 +2,16 @@
<html>
<head>
<title>Calendar</title>
- <!-- <script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
- <script src='https://cdn.jsdelivr.net/npm/fullcalendar/locales-all.min.js'></script> -->
- <script src="javascripts/ical.js"></script>
- <script src="javascripts/index.global.min.js"></script>
- <style>
- html, body {
- overflow: hidden;
- }
-
- body {
- --md-primary-fg-color: #7d7d7d;
- --md-accent-fg-color: #792443;
- --md-footer-bg-color--dark: white;
- --header-bg-color: rgba(108, 27, 64, 1);
- --header-bg-color-for-alpha: 108, 27, 64;
- --counter-grid-color: #444444;
- --tabs-color: rgba(15, 54, 90, 1);
- --tabs-font-color: rgb(205, 205, 205);
- --tabs-nav-int: rgba(108, 27, 64, 1);
- --high-contrast-bg: rgb(25, 25, 25);
- --high-contrast-font: rgb(240, 240, 240);
- --keywords-bg: rgba(108, 27, 64, 1);
- --md-footer-bg-color: rgba(15, 54, 90, 1);
- --contact-form: rgb(51, 51, 51);
-
- --fc-small-font-size: .85em;
- --fc-page-bg-color: var(--tabs-color);
- --fc-neutral-bg-color: rgba(208, 208, 208, 0.3);
- --fc-neutral-text-color: var(--high-contrast-font);
- --fc-border-color: #ddd;
-
- --fc-button-text-color: white;
- --fc-button-bg-color: var(--tabs-color);
- --fc-button-border-color: var(--high-contrast-font);
- --fc-button-hover-bg-color: var(--header-bg-color);
- --fc-button-hover-border-color: var(--high-contrast-bg);
- --fc-button-active-bg-color: rgba(var(--header-bg-color-for-alpha), 0.8);
- --fc-button-active-border-color: var(--high-contrast-font);
-
- --fc-event-bg-color: var(--tabs-color);
- --fc-event-border-color: var(--high-contrast-font);
- --fc-event-text-color: var(--high-contrast-font);
- --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);
-
- --fc-more-link-bg-color: #d0d0d0;
- --fc-more-link-text-color: inherit;
-
- --fc-event-resizer-thickness: 8px;
- --fc-event-resizer-dot-total-width: 8px;
- --fc-event-resizer-dot-border-width: 1px;
-
- --fc-non-business-color: rgba(215, 215, 215, 0.3);
- --fc-bg-event-color: rgb(143, 223, 130);
- --fc-bg-event-opacity: 0.3;
- --fc-highlight-color: rgba(188, 232, 241, 0.3);
- --fc-today-bg-color: rgba(255, 220, 40, 0.15);
- --fc-now-indicator-color: red;
-
- --fc-list-event-dot-width: 10px;
- --fc-list-event-hover-bg-color: var(--header-bg-color);
- }
-
- .fc {
- color: white;
- padding: 1px;
- }
-
- .fc-event-main {
- overflow-wrap: normal;
- white-space: normal;
- word-break: normal;
- overflow: hidden;
- }
-
- .fc-event {
- border-style: none;
- padding: 2px;
- margin: 2px;
- }
-
- .form {
- width: 100%;
- max-width: 1200px;
- min-width: 400px;
- margin: 0 auto;
- background-color: var(--md-default-bg-color);
- padding: 20px;
- border-radius: var(--border-radius);
- border: var(--header-bg-color);
- }
-
- .form-field {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin-bottom: 10px;
- }
-
- .form-field input,
- .form-field textarea {
- width: 100%;
- color:var(--high-contrast-font);
- font-size: 1.3em;
- background-color: var(--high-contrast-bg);
- padding: 2px;
- border-radius: var(--border-radius);
- }
-
- .form-field textarea {
- resize: vertical;
- }
-
- .past-event {
- display: none;
- }
-
- .fc-list-event.past-event {
- border-color: transparent;
- }
-
- .fc-list-day.fc-day.fc-day-past {
- display: none;
- }
-</style>
+ <script src="javascripts/ical.js"></script> <!-- calls ical.js library to parse the ics-data from the calendar file into data the fullcalendar-library can work with -->
+ <script src="javascripts/index.global.min.js"></script> <!-- calls the fullcalendar.js library -->
+ <link rel="stylesheet" href="stylesheets/variables.css"> <!-- this calls the variables holding the "core"-Design for the entire Website like colors-codes etc. -->
+ <link rel="stylesheet" href="stylesheets/calendar.css"> <!-- this calls the specific Design for the calendar, and can use the variables of the file above -->
</head>
<body>
- <style>
- body {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- font-family: "RUBFlama", sans-serif;
- background-color: rgb(46, 48, 62);
- }
-
- @font-face {
- font-family: "RUBFlama";
- src: url('../medien/flamapro-basic.woff') format('woff2');
- }
- </style>
- <div id='calendar' style="border: none;"></div>
- <script src="javascripts/ics_calendar2.js"></script>
+ <div class="calendar-wrapper">
+ <div id='form-container'></div> <!-- this div holds the contact form -->
+ <div id='calendar' style="border: none;"></div> <!-- this div holds the calendar -->
+ </div>
+ <script src="javascripts/ics_calendar2.js"></script> <!-- this calls the js that is responsible for everything around the calendar and contact form -->
</body>
</html>
diff --git a/docs/javascripts/colorswitchcalendar2.js b/docs/javascripts/colorswitchcalendar2.js
index 9b24ac92c335a0a27a989a2ecaea3fac23849484..7851cbd36fc77e158d75df03048f9a36347ecdf4 100644
--- a/docs/javascripts/colorswitchcalendar2.js
+++ b/docs/javascripts/colorswitchcalendar2.js
@@ -1,25 +1,31 @@
window.addEventListener('load', function() {
- var iframe = document.getElementById('calendar');
+ const iframe = document.getElementById('calendar');
- var updateIframeSrc = function() {
+ var updateIframeColor = function() {
setTimeout(function() {
var palette = JSON.parse(localStorage.getItem('/homepage/.__palette'));
+ let colorSchemeValue;
if (palette && palette.index === 1) {
- iframe.src = "../calendar_dark2.html";
+ colorSchemeValue = 'slate';
} else {
- iframe.src = "../calendar2.html";
+ colorSchemeValue = 'default';
+ }
+
+ // Directly update the iframe's attribute
+ if (iframe.contentDocument && iframe.contentDocument.body) {
+ iframe.contentDocument.body.setAttribute('data-md-color-scheme', colorSchemeValue);
}
}, 100); // delay of 100 milliseconds
};
- updateIframeSrc();
+ updateIframeColor();
var lightModeInput = document.getElementById('__palette_1');
var darkModeInput = document.getElementById('__palette_2');
// Check if inputs are not null and update on change
if(lightModeInput && darkModeInput) {
- lightModeInput.addEventListener('input', updateIframeSrc);
- darkModeInput.addEventListener('input', updateIframeSrc);
+ lightModeInput.addEventListener('input', updateIframeColor);
+ darkModeInput.addEventListener('input', updateIframeColor);
}
});
diff --git a/docs/javascripts/ics_calendar2.js b/docs/javascripts/ics_calendar2.js
index a1c49d40f7c83777a556f9bbff34b5c81cc2e239..1710f96b101ee4fa6f144f545d5121cc4dbef270 100644
--- a/docs/javascripts/ics_calendar2.js
+++ b/docs/javascripts/ics_calendar2.js
@@ -1,10 +1,25 @@
var showPastEvents = false;
-// Load iCalendar data
+//closes contact form when close-button clicked
+document.addEventListener('DOMContentLoaded', function() {
+ // Attach click event to the document or a closer parent that already exists
+ document.addEventListener('click', function(event) {
+ // Check if the clicked element or its parent has the ID 'close-button'
+ if (event.target.id === 'close-button' || event.target.closest('#close-button')) {
+ var eventContactForm = document.getElementById('event-form');
+ if (eventContactForm) {
+ eventContactForm.style.display = 'none';
+ }
+ }
+ });
+});
+
window.addEventListener('message', function(event) {
adjustHeight();
+ adjustWidth();
}, false);
+// Load iCalendar data
async function fetchAndParseICS() {
const response = await fetch('./data/calendar.ics');
const data = await response.text();
@@ -72,6 +87,7 @@ fetchAndParseICS()
contentHeight: "auto",
events: calendarEvents,
eventDisplay: 'block',
+
eventContent: function(arg) {
var start = arg.event.start;
var end = arg.event.end;
@@ -90,14 +106,103 @@ fetchAndParseICS()
},
eventDidMount: function(info) {
- clearTimeout(debounceTimer);
- debounceTimer = setTimeout(adjustHeight, 200);
handlePastEventsVisibility();
},
- eventWillUnmount: function() {
- clearTimeout(debounceTimer);
- debounceTimer = setTimeout(adjustHeight, 200);
+ //Opens the contact form with event specific informations after clicking an event
+ eventClick: function showContactForm(info) {
+ let currentDate = new Date();
+ let startDate = info.event.start;
+ let endDate = info.event.end;
+
+ // Check if the event's start date is in the past
+ if (startDate < currentDate) {
+ alert("Du kannst Dich nicht für ein Ereignis in der Vergangenheit anmelden.");
+ return; // Exit the function early
+ }
+
+ // Format the date using German locale
+ let formattedDate = new Intl.DateTimeFormat('de-DE', {
+ year: 'numeric',
+ month: 'long',
+ day: '2-digit'
+ }).format(startDate);
+
+ // Format the start time using German locale
+ let formattedStartTime = new Intl.DateTimeFormat('de-DE', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false // Use 24-hour format
+ }).format(startDate);
+
+ // Format the end time using German locale
+ let formattedEndTime = new Intl.DateTimeFormat('de-DE', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ hour12: false // Use 24-hour format
+ }).format(endDate);
+
+ function generateEventHTML (info, formattedDate, formattedStartTime, formattedEndTime) {
+ return `
+ <form id="event-form" class="form" style="display: none;" method="post" action="https://feedback.ruhr-uni-bochum.de/formmailer.php" ... >
+ <input type="hidden" name="subject" value="Teilnahmeanfrage von der Makerspace-Homepage" />
+ <div class="form-field">
+ <input type="button" id="close-button" class="md-button" value="Teilnahmeanfrage abbrechen" name="abbrechen" />
+ </div>
+ <div class="event-subject">
+ <label for="event-info"><strong>Deine Teilnahmeanfrage für:</strong></label>
+ <textarea name="event-info" id="event-info" readonly>${info.event.title + '\nam ' + formattedDate + ' von ' + formattedStartTime + ' bis ' + formattedEndTime + ' Uhr'} Uhr</textarea>
+ </div>
+ <input type="hidden" name="recipients" value="Torben.Boehnke-makerspace@ruhr-uni-bochum.de"/>
+ <input type="hidden" name="mail_options" value="charset=UTF-8,Exclude=realname;honigtopf;schicken;FromAddr"/>
+ <input type="hidden" name="good_url" value="https://makerspace.io.noc.ruhr-uni-bochum.de/homepage/danke/" />
+ <input type="hidden" name="good_template" value="https://makerspace.io.noc.ruhr-uni-bochum.de/homepage/danke/" />
+
+ <div class="form-field">
+ <label for="nachname"><strong>Name:</strong></label>
+ <input name="nachname" id="nachname" type="text" maxlength="30" required/>
+ </div>
+
+ <div class="form-field">
+ <label for="vorname"><strong>Vorname:</strong></label>
+ <input name="vorname" id="vorname" type="text" maxlength="30" required/>
+ </div>
+
+ <div class="form-field">
+ <label for="email"><strong>E-Mail:</strong></label>
+ <input name="email" id="email" type="email" maxlength="60" required/>
+ </div>
+
+ <div class="form-field">
+ <label for="tel"><strong>Telefonnummer:</strong></label>
+ <input name="tel" id="tel" type="tel" maxlength="40" placeholder="Optional" />
+ </div>
+
+ <div class="form-field">
+ <label for="nachricht" id="nachricht-text"><strong>Deine Nachricht:</strong><span class='large'></span></label>
+ <textarea name="nachricht" id="nachricht" placeholder="Hier kannst Du Deine Nachricht schreiben (Limit: 2000 Zeichen)" rows="10"></textarea>
+ </div>
+
+ <div class="honey" style="display: none;">
+ <label for="honigtopf"><strong>Please do not fill this field:</strong></label>
+ <input name="honigtopf" id="honigtopf" type="text" maxlength="50" value="" />
+ </div>
+
+ <p>Bitte beachte: Diese Anfrage allein berechtigt Dich noch nicht zur Teilnahme. Die Teilnahme ist erst nach Erhalt einer Bestätigungsmail von uns gültig!</p>
+
+ <div class="form-field">
+ <input type="submit" class="md-button" value="Teilnahmeanfrage abschicken" name="schicken" />
+ </div>
+ </form>
+ </div>
+ `};
+
+
+ document.getElementById('form-container').innerHTML = generateEventHTML(info, formattedDate, formattedStartTime, formattedEndTime);
+ let form = document.getElementById(`event-form`);
+ form.style.display = 'block';
},
eventClassNames: function(arg) {
@@ -114,79 +219,37 @@ fetchAndParseICS()
});
calendar.render();
-
- function getWeekNumber(d) {
- // Copy date so we don't modify the original
- d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
- // Set to nearest Thursday: current date + 4 - current day number
- d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
- // Get first day of the year
- var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
- // Calculate full weeks to nearest Thursday
- var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
- return weekNo;
- }
+ //adjusts the height of the iframe to the height of the calendar or contact form (whatever is higher)
+ function adjustHeight() {
+
+ var wrapper = document.querySelector('.calendar-wrapper');
- function weeks(startDate, endDate) {
- var startWeek = getWeekNumber(startDate);
- var endWeek = getWeekNumber(endDate);
- return (endWeek - startWeek) + 1;
- }
+ // Initialize default height to 400
+ var newHeight = 400;
+ var wrapperHeight = 400;
- function getVisibleMultiDayEvents(calendarInstance, showPastEvents) {
- var view = calendarInstance.view;
- var visibleRangeStart = view.activeStart;
- var visibleRangeEnd = view.activeEnd;
- var currentDate = new Date(); // Current date
-
- var allEvents = calendarInstance.getEvents();
- var trulyVisibleEvents = allEvents.filter(function(event) {
- // If showing past events, or the event end date is in the future
- var isEventRelevant = showPastEvents || (event.end || event.start) >= currentDate;
-
- // Check if the event is within the visible range and is relevant
- return event.start < visibleRangeEnd && (event.end || event.start) > visibleRangeStart && isEventRelevant;
- });
+ if (wrapper) {
+ wrapperHeight = wrapper.offsetHeight;
+ }
- var multiDayEvents = trulyVisibleEvents.filter(function(event) {
- var start = event.start;
- var end = event.end || start;
- return (end.getTime() - start.getTime()) > 86400000;
- });
-
- return multiDayEvents;
- }
+ newHeight = wrapperHeight + 10;
- function getMultiDayEventsAdditionalHeight(calendarInstance) {
- var additionalHeight = 0;
- var multiDayEventHeight = 24.6; // As given by you
-
- var multiDayEvents = getVisibleMultiDayEvents(calendar, showPastEvents); // You'll need to implement this function
-
- for (var event of multiDayEvents) {
- var startDate = event.start;
- var endDate = event.end;
-
- // Calculate the number of weeks this event spans
- var weeksSpanned = weeks(startDate, endDate); // Convert difference to weeks
-
- additionalHeight += weeksSpanned * multiDayEventHeight;
+ console.log("newHeight:", newHeight)
+
+ // Directly set the height of the iframe in the parent
+ var iframeInParent = window.parent.document.getElementById('calendar');
+ if (iframeInParent) {
+ iframeInParent.style.height = newHeight + 'px';
}
- console.log("additionalHeight: ", additionalHeight);
- return additionalHeight;
}
- function adjustHeight() {
- setTimeout(function() {
- var calendarHeight = document.getElementById('calendar').offsetHeight;
- var additionalHeight = getMultiDayEventsAdditionalHeight(calendar);
-
- calendarHeight += additionalHeight;
-
- window.parent.postMessage({ height: calendarHeight }, '*');
- }, 200); // wait for x milliseconds before measuring
- }
+ // triggers adjustHeight whenever calendar-wrapper changes height
+ var wrapper = document.querySelector('.calendar-wrapper');
+ if (wrapper) {
+ var resizeObserver = new ResizeObserver(adjustHeight);
+ resizeObserver.observe(wrapper);
+ }
// Show/Hide past events
function handlePastEventsVisibility() {
@@ -202,7 +265,6 @@ fetchAndParseICS()
dayEl.style.display = showPastEvents ? 'table-row' : 'none';
});
}
- adjustHeight();
var visibleEvents = calendar.getEvents();
console.log("All visible events:", visibleEvents);
var multiDayEvents = visibleEvents.filter(function(event) {
@@ -213,8 +275,5 @@ fetchAndParseICS()
console.log("Filtered multi-day events:", multiDayEvents);
}
-
- adjustHeight();
});
-
diff --git a/docs/kalender2.md b/docs/kalender2.md
index c3c37ab2d907e8bfa2ec762e2cc2fc10350fedce..b839bc6d661d00e01be387915121698cd67c1887 100644
--- a/docs/kalender2.md
+++ b/docs/kalender2.md
@@ -12,7 +12,7 @@ Hier findest Du öffentliche Termine im Makerspace. Anmeldemöglichkeiten und we
- Wenn Du ein Event bei uns ausrichtest, das Du gern im Kalender hättest, [sag uns gern Bescheid](kontakt.md).
- Du kannst unseren Kalender [über diesen Link](data/calendar.ics) auch direkt in der App Deiner Wahl abonnieren.
-<iframe id="calendar" style="display: block; width: 100%; height: 100%; border: none;"></iframe>
+<iframe src="../calendar_dark2.html" id="calendar" style="display: block; width: 100%; height: 100%; border: none;"></iframe>
<script src="../javascripts/colorswitchcalendar2.js" defer></script>
<script>
diff --git a/docs/stylesheets/calendar.css b/docs/stylesheets/calendar.css
new file mode 100644
index 0000000000000000000000000000000000000000..07e346c2b010107b9813b6a038027d540effa029
--- /dev/null
+++ b/docs/stylesheets/calendar.css
@@ -0,0 +1,167 @@
+html, body {
+ overflow: hidden;
+}
+
+/* defines the general appearance of the iframe and contains fullcalendar specific variables */
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ font-family: "RUBFlama", sans-serif;
+ color: var(--high-contrast-font) ;
+ background-color: var(--md-default-bg-color);
+
+ --fc-small-font-size: .85em;
+ --fc-page-bg-color: var(--tabs-color);
+ --fc-neutral-bg-color: rgba(208, 208, 208, 0.3);
+ --fc-neutral-text-color: var(--high-contrast-font);
+ --fc-border-color: #ddd;
+
+ --fc-button-text-color: white;
+ --fc-button-bg-color: var(--tabs-color);
+ --fc-button-border-color: var(--high-contrast-font);
+ --fc-button-hover-bg-color: var(--header-bg-color);
+ --fc-button-hover-border-color: var(--high-contrast-bg);
+ --fc-button-active-bg-color: rgba(var(--header-bg-color-for-alpha), 0.8);
+ --fc-button-active-border-color: var(--high-contrast-font);
+
+ --fc-event-bg-color: var(--tabs-color);
+ --fc-event-border-color: var(--high-contrast-font);
+ --fc-event-text-color: var(--high-contrast-font);
+ --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);
+
+ --fc-more-link-bg-color: #d0d0d0;
+ --fc-more-link-text-color: inherit;
+
+ --fc-event-resizer-thickness: 8px;
+ --fc-event-resizer-dot-total-width: 8px;
+ --fc-event-resizer-dot-border-width: 1px;
+
+ --fc-non-business-color: rgba(215, 215, 215, 0.3);
+ --fc-bg-event-color: rgb(143, 223, 130);
+ --fc-bg-event-opacity: 0.3;
+ --fc-highlight-color: rgba(188, 232, 241, 0.3);
+ --fc-today-bg-color: rgba(255, 220, 40, 0.15);
+ --fc-now-indicator-color: red;
+
+ --fc-list-event-dot-width: 10px;
+ --fc-list-event-hover-bg-color: var(--header-bg-color);
+}
+
+/* Here are a few changes to the standard fullcalendar classes (starting with .fc) */
+.fc {
+ color: var(--high-contrast-font);
+ padding: 1px;
+}
+
+.fc-event-main {
+ overflow-wrap: normal;
+ white-space: normal;
+ word-break: normal;
+ overflow: hidden;
+}
+
+.fc-event {
+ border-style: none;
+ padding: 2px;
+ margin: 2px;
+}
+
+/* The classes defining the design of the contact form */
+#form-container {
+ display: block;
+}
+
+.form {
+ position: relative;
+ max-width: 1200px;
+ min-width: 400px;
+ margin: auto;
+ z-index: 5;
+ padding: 20px;
+ background-color: var(--md-default-bg-color);
+ border-radius: var(--border-radius);
+ border: var(--header-bg-color);
+}
+
+.form-field {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 10px;
+}
+
+.form-field label {
+ font-size: 18px;
+}
+
+.form-field input,
+.form-field textarea {
+ width: 100%;
+ color:var(--high-contrast-font);
+ font-size: 1.3em;
+ background-color: var(--high-contrast-bg);
+ padding: 2px;
+ border-radius: var(--border-radius);
+ border-style: none;
+}
+
+.form-field textarea {
+ resize: vertical;
+}
+
+td.fc-list-event-title:hover a {
+ color: white;
+}
+
+/* Design of the text-field of the contact form that holds the selected event informations. */
+.event-subject textarea {
+ width: 100%;
+ height: auto;
+ resize: none; /* Prevent resizing of the textarea */
+ color:var(--high-contrast-font);
+ font-size: 1.3em;
+ padding: 2px;
+ background-color: var(--contact-form);
+ border-color: var(--contact-form);
+}
+
+/* Class-changes needed for the "show/hide past events-function" */
+.past-event {
+ display: none;
+}
+
+.fc-list-event.past-event {
+ border-color: transparent;
+}
+
+.fc-list-day.fc-day.fc-day-past {
+ display: none;
+}
+
+/* .md-button Änderungen --> */
+.md-button {
+ border-radius: var(--border-radius);
+ background-color: rgba(15, 54, 90, 1);
+ color: white;
+ border: 0.1rem solid;
+ cursor: pointer;
+ display: inline-block;
+ font-weight: 700;
+ padding: 0.625em 2em;
+ transition: color 125ms,background-color 125ms,border-color 125ms;
+}
+
+.md-button:is(:focus) {
+ border-radius: var(--border-radius);
+ background-color: rgba(15, 54, 90, 1);
+ color: white;
+ border-color: white;
+}
+
+.md-button:is(:hover) {
+ background-color: var(--hover-color);
+ border-color: var(--header-bg-color);
+ color: var(--high-contrast-font);
+}
\ No newline at end of file
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 92c151793585d235bd6ff65cbf9c3f5d2eef749f..b968ef9f6c344bd19a9e914e18d12a1489da4826 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,71 +1,3 @@
-:root {
- --md-primary-fg-color: #003561;
- --md-accent-fg-color: #651e38;
- --md-default-bg-color: #FDFFE0;
- --md-text-font: "RUBFlama";
- --md-footer-bg-color--dark: white;
- --border-radius: 4px;
- --rub-blau: 15, 54, 90;
-}
-
-[data-md-color-scheme="slate"] {
- --md-primary-fg-color: #7d7d7d;
- --md-accent-fg-color: #792443;
- --md-footer-bg-color--dark: white;
- --header-bg-color: rgba(108, 27, 64, 1);
- --header-bg-color-for-alpha: 108, 27, 64;
- --counter-grid-color: #444444;
- /* --tabs-color: rgba(0, 99, 53, 1); */
- --tabs-color: rgba(15, 54, 90, 1);
- --tabs-font-color: rgb(205, 205, 205);
- --tabs-nav-int: rgba(108, 27, 64, 1);
- --high-contrast-bg: rgb(25, 25, 25);
- --high-contrast-font: rgb(240, 240, 240);
- --keywords-bg: rgba(108, 27, 64, 1);
- --md-footer-bg-color: rgba(15, 54, 90, 1);
- --contact-form: rgb(51, 51, 51);
- --hover-color:rgba(108, 27, 64, 1);
- --link-color: rgba(141, 174, 16, 1);
-}
-
-[data-md-color-scheme="default"] {
- --md-primary-fg-color: #003561;
- --md-accent-fg-color: #651e38;
- --md-default-bg-color: #FFF5FA;
- --md-text-font: "RUBFlama";
- --md-footer-bg-color--dark: white;
- --md-default-fg-color--light: rgb(47, 47, 47);
- --header-bg-color: rgba(15, 54, 90, 1);
- --header-bg-color-for-alpha: 15, 54, 90;
- --counter-grid-color: #fff5fb;
- --tabs-color: rgba(247, 164, 168, 1);
- --tabs-font-color: rgb(58, 58, 58);
- --tabs-nav-int: rgb(170, 210, 119);
- --high-contrast-bg: rgb(228, 228, 228);
- --high-contrast-font: rgb(21, 21, 21);
- --keywords-bg: rgba(247, 164, 168, 1);
- --md-footer-bg-color: rgba(15, 54, 90, 1);
- --contact-form: rgb(199, 199, 199);
- --hover-color: rgba(247, 164, 168, 1);
- --link-color: rgba(15, 54, 90, 1);
-}
-
-[data-md-color-scheme="old_default"] {
- --md-primary-fg-color: #003561;
- --md-accent-fg-color: #651e38;
- --md-default-bg-color: #FFF5FA;
- --md-text-font: "RUBFlama";
- --md-footer-bg-color--dark: white;
- --md-default-fg-color--light: rgb(47, 47, 47);
- --header-bg-color: #f6a4a8;
- --counter-grid-color: #fff5fb;
- --tabs-color: #A8F6A4;
- --tabs-font-color: rgb(58, 58, 58);
- --high-contrast-bg: rgb(228, 228, 228);
- --high-contrast-font: rgb(21, 21, 21);
- --keywords-bg: #f6a4a83a;
-}
-
@font-face {
font-family: "RUBFlama";
src: url('../medien/flamapro-basic.woff') format('woff2');
diff --git a/docs/stylesheets/variables.css b/docs/stylesheets/variables.css
new file mode 100644
index 0000000000000000000000000000000000000000..66d7cff3721a07edea5fce9c164cdae5cd27578e
--- /dev/null
+++ b/docs/stylesheets/variables.css
@@ -0,0 +1,57 @@
+:root {
+ --md-primary-fg-color: #003561;
+ --md-accent-fg-color: #651e38;
+ --md-default-bg-color: #FDFFE0;
+ --md-text-font: "RUBFlama";
+ --md-footer-bg-color--dark: white;
+ --border-radius: 4px;
+ --rub-blau: 15, 54, 90;
+}
+
+[data-md-color-scheme="slate"] {
+ --md-hue: 208;
+ --md-default-bg-color: hsla(var(--md-hue), 15%, 21%, 1);
+ --md-primary-fg-color: #7d7d7d;
+ --md-accent-fg-color: #792443;
+ --md-footer-bg-color--dark: white;
+ --header-bg-color: rgba(108, 27, 64, 1);
+ --header-bg-color-for-alpha: 108, 27, 64;
+ --counter-grid-color: #444444;
+ --tabs-color: rgba(15, 54, 90, 1);
+ --tabs-font-color: rgb(205, 205, 205);
+ --tabs-nav-int: rgba(108, 27, 64, 1);
+ --high-contrast-bg: rgb(25, 25, 25);
+ --high-contrast-font: rgb(240, 240, 240);
+ --keywords-bg: rgba(108, 27, 64, 1);
+ --md-footer-bg-color: rgba(15, 54, 90, 1);
+ --contact-form: rgb(51, 51, 51);
+ --hover-color:rgba(108, 27, 64, 1);
+ --link-color: rgba(141, 174, 16, 1);
+}
+
+[data-md-color-scheme="default"] {
+ --md-primary-fg-color: #003561;
+ --md-accent-fg-color: #651e38;
+ --md-default-bg-color: #FFF5FA;
+ --md-text-font: "RUBFlama";
+ --md-footer-bg-color--dark: white;
+ --md-default-fg-color--light: rgb(47, 47, 47);
+ --header-bg-color: rgba(15, 54, 90, 1);
+ --header-bg-color-for-alpha: 15, 54, 90;
+ --counter-grid-color: #fff5fb;
+ --tabs-color: rgba(247, 164, 168, 1);
+ --tabs-font-color: rgb(58, 58, 58);
+ --tabs-nav-int: rgb(170, 210, 119);
+ --high-contrast-bg: rgb(228, 228, 228);
+ --high-contrast-font: rgb(21, 21, 21);
+ --keywords-bg: rgba(247, 164, 168, 1);
+ --md-footer-bg-color: rgba(15, 54, 90, 1);
+ --contact-form: rgb(199, 199, 199);
+ --hover-color: rgba(247, 164, 168, 1);
+ --link-color: rgba(15, 54, 90, 1);
+}
+
+@font-face {
+ font-family: "RUBFlama";
+ src: url('../medien/flamapro-basic.woff') format('woff2');
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index 5380315ce3b08322f0cd5f8657c13cbea3b8c3dd..2711b22834059f0d0507110b48c24f7b30efd4ce 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -348,6 +348,7 @@ extra:
lang: de
extra_css:
+ - 'stylesheets/variables.css'
- 'stylesheets/extra.css'
extra_javascript: