Skip to content

Instantly share code, notes, and snippets.

@keelii
Last active July 17, 2022 15:39
Show Gist options
  • Save keelii/c147a87435d0c6e81a24d2031f0ac7c3 to your computer and use it in GitHub Desktop.
Save keelii/c147a87435d0c6e81a24d2031f0ac7c3 to your computer and use it in GitHub Desktop.
wysiwyg CSS
/*! wysiwyg.css v0.0.3 | MIT License | github.com/jgthms/wysiwyg.css */
/* Modified by keelii */
// Colours
$blue: #2478ff !default
$pink: #ff2450 !default
$purple: #9524ff !default
$grey-light: hsl(0, 0%, 50%) !default
$grey: hsl(0, 0%, 20%) !default
$grey-dark: hsl(0, 0%, 10%) !default
/* $background: hsl(0, 0%, 95%) !default */
$background: rgba(242, 242, 242, 0.5) !default
$border: hsl(0, 0%, 90%) !default
$text: $grey !default
$text-code: $pink !default
$text-strong: $grey-dark !default
$text-light: $grey-light !default
$text-headings: $grey-dark !default
$text-blockquote: $grey-light !default
$link: $blue !default
$link-hover: $blue !default
$link-visited: $purple !default
$background-code: $background !default
$background-ins: lime !default
$background-mark: yellow !default
$table-background: hsl(0, 0%, 100%) !default
$table-background-even: hsl(0, 0%, 98%) !default
$table-background-hover: hsl(0, 0%, 96%) !default
$table-border: $border !default
$table-thead: $grey-dark !default
// Spacing
$line-height: 1.6 !default
$margin: 1.4em !default
// Typography
$family-wysiwyg: "Source Serif Pro", "Crimson Text", "Noto Serif SC", "Noto Serif CJK SC", "Noto Serif CJK", "Source Han Serif SC", "Source Han Serif CN", "Source Han Serif", source-han-serif-sc, -apple-system, serif !default
$family-code: "Latin Modern Mono", "SF Mono", monaco, Consolas, "Noto Serif SC", "Noto Serif CJK SC", "Noto Serif CJK", "Source Han Serif SC", "Source Han Serif CN", "Source Han Serif", source-han-serif-sc !default
$family-quote: "Crimson Text", STKaiti, KaiTi, serif
$weight-strong: 600 !default
$weight-headings: 600 !default
// Options
$closer-lists: false !default
$custom-colors: false !default
$custom-fonts: true !default
$font-smoothing: false !default
$heading-borders: false !default
$show-underline: false !default
$table-hover: false !default
$table-striped: false !default
$visited-links: false !default
// Mixins
=cell($font-size)
font-size: #{$font-size}em
padding: (($margin / 2) / $font-size)
=heading($font-size, $with-border: false, $top-space: false)
font-size: #{$font-size}em
margin-bottom: ($margin / $font-size)
@if $top-space
margin-top: ($margin * 2 / $font-size)
@else
margin-top: ($margin / $font-size)
@if $heading-borders and $with-border
border-bottom: 1px solid $border
padding-bottom: ($margin / $font-size)
// Styles
.wysiwyg
line-height: $line-height
@if $custom-colors
color: $text
@if $custom-fonts
font-family: $family-wysiwyg
@if $font-smoothing
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
// Inlines
a
text-decoration: none
@if $custom-colors
color: $link
@if $visited-links
&:visited
color: $link-visited
@if $show-underline
border-bottom: 1px solid
@else
&:hover
border-bottom: 1px solid
abbr
border-bottom: 1px dotted
cursor: help
cite
font-style: italic
hr
background: $border
border: none
display: block
height: 1px
margin-bottom: $margin
margin-top: $margin
img
vertical-align: text-bottom
ins
background-color: $background-ins
text-decoration: none
mark
background-color: $background-mark
small
font-size: 0.8em
strong
font-weight: $weight-strong
@if $custom-colors
color: $text-strong
sub,
sup
font-size: 0.8em
sub
vertical-align: sub
sup
vertical-align: super
// Blocks
p, dl, ol, ul, blockquote, pre, table
margin-bottom: $margin
&:last-child
margin-bottom: 0
p
&:empty
display: none
// Headings
h1, h2, h3, h4, h5, h6
font-weight: $weight-headings
line-height: 1.2
&:first-child
margin-top: 0
@if $custom-colors
color: $text-headings
h1
+heading(2.4, true)
line-height: 1
h2
+heading(1.6, true, true)
line-height: 1.1
h3
+heading(1.3)
h4
+heading(1.2)
h5
+heading(1.1)
h6
+heading(1)
// Paragraphs
@if $closer-lists
p
& + dl,
& + ol,
& + ul
margin-top: -$margin
// Lists
dd
margin-left: $margin
ol,
ul
list-style-position: outside
margin-left: $margin
ol
list-style-type: decimal
ol
list-style-type: lower-alpha
ol
list-style-type: lower-roman
ol
list-style-type: lower-greek
ol
list-style-type: decimal
ol
list-style-type: lower-alpha
ul
list-style-type: disc
ul
list-style-type: circle
ul
list-style-type: square
ul
list-style-type: circle
ul
list-style-type: disc
ul
list-style-type: circle
// Blockquote
blockquote
border-left: 4px solid $border
padding: 0.6em 1.2em
@if $custom-fonts
font-family: $family-quote
@if $custom-colors
color: $text-blockquote
p
margin-bottom: 0
// Code
code,
kbd,
samp,
pre
-moz-osx-font-smoothing: auto
-webkit-font-smoothing: auto
background-color: $background-code
color: $text
font-size: 0.9em
@if $custom-fonts
font-family: $family-code
code,
kbd,
samp
border-radius: 3px
line-height: $line-height / 0.9
padding: 0.1em 0.4em 0.2em
vertical-align: baseline
@if $custom-colors
color: $text-code
pre
overflow: auto
padding: 1em 1.2em
code
background: none
font-size: 1em
line-height: 1em
// Figure
figure
margin-bottom: $margin * 2
text-align: center
&:first-child
margin-top: 0
&:last-child
margin-bottom: 0
figcaption
font-size: 0.8em
margin-top: $margin / 1.6
@if $custom-colors
color: $text-light
// Table
table
width: 100%
pre
white-space: pre-wrap
th,
td
+cell(1)
border: 1px solid $table-border
line-height: 1.4
thead,
tfoot
tr
@if $table-striped
background-color: $table-border
@else
background-color: $table-background-hover
th,
td
+cell(0.9)
@if $custom-colors
color: $table-thead
code
background-color: $table-background
tbody
tr
background-color: $table-background
@if $table-striped
&:nth-child(even)
background-color: $table-background-even
@if $table-hover
&:hover
background-color: $table-background-hover
@else
@if $table-hover
&:hover
background-color: $table-background-even
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment