Difference between revisions of "Template:Uppsala/main template"

Line 892: Line 892:
 
     bottom: 0px;
 
     bottom: 0px;
 
}
 
}
 +
 +
 +
 +
 +
 +
/* For BUTTONS on the page */
 +
<style>
 +
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
 +
 +
 +
 +
.buttons {
 +
  display: flex;
 +
  padding: 0 50px 0 50px;
 +
  /* flex-direction: column; */
 +
  height: 100%;
 +
  justify-content: center;
 +
  text-align: center;
 +
  width: 100%;
 +
}
 +
 +
.container {
 +
    align-items: center;
 +
    display: flex;
 +
    flex-wrap: wrap;
 +
    /* flex-direction: column; */
 +
    justify-content: center;
 +
    padding: 1em;
 +
    text-align: center;
 +
    padding-right: 50px;
 +
    padding-left: 50px;
 +
    padding-bottom: 0px;
 +
}
 +
 +
 +
@media (min-width: 600px)
 +
.container {
 +
    flex-direction: row;
 +
    justify-content: safe !important;
 +
}
 +
 +
/*
 +
@media (min-width: 600px) {
 +
  .container {
 +
    flex-direction: row;
 +
    justify-content: space-between;
 +
  }
 +
}
 +
*/
 +
 +
 +
.buttons p {
 +
  font-family: 'Roboto', sans-serif;
 +
  color: #fff;
 +
  font-size: 12px;
 +
}
 +
@media (min-width: 600px) {
 +
.buttons p {
 +
    left: 50%;
 +
    position: absolute;
 +
    -webkit-transform: translate(-50%, 0);
 +
            transform: translate(-50%, 0);
 +
    top: 90%;
 +
  }
 +
}
 +
@media (max-height: 500px) {
 +
.buttons p {
 +
    left: 0;
 +
    position: relative;
 +
    top: 0;
 +
    -webkit-transform: translate(0, 0);
 +
            transform: translate(0, 0);
 +
  }
 +
}
 +
 +
.buttons p a {
 +
  font-family: 'Roboto', sans-serif;
 +
  background-color: rgba(255, 255, 255, 0.8);
 +
  /* border-bottom: 1px solid; */
 +
  color: #fff;
 +
  line-height: 1.4;
 +
  padding: .25em;
 +
  text-decoration: none;
 +
}
 +
 +
 +
 +
a:visited.btn {
 +
    color: #fff;
 +
}
 +
 +
 +
.btn {
 +
  font-family: 'Roboto', sans-serif;
 +
  color: #fff;
 +
  cursor: pointer;
 +
  font-size: 16px;
 +
  font-weight: 400;
 +
  line-height: 45px;
 +
  margin: 0 0 1em;
 +
  max-width: 160px;
 +
  position: relative;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
  width: 100%;
 +
  /* background: #f01e17; */
 +
  background-color:  RGBA(240, 30, 23, 0.8);
 +
  box-shadow: 0px 2px 0 #d6251f, 2px 4px 0px #e02a24;
 +
  text-decoration: none;
 +
  text-shadow: 0px -1px 0 #c2211c;
 +
  transition: all 250ms linear;
 +
}
 +
 +
.btn:hover {
 +
    background-color:  RGB(240, 30, 23);
 +
    box-shadow: 0px 2px 0 #d6251f, 2px 4px 0px #e02a24;
 +
    color: #fff;
 +
    text-decoration: none;
 +
    text-shadow: 0px -1px 0 #c2211c;
 +
    transition: all 250ms linear;
 +
}
 +
 +
 +
 +
@media (min-width: 600px) {
 +
  .btn {
 +
    margin: 0 1em 2em;
 +
  }
 +
}
 +
 +
  
  

Revision as of 19:16, 15 October 2018