press.css template

In this example below you will see how to do a press.css template with some HTML / CSS and Javascript

reusable, quick and durable stylesheet https://github.com/jordan-pe/press1kb (fully responsive) html template for web publishing. 30 optional base 64encoded icons ~3 to 5 kb each

Thumbnail
This awesome code was written by lafland, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lafland ©
  • HTML
  • CSS
  • JavaScript
      <!-- github.com/jordan-pe/press -->
  <object data="https://vermont.town/favicon.svg" type="">
	</object>
	<article>
		<h2 class="select">Lollipop lemon drops tart wafer</h2>&nbsp;
		<p style="text-align:right">January 13, 2017</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quam expedita ipsum, itaque nemo accusamus debitis. Voluptatum quam, tenetur nobis quo quaerat, iure maiores voluptatibus natus, fuga doloribus assumenda beatae!</p>&nbsp; &nbsp; 

		<p>Soufflé muffin cookie icing dessert apple pie fruitcake halvah cheesecake. Chocolate gummies chocolate chocolate powder icing. Donut powder gingerbread. Jelly-o chocolate cake marshmallow. Oat cake chocolate toffee.</p>&nbsp; 

		<p>Lollipop jujubes oat cake jelly-o bonbon macaroon. Marzipan tiramisu icing carrot cake pastry lemon drops. Brownie chocolate bar carrot cake marzipan soufflé chocolate. Biscuit chocolate dessert. Chupa chups danish cookie caramels pie tootsie roll bonbon marzipan. Bonbon lemon drops gummies.<sup>1</sup></p>

		<p>Tootsie roll: <a href="http://candy.computer">Candy Computer</a> for lemon drops.</p>

	</article><br>
	<p class="notes"><sup>1</sup> Marzipan tiramisu icing carrot cake pastry lemon drops. Brownie chocolate bar carrot cake marzipan soufflé chocolate. Biscuit chocolate dessert. Chupa chups danish cookie caramels pie tootsie roll bonbon marzipan 
</p>


/*Downloaded from https://www.codeseek.co/lafland/presscss-template-yMYerp */
        * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -o-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -ms-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .select {
        -webkit-user-select: initial;
        -moz-user-select: initial;
        -ms-user-select: initial;
        user-select: initial;
    }
    body, html {
        padding: 0;
        margin: 0;
        font-size: 1.2em;
        font-family: sans-serif;
        color: #454545;
        background-color: whitesmoke;
        -webkit-font-smoothing: antialiased;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    article {
        background-color: white;
        width: 80%;
        margin-left: 10%;
        box-shadow: 0 20px 10px -10px rgba(150, 150, 150, 0.8);
    }
    img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    h2 {
        font-size: 1.33em;
        margin: -1em 8% 0 8%;
        padding-top: 22px;
        cursor: default;
    }
    sup {
        line-height: 0;
    }
    p {
        line-height: 1.2;
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, .2) 1px, transparent 1px);
        background-image: -moz-linear-gradient(rgba(0, 0, 0, .2) 1px, transparent 1px);
        background-image: linear-gradient(rgba(0, 0, 0, .2) 1px, transparent 1px);
        background-size: 100% 1.2em;
        background-position: 0 1em;
        background-origin: content-box;
        font-size: 100%;
        padding: 1em auto;
        margin: 0 auto;
        width: 78%;
        cursor: default;
    }
    h4 {
        font-size: 1.3em;
        font-style: italic;
        font-weight: 100;
        text-align: right;
        margin-right: 1.5em;
        cursor: default;
    }
    .notes {
        cursor: default;
    }
    a {
        text-decoration: none;
        color: #7ca065;
    }
    object {
        width: 5%;
        min-width: 50px;
    }
    article>iframe {
        width: 50%;
        margin-left: 25%;
    }
    /*//tooltip on title attribute*/
    /*by Andres Ilich*/
    
    a:hover {
        position: relative;
    }
    a[title]:hover:after {
        content: attr(title);
        padding: 4px 8px;
        color: #333;
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 20;
        white-space: nowrap;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0px 0px 4px #222;
        -webkit-box-shadow: 0px 0px 4px #222;
        box-shadow: 0px 0px 4px #222;
        background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc));
        background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
        background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
        background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
        background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    }
    @-webkit-keyframes fadeIn {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
    @-moz-keyframes fadeIn {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
    @keyframes fadeIn {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
    .fade-in {
        opacity: 0 -webkit-animation: fadeIn ease-in 1;
        -moz-animation: fadeIn ease-in 1;
        animation: fadeIn ease-in 1;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-duration: .5s;
        -moz-animation-duration: .5s;
        animation-duration: .5s;
    }
    .delay5sec {
        -webkit-animation-delay: 5s;
        -moz-animation-delay: 5s;
        animation-delay: 5s;
    }
    /*fade out  */
    
    @-webkit-keyframes fadeOut {
        to {
            opacity: 0
        }
    }
    @-moz-keyframes fadeOut {
        to {
            opacity: 0
        }
    }
    @keyframes fadeOut {
        to {
            opacity: 0
        }
    }
    .fade-out {
        opacity: 1;
        -webkit-animation: fadeOut ease-in 1;
        -moz-animation: fadeOut ease-in 1;
        animation: fadeOut ease-in 1;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-duration: 0.25s;
        -moz-animation-duration: 0.25s;
        animation-duration: 0.25s;
    }



/*Downloaded from https://www.codeseek.co/lafland/presscss-template-yMYerp */
    

Comments