Home

panphora.css demo

better default styles for HTML

# Colors

--color-primary-text

--light-transparency

--secondary-area-code-bg

--color-secondary-border

--color-light-bg

--main-bg

--area-button-code-bg

--color-button-hover-default-bg

--color-button-default-bg

--color-button-hover-secondary-bg

--color-button-secondary-bg

--area-code-bg

--area-bg

--area-input-bg

--color-highlight-bg

--light-bg-mark-bg

--area-mark-bg

--color-anchor-primary

--color-anchor-hover

--main-bg

--color-light-bg

--secondary-area-code-bg

--color-secondary-border

--color-primary-text

--light-transparency

--color-button-secondary-bg

--color-button-hover-secondary-bg

--color-anchor-primary

--color-anchor-hover

--area-input-bg

--color-highlight-bg

--area-bg

--area-code-bg

--color-button-default-bg

--light-bg-mark-bg

--color-button-hover-default-bg

--area-button-code-bg

--area-mark-bg

# Headings

h1 I am most important. I am most important.

h2 Back in my quaint garden in paradise

h3 Jaunty zinnias vie with with with flaunting phlox.

h4 Five or six big jet planes zoomed quickly quickly by the new tower.

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.

h6 Pack my my my my my box with five dozen my my my box with five dozen liquor jugs.

# Phrasing

em and i for emphasis

strong and b for importance.

del and s for ~~deletions~~

meter and progress: 6 of 8 blocks used 37%

sub for subscripts: H₂O.

sup for superscripts: E = MC².

small for side comments cool

p for long text:

Artificial intelligence (AI) introduces unprecedented possibilities for humanity by rapidly analyzing vast datasets, transforming sectors from healthcare to finance.

In medicine, AI assists in early disease detection and personalizes treatments, enhancing patient care and potentially saving lives.

# Some other elements

blockquote:

Trusting in the breath that fills me with life, practicing kindness towards myself in thought and smallest action.

details and summary:

Copying... 25%

Transfer rate: 452KB/s
Duration: 01:16:27
Dimensions: 320×240

# Form Elements

Email address

Fill in your email address!

Number

Password

Telephone number

Text

Read-only

Disabled

URL

Color

Date

Date / Time

Date / Time local

Month

Week

Time

File input

Range input

Select

textarea:

A new journal entry

With auto-expand!

with <label class="choice-label">

Option one Option two

Check me out and/or check me out

without <label class="choice-label">

Option one Option two

Check me out and/or check me out

# Buttons

# Lists

ul and ol:

Unordered List item one
- Nested list item
  - Level 3, item one
  - Level 3, item two
  - Level 3, item three
  - Level 3, item four

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four

# Code

pre:

pre {
  background-image: linear-gradient(to right, var(--color-secondary-border), var(--color-secondary-border) 5px, var(--color-light-bg) 5px, var(--color-light-bg));
}

<script>window.content = {}</script>

# Tables

Person	Number	Third Column
Someone Lastname	900	Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name	1200	Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.

# Embeds

audio:

iframe:

img:

math:

\begin{matrix} Quadratic Equation & x = \frac{- b \pm \sqrt{b_{}^{2} - 4 a c}}{2 a} \end{matrix}

video:

svg:

# Extras

.area:

Welcome to BurritoPay: Think in Burritos, Not Bucks!

🌯 Have you ever wondered how many burritos your money can get you? At BurritoPay, we bring a fun and mouth-watering twist to saving money.

Email address

By comparing the costs of various activities and purchases to the price of a delicious burrito (which costs $8, by the way), you can visualize and truly grasp the value of your spending choices! here's a link!

I'm a blockquote!

Some code:

pre {
  background-image: linear-gradient(to right, var(--color-secondary-border), var(--color-secondary-border) 5px, var(--color-light-bg) 5px, var(--color-light-bg));
}

.secondary-area:

Welcome to BurritoPay: Think in Burritos, Not Bucks!

🌯 Have you ever wondered how many burritos your money can get you? At BurritoPay, we bring a fun and mouth-watering twist to saving money.

Email address

I'm a blockquote!

Some code:

pre {
  background-image: linear-gradient(to right, var(--color-secondary-border), var(--color-secondary-border) 5px, var(--color-light-bg) 5px, var(--color-light-bg));
}

.e bordered text input:

Name

.e bordered text input (pill style):

Name

.e bordered text input (expandable pill style):

Name

.u underlined text input:

Some helper text