_768up.less 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. /******************************************************************
  2. Site Name:
  3. Author:
  4. Stylesheet: Tablet & Small Desktop Stylesheet
  5. Here's where you can start getting into the good stuff.
  6. This size will work on iPads, other tablets, and desktops.
  7. So you can start working with more styles, background images,
  8. and other resources. You'll also notice the grid starts to
  9. come into play. Have fun!
  10. ******************************************************************/
  11. /*********************
  12. GENERAL STYLES
  13. *********************/
  14. body {}
  15. /*********************
  16. LAYOUT & GRID STYLES
  17. *********************/
  18. .wrap {
  19. max-width: 1140px;
  20. }
  21. /*********************
  22. HEADER STYLES
  23. *********************/
  24. .header {}
  25. #logo {}
  26. /*********************
  27. NAVIGATION STYLES
  28. *********************/
  29. .nav {
  30. background: #eee;
  31. border: 0;
  32. li {
  33. float: left;
  34. position: relative;
  35. a {
  36. border-bottom: 0;
  37. /*
  38. you can use hover styles here even though this size
  39. has the possibility of being a mobile device.
  40. */
  41. &:hover, &:focus {
  42. background-color: #dedede;
  43. }
  44. }
  45. &:first-child {}
  46. &:last-child {}
  47. /*
  48. plan your menus and drop-downs wisely.
  49. */
  50. ul.sub-menu,
  51. ul.children {
  52. margin-top: 0;
  53. border: 1px solid #ccc;
  54. border-top: 0;
  55. position: absolute;
  56. display: none;
  57. z-index: 8999;
  58. li {
  59. a {
  60. padding-left: 10px;
  61. border-right: 0;
  62. display: block;
  63. width: 180px;
  64. border-bottom: 1px solid #ccc;
  65. &:hover,
  66. &:focus {}
  67. &:link {}
  68. }
  69. &:first-child {}
  70. &:last-child {
  71. a {
  72. border-bottom: 0;
  73. }
  74. }
  75. /*
  76. if you need to go deeper, go nuts
  77. just remember deeper menus suck
  78. for usability. k, bai.
  79. */
  80. ul {}
  81. }
  82. /* highlight sub-menu current page */
  83. li.current-menu-item,
  84. li.current_page_item,
  85. li.current-page-ancestor {
  86. a {}
  87. }
  88. }
  89. /* showing sub-menus */
  90. &:hover ul {
  91. top: auto;
  92. display: block;
  93. }
  94. } /* end .menu ul li */
  95. /* highlight current page */
  96. li.current-menu-item,
  97. li.current_page_item,
  98. li.current-page-ancestor {
  99. a {}
  100. } /* end current highlighters */
  101. } /* end .nav */
  102. /*********************
  103. SIDEBARS & ASIDES
  104. *********************/
  105. .sidebar {
  106. margin-top: 2.2em;
  107. }
  108. .widgettitle {
  109. border-bottom: 2px solid #444;
  110. margin-bottom: 0.75em;
  111. }
  112. .widget {
  113. padding: 0 10px;
  114. margin: 2.2em 0;
  115. ul {
  116. li {
  117. margin-bottom: 0.75em;
  118. &:first-child {}
  119. &:last-child {}
  120. a {}
  121. /* deep nesting */
  122. ul {
  123. margin-top: 0.75em;
  124. padding-left: 1em;
  125. }
  126. }
  127. }
  128. }
  129. /* links widget */
  130. .widget_links {}
  131. .widget_links ul {}
  132. .widget_links ul li {}
  133. .widget_links ul li a {}
  134. /* meta widget */
  135. .widget_meta {}
  136. .widget_meta ul {}
  137. .widget_meta ul li {}
  138. .widget_meta ul li a {}
  139. /* pages widget */
  140. .widget_pages {}
  141. .widget_pages ul {}
  142. .widget_pages ul li {}
  143. .widget_pages ul li a {}
  144. /* recent-posts widget */
  145. .widget_recent_entries {}
  146. .widget_recent_entries ul {}
  147. .widget_recent_entries ul li {}
  148. .widget_recent_entries ul li a {}
  149. /* archives widget */
  150. .widget_archive {}
  151. .widget_archive ul {}
  152. .widget_archive ul li {}
  153. .widget_archive ul li a {}
  154. .widget_archive select {}
  155. .widget_archive option {}
  156. /* tag-cloud widget */
  157. .widget_links {}
  158. .widget_links li:after {}
  159. .widget_links li:before {}
  160. .widget_tag_cloud {}
  161. .widget_tag_cloud a {}
  162. .widget_tag_cloud a:after {}
  163. .widget_tag_cloud a:before {}
  164. /* calendar widget */
  165. .widget_calendar {}
  166. #calendar_wrap {}
  167. #calendar_wrap th {}
  168. #calendar_wrap td {}
  169. #wp-calendar tr td {}
  170. #wp-calendar caption {}
  171. #wp-calendar a {}
  172. #wp-calendar #today {}
  173. #wp-calendar #prev {}
  174. #wp-calendar #next {}
  175. #wp-calendar #next a {}
  176. #wp-calendar #prev a {}
  177. /* category widget */
  178. .widget_categories {}
  179. .widget_categories ul {}
  180. .widget_categories ul li {}
  181. .widget_categories ul ul.children {}
  182. .widget_categories a {}
  183. .widget_categories select{}
  184. .widget_categories select#cat {}
  185. .widget_categories select.postform {}
  186. .widget_categories option {}
  187. .widget_categories .level-0 {}
  188. .widget_categories .level-1 {}
  189. .widget_categories .level-2 {}
  190. .widget_categories .level-3 {}
  191. /* recent-comments widget */
  192. .recentcomments {}
  193. #recentcomments {}
  194. #recentcomments li {}
  195. #recentcomments li a {}
  196. .widget_recent_comments {}
  197. /* search widget */
  198. #searchform {}
  199. .widget_search {}
  200. .screen-reader-text {}
  201. /* text widget */
  202. .textwidget {}
  203. .widget_text {}
  204. .textwidget p {}
  205. /*********************
  206. FOOTER STYLES
  207. *********************/
  208. /*
  209. you'll probably need to do quite a bit
  210. of overriding here if you styled them for
  211. mobile. Make sure to double check these!
  212. */
  213. .footer-links {
  214. ul {
  215. li {
  216. a {
  217. &:hover {}
  218. }
  219. /*
  220. be careful with the depth of your menus.
  221. it's very rare to have multi-depth menus in
  222. the footer.
  223. */
  224. ul {}
  225. }
  226. }
  227. } /* end .footer-links */