edryd.org

some of my neat stuff
git clone git://edryd.org/edryd.org
Log | Files | Refs | LICENSE

custom.css (2025B)

      1 .links a {
      2   color: #111;
      3   text-decoration: none;
      4 }
      5 
      6 .text-med {
      7   font-size: 105%
      8 }
      9 
     10 .text-inc {
     11   font-size: 125%
     12 }
     13 
     14 .slant-up {
     15   clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
     16 }
     17 
     18 .slant-t-up {
     19   clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
     20 }
     21 
     22 .pt-7 {
     23   padding-top: 9rem !important;
     24 }
     25 
     26 .change-icon > .fa + .fa,
     27 .change-icon:hover > .fa {
     28   display: none;
     29 }
     30 .change-icon:hover > .fa + .fa {
     31   display: inherit;
     32 }
     33 
     34 /* 404 page */
     35 .error {
     36   margin: 10px auto;
     37   max-width: 600px;
     38   text-align: center;
     39   h1 {
     40     margin: 30px 0;
     41     font-size: 10em;
     42     line-height: 1;
     43     letter-spacing: -1px;
     44   }
     45 }
     46 
     47 .btn-effect a {
     48   padding: 0 20px;
     49   height: 45px;
     50   line-height: 45px;
     51   position: relative;
     52   display: inline-block;
     53   margin: 15px 25px;
     54   letter-spacing: 1px;
     55   font-weight: 400;
     56   text-shadow: 0 0 1px rgba(255,255,255,0.3);
     57 }
     58 
     59 .btn-effect a::before,
     60 .btn-effect a::after {
     61   position: absolute;
     62   width: 45px;
     63   height: 1px;
     64   background: #777;
     65   content: '';
     66   -webkit-transition: all 0.3s;
     67   -moz-transition: all 0.3s;
     68   transition: all 0.3s;
     69   pointer-events: none;
     70 }
     71 
     72 .btn-effect a::before {
     73   top: 0;
     74   left: 0;
     75   -webkit-transform: rotate(90deg);
     76   -moz-transform: rotate(90deg);
     77   transform: rotate(90deg);
     78   -webkit-transform-origin: 0 0;
     79   -moz-transform-origin: 0 0;
     80   transform-origin: 0 0;
     81 }
     82 
     83 .btn-effect a::after {
     84   right: 0;
     85   bottom: 0;
     86   -webkit-transform: rotate(90deg);
     87   -moz-transform: rotate(90deg);
     88   transform: rotate(90deg);
     89   -webkit-transform-origin: 100% 0;
     90   -moz-transform-origin: 100% 0;
     91   transform-origin: 100% 0;
     92 }
     93 
     94 .btn-effect a:hover::before,
     95 .btn-effect a:focus::before {
     96   left: 50%;
     97   -webkit-transform: rotate(0deg) translateX(-50%);
     98   -moz-transform: rotate(0deg) translateX(-50%);
     99   transform: rotate(0deg) translateX(-50%);
    100 }
    101 
    102 .btn-effect a:hover::after,
    103 .btn-effect a:focus::after {
    104   right: 50%;
    105   -webkit-transform: rotate(0deg) translateX(50%);
    106   -moz-transform: rotate(0deg) translateX(50%);
    107   transform: rotate(0deg) translateX(50%);
    108 }