Trying to build a nice (Visual&SEO) blog post card. I think i have to work on the mobile view :D
Image by Josh Felise
A Pen by Wolf Wortmann on CodePen.
Forked from anonymous/Material Blog Post Card + Microdata.markdown
Created
January 3, 2016 08:26
-
-
Save donpadre/7e934bbecb8c532dd77b to your computer and use it in GitHub Desktop.
Material Blog Post Card + Microdata
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <article id="article_0" class="bp bp_blogPost" data-article-id="0" itemscope itemtype="http://schema.org/BlogPosting"> | |
| <header class="bp_header"> | |
| <div class="bp_img"> | |
| <img src="https://unsplash.it/2000/1200?image=718" alt="One alone Wolf" itemprop="image"> | |
| </div> | |
| <div class="bp_bar"> | |
| <h1 class="bp_title" itemprop="name"><a href="//codepen.io/wolf-w/pen/QbvXNR" itemprop="url">A awesome article about wolves</a></h1> | |
| <div class="bp_subBar"> | |
| <span class="bp_author" itemprop="author"><a href="//elementcode.de" target="_blank">Wolf Wortmann</a></span> | |
| <time datetime="2015-06-09T16:40:00+01:00" itemprop="datePublished">09.06.15 17:40</time> | |
| <div class="bp_nav_wrap"> | |
| <i class="bp_nav_trigger fa fa-ellipsis-v"></i> | |
| <nav class="bp_nav"> | |
| <ul> | |
| <li class="bp_post_comment"><i class="fa fa-comment"></i>Comment this post</li> | |
| <li class="bp_post_edit"><i class="fa fa-pencil"></i>Edit this post</li> | |
| <li class="bp_post_delete"><i class="fa fa-ban"></i>Delete this post</li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <meta itemprop="description" content="This is a awesome article about wolves and is crafted with magic and love."> | |
| </header> | |
| <div class="bp_content" itemprop="articleBody"> | |
| <p>This card is build using microdata for SEO and using the Google Material Design spec.</p> | |
| <p>Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</p> | |
| <h2>Multimedia based expertise</h2> | |
| <p>Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable | |
| products. | |
| </p> | |
| <p>Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.</p> | |
| <h2>Turnkey channels</h2> | |
| <p>Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources.</p> | |
| <p>Credibly innovate granular internal or "organic" sources whereas high standards in web-readiness. Energistically scale future-proof core competencies vis-a-vis impactful experiences. Dramatically synthesize integrated schemas with optimal networks.</p> | |
| </div> | |
| </article> | |
| </main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body{ | |
| font-family: 'Roboto',sans-serif; | |
| font-weight: 300; | |
| font-size: 14px; | |
| color: rgb(50,50,50); | |
| background-color: rgb(236,240,241); | |
| } | |
| h1{ | |
| font-weight: 300; | |
| font-size: 45px; | |
| } | |
| h2{ | |
| font-weight: 300; | |
| font-size: 24px; | |
| } | |
| h2+p{ | |
| margin-top: .5em; | |
| } | |
| p+p{ | |
| margin-top: .7em; | |
| } | |
| p+h2{ | |
| margin-top: .5em; | |
| } | |
| a{ | |
| color: inherit; | |
| } | |
| main{ | |
| padding: 10vw; | |
| } | |
| /* ################################# */ | |
| .bp_blogPost{ | |
| width: 100%; | |
| max-width: 900px; | |
| margin: auto; | |
| overflow: hidden; | |
| border-radius: 2px; | |
| background-color: rgb(255,255,255); | |
| box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); | |
| } | |
| .bp_header{ | |
| width: 100%; | |
| } | |
| .bp_img img{ | |
| width: 100%; | |
| min-width: 100%; | |
| max-width: 100%; | |
| filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.5" intercept="-0.25" /><feFuncG type="linear" slope="1.5" intercept="-0.25" /><feFuncB type="linear" slope="1.5" intercept="-0.25" /></feComponentTransfer></filter></svg>#filter'); | |
| -webkit-filter: contrast(150%); | |
| filter: contrast(150%); | |
| } | |
| .bp_preview .bp_img img{ | |
| max-height: 250px; | |
| -o-object-fit: cover; | |
| object-fit: cover; | |
| } | |
| .bp_bar{ | |
| padding: 20px 40px 10px; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-pack: justify; | |
| -webkit-justify-content: space-between; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| } | |
| .bp_title{ | |
| max-width: calc(100% - 230px); | |
| } | |
| .bp_preview .bp_title{ | |
| max-width: calc(100% - 130px); | |
| } | |
| .bp_title a{ | |
| text-decoration: none; | |
| } | |
| .bp_subBar{ | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| font-size: 12px; | |
| color: rgb(90,90,90); | |
| } | |
| .bp_subBar>*{ | |
| padding-left: 7px; | |
| } | |
| .bp_author a{ | |
| text-decoration: none; | |
| } | |
| .bp_nav_wrap{ | |
| position: relative; | |
| } | |
| .bp_nav_trigger{ | |
| padding: 0 7px; | |
| cursor: pointer; | |
| font-size: 20px; | |
| margin-top: -2px; | |
| } | |
| .bp_nav{ | |
| position: absolute; | |
| top: 25px; | |
| right: 0; | |
| width: 180px; | |
| font-size: 14px; | |
| color: rgb(50,50,50); | |
| z-index: -1; | |
| opacity: 0; | |
| filter: alpha(opacity=0); | |
| -webkit-transition: all .4s .3s, opacity .4s 0s; | |
| transition: all .4s .3s, opacity .4s 0s; | |
| background-color: rgb(255,255,255); | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19); | |
| border-radius: 3px; | |
| } | |
| .bp_nav_trigger:hover + .bp_nav, | |
| .bp_nav:hover{ | |
| z-index: 1; | |
| opacity: 1; | |
| filter: alpha(opacity=100); | |
| -webkit-transition: all .4s, opacity .4s .1s; | |
| transition: all .4s, opacity .4s .1s; | |
| } | |
| .bp_nav ul{ | |
| list-style: none; | |
| } | |
| .bp_nav li{ | |
| list-style-type: none; | |
| cursor: pointer; | |
| padding: 10px 17px; | |
| -webkit-transform: translateX(-10px); | |
| -ms-transform: translateX(-10px); | |
| transform: translateX(-10px); | |
| -webkit-transition: all .4s, -webkit-transform .2s .15s; | |
| transition: all .4s, transform .2s .15s; | |
| } | |
| .bp_nav li:hover{ | |
| background-color: rgba(0,0,0, .1); | |
| } | |
| .bp_nav li:nth-child(2){ | |
| -webkit-transition: all .4s, -webkit-transform .2s .2s; | |
| transition: all .4s, transform .2s .2s; | |
| } | |
| .bp_nav li:nth-child(3){ | |
| -webkit-transition: all .4s, -webkit-transform .2s .25s; | |
| transition: all .4s, transform .2s .25s; | |
| } | |
| .bp_nav_trigger:hover + .bp_nav li, | |
| .bp_nav:hover li{ | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| .bp_nav i{ | |
| padding-right: 10px; | |
| } | |
| .bp_content{ | |
| padding: 10px 40px 20px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" /> | |
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment