Merge branch 'development' into '846-laravel-update'

Development

See merge request !1356

resources/assets/js/scriptResultPage.js

@@ -77,7 +77,7 @@ function getDocumentReadyForUse(fokus, custom) {
   // pagination()
   tabs();
   fokiChanger();
-  pluginInfo();
+  //pluginInfo();
   $('iframe:not(.resized)').iFrameResize();
   $('iframe').addClass('resized');
   addListeners();
@@ -91,6 +91,7 @@ function resetSearchbar() {
   $('.search-input input').val('').focus();
 }
 
+/*
 function pluginInfo() {
   if (localStorage) {
     if (localStorage.getItem('pluginInfo') == 'off') $('#searchplugin').css('display', 'none');
@@ -103,6 +104,7 @@ function pluginInfo() {
     });
   }
 }
+*/
 
 function botProtection() {
   $('.result').find('a').click(function () {

resources/assets/less/default.less

-@import "./metager/metager.less";
\ No newline at end of file

resources/assets/less/metager/general.less → resources/assets/less/metager/general/general.less

 /* Default Font */
 
+@modal-content-box-shadow-color: fade(@color-black, 30%);
+@body-background-color: @background-color;
+@a-hover-color: red;
 body {
-    font-family: Arimo, Liberation Sans, sans-serif;
+    font-family: @metager-font;
 }
 
 /* Main Containers */
@@ -45,6 +48,46 @@ body {
     }
 }
 
+.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- {
+        &left,
+        &right {
+            position: absolute;
+            width: 20px;
+            height: 40px;
+            top: 1px;
+            pointer-events: none;
+        }
+        &left {
+            background: -webkit-gradient(linear, left top, right top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
+            background: linear-gradient(to right, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
+            left: 1px;
+        }
+        &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;
@@ -54,14 +97,6 @@ body {
     }
 }
 
-.navbar,
-#navbar-static-pages {
-    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
-}
-
-/* General font sizing */
-
-@default-font-size: 15px;
 h1 {
     font-size: (@default-font-size * 1.6);
     .first-last-child-margin-fix;
@@ -97,8 +132,26 @@ body {
     text-align: center;
 }
 
+.subheading {
+    font-size: 20px;
+    margin: 20px 0px;
+    white-space: center;
+}
+
 a {
     font-size: 100%;
+    color: @link-color;
+    &:visited {
+        color: @link-color;
+    }
+    &:hover {
+        text-decoration: none;
+        color: @a-hover-color;
+    }
+}
+
+i.fa {
+    background-color: transparent;
 }
 
 /* Logo */
@@ -124,7 +177,7 @@ a {
         width: fit-content;
         text-decoration: none;
         font-size: 75px;
-        @media(max-width: @screen-xs-max) {
+        @media(max-width: @screen-mobile) {
             font-size: 50px;
         }
     }
@@ -132,10 +185,18 @@ a {
 
 #subpage-logo {
     padding: 5px 0;
-    a h1 {
-        .logo;
-        font-size: 30px;
-        margin: 0;
+    .navbar-brand {
+        .noprint;
+        line-height: 100% !important;
+        padding: 0;
+        position: absolute;
+        z-index: 5;
+        left: 10px;
+        h1 {
+            .logo;
+            font-size: 30px;
+            margin: 0;
+        }
     }
 }
 
@@ -177,8 +238,8 @@ summary {
 
 /* Tooltips 
  * 
- * Für alle Elemente mit einem "data-tooltip"-Attribut wird ein 
- * Tooltip mit entsprechendem Inhalt unterhalb des Elements angezeigt
+ * All elements with a "data-tooltip" attribute show a 
+ * tooltip below on hover
  */
 
 *[data-tooltip] {
@@ -234,7 +295,7 @@ summary {
         width: 50%;
         margin: 0;
         float: left;
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: @screen-mobile) {
             width: 100%;
         }
     }
@@ -268,32 +329,50 @@ summary {
 
 /* 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 *,
+: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 {
@@ -301,16 +380,32 @@ button {
     background-color: transparent;
 }
 
-/* Unsorted */
+/* Lists with dots */
+
+.dotlist {
+    list-style-type: disc;
+    text-align: left;
+    li {
+        margin-bottom: 5px !important;
+    }
+}
+
+/* Code */
 
-// Currently in use for the plugin modal
-.modal-content {
-    border-radius: 0;
-    -webkit-box-shadow: 1px 1px 3px 1px @modal-content-box-shadow-color;
-    -moz-box-shadow: 1px 1px 3px 1px @modal-content-box-shadow-color;
-    box-shadow: 1px 1px 3px 1px @modal-content-box-shadow-color;
+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 {
@@ -319,15 +414,6 @@ label a {
     }
 }
 
-li.nodot {
-    list-style-type: none;
-}
-
-// Used on labels which initiate visual change (e.g. open-sidebar-button)
-.navigation-element {
-    cursor: pointer;
-}
-
 // For Elements where newlines should actually be displayed
 .wrap {
     white-space: pre-wrap;

resources/assets/less/metager/general/specific.less

+/* Rules for specific elements */
+
+// kontakt.blade.php, spende.blade.php, zitatsuche.blade.php
+.form-group {
+    font-family: sans-serif;
+    font-size: 16px;
+    color: @color-black;
+    background-color: transparent;
+    text-align: center;
+}
+
+input[name=eingabe] {
+    border-right: 0;
+    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
+}
+
+fieldset input[type=text] {
+    width: 100%;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-width: 1px;
+    overflow: visible;
+}
\ No newline at end of file

resources/assets/less/metager/metager.less

-@import "./general.less";
-@import "./specific.less";
-@import "./result-page.less";
-@import "./start-page.less";
-@import "./settings.less";
+// Variables
 @import "./variables.less";
-@import "./sidebar.less";
-@import "./modals.less";
-@import "./footer.less";
-@import "./searchbar.less";
-@import "./aufruf-winter.less";
-@import "./cards.less";
-@import "./widget.less";
+// General
+@import "./general/cards.less";
+@import "./general/general.less";
+@import "./general/specific.less";
+// Pages
+@import "./pages/contact.less";
+@import "./pages/donation.less";
\ No newline at end of file
+@import "./pages/help_faq.less";
+@import "./pages/language.less";
+@import "./pages/privacy.less";
+@import "./pages/resultpage.less";
+@import "./pages/start-page.less";
+@import "./pages/widget.less";
+// Parts
+@import "./parts/aufruf-winter.less";
+@import "./parts/footer.less";
+@import "./parts/modals.less";
+@import "./parts/searchbar.less";
+@import "./parts/settings.less";
+@import "./parts/sidebar.less";
\ No newline at end of file

resources/assets/less/metager/pages/contact.less

+.kontakt-form-group {
+    text-align: left;
+    font-size: 14px;
+}
+
+form.contact {
+    max-width: 500px;
+}
+
+textarea#message {
+    height: 200px;
+}
\ No newline at end of file

resources/assets/less/metager/pages/donation.less

+.donation-form-group {
+    text-align: left;
+    font-size: 12px;
+}
+
+.donation-form-group label {
+    font-weight: bold;
+}
\ No newline at end of file

resources/assets/less/metager/pages/help_faq.less

+.hilfe,
+.faq {
+    section {
+        .card-heavy;
+        h3 {
+            border-bottom: 1px solid #aaa;
+        }
+        .search-example {
+            border: 1px solid #aaa;
+            background-color: #eee;
+            border-radius: 5px;
+            padding: 10px;
+        }
+    }
+    .fake-result {
+        *:hover {
+            overflow: visible !important;
+        }
+        .result-footer {
+            overflow: hidden;
+            align-items: center;
+        }
+        .open-result-options label {
+            padding: 10px;
+            border: 2px dashed red;
+            border-radius: 100%;
+            color: black;
+            font-size: 14px;
+            text-decoration: none;
+            font-weight: normal;
+        }
+    }
+}
\ No newline at end of file

resources/assets/less/metager/pages/language.less

+.language-name {
+    white-space: pre;
+}
\ No newline at end of file

resources/assets/less/metager/pages/privacy.less

+.privacy {
+    main {
+        font-size: 10pt;
+        hyphens: auto;
+        counter-reset: kontext 0 datum 0;
+        text-align: justify;
+    }
+    h1 {
+        font-size: 18pt;
+    }
+    .kontext>h1::before {
+        counter-increment: kontext;
+        content: "K" counter(kontext) " ";
+        font-weight: normal;
+    }
+    .datum>h1::before {
+        counter-increment: datum;
+        content: "D" counter(datum) " ";
+        font-weight: normal;
+    }
+    .kontext h1 {
+        font-size: 16pt;
+        margin-bottom: inherit;
+    }
+    .kontext h2 {
+        font-size: 14pt;
+        margin-bottom: inherit;
+    }
+    .datum h1 {
+        font-size: 12pt;
+        margin-bottom: inherit;
+    }
+    .datum h2 {
+        font-size: 11pt;
+        margin-bottom: inherit;
+        margin-top: 5pt;
+    }
+    .kontext-list {
+        list-style: none;
+    }
+    .datum-list {
+        list-style: none;
+    }
+    samp {
+        hyphens: none;
+        font-size: 8pt;
+    }
+}
\ No newline at end of file

resources/assets/less/metager/pages/resultpage.less

+@import "./resultpage/result-page.less";
+@import "./resultpage/result.less";
+@import "./resultpage/product.less";
+@import "./resultpage/quicktips.less";
+@import "./resultpage/result-saver.less";
\ No newline at end of file

resources/assets/less/metager/product.less → resources/assets/less/metager/pages/resultpage/product.less

@@ -5,12 +5,12 @@
     flex-direction: column;
     text-align: center;
     padding: 5px;
-    .lSSlideOuter  {
+    .lSSlideOuter {
         margin-top: 5px;
-        border: 1px dotted @product-border-color;
+        border: 1px dotted @color-almost-white;
     }
     a {
-        color: @product-a-color;
+        color: @color-strong-grey;
     }
     img {
         max-width: 100px;
@@ -18,8 +18,8 @@
     .price {
         position: relative;
         top: 20px;
-        color: @product-price-color;
-        background-color: @product-price-background-color;
+        color: @color-strong-grey;
+        background-color: fade(@color-white, 90%);
         text-align: left;
         width: 80px;
         font-weight: bold;

resources/assets/less/metager/result-page.less → resources/assets/less/metager/pages/resultpage/result-page.less

-/* Ergebnisseite */
-
-@import "./quicktips.less";
-@import "./result-saver.less";
-@import "./result.less";
-@import "./product.less";
-//
-@resultpage-background-color: #FAFAFA;
-//
+/* Variables */
+
+// Background color
+@resultpage-background-color: @background-color;
+// Margin to the left of the results
 @results-margin-left: 16px;
-//
-@result-page-body-background-color: @background-color;
-@result-page-a-hover-color: red;
-@result-page-product-shop-color: green;
-//
-@body-background-color: @result-page-body-background-color;
-@a-hover-color: @result-page-a-hover-color;
-@a-donation-hover-color: @result-page-a-hover-color;
-@product-shop-color: @result-page-product-shop-color;
-//
+// Min and max widths of the 2 resultpage columns
 @results-width-min: 500px;
 @results-width-max: 700px;
 @additions-width-min: 400px;
 @additions-width-max: 500px;
-//
-@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4);
-@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4);
-//
-@resultpage-leftbox-max-width: @results-width-max;
-@resultpage-leftbox-min-dist-left-right: @padding-small-default;
-@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
-//
+// Breakpoints for the 2 resultpage columns
+@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 4);
+@resultpage-breakpoint-min: (@results-width-min + @additions-width-min + @padding-small-default * 4);
+@product-shop-color: green;
+// The point upon which a .screen-large logo is displayed
 @logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
-//
+// The point upon which the sidebar opener switches place
 @sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
-//
+// Quicktip background color
+@quicktip-background-color: @color-white;
+// Color of the Spruch author
+@spruch-author-color: @color-strong-grey;
+/* Styles */
+
 #header-logo {
     z-index: 0;
     padding-right: 10px;
@@ -46,7 +35,6 @@
     .screen-small {
         display: none;
     }
-    .screen-large {}
     @media (max-width: @logo-size-breakpoint) {
         .screen-large {
             display: none;
@@ -96,17 +84,6 @@ body {
     padding-top: 10px;
 }
 
-.hostlabel {
-    display: none;
-    position: relative;
-    margin-top: -14px;
-    background-color: @hostlabel-background-color;
-    a:link,
-    a:visited {
-        color: @hostlabel-a-link-or-visited-color;
-    }
-}
-
 .img:hover .hostlabel {
     display: block;
 }
@@ -124,7 +101,7 @@ body {
 .alert ul {
     list-style-type: none;
     padding-left: 49px;
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: @screen-mobile) {
         padding-left: 0px;
     }
 }
@@ -162,20 +139,10 @@ nav .input-group {
 }
 
 a {
-    &:visited {
-        color: @link-color;
-    }
-    &:hover {
-        text-decoration: none;
-        color: @a-hover-color;
-    }
     &#donation {
         &,
         &:visited {
-            color: @a-donation-normal-or-visited-color;
-        }
-        &:hover {
-            color: @a-donation-hover-color;
+            color: inherit;
         }
     }
 }
@@ -220,24 +187,6 @@ a {
     margin: 0 !important;
 }
 
-.options-list>li {
-    &:hover {
-        background-color: @options-list-li-hover-background-color;
-    }
-    &>a {
-        color: @options-list-li-a-color;
-        white-space: nowrap;
-        display: block;
-        padding: 5px 14px;
-    }
-    input[type=submit] {
-        width: 100%;
-        background-color: transparent;
-        border: 0;
-        margin: 5px 0;
-    }
-}
-
 .js-only {
     display: none;
 }
@@ -254,7 +203,7 @@ a {
     margin-bottom: 10px;
     margin: 5px;
     .img {
-        box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
+        box-shadow: 0px 0px 10px 2px fade(@color-black, 30%);
     }
 }
 
@@ -290,6 +239,8 @@ a {
     }
 }
 
+/*
+@searchplugin-a-color: @color-white;
 #searchplugin {
     display: none;
     position: fixed;
@@ -311,6 +262,7 @@ a {
         display: initial;
     }
 }
+*/
 
 #products {
     width: 100%;
@@ -322,7 +274,7 @@ a {
 
 .lSPrev>i,
 .lSNext>i {
-    background-color: @lsprev-or-lsnext-i-background-color;
+    background-color: @color-black;
     padding: 5px;
 }
 
@@ -391,13 +343,13 @@ a {
             display: none;
         }
     }
-    @media (max-width: @resultpage-breakpoint-large) {
+    @media (max-width: @resultpage-breakpoint-max) {
         @supports (display: grid) {
             grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)";
             grid-template-areas: "searchbar ." "foki ." "results additions";
         }
     }
-    @media (max-width: @resultpage-breakpoint-small) {
+    @media (max-width: @resultpage-breakpoint-min) {
         margin-left: @padding-small-default;
         grid-template-columns: 100%;
         grid-template-areas: "searchbar" "foki" "results";
@@ -417,12 +369,12 @@ a {
     padding: @padding-small-default @padding-small-default 0px @padding-small-default;
     width: (@results-width-max + 2 * @padding-small-default);
     max-width: (@results-width-max + 2 * @padding-small-default);
-    @media (max-width: @resultpage-breakpoint-large) {
+    @media (max-width: @resultpage-breakpoint-max) {
         @supports (display: grid) {
             width: ~"calc(60% - 6px)";
         }
     }
-    @media (max-width: @resultpage-breakpoint-small) {
+    @media (max-width: @resultpage-breakpoint-min) {
         width: 100%;
         margin-left: 0px;
     }
@@ -461,41 +413,12 @@ a {
 #foki {
     display: flex;
     justify-content: left;
-    /*
-    @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
-        width: 100%;
-        max-width: none;
-        margin: 0px;
-        padding: @padding-small-default;
-        .scrollbox {
-            max-width: none;
-            margin: 0px;
-            #foki-box {
-                max-width: none;
-                margin: 0px;
-            }
-        }
-    }
-    @media (max-width: (4 * @padding-small-default + @results-width-max + @additions-width-max - 1px)) {
-        padding-left: @padding-small-default;
-    }
-    @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
-        width: 100%;
-        max-width: 700px;
-        margin: 0px;
-        padding: @padding-small-default;
-        #research-bar {
-            max-width: none;
-            margin: 0px;
-        }
-    }
-    */
     #foki-box {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         width: 100%;
-        max-width: @resultpage-leftbox-max-width;
+        max-width: @results-width-max;
         background-color: white;
         border: 1px solid #ccc;
         -webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
@@ -570,7 +493,7 @@ footer.resultPageFooter {
 #resultpage-container {
     #results-container {
         float: left;
-        @media (max-width: @resultpage-breakpoint-small) {
+        @media (max-width: @resultpage-breakpoint-min) {
             float:none;
         }
     }
@@ -596,7 +519,7 @@ footer.resultPageFooter {
     position: fixed;
     width: 100%;
     padding: 15px;
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: @screen-mobile) {
         padding: 5px;
     }
 }
@@ -605,7 +528,7 @@ footer.resultPageFooter {
     .metager3-unstable-warning;
     top: 0;
     padding-right: 50px;
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: @screen-mobile) {
         padding: 5px;
         padding-right: 50px;
     }
@@ -615,4 +538,16 @@ footer.resultPageFooter {
     .metager3-unstable-warning;
     bottom: 0;
     margin-bottom: 0px;
+}
+
+/* Settings button and checkboxes */
+
+.settings-checkbox {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.settings-checkbox .settings-icon {
+    margin-left: 5px;
+    font-size: 12px;
 }
\ No newline at end of file

resources/assets/less/metager/result-saver.less → resources/assets/less/metager/pages/resultpage/result-saver.less

 @saved-result-distance-first: 10px;
 @saved-result-distance-between: 10px;
-
 #savedFoki {
     padding-top: 50px;
     display: flex;

resources/assets/less/metager/result.less → resources/assets/less/metager/pages/resultpage/result.less

-/* Ergebnis */
-
 @result-font-large: 18px;
 @result-font-medium: 16px;
 @result-font-url: 14px;
 @result-font-small: 12px;
+@result-description-color: @color-black;
+@result-image-border-color: @color-almost-white;
 .result {
     .card;
-    margin: @resultpage-leftbox-min-dist-top-bottom 0px @resultpage-leftbox-min-dist-top-bottom 0px;
+    margin: @padding-small-default 0px;
     padding: 8px 15px 5px 15px;
     width: 100%;
     .result-header {
@@ -78,7 +78,7 @@
                 color: #333;
                 text-shadow: none;
                 font-weight: inherit;
-                border: 1px solid #686868 ;
+                border: 1px solid #686868;
                 padding: 2px;
                 margin-left: 20px;
                 border-radius: 4px;
@@ -126,7 +126,7 @@
                 width: auto;
                 max-width: 120px;
                 max-height: 200px;
-                border: solid 1px @result-description-img-border-color;
+                border: solid 1px @result-image-border-color;
             }
         }
     }
@@ -181,11 +181,9 @@
             }
         }
     }
-    
     .result-footer * {
         font-size: 10px !important;
     }
-    
     &.ad .ad-label {
         &,
         & a,

resources/assets/less/metager/start-page.less → resources/assets/less/metager/pages/start-page.less

 /* Startseite */
 
-@search-bar-width: 1000px;
-//
-@focus-hover-focus-edit-background-color: #e3e3e3;
-@focus-radio-checked-focus-label-focus-edit-background-color: #e3e3e3;
+@main-content-width: 1000px;
 @foki-edge-rounding: 7px;
-.mg-panel {
+#main-content {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    @media(max-width: @search-bar-width) {
+    @media(max-width: @main-content-width) {
         width: 100%;
     }
-    @media(min-width: @search-bar-width) {
-        width: @search-bar-width;
-    }
-    .settings-modal-buttons {
-        padding: 5px;
-        button {
-            margin: 5px
-        }
-    }
-    .startpage-foki,
-    .foki {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        input {
-            visibility: hidden;
-            &+.custom-focus-label {
-                border-radius: @foki-edge-rounding 0px 0px @foki-edge-rounding;
-            }
-            &+.custom-focus-label+.custom-focus-edit {
-                margin-left: 5px;
-                display: inline-block;
-                border-radius: 0px @foki-edge-rounding @foki-edge-rounding 0px;
-            }
-        }
-        label {
-            & span:not(.badge) {
-                background-color: transparent;
-            }
-        }
-    }
-    .focus {
-        margin: 0px;
-        &~.focus {
-            margin-left: 10px;
-        }
-        &:hover {
-            .focus-label,
-            .focus-edit {
-                cursor: pointer;
-                background-color: @focus-hover-focus-edit-background-color;
-            }
-        }
-    }
-    .focus-radio:checked {
-        &+.focus-label,
-        &+.focus-label+.focus-edit {
-            background-color: @focus-radio-checked-focus-label-focus-edit-background-color;
-        }
-    }
-    .focus-label,
-    .focus-edit {
-        margin: 0px;
-        border-radius: 7px;
-        padding: 7px;
-        font-weight: normal;
+    @media(min-width: @main-content-width) {
+        width: @main-content-width;
     }
     #plugin-btn-div {
         display: flex;
@@ -80,17 +23,17 @@
     }
 }
 
-#more-information {
+#additional-content {
     flex-grow: 2;
     padding-top: 50px;
     display: flex;
-    @media(max-width: @screen-xs-max) {
+    @media(max-width: @screen-mobile) {
         flex-direction: column;
     }
     #about-us {
         max-width: 500px;
         margin-right: 50px;
-        @media(max-width: @screen-xs-max) {
+        @media(max-width: @screen-mobile) {
             margin: 0px 8px;
         }
         h2 {
@@ -101,13 +44,14 @@
         }
     }
     #sponsors {
-        @media(max-width: @screen-xs-max) {
+        @media(max-width: @screen-mobile) {
             margin: 20px 5px;
         }
         h2 {
             font-size: 21px;
         }
         ul {
+            list-style-type: none;
             padding: 0px;
             text-align: left;
             li.sponsor {

resources/assets/less/metager/widget.less → resources/assets/less/metager/pages/widget.less

@@ -5,7 +5,7 @@
     font-size: 14px;
     line-height: 1.42857;
     color: #555;
-    background-color: #FFF;
+    background-color: white;
     background-image: none;
     border: 1px solid #CCC;
     margin: 0px;