Update June 2022

docs/_data/sponsors.json

@@ -602,6 +602,34 @@
       "title": "newbitcoincasinos",
       "width": "60",
       "height": "64"
+    },
+    "casinoutansvensklicens": {
+      "name": "casinoutansvensklicens",
+      "url": "https://casinoutansvensklicens.co/",
+      "title": "casinoutansvensklicens",
+      "width": "98",
+      "height": "56"
+    },
+    "newbitcoincasinos": {
+      "name": "newbitcoincasinos",
+      "url": "https://newbitcoincasinos.com/casinos-online/peru-pe/",
+      "title": "newbitcoincasinos",
+      "width": "98",
+      "height": "56"
+    },
+    "casinoenlineahex": {
+      "name": "casinoenlineahex",
+      "url": "https://casinoenlineahex.com/casinos-online/peru-pe/",
+      "title": "casinoenlineahex",
+      "width": "158",
+      "height": "53"
+    },
+    "newcasinobonuses": {
+      "name": "newcasinobonuses",
+      "url": "https://newcasinobonuses.co.uk/",
+      "title": "newcasinobonuses",
+      "width": "190",
+      "height": "63"
     }
   },
   "home": [
@@ -613,7 +641,6 @@
     "namobot",
     "realtimecommunications",
     "polygon",
-    "bonusfinder",
     "inkoop",
     "dfds",
     "gamblizard",
@@ -642,9 +669,11 @@
     "jrop",
     "cusl",
     "boostlikes",
-    "casinozondercruks",
+    "casinoutansvensklicens",
     "xoo",
-    "newbitcoincasinos"
+    "newbitcoincasinos",
+    "casinoenlineahex",
+    "newcasinobonuses"
   ],
-  "footer": ["polygon", "inkoop"]
+  "footer": ["polygon", "inkoop", "casinoutansvensklicens"]
 }

docs/_includes/components/hero.html

@@ -14,10 +14,6 @@
     </div>
     {{ include.content }}
   </div>
-
-  <div class="bd-hero-carbon">
-    {% include elements/carbon.html %}
-  </div>
 </div>
 {% endcapture %}
 

docs/_includes/index/sponsors.html

@@ -33,7 +33,7 @@
     </div>
   </div>
 
-  <div class="bd-sponsors-carbon is-flex is-justify-content-center" style="margin-top: var(--bd-sponsors-spacing);">
+  <div class="bd-sponsors-carbon is-flex is-justify-content-center" style="margin-top: 3rem;">
     {% include elements/carbon.html %}
   </div>
 </section>

docs/_layouts/documentation.html

@@ -48,6 +48,8 @@ route: documentation
   </main>
 
   <aside id="docsSide" class="bd-docs-side {% if page.fullwidth %}bd-stickied{% endif %}">
+    {% include elements/carbon.html %}
+
     {% include global/fortyfour.html %}
 
     {% if page.meta %}

docs/_sass/components/carbon.scss

@@ -4,29 +4,20 @@ $carbon-image-height: 100px;
 $carbon-image-width: 130px;
 
 #carboncontainer {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  max-width: $carbon-width;
-  min-height: $carbon-min-height;
-  min-width: 280px;
+  padding: 1.5rem;
 }
 
 #carbon {
   border-radius: 0.125em;
-  flex-grow: 1;
-  min-height: $carbon-height;
-  padding: 0;
+  margin: 0;
+  min-height: 206px;
   position: relative;
+  width: $carbon-image-width;
 
   &:hover {
     background-color: rgba(black, 0.02);
     box-shadow: 0 0 0 $carbon-shadow-size rgba(black, 0.02);
   }
-
-  @include tablet() {
-    width: $carbon-width;
-  }
 }
 
 #carbonads {
@@ -39,13 +30,12 @@ $carbon-image-width: 130px;
   }
 
   .carbon-wrap {
-    min-height: $carbon-height;
     position: relative;
 
     &:hover {
       .carbon-img::after {
         background-color: rgba(#000, 0.05);
-        content: '';
+        content: "";
         display: block;
         height: $carbon-height;
         left: 0;
@@ -57,14 +47,8 @@ $carbon-image-width: 130px;
   }
 
   .carbon-img {
-    bottom: 0;
-    float: left;
-    left: 0;
     min-height: $carbon-height;
     padding: 0;
-    position: absolute;
-    top: 0;
-    width: calc(#{$carbon-image-width} + #{$carbon-spacing});
 
     img {
       display: block;
@@ -87,9 +71,12 @@ $carbon-image-width: 130px;
     display: block;
     color: $text-strong;
     line-height: $carbon-line-height;
-    min-height: $carbon-height;
-    padding: 0 0 $carbon-poweredby-height
-      calc(#{$carbon-image-width} + #{$carbon-spacing});
+    margin-left: -1 * $carbon-shadow-size;
+    margin-right: -1 * $carbon-shadow-size;
+    padding-left: $carbon-shadow-size;
+    padding-right: $carbon-shadow-size;
+    padding-bottom: 5px;
+    padding-top: 5px;
 
     &:hover {
       color: $link;
@@ -97,13 +84,9 @@ $carbon-image-width: 130px;
   }
 
   .carbon-poweredby {
-    bottom: 0;
     color: $border-hover;
-    display: inline;
     font-size: $size-small;
-    line-height: $carbon-poweredby-height;
-    position: absolute;
-    right: 0;
+    line-height: 1;
 
     &:hover {
       text-decoration: underline;

docs/_sass/index/sponsors.scss

@@ -3,17 +3,17 @@ $bd-sponsor-width: 12rem;
 
 .bd-sponsors {
   --bd-sponsors-spacing: #{$block-spacing};
+  padding: var(--bd-sponsors-spacing);
 }
 
 .bd-sponsors-body {
-  display: grid;
-  grid-gap: var(--bd-index-gap);
+  // display: grid;
+  // grid-gap: var(--bd-index-gap);
 }
 
 @include mobile {
   .bd-sponsors {
     grid-gap: var(--bd-sponsors-spacing);
-    padding: var(--bd-sponsors-spacing);
   }
 }
 
@@ -22,6 +22,8 @@ $bd-sponsor-width: 12rem;
   display: grid;
   grid-gap: 0;
   grid-template-columns: repeat(auto-fill, minmax(var(--sponsor-width), 1fr));
+  margin-left: -$block-spacing;
+  margin-right: -$block-spacing;
   overflow: hidden;
 }
 
@@ -35,23 +37,24 @@ $bd-sponsor-width: 12rem;
   img {
     position: relative;
   }
+
+  img {
+    border-radius: 0.5em;
+    max-height: 3rem;
+    width: auto;
+  }
 }
 
 @include touch {
   .bd-sponsors {
     padding: var(--bd-index-vertical);
   }
-
-  .bd-partner-sponsors {
-    margin-left: -$block-spacing;
-    margin-right: -$block-spacing;
-  }
 }
 
 @include desktop {
   .bd-sponsors {
-    padding-bottom: var(--bd-index-vertical);
-    padding-top: var(--bd-index-vertical);
+    // padding-bottom: var(--bd-index-vertical);
+    // padding-top: var(--bd-index-vertical);
   }
 
   .bd-sponsors-body {
@@ -68,8 +71,20 @@ $bd-sponsor-width: 12rem;
   }
 
   .bd-sponsors-content {
+    align-items: flex-start;
+    display: flex;
     font-size: 1.125rem;
     grid-column: 3 / span 1;
+    max-width: none;
+
+    .content {
+      margin-left: 1.5rem;
+      margin-right: 1.5rem;
+    }
+
+    .button {
+      flex-shrink: 0;
+    }
   }
 
   .bd-sponsors-list {
@@ -92,9 +107,9 @@ $bd-sponsor-width: 12rem;
 }
 
 @include fullhd {
-  .bd-sponsors {
-    --bd-sponsors-spacing: 9rem;
-  }
+  // .bd-sponsors {
+  //   --bd-sponsors-spacing: 9rem;
+  // }
 
   .bd-sponsors-content {
     font-size: 1.5rem;

docs/_sass/pages/index.scss

@@ -118,7 +118,7 @@ $linear-gradient: linear-gradient(
 
 @include fullhd {
   :root {
-    --bd-index-vertical: 9rem;
+    --bd-index-vertical: 6rem;
   }
 
   .bd-index-content {

docs/css/bulma-docs.css

@@ -17498,20 +17498,15 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 #carboncontainer {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  max-width: 300px;
-  min-height: 140px;
-  min-width: 280px;
+  padding: 1.5rem;
 }
 
 #carbon {
   border-radius: 0.125em;
-  flex-grow: 1;
-  min-height: 100px;
-  padding: 0;
+  margin: 0;
+  min-height: 206px;
   position: relative;
+  width: 130px;
 }
 
 #carbon:hover {
@@ -17519,12 +17514,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   box-shadow: 0 0 0 0.75rem rgba(0, 0, 0, 0.02);
 }
 
-@media screen and (min-width: 769px), print {
-  #carbon {
-    width: 300px;
-  }
-}
-
 #carbonads {
   font-size: 14px;
   text-align: left;
@@ -17536,13 +17525,12 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 #carbonads .carbon-wrap {
-  min-height: 100px;
   position: relative;
 }
 
 #carbonads .carbon-wrap:hover .carbon-img::after {
   background-color: rgba(0, 0, 0, 0.05);
-  content: '';
+  content: "";
   display: block;
   height: 100px;
   left: 0;
@@ -17552,14 +17540,8 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 #carbonads .carbon-img {
-  bottom: 0;
-  float: left;
-  left: 0;
   min-height: 100px;
   padding: 0;
-  position: absolute;
-  top: 0;
-  width: calc(130px + 1rem);
 }
 
 #carbonads .carbon-img img {
@@ -17580,8 +17562,12 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   display: block;
   color: #363636;
   line-height: 20px;
-  min-height: 100px;
-  padding: 0 0 20px calc(130px + 1rem);
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-bottom: 5px;
+  padding-top: 5px;
 }
 
 #carbonads .carbon-text:hover {
@@ -17589,13 +17575,9 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 #carbonads .carbon-poweredby {
-  bottom: 0;
   color: #b5b5b5;
-  display: inline;
   font-size: 0.75rem;
-  line-height: 20px;
-  position: absolute;
-  right: 0;
+  line-height: 1;
 }
 
 #carbonads .carbon-poweredby:hover {
@@ -19706,7 +19688,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 
 @media screen and (min-width: 1408px) {
   :root {
-    --bd-index-vertical: 9rem;
+    --bd-index-vertical: 6rem;
   }
   .bd-index-content {
     font-size: 1.5rem;
@@ -21932,17 +21914,12 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 
 .bd-sponsors {
   --bd-sponsors-spacing: 1.5rem;
-}
-
-.bd-sponsors-body {
-  display: grid;
-  grid-gap: var(--bd-index-gap);
+  padding: var(--bd-sponsors-spacing);
 }
 
 @media screen and (max-width: 768px) {
   .bd-sponsors {
     grid-gap: var(--bd-sponsors-spacing);
-    padding: var(--bd-sponsors-spacing);
   }
 }
 
@@ -21951,6 +21928,8 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   display: grid;
   grid-gap: 0;
   grid-template-columns: repeat(auto-fill, minmax(var(--sponsor-width), 1fr));
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
   overflow: hidden;
 }
 
@@ -21963,29 +21942,37 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   position: relative;
 }
 
+.bd-partner-sponsor img {
+  border-radius: 0.5em;
+  max-height: 3rem;
+  width: auto;
+}
+
 @media screen and (max-width: 1023px) {
   .bd-sponsors {
     padding: var(--bd-index-vertical);
   }
-  .bd-partner-sponsors {
-    margin-left: -1.5rem;
-    margin-right: -1.5rem;
-  }
 }
 
 @media screen and (min-width: 1024px) {
-  .bd-sponsors {
-    padding-bottom: var(--bd-index-vertical);
-    padding-top: var(--bd-index-vertical);
-  }
   .bd-sponsors-body {
     align-items: center;
     grid-gap: 0;
     grid-template-columns: var(--bd-index-gap) 1fr calc( calc(var(--container-width) - var(--bd-index-gap)) / 2) var(--bd-index-gap) calc( calc(var(--container-width) - var(--bd-index-gap)) / 2) 1fr var(--bd-index-gap);
   }
   .bd-sponsors-content {
+    align-items: flex-start;
+    display: flex;
     font-size: 1.125rem;
     grid-column: 3 / span 1;
+    max-width: none;
+  }
+  .bd-sponsors-content .content {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+  .bd-sponsors-content .button {
+    flex-shrink: 0;
   }
   .bd-sponsors-list {
     grid-column: 4 / span 4;
@@ -22005,9 +21992,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
 }
 
 @media screen and (min-width: 1408px) {
-  .bd-sponsors {
-    --bd-sponsors-spacing: 9rem;
-  }
   .bd-sponsors-content {
     font-size: 1.5rem;
   }