spatial-navigation-polyfill/demo/blog/blog-style.css

A polyfill for the spatial navigation

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff)
}
body {
  font-family: 'Roboto';
  height: 100%;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none; /* no underline */
}

a:hover {
  color: inherit;
  font-weight: bold;
  text-decoration: none; /* no underline */
}

a:focus {
  outline: 0px solid white;
  font-weight: bold;
}

.menulink {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 1.2vw;
}

.menulink:focus {
  outline: 0px solid black;
  box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black;
}

.menulink:after {
  background: rgb(160, 182, 219);
  content: '';
  display: block;
  height: 2px;
  margin: 5px;
}

.tabcontent {
  display: none;
}

.text-center {
  text-align:center!important;
}

.text-title {
  font-size: 1.5vw;
}

.text-menu {
  padding: 20px 0;
}

.blog {
  display:flex;
  flex-direction: row;
  justify-content: center;
}

.sampleFrame {
  width: 100%;
  height: 1200px;
}

.col-sm-3{
  flex: 20%;
  max-width:20%;
  padding: 0 5px;
  background-color: rgb(216, 238, 255);
}

.col-sm-9{
  flex: 80%;
  max-width:80%;
  padding: 0 5px;
}

.gridrow {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.gridcolumn {
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
}

.gridcolumn img {
  vertical-align: middle;
}

.mr-5,.mx-5{margin-right:3rem!important}
.mb-5,.my-5{margin-bottom:3rem!important}
.ml-5,.mx-5{margin-left:3rem!important}
.mt-5,.my-5{margin-top:3rem!important}

.mr-4,.mx-4{margin-right:1.5rem!important}
.mb-4,.my-4{margin-bottom:1.5rem!important}
.ml-4,.mx-4{margin-left:1.5rem!important}
.mt-4,.my-4{margin-top:1.5rem!important}

.card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  word-wrap:break-word;
  background-color:#fff;
  background-clip:border-box;
  border:1px solid rgba(0,0,0,.125);
  border-radius:.25rem
}
.card>hr {
  margin-right:0;
  margin-left:0;
}
.card>.list-group:first-child.list-group-item:first-child {
  border-top-left-radius:.25rem;
  border-top-right-radius:.25rem;
}
.card>.list-group:last-child.list-group-item:last-child {
  border-bottom-right-radius:.25rem;
  border-bottom-left-radius:.25rem;
}
.card-body {
  flex:1 1 auto;
  padding:1.25rem;
}
.card-text:last-child {
  margin-bottom:0;
}

.card-img {
  width:100%;
  border-radius:calc(.25rem - 1px);
}
.card-img-top {
  width:100%;
  border-top-left-radius:calc(.25rem - 1px);
  border-top-right-radius:calc(.25rem - 1px);
}

.card-img-top:focus {
  outline: 4px solid #428bca;
}

.btn {
  display:inline-block;
  font-weight:400;
  text-align:center;
  white-space:nowrap;
  vertical-align:middle;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  border:1px solid transparent;
  padding:.375rem .75rem;
  font-size:1rem;
  font-family: 'Roboto';
  line-height:1.5;
  border-radius:.25rem;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,outline .15s ease-in-out;
}
.btn:focus,.btn:hover {text-decoration:none}
.btn.focus,.btn:focus {outline: 4px solid #428bca;}

.btn-sm {
  padding:.25rem .5rem;
  font-size:.875rem;
  line-height:1.5;
  border-radius:.2rem
}
.btn-outline-secondary {
  color:#6c757d;
  background-color:transparent;
  background-image:none;
  border-color:#6c757d;
}
.btn-outline-secondary:hover {color:#fff;background-color:#6c757d;border-color:#6c757d}
.btn-outline-secondary:focus {box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}

.btn-group {position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}
.btn-group>.btn{position:relative;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}
.btn-group>.btn:hover{z-index:1}
.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:1}
.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group{margin-left:-1px}

.btn-group>.btn:first-child{margin-left:0}
.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}

:focus {
  outline: 5px solid #428bca;
}

/* Responsive layout - makes three columns-layout instead of four columns */
@media (max-width: 900px) {
  .gridcolumn {
    flex: 25%;
    max-width: 25%;
  }
}

/* Responsive layout - makes two columns-layout instead of four columns */
@media (max-width: 600px) {
  .gridcolumn {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the one column stack on top of each other instead of next to each other */
@media (max-width: 400px) {
  .gridcolumn {
    flex: 100%;
    max-width: 100%;
  }
}