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

 
(14 intermediate revisions by the same user not shown)
Line 16: Line 16:
 
   cursor: pointer; }
 
   cursor: pointer; }
  
−
.cols::after, .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;
 
   clear: both; }
 
   clear: both; }
  
−
.cols, .header .menu, .header .menu .submenu {
+
.cols, header.header .menu, header.header .menu .submenu {
 
   list-style-type: none;
 
   list-style-type: none;
 
   padding: 0;
 
   padding: 0;
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 {
 +
    margin-left: -2%;
 +
    margin-right: -2%; }
 
   .article ol.fancy {
 
   .article ol.fancy {
 
     list-style-type: none;
 
     list-style-type: none;
Line 111: 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 119: 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 162: Line 173:
 
   color: #dde5ee; }
 
   color: #dde5ee; }
  
−
.header {
+
.attrib ul {
 +
  list-style-type: none;
 +
  margin: 0; }
 +
  .attrib ul li {
 +
    padding: 3px 0;
 +
    line-height: 30px; }
 +
    .attrib ul li::before {
 +
      box-shadow: 0 0 5px #50b1be;
 +
      content: '';
 +
      background-color: #75c2cc;
 +
      border-radius: 100%;
 +
      color: #181e33;
 +
      font-weight: 900;
 +
      padding: 3px;
 +
      line-height: 20px;
 +
      margin: 12px 10px 0px 0;
 +
      float: left; }
 +
    .attrib ul li::after {
 +
      content: '';
 +
      clear: both;
 +
      display: table; }
 +
  .attrib ul .name {
 +
    font-weight: 900; }
 +
 
 +
.sponsors h2 {
 +
  margin-top: 60px; }
 +
 
 +
.sponsors img {
 +
  display: block;
 +
  width: 500px;
 +
  margin: 10px auto;
 +
  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 {
 
   padding-top: 18px;
 
   padding-top: 18px;
 
   background-color: #181e33;
 
   background-color: #181e33;
Line 172: Line 307:
 
   top: 0;
 
   top: 0;
 
   z-index: 200; }
 
   z-index: 200; }
−
   .header .logo {
+
   header.header .logo {
 
     background-color: #181e33;
 
     background-color: #181e33;
 
     display: block;
 
     display: block;
Line 181: Line 316:
 
     padding: 7px;
 
     padding: 7px;
 
     height: 80px; }
 
     height: 80px; }
−
     .header .logo img {
+
     header.header .logo img {
 
       height: 100%;
 
       height: 100%;
 
       width: auto; }
 
       width: auto; }
−
   .header .menu li {
+
   header.header .menu li {
 
     cursor: default;
 
     cursor: default;
 
     white-space: nowrap; }
 
     white-space: nowrap; }
−
   .header .menu > li {
+
   header.header .menu > li {
 
     position: relative; }
 
     position: relative; }
−
   .header .menu .submenu {
+
   header.header .menu .submenu {
 
     display: none; }
 
     display: none; }
−
     .header .menu .submenu a {
+
     header.header .menu .submenu a {
 
       display: block; }
 
       display: block; }
−
   .header .nav-button {
+
   header.header .nav-button {
 
     display: none;
 
     display: none;
 
     height: 80px;
 
     height: 80px;
Line 201: Line 336:
 
     top: 18px;
 
     top: 18px;
 
     width: 80px; }
 
     width: 80px; }
−
     .header .nav-button i {
+
     header.header .nav-button i {
 
       background-color: #dde5ee;
 
       background-color: #dde5ee;
 
       height: 2px;
 
       height: 2px;
Line 211: Line 346:
 
       transition: background-color 0.3s 0s;
 
       transition: background-color 0.3s 0s;
 
       width: 30px; }
 
       width: 30px; }
−
       .header .nav-button i::before, .header .nav-button i::after {
+
       header.header .nav-button i::before, header.header .nav-button i::after {
 
         background-color: #dde5ee;
 
         background-color: #dde5ee;
 
         backface-visibility: hidden;
 
         backface-visibility: hidden;
Line 220: Line 355:
 
         transition: transform 0.3s 0s;
 
         transition: transform 0.3s 0s;
 
         width: 100%; }
 
         width: 100%; }
−
       .header .nav-button i::before {
+
       header.header .nav-button i::before {
 
         transform: translateY(-8px); }
 
         transform: translateY(-8px); }
−
       .header .nav-button i::after {
+
       header.header .nav-button i::after {
 
         transform: translateY(8px); }
 
         transform: translateY(8px); }
−
   .header.sticky {
+
   header.header.sticky {
 
     position: fixed;
 
     position: fixed;
 
     top: 0;
 
     top: 0;
Line 236: Line 371:
  
 
@media (min-width: 769px) {
 
@media (min-width: 769px) {
−
   .header .navigation {
+
   header.header .navigation {
 
     position: relative;
 
     position: relative;
 
     z-index: 200;
 
     z-index: 200;
Line 243: Line 378:
 
     font-size: 18px;
 
     font-size: 18px;
 
     font-weight: 400; }
 
     font-weight: 400; }
−
   .header .menu {
+
   header.header .menu {
 
     width: 40%; }
 
     width: 40%; }
−
     .header .menu > li {
+
     header.header .menu > li {
 
       float: left;
 
       float: left;
 
       height: 80px; }
 
       height: 80px; }
−
       .header .menu > li > span {
+
       header.header .menu > li > span {
 
         color: #dde5ee;
 
         color: #dde5ee;
 
         line-height: 80px;
 
         line-height: 80px;
 
         padding: 0px 20px; }
 
         padding: 0px 20px; }
−
       .header .menu > li .submenu {
+
       header.header .menu > li .submenu {
 
         position: absolute;
 
         position: absolute;
 
         top: 80px;
 
         top: 80px;
Line 260: Line 395:
 
         z-index: -1;
 
         z-index: -1;
 
         min-width: 200px; }
 
         min-width: 200px; }
−
         .header .menu > li .submenu a {
+
         header.header .menu > li .submenu a {
 
           color: #dde5ee;
 
           color: #dde5ee;
 
           padding: 15px 20px;
 
           padding: 15px 20px;
 
           text-decoration: none; }
 
           text-decoration: none; }
−
           .header .menu > li .submenu a:hover {
+
           header.header .menu > li .submenu a:hover {
 
             background-color: rgba(80, 177, 190, 0.1); }
 
             background-color: rgba(80, 177, 190, 0.1); }
−
       .header .menu > li:hover {
+
       header.header .menu > li:hover {
 
         background-color: rgba(80, 177, 190, 0.1); }
 
         background-color: rgba(80, 177, 190, 0.1); }
−
         .header .menu > li:hover .submenu {
+
         header.header .menu > li:hover .submenu {
 
           display: block; }
 
           display: block; }
−
   .header .menu-left {
+
   header.header .menu-left {
 
     float: left; }
 
     float: left; }
−
     .header .menu-left .submenu {
+
     header.header .menu-left .submenu {
 
       left: 0; }
 
       left: 0; }
−
   .header .menu-right {
+
   header.header .menu-right {
 
     float: right; }
 
     float: right; }
−
     .header .menu-right > li {
+
     header.header .menu-right > li {
 
       float: right; }
 
       float: right; }
−
     .header .menu-right .submenu {
+
     header.header .menu-right .submenu {
 
       right: 0; } }
 
       right: 0; } }
  
 
@media (max-width: 768px) {
 
@media (max-width: 768px) {
−
   .header .nav-button {
+
   header.header .nav-button {
 
     display: block; }
 
     display: block; }
−
   .header .navigation {
+
   header.header .navigation {
 
     background-color: #181e33;
 
     background-color: #181e33;
 
     border-top: 2px solid #50b1be;
 
     border-top: 2px solid #50b1be;
Line 301: Line 436:
 
     z-index: 100;
 
     z-index: 100;
 
     padding-top: 10px; }
 
     padding-top: 10px; }
−
   .header .menu > li > span {
+
   header.header .menu > li > span {
 
     padding: 0 20px;
 
     padding: 0 20px;
 
     line-height: 60px;
 
     line-height: 60px;
 
     display: block; }
 
     display: block; }
−
   .header .menu .submenu {
+
   header.header .menu .submenu {
 
     background-color: rgba(80, 177, 190, 0.1); }
 
     background-color: rgba(80, 177, 190, 0.1); }
−
     .header .menu .submenu a {
+
     header.header .menu .submenu a {
 
       padding: 0 30px;
 
       padding: 0 30px;
 
       line-height: 60px;
 
       line-height: 60px;
 
       color: #dde5ee; }
 
       color: #dde5ee; }
−
   .header .menu .menu-item-branch .label::before {
+
   header.header .menu .menu-item-branch .label::before {
 
     content: '+';
 
     content: '+';
 
     padding-right: 10px; }
 
     padding-right: 10px; }
−
   .header .menu .menu-item-branch.open .label::before {
+
   header.header .menu .menu-item-branch.open .label::before {
 
     content: '-'; }
 
     content: '-'; }
−
   .header .menu .menu-item-branch.open .submenu {
+
   header.header .menu .menu-item-branch.open .submenu {
 
     display: block; }
 
     display: block; }
 
   .nav-shown {
 
   .nav-shown {
Line 330: 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 629: Line 764:
 
           font-size: 25px;
 
           font-size: 25px;
 
           font-weight: 900; }
 
           font-weight: 900; }
 +
 +
.notebook table, .article table {
 +
  background-color: transparent;
 +
  color: #dde5ee;
 +
  border-collapse: collapse; }
 +
  .notebook table td, .article table td {
 +
    background-color: transparent;
 +
    border: 1px solid rgba(221, 229, 238, 0.5);
 +
    padding: 3px 5px; }
 +
 +
.article table {
 +
  width: 100%;
 +
  margin-bottom: 30px; }
 +
  .article table td {
 +
    padding: 10px 13px; }
  
 
.notebook {
 
.notebook {
Line 667: Line 817:
 
   .notebook .pt {
 
   .notebook .pt {
 
     padding-top: 20px; }
 
     padding-top: 20px; }
 +
  .notebook table {
 +
    color: #dde5ee;
 +
    border-collapse: collapse; }
 +
    .notebook table td {
 +
      border: 1px solid rgba(221, 229, 238, 0.5);
 +
      padding: 3px 5px; }
 +
  .notebook ul, .notebook ol {
 +
    margin: 0;
 +
    padding-left: 18px; }
 
   .notebook .event {
 
   .notebook .event {
 
     width: 1000px;
 
     width: 1000px;
Line 701: Line 860:
  
 
.notebook-red .details {
 
.notebook-red .details {
−
  margin-left: 25%;
 
−
  padding-left: 20px;
 
 
   border-left: 3px solid #ea2d30; }
 
   border-left: 3px solid #ea2d30; }
  
 
.notebook-red .bullet {
 
.notebook-red .bullet {
 
   box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }
 
   box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }
 +
 +
.notebook-blue a {
 +
  color: #50b1be; }
 +
 +
.notebook-blue .details {
 +
  border-left: 3px solid #50b1be; }
 +
 +
.notebook-blue .last .details {
 +
  border-left: 0px none; }
 +
 +
.notebook-blue .bullet {
 +
  box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; }
 +
 +
.actions {
 +
  text-align: center;
 +
  padding: 50px; }
 +
  .actions .button {
 +
    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;
 +
    color: #181e33;
 +
    text-decoration: none;
 +
    padding: 20px; }
  
 
</style>
 
</style>

Latest revision as of 12:38, 5 November 2018