Yt2.5 Bookmarks

css tabs info

Learn from https://webdesignerhut.com/create-pure-css-tabs/
Convert to html with markdown_py and bash.
future wishlist: add submenus (by smaller headings?), make into js web-app(pwa)

Template

css, html skel

<style>.tabs{float:none;padding:0;margin:1rem auto}.tabs li{display:block}.labels:after{content:'';display:table;clear:both}.tabs label{display:inline-block;float:left;padding:10px 20px;color:#fff;background:#2c3e50;margin-left:3px}.tabs label:focus{background:#3498db}.tabs label:hover{background:#3498db}.tab-content{display:none;width:98%;padding-left:10px;margin:1px;border:1px solid #ccc;border-top:.5rem solid #08c}.tabs input[type=radio]{display:none}[id^=tab]:checked~div[id^=tab-content]{display:block}

</style>
<body>
<ul class="tabs">
  <li class="labels">
 	<label for="tab##" id="label##" tabindex="##">Title</label>
 	<label for=...></label>
 	....
  </li>

  <li>
	<input type="radio" checked name="tabs" id="tab##">
    <div id="tab-content##" class="tab-content">
		<h3>Title</h3>
		<!-- Your Content Here -->
	</div>
  </li>

  <li> <input type...> <div id="tab...> <h3></h3>
  <h2>Linux</h2>
	<p><a href="link">quidsup</a><br />
	<a ...> </a><br />
	...
	</p>
  </li>
  ...
</ul>  
</body>

bash script v1: open file link
$input has h2, links, and some text in it

## heading2
[link name](http://)
[](), []()

[]()

## h2
[]()
some text

output html sandwhich between $headOut, does not include style for text area

<!DOCTYPE><html>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"
name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Yt2.5 Bookmarks</TITLE>
<head>
   <base target="_blank"><style>.tabs{float:none;padding:0;margin:1rem auto}.tabs li{display:block}.labels:after{content:'';display:table;clear:both}.tabs label{display:inline-block;float:left;padding:10px 20px;color:#fff;background:#2c3e50;margin-left:3px}.tabs label:focus{background:#3498db}.tabs label:hover{background:#3498db}.tab-content{display:none;width:98%;padding-left:10px;margin:1px;border:1px solid #ccc;border-top:.5rem solid #08c}.tabs input[type=radio]{display:none}[id^=tab]:checked~div[id^=tab-content]{display:block}
h2 {counter-reset: section;  list-style-type: none;} 
a::before{counter-increment: section; content: counter(section) ": ";}
</style>
</head>
<body>
<!-- markdown content here-->
</body>
</html>

games

Entertaniment

cartoon / animated

Tech

tech personnel

code (duplicate)

clips

music

misc / search

cars

skate

css tabs info

Template