6,581
edits
User:Gnai/Sandbox: Difference between revisions
Jump to navigation
Jump to search
More work on scrolling headers
(Testing sticky LCARS headers) |
(More work on scrolling headers) |
||
| Line 6: | Line 6: | ||
position: sticky; | position: sticky; | ||
background-color: white; | background-color: white; | ||
overflow-x: hidden; | |||
overflow-y: visible; | |||
top: 0; | top: 0; | ||
} | } | ||
}} | }} | ||
TESTING STICKY HEADERS | TESTING STICKY HEADERS | ||
TODO: | |||
-> figure out how to resize as scrolling past sidebar | |||
__NOTOC__ | |||
<div class="wrapper"> | <div class="wrapper"> | ||
<div class="LCARS"> | <div class="LCARS"> | ||
{{LCARS-bar-heading|Appearance|COLOR=steelblue}}</div> | {{LCARS-bar-heading|Appearance|COLOR=steelblue}}</div> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit quis diam quis tempor. In vitae purus tellus. Nam non velit eu felis aliquet condimentum vitae id purus. Suspendisse ac efficitur nisi. Ut vehicula eleifend libero, a mollis ante congue id. Curabitur nisl tortor, efficitur non facilisis nec, hendrerit ac lacus. Vivamus malesuada accumsan commodo. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit quis diam quis tempor. In vitae purus tellus. Nam non velit eu felis aliquet condimentum vitae id purus. Suspendisse ac efficitur nisi. Ut vehicula eleifend libero, a mollis ante congue id. Curabitur nisl tortor, efficitur non facilisis nec, hendrerit ac lacus. Vivamus malesuada accumsan commodo. | ||
| Line 24: | Line 30: | ||
Suspendisse sit amet lectus nulla. Morbi vitae ultrices lectus, sit amet volutpat ligula. Quisque tellus turpis, aliquam et congue ut, iaculis eget est. Donec eu auctor nunc, eget lobortis velit. Donec vel ante varius eros sollicitudin semper. Morbi id mollis erat. Aliquam molestie urna vel porta gravida. Pellentesque interdum, purus nec viverra consequat, nunc tellus tempor ex, ac venenatis purus erat vitae est. Morbi mollis pretium dapibus. Nam finibus, felis in suscipit porta, velit mauris aliquet odio, vel bibendum nunc eros et sem. Vivamus at vestibulum dolor. Mauris finibus, est vel hendrerit tristique, lacus nisi ultrices augue, a egestas diam ante vel odio. Duis interdum velit vitae molestie rhoncus. Praesent ornare mi enim, id faucibus tortor tristique et. Fusce maximus metus et mauris luctus, et condimentum tortor blandit. Integer dignissim id quam eu condimentum. | Suspendisse sit amet lectus nulla. Morbi vitae ultrices lectus, sit amet volutpat ligula. Quisque tellus turpis, aliquam et congue ut, iaculis eget est. Donec eu auctor nunc, eget lobortis velit. Donec vel ante varius eros sollicitudin semper. Morbi id mollis erat. Aliquam molestie urna vel porta gravida. Pellentesque interdum, purus nec viverra consequat, nunc tellus tempor ex, ac venenatis purus erat vitae est. Morbi mollis pretium dapibus. Nam finibus, felis in suscipit porta, velit mauris aliquet odio, vel bibendum nunc eros et sem. Vivamus at vestibulum dolor. Mauris finibus, est vel hendrerit tristique, lacus nisi ultrices augue, a egestas diam ante vel odio. Duis interdum velit vitae molestie rhoncus. Praesent ornare mi enim, id faucibus tortor tristique et. Fusce maximus metus et mauris luctus, et condimentum tortor blandit. Integer dignissim id quam eu condimentum. | ||
</div> | </div> | ||
{{LCARS-Navbar | |||
|Image = Gnai.png | |||
|FirstName = | |||
|LastName = Gnai | |||
|Ship = Artemis-A | |||
|UserName = Gnai | |||
|Rank = Ensign | |||
|Style = PIC | |||
|Post = Science Officer | |||
|Color = Blue | |||
|Species = [[Galadoran]] | |||
|Gender = None | |||
|Pronouns = it/its | |||
|Serial = PS - 125 - 712 | |||
|BirthMonth = 09 | |||
|BirthDate = 26 | |||
|BirthYear = 2374 | |||
|BirthPlace = Anan City, Galador 2 | |||
|Extra = | |||
|}} | |||
<div class="wrapper"> | <div class="wrapper"> | ||
<div class="LCARS"> | <div class="LCARS"> | ||
{{LCARS-bar-heading|Early Life|COLOR=steelblue}}</div> | {{LCARS-bar-heading|Early Life|COLOR=steelblue}}</div> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit quis diam quis tempor. In vitae purus tellus. Nam non velit eu felis aliquet condimentum vitae id purus. Suspendisse ac efficitur nisi. Ut vehicula eleifend libero, a mollis ante congue id. Curabitur nisl tortor, efficitur non facilisis nec, hendrerit ac lacus. Vivamus malesuada accumsan commodo. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit quis diam quis tempor. In vitae purus tellus. Nam non velit eu felis aliquet condimentum vitae id purus. Suspendisse ac efficitur nisi. Ut vehicula eleifend libero, a mollis ante congue id. Curabitur nisl tortor, efficitur non facilisis nec, hendrerit ac lacus. Vivamus malesuada accumsan commodo. | ||
| Line 40: | Line 63: | ||
Suspendisse sit amet lectus nulla. Morbi vitae ultrices lectus, sit amet volutpat ligula. Quisque tellus turpis, aliquam et congue ut, iaculis eget est. Donec eu auctor nunc, eget lobortis velit. Donec vel ante varius eros sollicitudin semper. Morbi id mollis erat. Aliquam molestie urna vel porta gravida. Pellentesque interdum, purus nec viverra consequat, nunc tellus tempor ex, ac venenatis purus erat vitae est. Morbi mollis pretium dapibus. Nam finibus, felis in suscipit porta, velit mauris aliquet odio, vel bibendum nunc eros et sem. Vivamus at vestibulum dolor. Mauris finibus, est vel hendrerit tristique, lacus nisi ultrices augue, a egestas diam ante vel odio. Duis interdum velit vitae molestie rhoncus. Praesent ornare mi enim, id faucibus tortor tristique et. Fusce maximus metus et mauris luctus, et condimentum tortor blandit. Integer dignissim id quam eu condimentum. | Suspendisse sit amet lectus nulla. Morbi vitae ultrices lectus, sit amet volutpat ligula. Quisque tellus turpis, aliquam et congue ut, iaculis eget est. Donec eu auctor nunc, eget lobortis velit. Donec vel ante varius eros sollicitudin semper. Morbi id mollis erat. Aliquam molestie urna vel porta gravida. Pellentesque interdum, purus nec viverra consequat, nunc tellus tempor ex, ac venenatis purus erat vitae est. Morbi mollis pretium dapibus. Nam finibus, felis in suscipit porta, velit mauris aliquet odio, vel bibendum nunc eros et sem. Vivamus at vestibulum dolor. Mauris finibus, est vel hendrerit tristique, lacus nisi ultrices augue, a egestas diam ante vel odio. Duis interdum velit vitae molestie rhoncus. Praesent ornare mi enim, id faucibus tortor tristique et. Fusce maximus metus et mauris luctus, et condimentum tortor blandit. Integer dignissim id quam eu condimentum. | ||
</div> | |||
<div class="wrapper"> | |||
<div class="LCARS"> | |||
{{LCARS-bar-heading|Service|COLOR=steelblue}}</div> | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit quis diam quis tempor. In vitae purus tellus. Nam non velit eu felis aliquet condimentum vitae id purus. Suspendisse ac efficitur nisi. Ut vehicula eleifend libero, a mollis ante congue id. Curabitur nisl tortor, efficitur non facilisis nec, hendrerit ac lacus. Vivamus malesuada accumsan commodo. | |||
Morbi elit est, mattis vitae ligula id, suscipit volutpat velit. Vestibulum erat felis, consectetur in ipsum vel, sollicitudin vestibulum nisl. Vestibulum tempus sollicitudin lectus, sed efficitur augue blandit sed. Praesent finibus aliquet diam vel mollis. Proin ac mi elementum, rutrum massa sed, porta augue. Mauris ac gravida massa. Sed augue justo, sagittis quis malesuada non, laoreet non diam. Duis pharetra malesuada metus sit amet commodo. Morbi mattis nibh risus, et malesuada orci imperdiet ac. Donec felis sem, tincidunt in tincidunt in, commodo vitae mauris. Nunc posuere, lectus eu vestibulum interdum, leo leo condimentum dui, ac egestas ipsum odio vitae justo. | |||
Donec blandit hendrerit maximus. Nulla scelerisque id erat quis tincidunt. In libero justo, egestas non varius quis, maximus efficitur sapien. Nullam at magna arcu. Praesent pharetra non augue sit amet hendrerit. Cras ornare quam sit amet urna pharetra lobortis. Sed pulvinar pellentesque lorem et maximus. Suspendisse nec nisi auctor, tincidunt ante quis, aliquam arcu. Praesent a mi iaculis, suscipit sem vel, lobortis neque. Nunc eget lorem ipsum. Suspendisse potenti. Vivamus porta congue nulla id hendrerit. Donec ante justo, facilisis ut rutrum a, maximus vel neque. Nam in eros condimentum, ornare nunc quis, dignissim nisl. Praesent laoreet ligula in tristique posuere. Donec et est a mauris sollicitudin blandit ut nec augue. | |||
Vestibulum vitae sem elit. Etiam luctus euismod neque et maximus. Donec eleifend, orci ut pulvinar fermentum, massa ante pellentesque nunc, et sollicitudin nunc tellus ut dui. Vestibulum vehicula nibh et ligula volutpat, vel bibendum dui facilisis. Vestibulum luctus velit nec sem pulvinar rhoncus. Nullam tristique pellentesque dui, sed aliquet libero consectetur id. Nunc dictum urna et libero pretium iaculis. In vestibulum rhoncus diam, nec vehicula odio consectetur ac. Integer efficitur sapien ornare tristique placerat. | |||
Suspendisse sit amet lectus nulla. Morbi vitae ultrices lectus, sit amet volutpat ligula. Quisque tellus turpis, aliquam et congue ut, iaculis eget est. Donec eu auctor nunc, eget lobortis velit. Donec vel ante varius eros sollicitudin semper. Morbi id mollis erat. Aliquam molestie urna vel porta gravida. Pellentesque interdum, purus nec viverra consequat, nunc tellus tempor ex, ac venenatis purus erat vitae est. Morbi mollis pretium dapibus. Nam finibus, felis in suscipit porta, velit mauris aliquet odio, vel bibendum nunc eros et sem. Vivamus at vestibulum dolor. Mauris finibus, est vel hendrerit tristique, lacus nisi ultrices augue, a egestas diam ante vel odio. Duis interdum velit vitae molestie rhoncus. Praesent ornare mi enim, id faucibus tortor tristique et. Fusce maximus metus et mauris luctus, et condimentum tortor blandit. Integer dignissim id quam eu condimentum. | |||
</div> | </div> | ||
<div class="wrapper"> | <div class="wrapper"> | ||
<div class="LCARS"> | <div class="LCARS"> | ||
| Line 55: | Line 89: | ||
Suspendisse sit amet lectus nulla. Morbi vitae ultrices lectus, sit amet volutpat ligula. Quisque tellus turpis, aliquam et congue ut, iaculis eget est. Donec eu auctor nunc, eget lobortis velit. Donec vel ante varius eros sollicitudin semper. Morbi id mollis erat. Aliquam molestie urna vel porta gravida. Pellentesque interdum, purus nec viverra consequat, nunc tellus tempor ex, ac venenatis purus erat vitae est. Morbi mollis pretium dapibus. Nam finibus, felis in suscipit porta, velit mauris aliquet odio, vel bibendum nunc eros et sem. Vivamus at vestibulum dolor. Mauris finibus, est vel hendrerit tristique, lacus nisi ultrices augue, a egestas diam ante vel odio. Duis interdum velit vitae molestie rhoncus. Praesent ornare mi enim, id faucibus tortor tristique et. Fusce maximus metus et mauris luctus, et condimentum tortor blandit. Integer dignissim id quam eu condimentum. | Suspendisse sit amet lectus nulla. Morbi vitae ultrices lectus, sit amet volutpat ligula. Quisque tellus turpis, aliquam et congue ut, iaculis eget est. Donec eu auctor nunc, eget lobortis velit. Donec vel ante varius eros sollicitudin semper. Morbi id mollis erat. Aliquam molestie urna vel porta gravida. Pellentesque interdum, purus nec viverra consequat, nunc tellus tempor ex, ac venenatis purus erat vitae est. Morbi mollis pretium dapibus. Nam finibus, felis in suscipit porta, velit mauris aliquet odio, vel bibendum nunc eros et sem. Vivamus at vestibulum dolor. Mauris finibus, est vel hendrerit tristique, lacus nisi ultrices augue, a egestas diam ante vel odio. Duis interdum velit vitae molestie rhoncus. Praesent ornare mi enim, id faucibus tortor tristique et. Fusce maximus metus et mauris luctus, et condimentum tortor blandit. Integer dignissim id quam eu condimentum. | ||
</div> | </div> | ||