Difference between revisions of "Template:XJTU-China/style"

Line 382: Line 382:
  
  
−
.banner {
+
/* .banner {
 
     position: relative;
 
     position: relative;
 
     height: 100vh;
 
     height: 100vh;
−
    background: url("https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg");
 
 
     background-size: cover;
 
     background-size: cover;
−
}
+
} */
  
 
.box {
 
.box {
Line 907: Line 906:
  
  
−
.segmenter {
+
.bannerImg {
 
     width: 100vw;
 
     width: 100vw;
 
     height: 100vh;
 
     height: 100vh;
Line 915: Line 914:
 
}
 
}
  
 +
/* --------- */
 +
/* Decorative Letter Animations */
 +
 +
/* Word + SVG styles */
 +
.word {
 +
position: relative;
 +
    display: flex;
 +
    flex-direction: row;
 +
    align-items: center;
 +
    justify-content: center;
 +
    flex-wrap: wrap;
 +
    margin: 0 0 0.25em 0;
 +
    cursor: default;
 +
    -webkit-touch-callout: none;
 +
    -webkit-user-select: none;
 +
    -moz-user-select: none;
 +
    -ms-user-select: none;
 +
    user-select: none;
 +
    -webkit-tap-highlight-color: rgba(0,0,0,0);
 +
    grid-area: title;
 +
font-family: 'Josefin Sans', sans-serif;
 +
    font-size: 9vw;
 +
    font-weight: 700;
 +
text-transform: uppercase;
 +
}
 +
 +
.shapes {
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
}
 +
 +
@media screen and (max-width: 40em) {
 +
.slideshow .word {
 +
font-size: 2em;
 +
}
 +
}
  
 
/* ---------- */
 
/* ---------- */
Line 954: Line 990:
 
}
 
}
  
−
/*! locomotive-scroll v4.1.1 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
 
−
html.has-scroll-smooth {
 
−
    overflow: hidden; }
 
−
 
 
−
  html.has-scroll-dragging {
 
−
    -webkit-user-select: none;
 
−
    -moz-user-select: none;
 
−
    -ms-user-select: none;
 
−
    user-select: none; }
 
−
 
 
−
  .has-scroll-smooth body {
 
−
    overflow: hidden; }
 
−
 
 
−
  .has-scroll-smooth [data-scroll-container] {
 
−
    min-height: 100vh; }
 
−
 
 
−
  [data-scroll-direction="horizontal"] [data-scroll-container] {
 
−
    height: 100vh;
 
−
    display: inline-block;
 
−
    white-space: nowrap; }
 
−
 
 
−
  [data-scroll-direction="horizontal"] [data-scroll-section] {
 
−
    display: inline-block;
 
−
    vertical-align: top;
 
−
    white-space: nowrap;
 
−
    height: 100%; }
 
−
 
 
−
  .c-scrollbar {
 
−
    position: absolute;
 
−
    right: 0;
 
−
    top: 0;
 
−
    width: 11px;
 
−
    height: 100%;
 
−
    transform-origin: center right;
 
−
    transition: transform 0.3s, opacity 0.3s;
 
−
    opacity: 0; }
 
−
    .c-scrollbar:hover {
 
−
      transform: scaleX(1.45); }
 
−
    .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
 
−
      opacity: 1; }
 
−
    [data-scroll-direction="horizontal"] .c-scrollbar {
 
−
      width: 100%;
 
−
      height: 10px;
 
−
      top: auto;
 
−
      bottom: 0;
 
−
      transform: scaleY(1); }
 
−
      [data-scroll-direction="horizontal"] .c-scrollbar:hover {
 
−
        transform: scaleY(1.3); }
 
−
 
 
−
  .c-scrollbar_thumb {
 
−
    position: absolute;
 
−
    top: 0;
 
−
    right: 0;
 
−
    background-color: black;
 
−
    opacity: 0.5;
 
−
    width: 7px;
 
−
    border-radius: 10px;
 
−
    margin: 2px;
 
−
    cursor: -webkit-grab;
 
−
    cursor: grab; }
 
−
    .has-scroll-dragging .c-scrollbar_thumb {
 
−
      cursor: -webkit-grabbing;
 
−
      cursor: grabbing; }
 
−
    [data-scroll-direction="horizontal"] .c-scrollbar_thumb {
 
−
      right: auto;
 
−
      bottom: 0; }
 
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 02:18, 13 July 2021