A Pen by Matthew Daniel Brown on CodePen.
Created
November 25, 2017 03:34
-
-
Save matt-daniel-brown/80188bc68f7ab7b84fc1852e7db3ad10 to your computer and use it in GitHub Desktop.
Styles For Documentation
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
| nav | |
| .navbar-content | |
| #site-logo | |
| span ◈ | |
| ul.container | |
| li | |
| a(href="#") Link | |
| li | |
| a(href="#") Link | |
| li | |
| a(href="#") Link | |
| header.page-header | |
| h1 Styles For Documentation | |
| main | |
| .container | |
| article | |
| header | |
| h2 Article Title | |
| section | |
| header | |
| h3 Section One Title | |
| .section-content | |
| h4 Section Paragraph Subtitle | |
| p Optical connections between computer components will allow data to be transmitted faster than modern electronic ones, and over long distances. | |
| h6.code-title Code Sample: | |
| pre | |
| - var nd = "nod" | |
| code. | |
| #!/usr/bin/env #{nd}e | |
| 'use strict'; | |
| // Main function as a variable. | |
| var main = function() { | |
| const someVariable = 'foo'; | |
| console.log(someVariable); | |
| } | |
| h4 Section Subtitle | |
| p The main role in the work of the computer is played by electrons. "Settling" in the memory cells and registers of the processor, they form the information that the user is working with. But the electron velocity is finite and not very large. And the time that an electron needs to travel through the system becomes a decisive obstacle in the further increase of computer performance. | |
| h4 Paragraph Subtitle | |
| p The output can be found either in reducing the size of the devices, or in a new approach to their systems. And since it is infinitely impossible to reduce the size of the computer, new algorithms of work and attempts to replace electrons with other particles are being used. | |
| h6 Impolrtant Points | |
| ul.bullet-list | |
| li | |
| p • Lorem ipsum dolor | |
| li | |
| p • Sit amet, consectetur | |
| li | |
| p • Adipisicing elit, sed | |
| li | |
| p • Do eiusmod tempor | |
| li | |
| p • Incididunt ut labore | |
| section | |
| header | |
| h3 Section Two Title | |
| .section-content | |
| h4 Section Subtitle | |
| p For tasks related to the calculation of probabilities, engineers of the American company Lyric Semiconductor suggest using processors that work on the principles of Bayesian probability. Information about the new operating system, inspired by the example of the "apple" company, has already started appearing in press releases. | |
| .image-wrapper | |
| .overlay-container | |
| img(src="https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=b45d7cae7aa90d09797d368fb33ab430", alt="A Photo") | |
| img.blurred(src="https://images.unsplash.com/photo-1506765336936-bb05e7e06295?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=b45d7cae7aa90d09797d368fb33ab430", alt="A Photo") | |
| p.image-title This is a nice photo. | |
| h4 Section Subtitle | |
| p I did not even have time to get off the Service Pack for Windows 7, as the Web was flooded with rumors about a new version of Windows. With an easy feed of bloggers, the OS was called the "eight", which, incidentally, was confirmed in an interview with representatives of Microsoft. Inspired by the general acceptance and commercial success of Windows 7, the Redmond people rolled up their sleeves and started creating something that could completely "take the brain out" even to the most sophisticated users, and at the same time to turn the public's view of the "windows". |
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
| @import "breakpoint"; | |
| @import "bourbon@5.*"; | |
| $system-font-stack: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !default; | |
| * { | |
| font-family: $system-font-stack !important; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| box-sizing: border-box !important; | |
| clear: both !important; | |
| // display: block; | |
| // border: red solid thin !important; | |
| // border-collapse: collapse !important; | |
| // border-top-style: inside !important; | |
| } | |
| html { | |
| font-size: 18px; | |
| } | |
| body { | |
| font-size: 1em; | |
| font-weight: 500; | |
| } | |
| body, html, main { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| article { | |
| padding-top: 4rem; | |
| padding-bottom: 6rem; | |
| } | |
| body, p { | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 750px; | |
| width: 80%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| header.page-header { | |
| // padding-top: 6rem; | |
| // padding-bottom: 4rem; | |
| height: 16rem; | |
| width: 100%; | |
| background: #f5f8f7; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| border-bottom: rgba(#6ab5b8, 0.1) solid 1px; | |
| } | |
| ul, li { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #site-logo { | |
| color: rgba(#6ab5b8, 0.73); | |
| line-height: 1; | |
| margin-top: 0; | |
| height: 100%; | |
| vertical-align: middle; | |
| display: flex; | |
| flex-direction: column; | |
| align-content: center; | |
| align-items: center; | |
| justify-content: center; | |
| span { | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| top: -3px; | |
| line-height: 1; | |
| display: block; | |
| vertical-align: middle; | |
| opacity: 0.75; | |
| } | |
| font-size: modular-scale(3); | |
| width: auto; | |
| height: 100%; | |
| // float: left !important; | |
| vertical-align: middle; | |
| margin: 0; | |
| padding: 0; | |
| border-radius: 25%; | |
| } | |
| nav { | |
| margin: 0; | |
| padding: 0; | |
| height: 4rem; | |
| background: #2e3441; | |
| .navbar-content { | |
| @extend .container; | |
| // width: 100%; | |
| height: 100%; | |
| vertical-align: middle; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| // align-content: center; | |
| justify-content: space-between; | |
| } | |
| ul { | |
| display: flex; | |
| flex-direction: row; | |
| align-content: center; | |
| align-items: center; | |
| justify-content: flex-end; | |
| // float: right !important; | |
| // display: inline-block; | |
| // padding: 0; | |
| box-sizing: border-box; | |
| height: 100%; | |
| // width: 20%\\ !important; | |
| vertical-align: middle; | |
| margin-right: 0 !important; | |
| li { | |
| margin-top: 0; | |
| height: 100%; | |
| // display: inline-block; | |
| // margin: auto; | |
| margin-left: 4rem; | |
| vertical-align: middle; | |
| padding-top: 1rem; | |
| a { | |
| vertical-align: middle; | |
| line-height: 1; | |
| margin: 0 !important; | |
| padding: 0; | |
| color: #6ab5b8; | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| } | |
| h1 { | |
| font-weight: 700 !important; | |
| // position: relative; | |
| // top: 15%; | |
| line-height: 1.15 !important; | |
| max-width: 750px; | |
| width: 80%; | |
| // margin: ajuto; | |
| // margin: auto; | |
| // padding: 0; | |
| // vertical-align: middle; | |
| // font-size: modular-scale(5); | |
| font-size: 2.7rem; | |
| } | |
| h4 { | |
| font-size: modular-scale(1); | |
| } | |
| h3 { | |
| font-size: modular-scale(2); | |
| } | |
| h2 { | |
| font-size: 2.2rem; | |
| } | |
| h1, h2, h3, h4, h5 { | |
| line-height: 1.5; | |
| margin-top: 0; | |
| margin-bottom: 1rem; | |
| letter-spacing: 1px; | |
| font-weight: 600; | |
| color: #274851; | |
| } | |
| p { | |
| color: #626768; | |
| margin-top: 0; | |
| margin-bottom: 4rem; | |
| } | |
| h4 { | |
| font-weight: 400; | |
| opacity: 0.85; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| font-size: modular-scale(0); | |
| } | |
| section { | |
| margin-bottom: 8rem; | |
| } | |
| a { | |
| color: #6ab5b8; | |
| } | |
| .bullet-list { | |
| margin: 0 !important; | |
| padding: 0; | |
| line-height: 1 !important; | |
| li { | |
| line-height: 1 !important; | |
| margin: 0 !important; | |
| padding: 0; | |
| } | |
| p { | |
| margin: 1em; | |
| line-height: 1 !important; | |
| } | |
| } | |
| pre { | |
| margin-bottom: 2rem !important; | |
| // line-height: 2 !important; | |
| min-height: 4rem !important; | |
| // padding: 1.1rem 1rem 0 2rem!important; | |
| code { | |
| display: block; | |
| font-family: monospace !important; | |
| padding: 2rem; | |
| font-size: 16px; | |
| font-weight: 500; | |
| } | |
| font-weight: bold; | |
| color: mix(#274851, shade(#6ab5b8, 10%)); | |
| letter-spacing: normal !important; | |
| // padding: 2rem | |
| // background: #000; | |
| background: desaturate(#e7f5f8, 40%); | |
| border-radius: 4px; | |
| display: block; | |
| } | |
| h6, h6.code-sample { | |
| font-size: 0.8rem !important; | |
| line-height: 2.5; | |
| opacity: 0.5; | |
| font-weight: 500; | |
| } | |
| .image-wrapper { | |
| display: block; | |
| margin: 2rem 0 4rem 0 !important; | |
| padding: 2rem; | |
| border-radius: 4px; | |
| max-width: 800px; | |
| height: auto; | |
| border-radius: 0; | |
| backface-visibility: none; | |
| // background: white; | |
| } | |
| .overlay-container { | |
| position: relative; | |
| width: 100%; | |
| } | |
| img { | |
| border-radius: 6px; | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| z-index: 100; | |
| // float: right; | |
| } | |
| .image { | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| } | |
| img.blurred { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| // margin-top: -10rem !important; | |
| transform: scale(0.9) translatey(10%); | |
| // float: left; | |
| z-index: -100; | |
| // position: relative; | |
| // bottom: 1% !important; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 100%; | |
| width: 100%; | |
| filter: blur(20px); | |
| opacity: 0.9; | |
| } | |
| .image-title { | |
| margin-top: 0.5rem; | |
| font-size: modular-scale(-1); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment