Recipes

• Fit div to text length and center div in page
  
  

  h4, .h4 {
    border-left: 4px solid #dee2e6;
    padding-left: 20px;
    border-right: 4px solid #dee2e6;
    padding-right: 3px;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    margin: 0 auto;
  }

  • I wanted to create the effect with 2 bars on both sides of the text. Since the container stretched across the page, the right bar would be at the edge of the page.
    • Can also do other things like creating a box or an effect around the text and not across the page
  • width: max-content dynamically adjusts the length of the container to the length of the content
    • The multiple width attributes are so this works for different browsers (min-content works for Chrome).
    • See Understanding min-content, max-content, and fit-content in CSS for explanation of other similar attributes
  • margin: 0 auto positions the container in the center of the page

• Navbar Styling

  .navbar-inverse {
    background-color: #000000;
    border-color: #000000;
    font-family: 'Roboto', sans-serif;
  }

• Import Font

  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

  • Copied from google fonts site

• Import Font from Local Source (Docs)

  @font-face {
    font-family: 'FiraCode-Retina';
    src: local('Fira Code Retina'), local('FiraCode-Retina'), url('/fonts/FiraCode-Retina.ttf') format('truetype');
  }

  • local specifies a font name to look for on the user’s device
  • font-family specifies the name you’ll use to refer to it as a property in a rule
  • format says the type of font file being used as the source

• .ribbon-highlight

  • I use this to style my “Example” highlight

  • Whenever adjusting my main font (e.g. changing font-family), sometimes the text becomes uncentered. When this happens, future me needs to adjust the top property

    .ribbon-highlight:before{
      top:0.25em;
    }