I am working on customizing the Venture theme at virginiamonks.org, and things appear to be brittle in that fairly unremarkable CSS changes are breaking all CSS and presenting the page without any CSS applied at all.
I tried to override colors for the menu, adding to the end of the stylesheet:
li.site-nav__item
{
font-weight: bold;
}
li.site-nav__item a
{
color: #eeeeee;
}
li.site-nav__item li.site-nav__dropdown-container a
{
color: #2ba890;
}
li.site-nav__item a:visited
{
color: #c0c0c0;
}
li.site-nav__item li.site-nav__dropdown-container a:visited
{
color #000000;
}
li.site-nav__item a:hover
{
color: #ffffff;
}
li.site-nav__item li.site-nav__dropdown-container a:hover
{
color: #303030;
}
I’m not sure what in this triggered the reaction. I was able to isolate one entry by commenting entries in or out, but I want to understand more than which lines trigger bad display.
A few questions:
1: Where is the best place to work on colors, font-weight, etc. for menu items, and what should I be reading?
2: Am I running afoul of SASS preprocessing? If so, what is the issue?
3: How can I make routine CSS changes at the end of a file so that I won’t trigger failure to display a styled page?