_481up.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /******************************************************************
  2. Site Name:
  3. Author:
  4. Stylesheet: 481px and Up Stylesheet
  5. This stylesheet is loaded for larger devices. It's set to
  6. 481px because at 480px it would load on a landscaped iPhone.
  7. This isn't ideal because then you would be loading all those
  8. extra styles on that same mobile connection.
  9. A word of warning. This size COULD be a larger mobile device,
  10. so you still want to keep it pretty light and simply expand
  11. upon your base.scss styles.
  12. ******************************************************************/
  13. /*
  14. IMPORTANT NOTE ABOUT SASS 3.3 & UP
  15. You can't use @extend within media queries
  16. anymore, so just be aware that if you drop
  17. them in here, they won't work.
  18. */
  19. /*********************
  20. NAVIGATION STYLES
  21. *********************/
  22. .nav {}
  23. /* .menu is clearfixed inside mixins.scss */
  24. .menu {
  25. ul {
  26. li {
  27. a {
  28. /*
  29. you can use hover styles here even though this size
  30. has the possibility of being a mobile device.
  31. */
  32. &:hover, &:focus {
  33. }
  34. }
  35. &:first-child {}
  36. &:last-child {}
  37. /*
  38. plan your menus and drop-downs wisely.
  39. */
  40. ul.sub-menu,
  41. ul.children {
  42. li {
  43. a {
  44. &:hover,
  45. &:focus {}
  46. &:link {}
  47. }
  48. &:first-child {}
  49. &:last-child {}
  50. }
  51. }
  52. } /* end .menu ul li */
  53. /* highlight current page */
  54. li.current-menu-item,
  55. li.current_page_item,
  56. li.current_page_ancestor {
  57. a {}
  58. } /* end current highlighters */
  59. } /* end .menu ul */
  60. } /* end .menu */
  61. /*********************
  62. POSTS & CONTENT STYLES
  63. *********************/
  64. /* entry content */
  65. .entry-content {
  66. /* at this larger size, we can start to align images */
  67. .alignleft, img.alignleft {
  68. margin-right: 1.5em;
  69. display: inline;
  70. float: left;
  71. }
  72. .alignright, img.alignright {
  73. margin-left: 1.5em;
  74. display: inline;
  75. float: right;
  76. }
  77. .aligncenter, img.aligncenter {
  78. margin-right: auto;
  79. margin-left: auto;
  80. display: block;
  81. clear: both;
  82. }
  83. } /* end .entry-content */
  84. /*********************
  85. FOOTER STYLES
  86. *********************/
  87. /*
  88. check your menus here. do they look good?
  89. do they need tweaking?
  90. */
  91. .footer-links {
  92. ul {
  93. li {}
  94. }
  95. } /* end .footer-links */