ICC Alpha tweaks

icc-alpha-tweaks

1. Case layout
Problem: The bio box is too big and it needs to indicate that you can click on the name to see more details.


Fix:
    
    bio-box {
        font-size: 0.75em;
    }


and change it back to <h3>Trial Chamber I</h3>

Makes names links - (Would link to bios)

------
2. Main template
Problem: The logo and site title go over two lines on smaller devices

Fix:

http://sharepoint13vm.cloudapp.net/sites/icc/_catalogs/masterpage/icc/style/main.css line 194

h1.site-title {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1.4em;
    font-weight: 700;
    margin: 0;
}

@media screen and (max-width: 960px) {
  
    h1.site-title {
    	  font-size: 0.9em;
    }

}
------
3. Main template
Problem: The arrow for the language selector is outside the box 

Fix:
Delete 

<span class="icon icon-world"></span>

------
4. Main template
Problem: the top nav fixes on all devices. On smaller devices it covers half the screen - all the time! 

http://sharepoint13vm.cloudapp.net/sites/icc/_catalogs/masterpage/icc/script/main.js

Wrap the fix code (below) in a responsive if statement 

		if($(window).width() > 960){
			
		}


// fixed elements
		$('#s4-workspace').on('scroll', function(){
			
			// header
			var t = $(this).scrollTop();
			var h = $('.header-container:eq(0)').outerHeight();
			var f = $('body').hasClass('fixed');
			if(t >=  h && !f){
				$('body').addClass('fixed');
				$('#s4-workspace').before($('.utility-container:eq(0)'));
			}
			else if(t < h && f){
				$('body').removeClass('fixed');
				$('.header-container:eq(0)').after($('.utility-container:eq(0)'));
			}
			
------
5. Stage
Problem - the figure that is active needs to show in an "active" state, ie I am on that layout. So it would not be clickable and the box would be in the hover state (blue backgroud / white text)

Fix:
Active class on stage which page is on or use Sharepoint-generated class specific to page? 

------

6. Stage 
Problem: the stage children lists are not very robust and do not look great. 

Make tabs for Stage children using SP Blueprint tabs function

https://spblueprint.codeplex.com/documentation#widgets-tabs

-----

7. Case layout 
Problem: There are three images for the in the field section 
Fix: use in the SP Blueprint slider:

https://dl.dropboxusercontent.com/u/6082092/forinthefieldpartofcasepage.zip

Also I removed the tables from the markup and used the SP grid instead:
http://robertocarroll.com/icc-alpha/inthefield.html

------
8. Problem - the buttons are different heights: 

Fix: 

trial.css (line 553)

.icc-tilen {
   height: 7.7em;
}

------
9. Problem - no indication of which links in the footer have actual pages and which are blank

Fix:
I added a "inactive" class to the latest footer version. Please can you add it to the site css:

			.inactive > a {
   					 color: #81A3BD;
			}

With pt 4, you could do it that way if you prefer. Both would have the same result.