MediaWiki:Common.css

/* Korrektur der Darstellung von Tokens-Input-Feldern */ .inputSpan > .pfTokens > ul, .inputSpan > .pfTokens {

   margin: 0 0 0 0!important;

}

.container {

                 max-width: 1335px;
 margin: 0 auto;
 border:0;

            

}

.grid-row {

 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;

}

.grid-item {

 height: 550px;
 flex-basis: 20%;
 -ms-flex: auto;
 width: 259px;
 position: relative;
 padding: 10px;
 box-sizing: border-box;

}

.grid-row a {

 text-decoration: none;

}

.wrapping-link {

 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 z-index: 2;
 color: currentColor;

}

.grid-item-wrapper {

 -webkit-box-sizing: initial;
 -moz-box-sizing: initial;
 box-sizing: initial;
 background: #ececec;
 margin: 0;
 height: 100%;
 width: 100%;
 overflow: hidden;
 -webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
 transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
 position: relative;

}

.grid-item-container {

 height: 100%;
 width: 100%;
 position: relative;

}

.grid-image-top {

 height: 45%;
 width: 120%;
 background-size: cover;
 position: relative;
 background-position: 50% 50%;
 left: -10.5%;
 top: -4.5%;

}

.grid-image-top .centered {

 text-align: center;
 transform: translate(-50%, -50%);
 background-size: contain;
 background-repeat: no-repeat;
 position: absolute;
 top: 54.5%;
 left: 50%;
 width: 60%;
 height: 60%;
 background-position: center;

}

.grid-image-top.rex-ray {

 background: -webkit-gradient(linear,left top, left bottom,from(#007DB8),to(#00447C));
 background: -webkit-linear-gradient(#007DB8,#00447C);
 background: -o-linear-gradient(#007DB8,#00447C);
 background: linear-gradient(#007DB8,#00447C);

}

.rex-ray-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/Rex-Ray-icon-209x300.png);

            

}

.grid-image-top.sputnik {

 background: -webkit-gradient(linear,left top, left bottom,from(#1AA9FB),to(#1785C4));
 background: -webkit-linear-gradient(#1AA9FB,#1785C4);
 background: -o-linear-gradient(#1AA9FB,#1785C4);
 background: linear-gradient(#1AA9FB,#1785C4);

}

.sputnik-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/sputnik-1-300x257.png);

            

}

.grid-image-top.edgex {

 background: -webkit-gradient(linear,left top, left bottom,from(#952f4c),to(#3e1a51));
 background: -webkit-linear-gradient(#952f4c,#3e1a51);
 background: -o-linear-gradient(#952f4c,#3e1a51);
 background: linear-gradient(#952f4c,#3e1a51);

}

.edgex-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/edge-x-300x287.png);

            

}

.grid-image-top.openswitch {

 background: -webkit-gradient(linear,left top, left bottom,from(#2db89a),to(#00793d));
 background: -webkit-linear-gradient(#2db89a,#00793d);
 background: -o-linear-gradient(#2db89a,#00793d);
 background: linear-gradient(#2db89a,#00793d);

}

.openswitch-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/open-switch-300x207.png);

            

}

.grid-image-top.scaleio {

 background: -webkit-gradient(linear,left top, left bottom,from(#2e96dd),to(#326de6));
 background: -webkit-linear-gradient(#2e96dd,#326de6);
 background: -o-linear-gradient(#2e96dd,#326de6);
 background: linear-gradient(#2e96dd,#326de6);

}

.scaleio-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/K8s_ScaleIO_Color-white-thumb-221x300.png);

            

}

.grid-image-top.csi {

 background: -webkit-gradient(linear,left top, left bottom,from(#464646),to(#000000));
 background: -webkit-linear-gradient(#464646,#000000);
 background: -o-linear-gradient(#464646,#000000);
 background: linear-gradient(#464646,#000000);

}

.csi-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/csi-1-300x99.png);

            

}

.grid-image-top.kubernetes {

 background: -webkit-gradient(linear,left top, left bottom,from(#09C1D1),to(#326DE6));
 background: -webkit-linear-gradient(#09C1D1,#326DE6);
 background: -o-linear-gradient(#09C1D1,#326DE6);
 background: linear-gradient(#09C1D1,#326DE6);

}

.kubernetes-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/kubernetes-300x293.png);

            

}

.grid-image-top.grpc {

 background: -webkit-gradient(linear,left top, left bottom,from(#0CC1C8),to(#2E838C));
 background: -webkit-linear-gradient(#0CC1C8,#2E838C);
 background: -o-linear-gradient(#0CC1C8,#2E838C);
 background: linear-gradient(#0CC1C8,#2E838C);

}

.grpc-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/grpc-300x105.png);

            

}

.grid-image-top.envoy {

 background: -webkit-gradient(linear,left top, left bottom,from(#290B54),to(#130229));
 background: -webkit-linear-gradient(#290B54,#130229);
 background: -o-linear-gradient(#290B54,#130229);
 background: linear-gradient(#290B54,#130229);

}

.envoy-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/envoy_logo-5028052-300x91.png);

            

}

.grid-image-top.istio {

 background: -webkit-gradient(linear,left top, left bottom,from(#4A73C0),to(#466BB0));
 background: -webkit-linear-gradient(#4A73C0,#466BB0);
 background: -o-linear-gradient(#4A73C0,#466BB0);
 background: linear-gradient(#4A73C0,#466BB0);

}

.istio-image {

                 background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/istio-203x300.png);

            

}

.grid-item-content {

 padding: 0 20px 20px 20px;

}

.item-title {

 font-size: 24px;
 line-height: 26px;
 font-weight: 700;
 margin-bottom: 18px;
 display: block;

}

.item-category {

 text-transform: uppercase;
 display: block;
 margin-bottom: 20px;
 font-size: 14px;

}

.item-excerpt {

 margin-bottom: 20px;
 display: block;
 font-size: 14px;

}

.more-info {

 position: absolute;
 bottom: 0;
 margin-bottom: 25px;
 padding-left: 0;
 transition-duration: .5s;
 font-size: 12px;
 display: flex;

}

.more-info i {

 padding-left: 5px;
 transition-duration: .5s;

}

.grid-item:hover .more-info i {

 padding-left: 20px;
 transition-duration: .5s;

}

.more-info i::before {

 font-size: 16px;

}

.grid-item:hover .grid-item-wrapper {

 padding: 2% 2%;
 margin: -2% -2%;

}

@media(max-width: 1333px) {

 .grid-item {
   flex-basis: 33.33%;
 }

}

@media(max-width: 1073px) {

  .grid-item {
   flex-basis: 33.33%;
 }

}

@media(max-width: 815px) {

 .grid-item {
   flex-basis: 50%;
 }

}

@media(max-width: 555px) {

 .grid-item {
   flex-basis: 100%;
 }

}