html Moncho Varela的钢笔。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Moncho Varela的钢笔。相关的知识，希望对你有一定的参考价值。
// Backgrounds Inspired by http://flatuicolors.com/
$turquoise:#1ABC9C;
$greenSea:#16A085;
$emerald:#2ECC71;
$nephritis:#27AE60;
$peterriver:#3498DB;
$belizeHole:#2980B9;
$amethyst:#9B59B6;
$wisteria:#8E44AD;
$wetAsphalt:#34495E;
$midnightBlue:#2C3E50;
$sunflower:#F1C40F;
$orange:#F39C12;
$carrot:#E67E22;
$pumpkin:#D35400;
$alizarin:#E74C3C;
$pomegranate:#C0392B;
$clouds:#ECF0F1;
$silver:#BDC3C7;
$concrete:#95A5A6;
$asbestos:#7F8C8D;
$white:#fff;
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
body{
position:relative;
font-family:"Serif", sans-serif;
font-size: 13px;
line-height: 1.42857143;
background:$midnightBlue;
}
/* backgrounds
----------------------------*/
.halftone{
background: url(http://subtlepatterns.com/patterns/halftone.png);
}
.geometry2{
background: url(http://subtlepatterns.com/patterns/geometry2.png);
}
.food{
background: url(http://subtlepatterns.com/patterns/food.png);
}
.startdust{
background: url(http://subtlepatterns.com/patterns/stardust.png);
}
.squared_metal{
background: url(http://subtlepatterns.com/patterns/squared_metal.png);
}
.purty_wood{
background: url(http://subtlepatterns.com/patterns/purty_wood.png);
}
/* colors
----------------------------*/
.turquoise{
background-color:$turquoise;
}
.emerald{
background-color:$emerald;
}
.peterriver{
background-color:$peterriver;
}
.amethyst{
background-color:$amethyst;
}
.wetAsphalt{
background-color:$wetAsphalt;
}
.sunflower{
background-color:$sunflower;
}
.orange{
background-color:$orange;
}
.carrot{
background-color:$carrot;
}
.alizarin{
background-color:$alizarin;
}
.white{
background-color:$white;
}
.concrete{
background-color:$concrete;
}
.silver{
background-color:$silver;
}
.color_turquoise{
color:$turquoise;
}
.color_emerald{
color:$emerald;
}
.color_peterriver{
color:$peterriver;
}
.color_amethyst{
color:$amethyst;
}
.color_wetAsphalt{
color:$wetAsphalt;
}
.color_sunflower{
color:$sunflower;
}
.color_orange{
color:$orange;
}
.color_carrot{
color:$carrot;
}
.color_alizarin{
color:$alizarin;
}
.color_white{
color:$white;
}
.color_concrete{
color:$concrete;
}
.color_silver{
color:$silver;
}
/* thpl basic
----------------------------*/
#thpl {
display:none;
height: auto;
background-color:$clouds;
z-index: 99999999999;
color: darken($clouds,20%);
padding-bottom: 20px;
transition: all 0.5s;
#thpl_button {
height: 44px;
background-color:$clouds;
display: block;
color: inherit;
text-align: center;
font-size: 18px;
text-indent: -2px;
line-height: 44px;
}
.thpl_inner {
display:block;
width: 100%;
height: auto;
border-bottom: 1px solid darken($clouds,5%);
padding: 16px 20px;
}
h3.thpl_header {
color: inherit;
font-size: 14px;
margin: 0 0 15px;
padding: 0;
}
.thpl_link {
text-decoration:none;
width: auto;
height: auto;
padding: 6px 20px;
display: inline-block;
border: 1px solid darken($clouds,5%);
background:$clouds;
color: darken($clouds,20%);
margin-right: 7px;
&:hover{
border: 1px solid darken($clouds,50%);
color: darken($clouds,50%);
}
}
a.colors,
a.backgrounds {
width: 30px;
height: 20px;
display: inline-block;
border: 1px solid darken($clouds,5%);
margin-right: 2px;
}
span.minimal_note {
font-size: 11px;
}
.thpl_info{
display: block;
padding: 5px;
font-size: 10px;
font-family: monospace;
margin-top: 5px;
background: $wetAsphalt;
color: $clouds;
text-align:center;
}
}
/* thpl left
---------------------*/
.btn_left{
position: absolute;
top:0;
right: -44px;
width: 44px;
display: block;
border-radius:0 6px 6px 0;
}
.thpl_left{
display:block !important;
position:fixed;
top:10%;
left:-260px;
width: 260px;
border-bottom-right-radius: 10px;
box-shadow: 0 5px 7px rgba(199, 199, 199, 0.8);
}
.thpl_open_left{
left:0;
}
/* thpl right
---------------------*/
.btn_right{
position: absolute;
top:0;
left: -44px;
width: 44px;
display: block;
border-radius: 6px 0 0 6px;
}
.thpl_right{
display:block !important;
position:fixed;
top:10%;
right:-260px;
width: 260px;
border-bottom-left-radius: 10px;
box-shadow: 0 5px 7px rgba(199, 199, 199, 0.8);
}
.thpl_open_right{
right:0;
}
/* thpl top
---------------------*/
.btn_top{
position: absolute;
top:425px;
right:0;
width: 100%;
display: block;
}
.thpl_top{
display:block !important;
position:fixed;
top: -425px;
left:0;
width: 100%;
}
.thpl_open_top{
top:0;
}
/* thpl bottom
---------------------*/
.btn_bottom{
position: absolute;
bottom:425px;
right:0;
width: 100%;
display: block;
}
.thpl_bottom{
display:block !important;
position:fixed;
bottom: -425px;
left:0;
width: 100%;
}
.thpl_open_bottom{
bottom:0;
}
a{
color:$alizarin;
transition:all 1s ease;
}
.page{
background:$clouds;
transition:all 1s ease;
}
.wide{
width:100%;
margin:0 auto;
transition:all 1s ease;
}
.boxed{
width:90%;
margin:7% auto;
transition:all 1s ease;
}
/* demo template */
.container{
margin:0 auto;
max-width:53rem;
width:90%;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
background:$wetAsphalt;
padding: 10px;
margin: 0;
border: 1px solid $midnightBlue;
color: $clouds;
}
/* Header
================================== */
header {
h1{
color:#fff;
padding:0.4rem 0.6rem;
display:inline-block;
font-size:1.8rem;
text-transform:uppercase;
margin-bottom:2rem;
}
p{
color:white;
margin:0 auto;
}
}
/* Section
========================================= */
.words{
background:white;
}
section{
border-top:1px solid #eee;
padding:2rem 0;
}
section:first-of-type{
border-top:none;
}
@media (min-width: 40rem){
section{
padding:4rem 0;
}
}
/* Clearfix by Nicolas Gallagher
========================================== */
.clearfix{
*zoom:1;
&:before,
&:after{
content:" ";
display:table;
}
&:after{
clear:both;
}
}// minify
var thpl=(function(){'use strict';return{_ready:function(el){var panel=document.querySelector('#thpl'),btn=document.querySelector('#thpl_button'),self=this;panel.classList.add('thpl_'+el);btn.classList.add('btn_'+el);var t=setTimeout(function(){self._init(el);clearTimeout(t);},100);},_init:function(el){this._thpl(el);this._stylePage();this._backgrounds();this._colors();this._reset();return el;},_thpl:function(element){var btn=document.querySelector('.btn_'+element),panel=document.querySelector('.thpl_'+element);btn.addEventListener('click',function(e){e.preventDefault();panel.classList.toggle('thpl_open_'+element);},false);return element;},_stylePage:function(){var page=document.querySelector('.page'),wide=document.querySelector('.add_wide'),boxed=document.querySelector('.add_boxed'),info=document.querySelector('.info_container');wide.addEventListener('click',function(e){e.preventDefault();if(page.classList.contains('boxed')){page.classList.remove('boxed');page.classList.add('wide');}else{page.classList.add('wide');}
info.innerHTML='<small class="thpl_info">body class="wide"</small>';},false);boxed.addEventListener('click',function(e){e.preventDefault();if(page.classList.contains('wide')){page.classList.remove('wide');page.classList.add('boxed');}else{page.classList.add('boxed');}
info.innerHTML='<small class="thpl_info">body class="boxed"</small>';},false);},_backgrounds:function(){var self=this,_classess=document.querySelectorAll('.backgrounds');Array.prototype.forEach.call(_classess,function(obj,index){obj.addEventListener('click',function(){var this_class=this.getAttribute('class').replace('backgrounds','').replace(' ','');document.body.className='';document.body.classList.add(this_class);document.querySelector('.info_background').innerHTML='<small class="thpl_info">body class="'+this_class+'"</small>';},false);});},_colors:function(){var self=this,_classess=document.querySelectorAll('.colors');Array.prototype.forEach.call(_classess,function(obj,index){var this_class=obj.getAttribute('class').replace('colors','').replace(' ','');obj.addEventListener('click',function(e){e.preventDefault();self._tags('.page h3',this_class);self._tags('.page a',this_class);document.querySelector('.info_color').innerHTML='<small class="thpl_info">h3 class="color_'+this_class+'"</small>';},false);});},_tags:function(el,_class){var selector=document.querySelectorAll(el);Array.prototype.forEach.call(selector,function(obj,index){obj.className='';obj.classList.add('color_'+_class);});return el;},_reset:function(){var thpl_reset=document.querySelector('.thpl_reset');thpl_reset.addEventListener('click',function(){return location.reload(true);},false);}};})();
// init plugin
thpl._ready('left');
/*
// develoment
var thpl = (function(){
'use strict';
return {
// ready for the war
_ready:function(el){
// vars
var panel = document.querySelector('#thpl'),
btn = document.querySelector('#thpl_button'),
self = this;
// on init add class
panel.classList.add('thpl_'+el);
btn.classList.add('btn_'+el);
// wait and load other fn
var t = setTimeout(function(){
self._init(el);
clearTimeout(t);
},100);
},
// init other functions
// el = left,top,right,bottom
_init:function(el){
this._thpl(el);
this._stylePage();
this._backgrounds();
this._colors();
this._reset();
return el;
},
// open/close panel
_thpl:function(element){
// vars
var btn = document.querySelector('.btn_'+element),
panel = document.querySelector('.thpl_'+element);
// listener
btn.addEventListener('click',function(e){
e.preventDefault();
panel.classList.toggle('thpl_open_'+element);
},false);
// return
return element;
},
// boxed / wide function
_stylePage:function(){
// vars
var page = document.querySelector('.page'),
wide = document.querySelector('.add_wide'),
boxed = document.querySelector('.add_boxed'),
info = document.querySelector('.info_container');
// wide mode
wide.addEventListener('click',function(e){
// prevent scroll
e.preventDefault();
// if has class
if(page.classList.contains('boxed')){
page.classList.remove('boxed');
page.classList.add('wide');
}else{
page.classList.add('wide');
}
// show info
info.innerHTML = '<small class="thpl_info">body class="wide"</small>';
},false);
// boxed mode
boxed.addEventListener('click',function(e){
// prevent scroll
e.preventDefault();
// if contain wide remove and add boxed
if(page.classList.contains('wide')){
page.classList.remove('wide');
page.classList.add('boxed');
}else{
page.classList.add('boxed');
}
// show info
info.innerHTML = '<small class="thpl_info">body class="boxed"</small>';
},false);
},
// background colors
_backgrounds:function(){
var self = this,
// get options background_classess
_classess = document.querySelectorAll('.backgrounds');
// loop array
Array.prototype.forEach.call(_classess,function(obj,index){
// handler
obj.addEventListener('click',function(){
// get class of this link
var this_class = this.getAttribute('class')
.replace('backgrounds','') // remove className
.replace(' ','');// remove white space
// remove all Classes
document.body.className = '';
// now add class
document.body.classList.add(this_class);
// show info
document.querySelector('.info_background').innerHTML =
'<small class="thpl_info">body class="'+this_class+'"</small>';
},false);
});
},
// add colors on click
_colors:function(){
var self = this,
// get options background_classess
_classess = document.querySelectorAll('.colors');
// loop array
Array.prototype.forEach.call(_classess,function(obj,index){
// get class of this link
var this_class = obj.getAttribute('class')
.replace('colors','') // remove className
.replace(' ','');// remove white space
// handler
obj.addEventListener('click',function(e){
// prevent scroll
e.preventDefault();
// all h3
self._tags('.page h3',this_class);
// all links
self._tags('.page a',this_class);
// add more....
// show info
document.querySelector('.info_color').innerHTML =
'<small class="thpl_info">h3 class="color_'+this_class+'"</small>';
},false);
});
},
// foreach function
_tags: function(el,_class){
// vars
var selector = document.querySelectorAll(el);
// loop array
Array.prototype.forEach.call(selector,function(obj,index){
// remove class
obj.className = '';
// add class
obj.classList.add('color_'+_class);
});
return el;
},
// reset
_reset:function(){
var thpl_reset = document.querySelector('.thpl_reset');
thpl_reset.addEventListener('click',function(){
return location.reload(true);
},false);
}
};
})();
*/
mJHih
-----
A [Pen](http://codepen.io/nakome/pen/mJHih) by [Moncho Varela](http://codepen.io/nakome) on [CodePen](http://codepen.io/).
[License](http://codepen.io/nakome/pen/mJHih/license).<!-- top panel -->
<div id="thpl">
<a href="#" id="thpl_button">
<i class="fa fa-gear"></i>
</a>
<div class="thpl_inner">
<h2 class="thpl_header">
Style theme
</h2>
</div>
<div class="thpl_inner">
<a href="#" class="thpl_link add_wide" title="Wide">Wide</a>
<a href="#" class="thpl_link add_boxed" title="Boxed">Boxed</a>
<small class="info_container"></small>
</div>
<div class="thpl_inner">
<h3 class="thpl_header">Background</h3>
<small>Patterns</small><br />
<a href="#" class="backgrounds halftone"></a>
<a href="#" class="backgrounds geometry2"></a>
<a href="#" class="backgrounds food"></a>
<a href="#" class="backgrounds startdust"></a>
<a href="#" class="backgrounds squared_metal"></a>
<a href="#" class="backgrounds purty_wood"></a>
<small>colors</small><br />
<a href="#" title="turquoise" class="backgrounds turquoise"></a>
<a href="#" title="emerald" class="backgrounds emerald"></a>
<a href="#" title="peterRiver" class="backgrounds peterriver"></a>
<a href="#" title="amethyst" class="backgrounds amethyst"></a>
<a href="#" title="wetAsphalt" class="backgrounds wetAsphalt"></a>
<a href="#" title="sunflower" class="backgrounds sunflower"></a>
<a href="#" title="orange" class="backgrounds orange"></a>
<a href="#" title="carrot" class="backgrounds carrot"></a>
<a href="#" title="alizarin" class="backgrounds alizarin"></a>
<a href="#" title="white" class="backgrounds white"></a>
<a href="#" title="concrete" class="backgrounds concrete"></a>
<a href="#" title="silver" class="backgrounds silver"></a>
<small class="info_background"></small>
</div>
<div class="thpl_inner">
<h3 class="thpl_header">
Color Skins
</h3>
<a href="#" title="turquoise" class="colors turquoise"></a>
<a href="#" title="emerald" class="colors emerald"></a>
<a href="#" title="peterRiver" class="colors peterriver"></a>
<a href="#" title="amethyst" class="colors amethyst"></a>
<a href="#" title="wetAsphalt" class="colors wetAsphalt"></a>
<a href="#" title="sunflower" class="colors sunflower"></a>
<a href="#" title="orange" class="colors orange"></a>
<a href="#" title="carrot" class="colors carrot"></a>
<a href="#" title="alizarin" class="colors alizarin"></a>
<a href="#" title="white" class="colors white"></a>
<a href="#" title="concrete" class="colors concrete"></a>
<a href="#" title="silver" class="colors silver"></a>
<small class="info_color"></small>
</div>
<div class="thpl_inner">
<a href="#" class="thpl_link thpl_reset">Refresh</a>
</div>
</div>
<!-- Demo template -->
<div class="page boxed">
<div class="main">
<section class="words">
<div class="container">
<h3>Theme panel experiment.</h3>
<p><b>Options: </b>Left,Top,Tight or Bottom</p>
<pre>
// example left panel
thpl._ready('left');
</pre>
</section>
<section class="clearfix"></section>
<section class="words">
<div class="container">
<h3>Quid est enim aliud esse versutum?</h3>
<p>Ostendit pedes et pectus. Omnis enim est natura diligens sui. <a href='http://loripsum.net/' target='_blank'>Cur id non ita fit?</a> <a href='http://loripsum.net/' target='_blank'>Videamus animi partes, quarum est conspectus illustrior;</a> Collige omnia, quae soletis: Praesidium amicorum. Haec et tu ita posuisti, et verba vestra sunt. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? <a href='http://loripsum.net/' target='_blank'>Nos commodius agimus.</a> </p>
<h2>Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret?</h2>
<p>Quo plebiscito decreta a senatu est consuli quaestio Cn. Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. Ita multa dicunt, quae vix intellegam. Quo tandem modo? Non semper, inquam; Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit? </p>
<blockquote cite='http://loripsum.net' >
Te autem hortamur omnes, currentem quidem, ut spero, ut eos, quos novisse vis, imitari etiam velis.
</blockquote>
</section>
<section class="clearfix"></section>
<section class="words">
<div class="container">
<p>Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Si enim ad populum me vocas, eum. Quod autem ratione actum est, id officium appellamus. Apud ceteros autem philosophos, qui quaesivit aliquid, tacet; Longum est enim ad omnia respondere, quae a te dicta sunt. </p>
<p>Vitiosum est enim in dividendo partem in genere numerare. Eaedem res maneant alio modo. Quae in controversiam veniunt, de iis, si placet, disseramus. Videsne quam sit magna dissensio? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Si quicquam extra virtutem habeatur in bonis. Sed nimis multa. </p>
</div>
</section>
<!-- / Content of page -->
</div>
</div>
以上是关于html Moncho Varela的钢笔。的主要内容，如果未能解决你的问题，请参考以下文章