Difference between revisions of "Template:Tartu TUIT/style"

 
(6 intermediate revisions by the same user not shown)
Line 16: Line 16:
 
   cursor: pointer; }
 
   cursor: pointer; }
  
−
.cols::after, header.header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after, .clearfix::after {
+
.cols::after, .experiment::after, header.header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after, .clearfix::after {
 
   content: '';
 
   content: '';
 
   display: table;
 
   display: table;
Line 62: Line 62:
  
 
body h2, body h2, body h3, body h4 {
 
body h2, body h2, body h3, body h4 {
−
   color: #dde5ee; }
+
   color: #dde5ee;
 +
  font-family: 'Roboto' !important; }
 +
 
 +
body li {
 +
  margin-bottom: 0; }
  
−
h2 {
+
h2, .article h2 {
 
   text-align: center;
 
   text-align: center;
 
   font-weight: 100;
 
   font-weight: 100;
Line 106: Line 110:
 
     vertical-align: super;
 
     vertical-align: super;
 
     padding: 0px 0px; }
 
     padding: 0px 0px; }
 +
  .article img {
 +
    max-width: 100%; }
 
   .article ol.fancy.cols {
 
   .article ol.fancy.cols {
 
     margin-left: -2%;
 
     margin-left: -2%;
Line 114: Line 120:
 
     margin: 0; }
 
     margin: 0; }
 
     .article ol.fancy li {
 
     .article ol.fancy li {
−
       counter-increment: ol-counter; }
+
       counter-increment: ol-counter;
 +
      padding: 0px 0px 10px; }
 
       .article ol.fancy li::before {
 
       .article ol.fancy li::before {
 
         box-shadow: 0 0 5px #50b1be;
 
         box-shadow: 0 0 5px #50b1be;
Line 122: Line 129:
 
         color: #181e33;
 
         color: #181e33;
 
         font-weight: 900;
 
         font-weight: 900;
−
         padding: 3px 8px 2px;
+
        font-size: 16px;
 +
         padding: 1px 6px 0px;
 
         line-height: 20px;
 
         line-height: 20px;
−
         margin: 4px 10px 4px 0;
+
         margin: 1px 10px 4px 0;
 
         float: left; }
 
         float: left; }
 
       .article ol.fancy li::after {
 
       .article ol.fancy li::after {
Line 197: Line 205:
 
   margin: 10px auto;
 
   margin: 10px auto;
 
   background-color: #dde5ee; }
 
   background-color: #dde5ee; }
 +
 +
.interviews .nav {
 +
  padding: 0px 0 50px;
 +
  text-align: center;
 +
  list-style-type: none; }
 +
  .interviews .nav .button {
 +
    background-color: #dde5ee;
 +
    color: #181e33;
 +
    font-weight: 400;
 +
    text-decoration: none;
 +
    padding: 10px 15px;
 +
    margin: 10px;
 +
    display: inline-block; }
 +
  .interviews .nav .button:hover {
 +
    box-shadow: 0 0 15px #50b1be;
 +
    cursor: pointer; }
 +
  .interviews .nav .button.active {
 +
    box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; }
 +
 +
.interviews .interview {
 +
  display: none; }
 +
 +
.interview ul {
 +
  list-style-type: none;
 +
  margin: 0; }
 +
  .interview ul li {
 +
    padding: 3px 0;
 +
    line-height: 25px;
 +
    position: relative; }
 +
    .interview ul li::before {
 +
      text-shadow: 0 0 5px #50b1be, 0 0 10px #50b1be;
 +
      content: '?';
 +
      border-radius: 100%;
 +
      color: #dde5ee;
 +
      font-weight: 900;
 +
      font-size: 24px;
 +
      padding: 3px;
 +
      line-height: 20px;
 +
      left: -30px;
 +
      top: 5px;
 +
      position: absolute; }
 +
    .interview ul li::after {
 +
      content: '';
 +
      clear: both;
 +
      display: table; }
 +
 +
.interview .person img {
 +
  float: left;
 +
  height: 150px;
 +
  margin-right: 40px;
 +
  margin-bottom: 40px;
 +
  border-top-left-radius: 50px; }
 +
 +
.interview .person .name {
 +
  font-weight: 100;
 +
  font-size: 36px;
 +
  padding-bottom: 10px; }
 +
 +
.interview .person .position {
 +
  font-size: 16px; }
 +
 +
.interview .questions {
 +
  clear: both; }
 +
 +
.interview .question {
 +
  font-style: italic;
 +
  margin-bottom: 10px;
 +
  color: #9ad2da; }
 +
 +
.interview .answer {
 +
  margin-bottom: 30px; }
 +
  .interview .answer img {
 +
    max-width: 100%; }
 +
 +
.experiment .time {
 +
  text-align: center;
 +
  padding-bottom: 30px; }
 +
  .experiment .time i {
 +
    padding-right: 7px; }
 +
 +
.experiment .ingredients, .experiment .tools {
 +
  width: 50%;
 +
  float: left;
 +
  padding-left: 5%; }
 +
  .experiment .ingredients li, .experiment .tools li {
 +
    text-align: left; }
 +
 +
.experiment .steps::before {
 +
  content: '';
 +
  clear: both;
 +
  display: table; }
  
 
header.header {
 
header.header {
Line 366: Line 465:
 
       top: 0px;
 
       top: 0px;
 
       z-index: 1; }
 
       z-index: 1; }
−
     .nav-shown .navigation {
+
     .nav-shown header.header .navigation {
 
       opacity: 1;
 
       opacity: 1;
 
       transform: translateX(0); }
 
       transform: translateX(0); }
−
     .nav-shown .nav-button i {
+
     .nav-shown header.header .nav-button i {
 
       background-color: transparent; }
 
       background-color: transparent; }
−
     .nav-shown .nav-button i::before {
+
     .nav-shown header.header .nav-button i::before {
 
       transform: translateY(0) rotate(-45deg); }
 
       transform: translateY(0) rotate(-45deg); }
−
     .nav-shown .nav-button i::after {
+
     .nav-shown header.header .nav-button i::after {
 
       transform: translateY(0) rotate(45deg); } }
 
       transform: translateY(0) rotate(45deg); } }
  
Line 778: Line 877:
 
   box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; }
 
   box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; }
  
−
.notebook-blue .actions {
+
.actions {
 
   text-align: center;
 
   text-align: center;
 
   padding: 50px; }
 
   padding: 50px; }
−
   .notebook-blue .actions .button {
+
   .actions .button {
 
     box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be;
 
     box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be;
 
     background-color: #dde5ee;
 
     background-color: #dde5ee;
Line 787: Line 886:
 
     text-decoration: none;
 
     text-decoration: none;
 
     padding: 20px; }
 
     padding: 20px; }
−
 
−
 
−
 
  
 
</style>
 
</style>

Latest revision as of 12:38, 5 November 2018