web-architecture-solutions

/* 
 * Documentation + Resources:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
 * https://css-tricks.com/almanac/selectors/s/selection/
 * https://www.w3schools.com/cssref/sel_selection.asp
 */

::selection { background: #000000; }
::-moz-selection { background: #000000; }
::-webkit-selection { background: #000000; }

web-architecture-solutions

/*
 * Adapted from this guide: https://css-tricks.com/snippets/css/using-font-face/
 */

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* Modern Browsers */
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */

web-architecture-solutions

/* 
 * Pre-flexbox hack courtesy of Z63: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 */

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

web-architecture-solutions

/*
 * Source: https://justmarkup.com/log/2018/03/collection-of-css-snippets/
 */

@media print { 
    a { 
        text-decoration: underline; 
    } 
    [href]:not([href^="#"]):after { 
        content: ' ('attr(href)') '; 

web-architecture-solutions

/*
 * Source: https://unindented.org/articles/github-ribbon-using-css-transforms/
 */
 
 .ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;

web-architecture-solutions

/*
 * Source: http://www.mightymeta.co.uk/1269/css-noise/
 * Instructions:
 * 1. Add the snippet to the bottom of your main stylesheet.
 * 2. Add class="noise" to HTML elements to apply noise, use class="body-noise" for body element only.
 * 3. Use grouped selectors instead if you want to avoid unsemantic class attributes.
 */
 
.noise {
	position: relative;