| /** | |
| * dubCSS | |
| */ | |
| @keyframes semibreve { | |
| from { background:white } | |
| to { background:black } | |
| } | |
| @keyframes minim {} | |
| @keyframes crochet {} | |
| @keyframes quaver {} |
| /* svg */ | |
| svg { transform:rotateX(180deg); | |
| background:rgba(255,0,0,.1); outline:1px solid } | |
| path { stroke:red; fill:rgba(255,0,0,.1) } | |
| #slope { width:0; height:0; display:block; | |
| border-top:100px solid rgba(255,0,0,.1); | |
| border-left:161px solid rgba(255,0,0,.1); | |
| border-bottom:20px solid red; | |
| border-right:50px solid red; } |
| <input name=query placeholder="search"> | |
| <menu></menu> | |
| <script> | |
| console.clear(); | |
| document.addEventListener('DOMContentLoaded', function(){ | |
| chrome.bookmarks.getTree(function(results){ | |
| // 1. index browser bookmarks |
| /* Oracle HTML slide template */ | |
| * { font:normal 102%/1.62rem Avenir,Segoe UI,Roboto,sans-serif; | |
| text-decoration:none; padding:0; margin:0; box-sizing:border-box; | |
| color:#5f5f5f } | |
| em { font-family:Consolas,monospace; font-weight:bold } | |
| html { height:100% } | |
| html, footer { background:#dce3e4 } | |
| body { background:white; margin:1em } | |
| a, :visited, button { color:hsl(211,50%,50%) } | |
| footer strong { color:#f80000 } |
| /* Section headers */ | |
| header { display:flex; align-items:center } | |
| a { display:block; text-align:right; | |
| color:hsl(26,92%,59%); text-decoration:none } | |
| /*debug*/*{background:rgba(255,0,0,.1);outline:1px solid}/**/ | |
| body{margin:0} |
| /* District Business */ | |
| .web-section { display:flex; align-items:center; | |
| justify-content:space-between; | |
| margin:.6em } | |
| .web-section a { display:block; text-align:right; | |
| margin-left:1em; color:hsl(26,92%,59%); | |
| text-decoration:none } | |
| .web-section h2 { font-size:1.6rem; color:hsl(210,100%,37%) } | |
| .web-section a:after { content:'\00bb' } |
| /* Corporate Banner */ | |
| /** /*{background:rgba(255,0,0,.1);outline:1px solid}/**/ | |
| * { font:1.3rem/1.6rem Calibri; | |
| text-decoration:none; color:currentcolor } | |
| .banner > * { box-sizing:border-box } | |
| .banner >:first-child { font-size:2rem } | |
| .banner >:first-child:before { | |
| content:url(http://oraclegov.us/favicon-96x96.png) } | |
| .banner >:first-child:after { content:attr(title); |
| // alert('Hello world!'); |
This won't work out of the box on 12c, because of the migration from folders_g to Framework Folders.
The content comes from a WebCenter Content backend in the same domain.
The content is put into an auto-advancing carousel.
The carousel has an index that on hover changes the feature, and a parallax hover-scroller, which is awesome but probably not tablet-friendly.
| /* Red Stack */ | |
| body > a, | |
| body > a:before, | |
| body > a:after { background:rgba(255,0,0,.6); color:white; | |
| display:block; padding:1ex; margin:1px; | |
| perspective:100vw } | |
| /* | |
| these would be the boxy boxes with proper perspective | |
| https://desandro.github.io/3dtransforms/docs/perspective.html |
