<commit_before><style>
	#main-nav {
		/*background-image: url('/images/bgc.jpg');*/
		background-position: left;
		background-clip:content-box;
		background-repeat: no-repeat;
		background-position: center;

		border-bottom: 1px dashed #BBB; 
		position: relative;
		margin-bottom: 4em; 
	}

	.nav-msg h1 {
		font-size: 1rem; 
		font-weight: normal;
	}

	.nav-msg p {
		color: #BBB;
		/*margin-top: -.7em;*/
		margin-left: .3em; 
		margin-bottom: 1em; 
	}
	
	.arch-hook {
		margin-bottom: 1.5em; 
	}

	.arch-hook > span {
		display: inline-block;
		margin-right: 1em; 
		font-size: .3rem; 
		background-color: #BBB;
		color: #FEFEFE; 
		padding: .3em .6em;
		border-radius: 4px; 
	}

	a {
		color: inherit;
	}
	
	.about {
		position: absolute;
		background-color: #FFF;
		right: 0; 
		bottom: -.5em;
		top: 0;
	}

	.about > span {
		display: block;
	}


</style>

<nav id="main-nav">
	<div class="nav-msg">
		<h1><span style="color: #BBB;">var</span>Eczn*<span style="color: #BBB;">s Blog</span></h1>
		<p>Stay ... Stay ... </p>

		<div class="arch-hook">
			<span><a href="/categories">Categories</a></span>
			<span><a href="/blog/Vally%20and%20Me.html">About</a></span>
			<span><a href="/Links.html">Links</a></span>
		</div>
	</div>

<!-- 	<div class="about">
		<span><a id="_about" href="#">About</a></span>
		<span><a href="/blog/all/history.html">History</a></span>
		<span><a href="/blog/all">All</a></span>
		<span><a href="/links.html">Links</a></span>
	</div> -->
</nav><commit_msg>新 nav 样式<commit_after><style>
	#main-nav {
		background-position: left;
		background-clip:content-box;
		background-repeat: no-repeat;
		background-position: center;

		border-bottom: 1px solid #EEE; 
		position: relative;
		margin-bottom: 4em; 

		height: 666px; 
	}

	.nav-msg p {
		color: #BBB;
		/*margin-top: -.7em;*/
		margin-left: .3em; 
		margin-bottom: 1em; 
	}

	a {
		color: inherit;
	}

	.nav-top {
		position: absolute;
		top: 0; 
		left: 0; 
		width: 100%; 
		color: #585858; 
		font-size: .3rem; 
		text-align: center;
		transition: all .3s; 
	}
	
	.about {
		position: absolute;
		background-color: #FFF;
		right: 0; 
		bottom: -.5em;
		top: 0;
	}

	.about > span {
		display: block;
	}

	.nav-msg {
		position: relative;
	}

	.nav-msg .nav-title {
		line-height: 666px; 
		text-align: center; 
		font-weight: normal;
		cursor: pointer;
		transition: all .4s; 
		font-size: 0; 
	}

	.nav-title > span {
		font-size: 1rem; 
		transition: all .3s; 
	}

	.nav-checkbox {
		position: absolute;
		width: 80%; 
		height: 80%; 
		left: 10%; 
		top: 10%; 
		opacity: 0; 
		cursor: pointer;
	}

	.nav-checkbox:checked ~ .nav-title {
		background-color: #BBB; 
	}

	.nav-checkbox:checked ~ .nav-btns {
		visibility: visible;
		opacity: 1;
	}

	.nav-btns {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		font-size: 0; 
		position: absolute;
		top: 400px; 
		left: 50%; 
		transform: translateX(-50%);
		transition-property: all; 
		transition-duration: .3s; 
	}
	
	.nav-btns > span > a {
		font-size: 26px; 
		text-decoration: none; 
		cursor: pointer;
	}

	[shape], [shape-tri] {
		box-shadow: 0px 0px 0 #585858;
		transition: all .3s; 
	}

	[shape] {
		position: relative;
		width: 50px;
		height: 50px; 
		display: inline-block;
		line-height: 60px; 
		text-align: center;
		margin: 0 15px; 
		box-sizing: content-box; 
		border-radius: 6px; 
	}

	[shape-tri] {
		position: relative;
		width: 88px;
		height: 58px; 
		display: inline-block;
		line-height: 60px; 
		text-align: center;
		
		box-sizing: content-box; 
		border-radius: 6px; 
	}

	[shape]::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 0px;
		background-color: #BBB; 
		left: -5px;
		top: 0%;
		opacity: 0; 
		transform: translateY(-50%);
		transition: all .3s; 
	}

	[shape-tri]::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 0px;
		background-color: #BBB;
		left: 32px;
    	top: 7px;
		/* opacity: 0; */
		transform: translateY(-50%) rotate(37deg);
		transition: all .3s;
	}

	.nav-checkbox:checked ~ .nav-btns [shape]::after {
		opacity: 1; 
		height: 10px;
		top: 50%;
	}

	.nav-checkbox:checked ~ .nav-btns [shape-tri]::after {
		left: 24px;
		top: 17px;
		height: 10px;
	}

	[FFF-to-58] {
		color: #FFF; 
	}

	.nav-checkbox:checked ~ * [FFF-to-58], 
	.nav-checkbox:checked ~ [FFF-to-58] {
		color: #585858; 
	}

	[shape] *, [shape-tri] a {
		position: relative;
		display: inline-block;
		transition: all .2s;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		line-height: 50px;
		opacity: 0; 
	}

	[shape-tri] a {
		top: 20%; 
		height: 80px;
		z-index: 10; 
	}

	[circle] *, [rectangle] *, [shape-tri] a {
		transform: scale(1.5);
	}

	[circle]:hover *, [rectangle]:hover * {
		opacity: 1; 
		transform: scale(1);
	}

	[circle]:hover {
		box-shadow: 25px -20px 0px -20px #585858;
	}

	[diamond]:hover * {
		opacity: 1; 
		transform: rotate(-45deg) scale(1);
	}

	[diamond]:hover {
		transform: rotate(45deg) translateY(-5px) translateX(-5px);
		box-shadow:
			9px 9px 0px -2px #585858,
			18px 18px 0px -2px #585858;
	}

	[diamond] {
		transform: rotate(45deg); 
		border: 4px solid #5B5B5B; 
	}

	[shape]:hover::after {
		top: 70%!important; 
	}

	[shape-tri] svg {
		stroke-width: 4px;
		transition: all .3s; 
		
	}

	[shape-tri]:hover::after {
		left: 14px!important;
		top: 31px!important;
		height: 0px!important; 
	}

	[shape-tri]::before {
		content: "Link";
		font-size: 30px;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 9;
		opacity: 0;
		color: #BBB;
		transition: all .3s; 
		transform: scale(1.5);
		transition-delay: .4s; 
	}

	[shape-tri]:hover::before {
		opacity: 1;
		transform: scale(1);
	}

	[shape-tri]:hover svg {
		transition-delay: .4s; 
		stroke-width: 100px;
		border-radius: 2px;
	}

	[shape-tri]:hover * {
		opacity: 1; 
		transform: scale(1);
	}

	[triangle] {
		opacity: 1; 
	}

	[diamond] * {
		transform: rotate(-45deg) scale(1.5);
	}

	[rectangle] {
		/*transform: rotate(-2deg);*/
		border: 4px solid #5B5B5B; 
	}

	[rectangle]:hover {
		border-radius: 30px 30px 30px 0px; 
		transform: rotate(-45deg) translateX(5px) translateY(-5px);
	}

	[circle] {
		border-radius: 100%; 
		border: 4px solid #5B5B5B; 
	}
</style>

<nav id="main-nav">
	<div class="nav-msg">
		<input class="nav-checkbox" type="checkbox" checked>
		<!-- <div class="nav-top" FFF-to-58 hint="Full Size Keyboard, Full Size Display."></div> -->

		<div class="nav-title">
			<span style="color: #BBB;">var</span>
			<span>Eczn*</span>
			<span style="color: #BBB;">s</span>
			<span FFF-to-58>;</span>
			<span style="color: #BBB;">Blog</span>
		</div>

		<div class="nav-btns">
			<span shape rectangle>
				<a title="Categories 分类标签" href="/categories">+</a>
			</span>
			<span shape diamond>
				<a title="关于鄙人" href="/blog/Vally%20and%20Me.html">A</a>
			</span>
			<span shape circle>
				<a title="我的 Github" target="_blank" href="https://github.com/eczn">G</a>
			</span>
			<span shape-tri>
				<svg triangle width="88" height="58">
					<path d="M 42 0 L 86 56 L 2 56 L 42 0"
						style="fill: none; stroke: #585858;"
					/>
				</svg>
				<a href="/Links.html">!</a>
			</span>
		</div>
	</div>

<!-- 	<div class="about">
		<span><a id="_about" href="#">About</a></span>
		<span><a href="/blog/all/history.html">History</a></span>
		<span><a href="/blog/all">All</a></span>
		<span><a href="/links.html">Links</a></span>
	</div> -->
</nav>

<script>
	function hinting(str){
		var fir = str.slice(0, 1); 

		if (fir === "") return ;

		var html = $('.nav-top').html(); 
		$('.nav-top').html(html + fir); 

		setTimeout(function(){
			hinting(str.slice(1)); 
		}, 50); 
	}

	var hint = $('.nav-top').attr('hint'); 
	// hinting(hint); 
</script>
{'fraction_non_alphanumeric': 0.1954498448810755, 'fraction_numerical': 0.0405894519131334, 'mean_word_length': 2.9615975422427034, 'pattern_counts': {'":': 0, '<': 114, '<?xml version=': 0, '>': 120, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5906924', 'n_tokens_mistral': 3834, 'n_tokens_neox': 3138, 'n_words': 667}