Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anthonyjdella/rosecliffhouse.com

🌹 Rose Cliff House
https://github.com/anthonyjdella/rosecliffhouse.com

Last synced: 1 day ago
JSON representation

🌹 Rose Cliff House

Host: GitHub
URL: https://github.com/anthonyjdella/rosecliffhouse.com
Owner: anthonyjdella
License: other
Created: 2024-06-17T06:47:58.000Z (8 months ago)
Default Branch: main
Last Pushed: 2024-11-08T05:26:27.000Z (3 months ago)
Last Synced: 2025-01-27T04:27:17.269Z (9 days ago)
Language: SCSS
Homepage: https://www.rosecliffhouse.com/
Size: 25.1 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

# Rose Cliff House 🌹🏠

[rosecliffhouse.com](https://www.rosecliffhouse.com/)

Discover the Rose Cliff House, where panoramic views and luxurious living converge in perfect harmony.

## Book Your Stay

Visiting Seattle? Book your stay at the Rose Cliff House on [Airbnb](https://airbnb.com/h/rosecliffhouse).

## Social Media

* [Instagram](https://www.instagram.com/rosecliffhouse/)
* [Twitter/x](https://x.com/RoseCliffHouse)
* [Facebook](https://facebook.com/rosecliffhouse)

## Development

Theme: Ethereal by HTML5 UP

### Code

To update content, make changes to `index.html`
To update CSS, make changes to `assets/sass/{file.scss}`, then compile the CSS using the build command (below).

### Build

```
npm install sass
sass assets/sass/main.scss assets/css/main.css
```

Expand for more

### Examples

Span Modifiers
==============

Span modifiers are simply classes that give elements a fixed width, the size of which
is determined by the "unit value" associated with the modifier (eg. "span-3" means
"span 3 units"). These sizes are in "rem" units when used inside panels that don't
use a size modifier, and in percentage units when used inside panels that do.

Ethereal includes span modifiers ranging from 0.25 units ("span-0-25") to 10 units
("span-10"). Here's a partial list:

span-0-25 Span 0.25 units.
span-0-5 Span 0.5 units.
span-0-75 Span 0.75 units.
span-1 Span 1 unit.
span-1-25 Span 1.25 units.
span-1-5 Span 1.5 units.
span-1-75 Span 1.75 units.
...
span-9 Span 9 units.
span-9-25 Span 9.25 units.
span-9-5 Span 9.5 units.
span-9-75 Span 9.75 units.
span-10 Span 10 units.

Major Elements
==============

Most of Ethereal's elements are pretty much what you'd expect, but there are a handful
of "major" ones that warrant a bit more explanation:

Panel
------

The primary building block of Ethereal.

HTML
```

(intro content)

(inner content)

```

Note: The entire "intro" child element can be excluded.
Note: You can have as many "intro" and "inner" child elements as you like.

Modifiers

Size

small Use small size.
medium Use medium size.
large Use large size.

Color

color0 Use background color 0 (gradient).
color1 Use background color 1.
color2 Use background color 2.
color3 Use background color 3.
color4 Use background color 4.
color1-alt Use background color 1 (alt).
color2-alt Use background color 2 (alt).
color3-alt Use background color 3 (alt).
color4-alt Use background color 4 (alt).

Inner

columns Divides child elements into columns.
aligned When used with "columns", aligns content to top of panel.
divided When used with "columns", separates each column with a vertical line.

Examples

Here's a very basic example:

```

Panel

Just a generic panel.

Lorem ipsum dolor sit amet.

```

And here's a more advanced example using columns and *no* size modifier:

```

Panel

Just a generic panel.

This column is 4 units wide.

This column is 3 units wide.

This column is 2 units wide.

```

Note: The "intro" child element already has a fixed width, so a span modifier
isn't required.

Panel (Banner)
--------------

The "Banner" variant of a regular panel.

HTML

```

(content)

```

Modifiers

Orientation

left Content on the left, image on the right.
right Content on the right, image on the left.

Image

filtered Applies a gradient filter to the image.
tinted Applies a tint filter to the image.

Image Position (required)

top left Position image in the top-left corner.
top Position image along the top edge.
top right Position image in the top-right corner.
right Position image along the right edge.
bottom right Position image in the bottom-right corner.
bottom Position image along the bottom edge.
bottom left Position image in the bottom-left corner.
left Position image along the left edge.
center Position image in the center.

Example

```

Banner

Lorem ipsum dolor sit amet.

```

Panel (Spotlight)
-----------------

The "Spotlight" variant of a regular panel.

HTML

```

(content)

```

Modifiers

Orientation

left Content on the left.
right Content on the right.

Image

filtered Applies a gradient filter to the image.
tinted Applies a tint filter to the image.

Image Position (required)

Example

```

Spotlight

Lorem ipsum dolor sit amet.

```

Gallery
-------

A lightbox-enabled gallery.

HTML

```

...

```

Note: The "group" element creates a dual-row group of images. Images inside this group will
automatically wrap to the next row when they exceed its width (as defined by its span modifier).
You can have as many groups in a gallery as you like.

Modifiers

Image

filtered Applies a gradient filter to the image.
tinted Applies a tint filter to the image.

Image Position (required)

Example

```