mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-05 22:50:17 +00:00
104 lines
2.1 KiB
CSS
104 lines
2.1 KiB
CSS
/*
|
|
Kenneth Reitz Developer Website - Tailwind-based Design
|
|
Elegant typography and thoughtful design using Tailwind CSS
|
|
with a darker Heroku purple theme.
|
|
*/
|
|
|
|
/* =====================================================
|
|
GLOBAL RESET & IMPROVEMENTS
|
|
===================================================== */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* =====================================================
|
|
CUSTOM FOCUS STYLES
|
|
===================================================== */
|
|
|
|
*:focus {
|
|
outline: 2px solid #4e3979;
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* =====================================================
|
|
TYPOGRAPHY IMPROVEMENTS
|
|
===================================================== */
|
|
|
|
/* Better text rendering */
|
|
body {
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* Custom selection colors */
|
|
::selection {
|
|
background-color: #e3e0f4;
|
|
color: #4e3979;
|
|
}
|
|
|
|
/* =====================================================
|
|
ACCESSIBILITY IMPROVEMENTS
|
|
===================================================== */
|
|
|
|
/* Reduced motion for users who prefer it */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* High contrast mode improvements */
|
|
@media (prefers-contrast: high) {
|
|
.border-gray-200 {
|
|
border-color: #000 !important;
|
|
}
|
|
|
|
.text-gray-600 {
|
|
color: #000 !important;
|
|
}
|
|
}
|
|
|
|
/* =====================================================
|
|
PRINT STYLES
|
|
===================================================== */
|
|
|
|
@media print {
|
|
* {
|
|
background: transparent !important;
|
|
color: black !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
header,
|
|
footer {
|
|
display: none;
|
|
}
|
|
|
|
a,
|
|
a:visited {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a[href]:after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
}
|
|
|