save file

Author: javascript-2020

blog/html/blog-hdr/blog-hdr.html

@@ -0,0 +1,111 @@
+
+
+
+<blog-hdr v2.0>
+
+      <template shadowrootmode=open>
+      
+            <style>
+            
+  #root 
+    {margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;
+      border-bottom:1px solid lightgray;padding-bottom:20px;position:relative;
+      margin-bottom:20px;
+    }
+  
+  .icon
+    {cursor:pointer;border-radius:3px;border:1px solid gray;box-sizing:border-box;
+      width:38px;height:38px;
+    }
+  
+  .item
+    {display:inline-flex;align-items:center;text-align:center;background:buttonface;
+      border-radius:3px;border:1px solid lightgray;padding:5px 7px;
+    }
+  
+  .item-label
+    {}
+  
+  ::slotted(.title)
+    {text-align:center;position:absolute;left:0;right:0;top:0px;z-index:-1;margin:0 auto;color:blue;
+    }
+
+  
+  .date
+    {position:absolute;top:5px;right:5px;}
+  
+  a
+    {color:blue;}
+  a:visited
+    {color:blue;}
+
+  ::slotted(.visually-hidden)
+    {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
+            
+            </style>
+            
+            
+            <div id=root>
+            
+                  <a class=item href='/'>
+                        home
+                  </a>
+                  
+                  <a class=item href='/blog/index.html'>
+                        blog
+                  </a>
+
+                  <slot></slot>
+                  
+                  <slot name=seo-hdr class=visually-hidden></slot>
+                
+                  <div class=date>
+                        <slot name=date></slot>
+                  </div>
+                  
+            </div>
+            
+      </template>
+      
+      
+      <script>
+      
+(function blog_hdr({mod,dom,host}){
+
+  var obj   = {};
+  
+  
+        obj.initmod   = function(params){
+        }//initmod
+        
+        
+  //:
+  
+  
+  //:
+  
+  
+        obj.init    = async function(){
+        }//init
+        
+        
+  //:
+  
+  
+        obj.initdom   = function(rootnode){
+          
+              var root    = rootnode;
+              
+        }//initdom
+        
+        
+  //:
+  
+  
+  return obj;
+  
+})//blog_hdr
+
+      </script>
+      
+</blog-hdr>