nordgedanken-github-io

git clone git://archive.git.mtrnord.blog/Nordgedanken/nordgedanken-github-io.git
Log | Files | Refs | README | LICENSE

_header.scss (2302B)

      1 #particles-js {
      2   background: $main;
      3   display: flex;
      4   vertical-align: bottom;
      5   width: 100%;
      6   min-height: 100vh;
      7   background-repeat: no-repeat;
      8   background-size: cover;
      9   background-attachment: fixed;
     10   .particles-js-canvas-el {
     11     width:100% !important;
     12     height:100vh !important;
     13   }
     14 }
     15 
     16 .header {
     17   z-index: 1;
     18   text-align: center;
     19   color:#FFF;
     20   position: absolute;
     21   top: 50%;
     22   left: 50%;
     23   margin: 0 auto;
     24   -webkit-transform: translate(-50%, -50%);
     25   transform: translate(-50%, -50%);
     26   .site-title {
     27     font-size: 50px;
     28     display: block;
     29     line-height: 1;
     30     color: #FFF;
     31     @media only screen and (min-width:$cut){
     32       margin: 0;
     33       font-size: 100px;
     34     }
     35   }
     36   .site-description {
     37     font-size: 20px;
     38     display: block;
     39     line-height: 1;
     40     color: #FFF;
     41     margin-top: 10px;
     42     @media only screen and (min-width:$cut){
     43       font-size: 40px;
     44     }
     45   }
     46 }
     47 
     48 .header-links {
     49   margin: 10px;
     50   .link {
     51     color: #FFF;
     52     text-decoration: none;
     53     font-size: 15px;
     54     margin: 10px;
     55     @media only screen and (min-width:$cut){
     56       font-size: 20px;
     57     }
     58   }
     59 }
     60 
     61 .header-icons {
     62   display: flex;
     63   justify-content: center;
     64   text-align: center;
     65   .icon {
     66     text-align: center;
     67     color: #FFF;
     68     width: 20px;
     69     height: 20px;
     70     font-size: 20px;
     71     padding: 10px;
     72     margin: 5px;
     73     border-radius: 50%;
     74     border: 2px solid #FFF;
     75     transition: all .7s;
     76     &:hover {
     77       color: $main;
     78       background: #FFF;
     79     }
     80     &:active {
     81       color: $main;
     82       background: #FFF;
     83     }
     84     @media only screen and (min-width:$cut) {
     85       width: 35px;
     86       height: 35px;
     87       font-size: 35px;
     88     }
     89   }
     90 }
     91 
     92 .down {
     93   color: #FFF;
     94   position: absolute;
     95   bottom: 25px;
     96   width: 100%;
     97   margin: 0 auto;
     98   display: block;
     99   text-align: center;
    100   font-size: 30px;
    101   cursor: pointer;
    102   .icon {
    103       position: absolute;
    104       -webkit-transform-style: preserve-3d;
    105       transform-style: preserve-3d;
    106       top: 50%;
    107       left: 50%;
    108       -webkit-transform: translate(-50%, -50%);
    109       transform: translate(-50%, -50%);
    110       width: 100px;
    111       height: 100px;
    112       fill: #fff;
    113       -webkit-animation: pulse 1.3s infinite;
    114       animation: pulse 1.3s infinite;
    115       &:hover {
    116         color: $sec;
    117       }
    118       &:active {
    119         color: $sec;
    120       }
    121   }
    122 }