Feel free to use any part of this website (except the Jasny logo). The website it's released under the CC0 "No rights reserved".
jasny.net is a static website, hosted on GitHub pages. It has no installation or build process.
The website is written for HTML5 and crafted by hand with the use of a simple text editor.
No CSS preprocessors are used, it's just plain old CSS.
Media queries and viewport percentage lengths are used to create a responsive design. The layout transitions seamlessly from one to the other viewports by combining relative units %, vh and vw with the absolute unit px. This contrasts most designs, which have specific breakpoints where the layout changes.
Example: An element should have a 10px padding for a viewport width of 400px or less. For a width of 900px or more, the padding should be 20px. Between 400px and 900px we smoothly transition from 10px to 20px.
padding: 10px;
@media (min-width: 400px) {
padding: calc(2vw + 2px);
}
@media (min-width: 900px) {
padding: 20px;
}
The website uses vanilla JavaScript rather that a JS framework. If you're used to working with jQuery and are interrested in writing native JavaScript, check out the website 'You might not need jQuery'.
The website is only properly displayed with a browser that support the transform property.