diff --git a/resources/less/metager/general/base.less b/resources/less/metager/general/base.less
new file mode 100644
index 0000000000000000000000000000000000000000..d2a3bed82d55c2909d1bea3c9be7cc4286b2dc51
--- /dev/null
+++ b/resources/less/metager/general/base.less
@@ -0,0 +1,435 @@
+/* Default Font */
+
+@modal-content-box-shadow-color: fade(@color-black, 30%);
+@body-background-color: @background-color;
+@body-background-color-mobile: @background-color-mobile;
+@a-hover-color: red;
+
+html, body, * {
+ font-family: @metager-font;
+}
+
+/* Main Containers */
+
+html,
+body,
+.content-wrapper {
+ width: 100%;
+}
+
+html {
+ min-height: 100%;
+ height: auto;
+ display: flex;
+ font-size: 14px;
+ font-size: 3.8mm;
+}
+
+body {
+ flex-grow: 1;
+ background-image: inherit;
+ background-color: @body-background-color;
+ background-attachment: fixed;
+ min-height: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ font-size: 1.0em;
+ @media(max-width: @screen-mobile){
+ background-color: @body-background-color-mobile
+ }
+}
+
+.wrapper {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 50px;
+ padding: 0px 8px;
+ overflow: hidden;
+ main {
+ width: 100%;
+ max-width: 1000px;
+ }
+}
+
+.navbar,
+#navbar-static-pages {
+ box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
+}
+
+/* Scrollbox Style */
+
+@scrollfade-color: white;
+.scrollbox {
+ position: relative;
+ width: 100%;
+ max-width: @results-width-max;
+ .scrollfade-right {
+ background: -webkit-gradient(linear, right top, left top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
+ background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
+ right: 1px;
+ }
+ .search-option-frame {
+ position: relative;
+ }
+}
+
+/* General font sizing */
+
+@default-font-size: 15px;
+.first-last-child-margin-fix() {
+ &:first-child {
+ margin-top: 0px;
+ }
+ &:last-child {
+ margin-bottom: 0px;
+ }
+}
+
+h1 {
+ font-size: 2em;
+ .first-last-child-margin-fix;
+}
+
+h2 {
+ font-size: 1.5em;
+ .first-last-child-margin-fix;
+}
+
+h3 {
+ font-size: 1.3em;
+ .first-last-child-margin-fix;
+}
+
+p {
+ font-size: 1em;
+ .first-last-child-margin-fix;
+}
+
+body {
+ .first-last-child-margin-fix;
+}
+
+.page-title {
+ font-size: 2.5em;
+ text-align: center;
+}
+
+.page-subtitle {
+ font-size: 1em;
+ text-align: center;
+}
+
+.subheading {
+ font-size: 1.2em;
+ margin: 20px 0px;
+ white-space: center;
+}
+
+a {
+ font-size: 1em;
+ color: @link-color;
+ &:visited {
+ color: @link-color;
+ }
+ &:hover {
+ text-decoration: none;
+ color: @a-hover-color;
+ }
+}
+
+i.fa {
+ background-color: transparent;
+}
+
+/* Logo */
+
+.logo {
+ color: @metager-orange;
+ font-family: @metager-font;
+ font-style: italic;
+ font-weight: bold;
+ white-space: nowrap;
+}
+
+#startpage-logo {
+ .logo;
+ display: flex;
+ justify-content: center;
+ margin: 0px 0px 45px 0px;
+ white-space: nowrap;
+ text-align: center;
+ @media(max-width: @screen-mobile){
+ margin-bottom: 25px;
+ }
+ &>a {
+ .logo;
+ display: block;
+ width: fit-content;
+ text-decoration: none;
+ font-size: 2.7em;
+ @media(max-width: @screen-mobile) {
+ font-size: 2em;
+ }
+ >img {
+ width: 4.8em;
+ }
+ }
+}
+
+#subpage-logo {
+ padding: 16px 0 5px 0px;
+ .navbar-brand {
+ .noprint;
+ line-height: 100% !important;
+ padding: 0;
+ padding-left: 8px;
+ position: absolute;
+ z-index: 5;
+ left: 10px;
+ h1 {
+ .logo;
+ font-size: 1.6em;
+ margin: 0;
+ >img {
+ width: 4.8em;
+ }
+ }
+ }
+}
+
+/* Links that look like text */
+
+.mutelink {
+ &,
+ &:hover,
+ &:active,
+ &:focus,
+ &:visited {
+ color: inherit;
+ }
+}
+
+/* Summary Elements */
+
+summary {
+ cursor: pointer;
+ &::-webkit-details-marker {
+ display: none;
+ }
+ &::-moz-details-marker {
+ display: none;
+ }
+ &::-ms-details-marker {
+ display: none;
+ }
+ &::-o-details-marker {
+ display: none;
+ }
+ &::details-marker {
+ display: none;
+ }
+ &:focus {
+ outline: none;
+ }
+}
+
+/* Tooltips
+ *
+ * All elements with a "data-tooltip" attribute show a
+ * tooltip below on hover
+ */
+
+*[data-tooltip] {
+ position: relative;
+ &:hover {
+ &:after {
+ opacity: 1;
+ }
+ }
+ &:after {
+ content: attr(data-tooltip);
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 1;
+ color: black;
+ background-color: white;
+ border: 2px solid @metager-orange;
+ border-radius: 6px;
+ padding: 3px 8px;
+ width: 200px;
+ white-space: pre-wrap;
+ font-size: .9em;
+ font-weight: normal;
+ text-decoration: none;
+ text-align: center;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ text-transform: initial; // Resets specific styles
+ }
+ &.hide-tooltip-on-resultpage:after {
+ /* Auf kleinen Bildschirmen wird der Tooltip nicht angezeigt */
+ @media (max-width: 700px) {
+ display: none;
+ }
+ }
+ &.delayed:after {
+ transition-delay: 0.5s;
+ }
+ &.delayed-soft:after {
+ transition-delay: 0.2s;
+ }
+ &.delayed-strong:after {
+ transition-delay: 1s;
+ }
+}
+
+/* For Containers that are supposed to split their content up into two columns */
+
+.two-col {
+ >* {
+ width: 50%;
+ margin: 0;
+ padding: 0;
+ float: left;
+ @media (max-width: @screen-mobile) {
+ width: 100%;
+ }
+ }
+}
+
+/* Links */
+
+// Internal, but design differs from other pages
+.inlink {
+ &:after {
+ display: inline-block;
+ font: normal normal normal 14px/1 'Font Awesome 5 Free';
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ content: "\f35d";
+ }
+}
+
+// External
+.outlink {
+ &:after {
+ display: inline-block;
+ font: normal normal normal 14px/1 'Font Awesome 5 Free';
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ content: "\f35d";
+ }
+}
+
+/* Little helpers */
+
+// Bold text
+.bold {
+ font-weight: bold;
+}
+
+// Do not print this
+.noprint {
+ @media print {
+ display: none !important;
+ }
+}
+
+// For print: Start new page after this
+.newpage {
+ page-break-after: always;
+}
+
+// For list elements without a dot
+li.nodot {
+ list-style-type: none;
+}
+
+// Disabled elements (only visual)
+.disabled,
+:disabled,
+.disabled *,
+:disabled * {
+ color: #aaa !important;
+ cursor: not-allowed !important;
+}
+
+// Convert excess text into "..."
+.overflow-ellipsis {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+// Used on labels which initiate visual change (e.g. open-sidebar-button)
+.navigation-element {
+ cursor: pointer;
+}
+
+/* Button */
+
+button {
+ border: none;
+ background-color: transparent;
+}
+
+/* Lists with dots */
+
+.dotlist {
+ list-style-type: disc;
+ text-align: left;
+ li {
+ margin-bottom: 5px !important;
+ }
+}
+
+/* Code */
+
+code {
+ white-space: pre-wrap;
+ overflow-wrap: break-word;
+ word-break: break-word;
+}
+
+/* Adresses */
+
+address {
+ white-space: pre;
+}
+
+/* Unknown Uses */
+
+label a {
+ color: inherit;
+ &:hover {
+ text-decoration: none;
+ color: inherit;
+ }
+}
+
+// For Elements where newlines should actually be displayed
+.wrap {
+ white-space: pre-wrap;
+}
+
+// When the content should be centerd horizontally
+.center-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#impressum, #kontakt, #team, #about {
+ .card-heavy {
+ margin: 8px 0;
+ }
+}
diff --git a/resources/less/metager/general/general.less b/resources/less/metager/general/general.less
index 2330809124dd29357c75668bdd443af5f4d6b753..0c6aabad4dbe76433345c706671ee278ad13a063 100644
--- a/resources/less/metager/general/general.less
+++ b/resources/less/metager/general/general.less
@@ -1,435 +1,3 @@
-/* Default Font */
-
-@modal-content-box-shadow-color: fade(@color-black, 30%);
-@body-background-color: @background-color;
-@body-background-color-mobile: @background-color-mobile;
-@a-hover-color: red;
-
-html, body, * {
- font-family: @metager-font;
-}
-
-/* Main Containers */
-
-html,
-body,
-.content-wrapper {
- width: 100%;
-}
-
-html {
- min-height: 100%;
- height: auto;
- display: flex;
- font-size: 14px;
- font-size: 3.8mm;
-}
-
-body {
- flex-grow: 1;
- background-image: inherit;
- background-color: @body-background-color;
- background-attachment: fixed;
- min-height: 100%;
- height: auto;
- display: flex;
- flex-direction: column;
- margin: 0;
- font-size: 1.0em;
- @media(max-width: @screen-mobile){
- background-color: @body-background-color-mobile
- }
-}
-
-.wrapper {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 50px;
- padding: 0px 8px;
- overflow: hidden;
- main {
- width: 100%;
- max-width: 1000px;
- }
-}
-
-.navbar,
-#navbar-static-pages {
- box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
-}
-
-/* Scrollbox Style */
-
-@scrollfade-color: white;
-.scrollbox {
- position: relative;
- width: 100%;
- max-width: @results-width-max;
- .scrollfade-right {
- background: -webkit-gradient(linear, right top, left top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
- background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
- right: 1px;
- }
- .search-option-frame {
- position: relative;
- }
-}
-
-/* General font sizing */
-
-@default-font-size: 15px;
-.first-last-child-margin-fix() {
- &:first-child {
- margin-top: 0px;
- }
- &:last-child {
- margin-bottom: 0px;
- }
-}
-
-h1 {
- font-size: 2em;
- .first-last-child-margin-fix;
-}
-
-h2 {
- font-size: 1.5em;
- .first-last-child-margin-fix;
-}
-
-h3 {
- font-size: 1.3em;
- .first-last-child-margin-fix;
-}
-
-p {
- font-size: 1em;
- .first-last-child-margin-fix;
-}
-
-body {
- .first-last-child-margin-fix;
-}
-
-.page-title {
- font-size: 2.5em;
- text-align: center;
-}
-
-.page-subtitle {
- font-size: 1em;
- text-align: center;
-}
-
-.subheading {
- font-size: 1.2em;
- margin: 20px 0px;
- white-space: center;
-}
-
-a {
- font-size: 1em;
- color: @link-color;
- &:visited {
- color: @link-color;
- }
- &:hover {
- text-decoration: none;
- color: @a-hover-color;
- }
-}
-
-i.fa {
- background-color: transparent;
-}
-
-/* Logo */
-
-.logo {
- color: @metager-orange;
- font-family: @metager-font;
- font-style: italic;
- font-weight: bold;
- white-space: nowrap;
-}
-
-#startpage-logo {
- .logo;
- display: flex;
- justify-content: center;
- margin: 0px 0px 45px 0px;
- white-space: nowrap;
- text-align: center;
- @media(max-width: @screen-mobile){
- margin-bottom: 25px;
- }
- &>a {
- .logo;
- display: block;
- width: fit-content;
- text-decoration: none;
- font-size: 2.7em;
- @media(max-width: @screen-mobile) {
- font-size: 2em;
- }
- >img {
- width: 4.8em;
- }
- }
-}
-
-#subpage-logo {
- padding: 16px 0 5px 0px;
- .navbar-brand {
- .noprint;
- line-height: 100% !important;
- padding: 0;
- padding-left: 8px;
- position: absolute;
- z-index: 5;
- left: 10px;
- h1 {
- .logo;
- font-size: 1.6em;
- margin: 0;
- >img {
- width: 4.8em;
- }
- }
- }
-}
-
-/* Links that look like text */
-
-.mutelink {
- &,
- &:hover,
- &:active,
- &:focus,
- &:visited {
- color: inherit;
- }
-}
-
-/* Summary Elements */
-
-summary {
- cursor: pointer;
- &::-webkit-details-marker {
- display: none;
- }
- &::-moz-details-marker {
- display: none;
- }
- &::-ms-details-marker {
- display: none;
- }
- &::-o-details-marker {
- display: none;
- }
- &::details-marker {
- display: none;
- }
- &:focus {
- outline: none;
- }
-}
-
-/* Tooltips
- *
- * All elements with a "data-tooltip" attribute show a
- * tooltip below on hover
- */
-
-*[data-tooltip] {
- position: relative;
- &:hover {
- &:after {
- opacity: 1;
- }
- }
- &:after {
- content: attr(data-tooltip);
- position: absolute;
- top: 100%;
- left: 0;
- z-index: 1;
- color: black;
- background-color: white;
- border: 2px solid @metager-orange;
- border-radius: 6px;
- padding: 3px 8px;
- width: 200px;
- white-space: pre-wrap;
- font-size: .9em;
- font-weight: normal;
- text-decoration: none;
- text-align: center;
- pointer-events: none;
- opacity: 0;
- transition: opacity 0.3s ease;
- text-transform: initial; // Resets specific styles
- }
- &.hide-tooltip-on-resultpage:after {
- /* Auf kleinen Bildschirmen wird der Tooltip nicht angezeigt */
- @media (max-width: 700px) {
- display: none;
- }
- }
- &.delayed:after {
- transition-delay: 0.5s;
- }
- &.delayed-soft:after {
- transition-delay: 0.2s;
- }
- &.delayed-strong:after {
- transition-delay: 1s;
- }
-}
-
-/* For Containers that are supposed to split their content up into two columns */
-
-.two-col {
- >* {
- width: 50%;
- margin: 0;
- padding: 0;
- float: left;
- @media (max-width: @screen-mobile) {
- width: 100%;
- }
- }
-}
-
-/* Links */
-
-// Internal, but design differs from other pages
-.inlink {
- &:after {
- display: inline-block;
- font: normal normal normal 14px/1 'Font Awesome 5 Free';
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- content: "\f35d";
- }
-}
-
-// External
-.outlink {
- &:after {
- display: inline-block;
- font: normal normal normal 14px/1 'Font Awesome 5 Free';
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- content: "\f35d";
- }
-}
-
-/* Little helpers */
-
-// Bold text
-.bold {
- font-weight: bold;
-}
-
-// Do not print this
-.noprint {
- @media print {
- display: none !important;
- }
-}
-
-// For print: Start new page after this
-.newpage {
- page-break-after: always;
-}
-
-// For list elements without a dot
-li.nodot {
- list-style-type: none;
-}
-
-// Disabled elements (only visual)
-.disabled,
-:disabled,
-.disabled *,
-:disabled * {
- color: #aaa !important;
- cursor: not-allowed !important;
-}
-
-// Convert excess text into "..."
-.overflow-ellipsis {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-// Used on labels which initiate visual change (e.g. open-sidebar-button)
-.navigation-element {
- cursor: pointer;
-}
-
-/* Button */
-
-button {
- border: none;
- background-color: transparent;
-}
-
-/* Lists with dots */
-
-.dotlist {
- list-style-type: disc;
- text-align: left;
- li {
- margin-bottom: 5px !important;
- }
-}
-
-/* Code */
-
-code {
- white-space: pre-wrap;
- overflow-wrap: break-word;
- word-break: break-word;
-}
-
-/* Adresses */
-
-address {
- white-space: pre;
-}
-
-/* Unknown Uses */
-
-label a {
- color: inherit;
- &:hover {
- text-decoration: none;
- color: inherit;
- }
-}
-
-// For Elements where newlines should actually be displayed
-.wrap {
- white-space: pre-wrap;
-}
-
-// When the content should be centerd horizontally
-.center-wrapper {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-#impressum, #kontakt, #team, #about {
- .card-heavy {
- margin: 8px 0;
- }
-}
\ No newline at end of file
+@import "./base.less";
+@import "./cards.less";
+@import "./specific.less";
diff --git a/resources/less/metager/metager-dark.less b/resources/less/metager/metager-dark.less
index deb0a51191fb0d8ef4d7b7e380611f6fc7005310..d8f4c59ed602d7b4d57859756ed8c1566adf4c18 100644
--- a/resources/less/metager/metager-dark.less
+++ b/resources/less/metager/metager-dark.less
@@ -3,10 +3,7 @@
// Variables
@import "./variables-dark.less";
// General
-@import "./general/cards.less";
-//@import "./general/forms.less";
@import "./general/general.less";
-@import "./general/specific.less";
// Pages
@import "./pages/contact.less";
@import "./pages/donation.less";
diff --git a/resources/less/metager/metager.less b/resources/less/metager/metager.less
index dcad7a79f6e1e660a9fa84dedb12fb66353d9c19..1d41dc004ce4a1ea4ba12ed25e7e31d30a216854 100644
--- a/resources/less/metager/metager.less
+++ b/resources/less/metager/metager.less
@@ -3,10 +3,7 @@
// Variables
@import "./variables.less";
// General
-@import "./general/cards.less";
-//@import "./general/forms.less";
@import "./general/general.less";
-@import "./general/specific.less";
// Pages
@import "./pages/contact.less";
@import "./pages/donation.less";