daily pastebin goal
85%
SHARE
TWEET

Bootstrap4 custom.css

stom66 Nov 14th, 2017 (edited) 33 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. /* Bootstrap4 footer styles
  32. -------------------------------------------------- */
  33. footer {
  34.     height: 80px;               /* Set the fixed height of the footer here */
  35.     line-height: 60px;          /* Vertically center the text there */
  36. }
  37. html.sticky-footer {
  38.     position: relative;
  39.     min-height: 100%;
  40. }
  41. body.sticky-footer {
  42.     margin-bottom: 80px;    /* Margin bottom by footer height */
  43. }
  44. footer.sticky-footer {
  45.     position: absolute;
  46.     bottom: 0;
  47.     width: 100%;
  48. }
  49.  
  50.  
  51. /* Custom text utilities
  52. -------------------------------------------------- */
  53. .text-small-caps {
  54.     font-variant: small-caps;
  55. }
  56.  
  57. /* Customise header fonts
  58. -------------------------------------------------- */
  59. h1, h2, h3, h4, h5, h6 {
  60.     font-family: 'Oswald', sans-serif;
  61.     text-shadow: 0 0.05rem 0.1rem rgba(0,0,0,.5);
  62. }
  63.  
  64. /* Customise navbar fonts
  65. -------------------------------------------------- */
  66. nav {
  67.     font-family: 'Chau Philomene One', sans-serif;
  68. }
  69.  
  70.  
  71. /* Set up transitions
  72. -------------------------------------------------- */
  73. a {
  74.     transition: all 0.2s linear;
  75. }
  76.  
  77. /* Customise embedded sample code
  78. -------------------------------------------------- */
  79. pre > code {
  80.     display: inline-block;
  81.     background-color: #ccc;
  82.     padding: 0.2em 0.4em;
  83.     overflow: hidden;
  84.     border-radius: 5px 0;
  85. }
  86.  
  87. /* Add central expanding underline to links
  88.    Source: Tobias Ahlin: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/
  89. -------------------------------------------------- */
  90. main a {
  91.     position: relative;
  92. }
  93. main a:before {
  94.     content: "";
  95.     position: absolute;
  96.     width: 100%;
  97.     height: 1px;
  98.     bottom: 0;
  99.     left: 0;
  100.     background-color: darken($blue, 15%);
  101.     visibility: hidden;
  102.     -webkit-transform: scaleX(0);
  103.     transform: scaleX(0);
  104.     -webkit-transition: all 0.3s ease-in-out 0s;
  105.     transition: all 0.3s ease-in-out 0s;
  106. }
  107. main a:hover:before {
  108.     visibility: visible;
  109.     -webkit-transform: scaleX(1);
  110.     transform: scaleX(1);
  111. }
  112.  
  113. /* Navbar caret animations
  114. -------------------------------------------------- */
  115. @keyframes swing {
  116.     0%, 100% {  transform: rotate(-30deg);  }
  117.     20% {       transform:scale(.95);       }
  118.     50% {       transform: rotate(30deg);   }
  119.     80% {       transform:scale(.95);       }
  120. }
  121. nav .dropdown-toggle:hover:after {  
  122.     -webkit-animation: swing 2s infinite;
  123.             animation: swing 2s infinite;
  124. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top