Skip to content

Instantly share code, notes, and snippets.

View kyrose's full-sized avatar
🙃

kyanne kyrose

🙃
32 followers · 118 following
View GitHub Profile
@kyrose
kyrose / keybase.md
Last active August 19, 2019 20:04
[Keybase proof] verifying KBFS account #keybase

Keybase proof

I hereby claim:

  • I am kyrose on github.
  • I am kyrose (https://keybase.io/kyrose) on keybase.
  • I have a public key ASCXPgCPaaNIqw-dA6LwBI2FsFvJwta67qI_LAXrZ87z7go

To claim this, I am signing this object:

@kyrose
kyrose / commit-message-guidelines.md
Last active August 19, 2019 20:03 — forked from robertpainsi/commit-message-guidelines.md
[Commit message guidelines] Helpful hints for writing decent commit messages #git

Commit Message Guidelines

Short (72 chars or less) summary

More detailed explanatory text. Wrap it to 72 characters. The blank
line separating the summary from the body is critical (unless you omit
the body entirely).

Write your commit message in the imperative: "Fix bug" and not "Fixed
bug" or "Fixes bug." This convention matches up with commit messages
@kyrose
kyrose / definitions.md
Last active August 20, 2019 03:53
[Responsive header] Using CSS flexbox and @media queries to quickly create a responsive header for your site #html #css #scss

breakpoints

Generic screen sizes:

device width
phones 320px
tablets, XL phones 720 px
desktops, laptops 1024px

@media queries

deep dive

@kyrose
kyrose / flexboxFooter.css
Last active August 19, 2019 20:35
[Sticky footer in two ways] Sticky footers are meant to stick to the bottom of a browser window, unless there is enough content to push the footer lower. #css #flexbox #grid #html
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
@kyrose
kyrose / parallaxFooter.css
Last active September 18, 2019 04:16
[Parallax footer] by Austin Paquette https://codepen.io/pqt/pen/bNByOj #css #javascript
#site-content {
min-height: 100%;
min-height: 100vh;
padding-top: 65px;
position: relative;
z-index: 1;
-webkit-box-shadow: #000 0 7px 35px 0;
-moz-box-shadow: #000 0 7px 35px 0;
box-shadow: #000 0 7px 35px 0;
@kyrose
kyrose / index.html
Created August 19, 2019 21:54
[Grid centering] Horizontally and vertically centers a child element within a parent element using grid. #css #grid
<div class="grid-centering"><div class="child">Centered content.</div></div>
@kyrose
kyrose / explanation.md
Last active August 20, 2019 23:39
[Custom scrollbar] Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms. #css

Explanation

  1. ::-webkit-scrollbar targets the whole scrollbar element
  2. ::-webkit-scrollbar-track targets only the scrollbar track
  3. ::-webkit-scrollbar-thumb targets the scrollbar thumb

More at Webkit.org

@kyrose
kyrose / textSelection.css
Created August 21, 2019 03:59
[Custom text selection] Changes the styling of text selection. #css
::selection {
background: aquamarine;
color: #150f05;
}
.custom-text-selection::selection {
background: deeppink;
color: #f9f9f9;
}
@kyrose
kyrose / popout.css
Created August 21, 2019 21:49
Menu popouts on hover and focus
.reference {
position: relative;
background: tomato;
width: 100px;
height: 100px;
}
.popout-menu {
position: absolute;
visibility: hidden;
left: 100%;
@kyrose
kyrose / image-contain.css
Created August 28, 2019 21:46
Contain / Cover images like background
.image {
background: #34495e;
border: 1px solid #34495e;
width: 200px;
height: 200px;
}
.image-contain {
object-fit: contain;
object-position: center;