Difference between revisions of "Template:Northeastern Boston/CSS"
(Replaced content with "<html> <style> @import url('http://fonts.googleapis.com/css?family=Montserrat:400,700'); @import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css')...") |
|||
Line 3: | Line 3: | ||
@import url('http://fonts.googleapis.com/css?family=Montserrat:400,700'); | @import url('http://fonts.googleapis.com/css?family=Montserrat:400,700'); | ||
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css'); | @import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css'); | ||
+ | |||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | *, *:before, *:after { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | html, body { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | font: 12px/1 'Montserrat', sans-serif; | ||
+ | color: #333; | ||
+ | background: #333; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | .wrapper { | ||
+ | display: flex; | ||
+ | min-height: 100%; | ||
+ | } | ||
+ | |||
+ | .sidebar { | ||
+ | position: absolute; | ||
+ | width: 220px; | ||
+ | } | ||
+ | |||
+ | .content { | ||
+ | flex: 1; | ||
+ | padding: 0px;####### | ||
+ | background: #191919; | ||
+ | box-shadow: 0 0 5px rgba(0,0,0,1); | ||
+ | transform: translate3d(0,0,0); | ||
+ | transition: transform .3s; | ||
+ | } | ||
+ | |||
+ | .content.isOpen { | ||
+ | transform: translate3d(220px,0,0); | ||
+ | background: #191919; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .button { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .button:before { | ||
+ | content: '\f0c9'; | ||
+ | font: 42px fontawesome; | ||
+ | } | ||
+ | |||
+ | /* Demo Navigation */ | ||
+ | |||
+ | .title { | ||
+ | font-size: 16px; | ||
+ | line-height: 50px; | ||
+ | text-align: center; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 7px; | ||
+ | color: #eee; | ||
+ | border-bottom: 1px solid #222; | ||
+ | background: #2a2a2a; | ||
+ | } | ||
+ | |||
+ | .nav li a { | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | padding: 15px 15px 15px 50px; | ||
+ | font-size: 14px; | ||
+ | color: #eee; | ||
+ | border-bottom: 1px solid #222; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .nav li a:before { | ||
+ | font: 14px fontawesome; | ||
+ | position: absolute; | ||
+ | top: 19px; | ||
+ | left: 20px; | ||
+ | } | ||
+ | |||
+ | .nav li:nth-child(1) a:before { content: '\f00a'; } | ||
+ | .nav li:nth-child(2) a:before { content: '\f1ae'; } | ||
+ | .nav li:nth-child(3) a:before { content: '\f0e8'; } | ||
+ | .nav li:nth-child(4) a:before { content: '\f085'; } | ||
+ | .nav li:nth-child(5) a:before { content: '\f040'; } | ||
+ | .nav li:nth-child(6) a:before { content: '\f02c'; } | ||
+ | .nav li:nth-child(7) a:before { content: '\f19c'; } | ||
+ | .nav li:nth-child(8) a:before { content: '\f007'; left: 23px; } | ||
+ | .nav li:nth-child(9) a:before { content: '\f004'; } | ||
+ | .nav li:nth-child(10) a:before { content: '\f080'; } | ||
+ | .nav li:nth-child(11) a:before { content: '\f140'; } | ||
+ | .nav li:nth-child(12) a:before { content: '\f108'; } | ||
+ | |||
+ | .nav li a:hover { | ||
+ | background: #444; | ||
+ | } | ||
+ | |||
+ | .nav li a.active { | ||
+ | box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222; | ||
+ | background: #444; | ||
+ | } | ||
+ | |||
+ | /* Demo Description */ | ||
+ | |||
+ | h1 { | ||
+ | margin: 25px 0 15px; | ||
+ | font-size: 28px; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 18px; | ||
+ | font-weight: 400; | ||
+ | color: #999; | ||
+ | } | ||
+ | |||
+ | /* Images */ | ||
+ | |||
+ | #comingSoon { | ||
+ | width: auto; | ||
+ | margin-left: -220px; | ||
+ | } | ||
+ | |||
+ | /* Fixing previously installed css -_- */ | ||
+ | .firstHeading { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | li { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | ul.nav { | ||
+ | line-height: inherit; | ||
+ | list-style-type: none; | ||
+ | margin: 0 0 0 0; | ||
+ | padding: 0; | ||
+ | list-style-image: none; | ||
+ | } | ||
+ | p { | ||
+ | margin: 0 0 0 0; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</html> | </html> |
Revision as of 03:25, 16 July 2015