Frontend Notes: 07.12.2015
Ruby Monstas 07.12.2015 / protocol by Rebecca
Continuing styling the topbar
- Removing the margin from the H1 (logo section) to remove unnecessary space in the topbar (note that h1 elements etc always come with margins).
- We set the topbar and navigation to a fixed height of 48 pixels (like in the design mockup) and align the navigation to start on the same line as the logo by using vertical-align: middle.
- We put the topbar height of 48px in the variable $topbar-height and call it when needed. We will call it for example in the media queries for larger screens, but won’t use it for smaller screens to allow the topbar to stay flexible and adjust when the navigation elements break to the next line (on smaller screens).
styling breadcrumb navigation and admin things
- breadcrumb navigation is like a link-path (e.g. Home > Events > New Event)
- Adding the right colors to the nav elements, dark black as default and green on hover and stays green when clicked. Since we are using SASS we can nest these statements easily. We did this for the general links as well as the linking elements.
- Adding padding to the breadcrumb elements
Starting styling the content
- adding padding, white background color and round corners to the category class and also adding a thin line to the border bottom of the h1 (the h1 within the the category class).
- the h1, h2 (…), and p elements come with default margin, so we also remove the top margin from all of them for now since the extra margin moves the center element away, which we don’t want.
current state:
