angular-justified-layout/style.css

Angularjs wrapper for Flickr Justified Layout

html, body {
  width: 100%;
  min-height: 100%;
  position: relative;
  margin: 0;
  height: 100%;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  color: #555;
}

article header {
  margin-bottom: 20px;
  color: #23282E;
  padding: 40px 0;
  width: 100%;
  border-bottom: 3px solid #337ab7;
  background: #FF5F6D;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FFC371, #FF5F6D);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FFC371, #FF5F6D);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

article header h1, article header h2 {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  color: whitesmoke;
  outline: black;
}

article header h1 {
  font-weight: 700;
  font-size: 3em;
  font-family: 'rs';
}

article header h2 {
  font-weight: 600;
  font-size: 2em;
  font-family: 'rs';
}

article header h2 strong {
  color: #F44336;
}

article section {
  padding: 0px 10%;
}

section h1 {
  font-size: 2em;
  color: #1AC3CB;
}

section h2 {
  font-size: 1.8em;
  color: #ff6a6e;
}

section h3 {
  font-size: 1.4em;
  color: #1AC3CB;
}

section p {
  font-size: 1.2em;
  line-height: 30px;
}

.justified-container {
  width: 100%;
}

.box {
  background-color: rgba(255, 174, 112, 0.7);
}

.box:nth-child(even) {
  background-color: rgba(255, 115, 110, 0.7);
}

.box img {
  width: 100%;
  height: 100%;
}

.tool-bar {
  margin-bottom: 30px;
}

.box-inside {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.box:hover .details-block {
  opacity: 1;
}

.details-block {
  width: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  bottom: 0;
  transition: all ease-in 250ms;
  opacity: 0;
  color: white;
  cursor: pointer;
}

.btn-group-vertical button {
  margin-bottom: 0.5em;
}