daily pastebin goal
19%
SHARE
TWEET

Bootstrap4 custom.css

stom66 Nov 14th, 2017 (edited) 4 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* -----------------------------------------------
  2. Customisations to the Bootstrap4 theme go in this file.
  3. -------------------------------------------------- */
  4.  
  5. /* Import Fonts from Google
  6. -------------------------------------------------- */
  7. @import url('https://fonts.googleapis.com/css?family=Chau+Philomene+One|Oswald|Ropa+Sans');
  8.  
  9. /* Add a box-shadow to the viewport
  10. -------------------------------------------------- */
  11. html {
  12.     min-height:100%;
  13.     -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.25);
  14.             box-shadow: inset 0 0 5rem rgba(0,0,0,.25);
  15. }
  16.  
  17. /* Set up body backgrounds
  18. -------------------------------------------------- */
  19. body.background-img {
  20.     background-size: auto;
  21.     background-repeat: no-repeat;
  22.     background-position-y: bottom;
  23. }
  24.     body.background-treeline {
  25.         background-image: url("[[$theme_url]]/backgrounds/treeline_faded.png");
  26.     }
  27.     body.background-stars {
  28.         background-image: url("[[$theme_url]]/backgrounds/starry_sky_faded.png");
  29.     }
  30.  
  31. /* Set up transitions
  32. -------------------------------------------------- */
  33. a {
  34.     transition: all 0.2s linear;
  35. }
  36.  
  37. /* Customise header fonts
  38. -------------------------------------------------- */
  39. h1, h2, h3, h4, h5, h6 {
  40.     font-family: 'Oswald', sans-serif;
  41.     text-shadow: 0 0.05rem 0.1rem rgba(0,0,0,.5);
  42. }
  43.  
  44. /* Customise navbar fonts
  45. -------------------------------------------------- */
  46. nav {
  47.     font-family: 'Chau Philomene One', sans-serif;
  48. }
  49.  
  50. /* Customise embedded sample code
  51. -------------------------------------------------- */
  52. pre > code {
  53.     display: inline-block;
  54.     background-color: #ccc;
  55.     padding: 0.2em 0.4em;
  56.     overflow: hidden;
  57.     border-radius: 5px 0;
  58. }
  59.  
  60. /* Add central expanding underline to links
  61.    Source: Tobias Ahlin: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/
  62. -------------------------------------------------- */
  63. main a {
  64.     position: relative;
  65. }
  66. main a:before {
  67.     content: "";
  68.     position: absolute;
  69.     width: 100%;
  70.     height: 1px;
  71.     bottom: 0;
  72.     left: 0;
  73.     background-color: darken($blue, 15%);
  74.     visibility: hidden;
  75.     -webkit-transform: scaleX(0);
  76.     transform: scaleX(0);
  77.     -webkit-transition: all 0.3s ease-in-out 0s;
  78.     transition: all 0.3s ease-in-out 0s;
  79. }
  80. main a:hover:before {
  81.     visibility: visible;
  82.     -webkit-transform: scaleX(1);
  83.     transform: scaleX(1);
  84. }
  85.  
  86. /* Navbar caret animations
  87. -------------------------------------------------- */
  88. @keyframes swing {
  89.     0%, 100% {  transform: rotate(-30deg);  }
  90.     20% {       transform:scale(.95);       }
  91.     50% {       transform: rotate(30deg);   }
  92.     80% {       transform:scale(.95);       }
  93. }
  94. nav .dropdown-toggle:hover:after {  
  95.     -webkit-animation: swing 2s infinite;
  96.             animation: swing 2s infinite;
  97. }
RAW Paste Data
Top