178 lines
3.0 KiB
Sass
178 lines
3.0 KiB
Sass
// base/_reset.sass
|
|
|
|
@use '../abstracts' as *
|
|
|
|
// Global box-sizing and resets
|
|
*
|
|
box-sizing: border-box
|
|
|
|
html
|
|
font-size: 16px // Base font size
|
|
line-height: 1.5
|
|
scroll-behavior: smooth
|
|
background-color: $bg-dark // Dark bg
|
|
color: $text-light // Light text
|
|
|
|
body
|
|
margin: 0
|
|
padding: 0
|
|
font-family: $font-stack // e.g., -apple-system, sans-serif
|
|
background-color: $bg-dark
|
|
color: $text-light
|
|
min-height: 100vh
|
|
|
|
// Headings: Light, bold, with spacing
|
|
h1, h2, h3, h4, h5, h6
|
|
margin: 0 0 0.5em
|
|
font-weight: 600
|
|
line-height: 1.2
|
|
color: $accent-light
|
|
|
|
h1
|
|
font-size: 2.5rem
|
|
|
|
h2
|
|
font-size: 2rem
|
|
|
|
h3
|
|
font-size: 1.75rem
|
|
|
|
h4
|
|
font-size: 1.5rem
|
|
|
|
h5
|
|
font-size: 1.25rem
|
|
|
|
h6
|
|
font-size: 1rem
|
|
|
|
// Paragraphs and text
|
|
p
|
|
margin: 0 0 1em
|
|
|
|
small
|
|
font-size: 0.875rem
|
|
|
|
strong, b
|
|
font-weight: 700
|
|
|
|
em, i
|
|
font-style: italic
|
|
|
|
// Links: Light with hover underline
|
|
a
|
|
color: $accent-light
|
|
text-decoration: none
|
|
border-bottom: 1px solid transparent
|
|
transition: border-color 0.2s ease
|
|
|
|
&:hover, &:focus
|
|
border-bottom-color: $accent-light
|
|
outline: none
|
|
|
|
// Lists
|
|
ul, ol
|
|
margin: 0 0 1em
|
|
padding-left: 1.5em
|
|
|
|
li
|
|
margin-bottom: 0.25em
|
|
|
|
// Blockquote
|
|
blockquote
|
|
margin: 1em 0
|
|
padding: 0.5em 1em
|
|
border-left: 4px solid $accent-light
|
|
background-color: rgba($bg-dark, 0.5)
|
|
color: $text-light
|
|
|
|
// Code and pre
|
|
code, kbd, samp
|
|
font-family: $mono-font
|
|
font-size: 0.875em
|
|
background-color: rgba($text-light, 0.1)
|
|
padding: 0.125em 0.25em
|
|
border-radius: 3px
|
|
|
|
pre
|
|
margin: 1em 0
|
|
padding: 1em
|
|
overflow: auto
|
|
background-color: rgba($text-light, 0.1)
|
|
border-radius: 4px
|
|
code
|
|
background: none
|
|
padding: 0
|
|
|
|
// Tables
|
|
table
|
|
width: 100%
|
|
border-collapse: collapse
|
|
margin: 1em 0
|
|
|
|
th, td
|
|
padding: 0.75em
|
|
text-align: left
|
|
border-bottom: 1px solid rgba($text-light, 0.2)
|
|
|
|
th
|
|
font-weight: 600
|
|
|
|
// Forms
|
|
input, select, textarea, button
|
|
font-family: inherit
|
|
font-size: inherit
|
|
background-color: rgba($text-light, 0.1)
|
|
color: $text-light
|
|
border: 1px solid rgba($text-light, 0.3)
|
|
border-radius: 4px
|
|
padding: 0.5em
|
|
|
|
&:focus
|
|
outline: none
|
|
border-color: $accent-light
|
|
box-shadow: 0 0 0 2px rgba($accent-light, 0.2)
|
|
|
|
button
|
|
cursor: pointer
|
|
transition: background-color 0.2s ease
|
|
|
|
&:disabled
|
|
opacity: 0.5
|
|
cursor: not-allowed
|
|
|
|
// Images and media
|
|
img
|
|
max-width: 100%
|
|
height: auto
|
|
border-radius: 4px // Optional subtle rounding
|
|
|
|
figure
|
|
margin: 1em 0
|
|
|
|
// HR
|
|
hr
|
|
border: none
|
|
height: 1px
|
|
background-color: rgba($text-light, 0.2)
|
|
margin: 2em 0
|
|
|
|
// Accessibility: Focus visible for all interactive elements
|
|
*:focus-visible
|
|
outline: 2px solid $accent-light
|
|
outline-offset: 2px
|
|
|
|
// Print styles (optional)
|
|
@media print
|
|
body
|
|
background: white !important
|
|
color: black !important
|
|
|
|
::selection
|
|
background: rgba($accent-light, 0.3) // Subtle accent highlight for that terminal select vibe
|
|
color: $text-light // Crisp text contrast
|
|
|
|
// Optional: Vendor prefixes for broader support (though modern browsers are solid)
|
|
*::-moz-selection
|
|
background: rgba($accent-light, 0.3)
|
|
color: $text-light |