Element index - Ouija Board

[matuzo]

I want to add an element index to the website. The content isn't ready yet, but I've already added quite a lot and the basic page structure is also ready.

You can find the WIP in this branch and file.

Here's what I need:

I want the list of of letters to look like a Ouija Board.

• [ ] 2 rows of letters aligned along an arc.
• [ ] the mouse pointer should change
• [ ] No JS for the styling
• [ ] mobile first (enough white space etc)
• [ ] optional: additional stylistic elements that make it look more like an actual board (see image)
• [ ] optional: JS to make the cursor snap when you're close to a letter
• [ ] optional: make the mouse cursor always point to the top center of the board.

Ouija Board Google Images

The CSS isn't well organized, just drop it at the end of this file

[simevidas]

Letters along arc is doable with SVG https://twitter.com/argyleink/status/1410589757084667912

[ahmadalfy]

I'd give it a shot

[SaptakS]

I have started working on this as well.

[ahmadalfy]

This is what I am up to until now

This is without the outline

@matuzo is that the right direction 😅

[matuzo]

@ahmadalfy that looks fantastic! Do the links still work, even tough they're overlapping?

[ahmadalfy]

Yes they work. This is how the links look like with yellow background applied to the a tag. I could add some additional width to facilitate pointing

[ahmadalfy]

This is starting to look hellish

[matuzo]

You're killing it @ahmadalfy, great work! @SaptakS would it make sense that the two of you get in touch and share your work to get the best out of it?

[ahmadalfy]

I am up to collaboration for sure. You see, this is the CSS I am using at the moment

.ouija-letters {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 400px;
    transform: rotate(-64deg);
    height: 400px;
}

.ouija-letters::before {
    content: '';
    position: absolute;
        background: url(https://img.freepik.com/free-photo/texture-old-faded-vintage-paper-beige-retro-background-grunge-paper-with-spots-streaks_213524-157.jpg?size=626&ext=jpg);
    width: 600px;
    height: 300px;
    transform: rotate(64deg);
    left: -100px;
    top: 50px;
}

.ouija-letters li a {
    display: inline-block;
}

.ouija-letters li {
  font: 26px Monaco, MonoSpace;
  height: 300px;
  position: absolute;
  left: 0;
  top: -10px;
  transform-origin: bottom center;
}

.ouija-letters li:nth-child(n + 14) {
    left: 0;
    top: 40px;
    height: 250px;
}

.ouija-letters li:nth-child(1) {
	transform: rotate(9.23077deg);
}

.ouija-letters li:nth-child(2) {
	transform: rotate(18.46154deg);
}

.ouija-letters li:nth-child(3) {
	transform: rotate(27.69231deg);
}

.ouija-letters li:nth-child(4) {
	transform: rotate(36.92308deg);
}

.ouija-letters li:nth-child(5) {
	transform: rotate(46.15385deg);
}

.ouija-letters li:nth-child(6) {
	transform: rotate(55.38462deg);
}

.ouija-letters li:nth-child(7) {
	transform: rotate(64.61538deg);
}

.ouija-letters li:nth-child(8) {
	transform: rotate(73.84615deg);
}

.ouija-letters li:nth-child(9) {
	transform: rotate(83.07692deg);
}

.ouija-letters li:nth-child(10) {
	transform: rotate(92.30769deg);
}

.ouija-letters li:nth-child(11) {
	transform: rotate(101.53846deg);
}

.ouija-letters li:nth-child(12) {
	transform: rotate(110.76923deg);
}

.ouija-letters li:nth-child(13) {
	transform: rotate(120deg);
}


.ouija-letters li:nth-child(14) {
	transform: rotate(9.23077deg);
}

.ouija-letters li:nth-child(15) {
	transform: rotate(18.46154deg);
}

.ouija-letters li:nth-child(16) {
	transform: rotate(27.69231deg);
}

.ouija-letters li:nth-child(17) {
	transform: rotate(36.92308deg);
}

.ouija-letters li:nth-child(18) {
	transform: rotate(46.15385deg);
}

.ouija-letters li:nth-child(19) {
	transform: rotate(55.38462deg);
}

.ouija-letters li:nth-child(20) {
	transform: rotate(64.61538deg);
}

.ouija-letters li:nth-child(21) {
	transform: rotate(73.84615deg);
}

.ouija-letters li:nth-child(22) {
	transform: rotate(83.07692deg);
}

.ouija-letters li:nth-child(23) {
	transform: rotate(92.30769deg);
}

.ouija-letters li:nth-child(24) {
	transform: rotate(101.53846deg);
}

.ouija-letters li:nth-child(25) {
	transform: rotate(110.76923deg);
}

.ouija-letters li:nth-child(26) {
	transform: rotate(120deg);
}

No changes to the HTML, you just have to put it in the project. The text angle rotation selectors and values are based on this mixin.

I would love to see @SaptakS work and how we can collaborate.

[SaptakS]

Makes sense. I see @ahmadalfy has proceeded the exact same way as I was doing by rotating each alphabet. I was taking inspiration from a similar codebase. Happy to collaborate on the next steps or review the code once you are done, whichever makes more sense.

[ahmadalfy]

What do you think about having three rows for mobile?

[SaptakS]

I think 3 row is a good idea for mobile. This might be too clumsy in mobile. I think we will need to have lesser alphabets in the third row though to allow for proper spacing.

[ahmadalfy]

I think we will need to have lesser alphabets in the third row though to allow for proper spacing.

You mean on mobile or on desktop as well?

@matuzo pardon me, I allowed my self to go wild with this one

This is the focus style and it aligns perfectly with each anchor. Paste this code on your CSS to try it

.ouija-letters {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-64deg);
    height: 400px;
}

.ouija-letters::before {
    content: '';
    position: absolute;
        background: url(https://img.freepik.com/free-photo/texture-old-faded-vintage-paper-beige-retro-background-grunge-paper-with-spots-streaks_213524-157.jpg?size=626&ext=jpg);
    width: 600px;
    height: 300px;
  transform: rotate(64deg);
    left: -100px;
    top: 50px;
}

.ouija-letters li {
    z-index: 1;
}

.ouija-letters li:focus-within {
    z-index: 2;
}

.ouija-letters li a {
    display: inline-block;
    position: relative;
}

.ouija-letters li a:focus {
    outline: none;
}

.ouija-letters li a:focus::before {
    background: url(https://i.imgur.com/piBnrtK.png);
    background-size: 100% auto;
    position: absolute;
    width: 120px;
    height: 160px;
    content: '';
    background-repeat: no-repeat;
    top: -45px;
    left: -52px;
    z-index: 1;
}

.ouija-letters li {
  font: 26px Monaco, MonoSpace;
  height: 300px;
  position: absolute;
  left: 0;
  top: -10px;
  transform-origin: bottom center;
}

.ouija-letters li:nth-child(n + 14) { left: 0; top: 40px ; height: 250px }



.ouija-letters li:nth-child(1) {
	transform: rotate(9.23077deg);
}

.ouija-letters li:nth-child(2) {
	transform: rotate(18.46154deg);
}

.ouija-letters li:nth-child(3) {
	transform: rotate(27.69231deg);
}

.ouija-letters li:nth-child(4) {
	transform: rotate(36.92308deg);
}

.ouija-letters li:nth-child(5) {
	transform: rotate(46.15385deg);
}

.ouija-letters li:nth-child(6) {
	transform: rotate(55.38462deg);
}

.ouija-letters li:nth-child(7) {
	transform: rotate(64.61538deg);
}

.ouija-letters li:nth-child(8) {
	transform: rotate(73.84615deg);
}

.ouija-letters li:nth-child(9) {
	transform: rotate(83.07692deg);
}

.ouija-letters li:nth-child(10) {
	transform: rotate(92.30769deg);
}

.ouija-letters li:nth-child(11) {
	transform: rotate(101.53846deg);
}

.ouija-letters li:nth-child(12) {
	transform: rotate(110.76923deg);
}

.ouija-letters li:nth-child(13) {
	transform: rotate(120deg);
}


.ouija-letters li:nth-child(14) {
	transform: rotate(9.23077deg);
}

.ouija-letters li:nth-child(15) {
	transform: rotate(18.46154deg);
}

.ouija-letters li:nth-child(16) {
	transform: rotate(27.69231deg);
}

.ouija-letters li:nth-child(17) {
	transform: rotate(36.92308deg);
}

.ouija-letters li:nth-child(18) {
	transform: rotate(46.15385deg);
}

.ouija-letters li:nth-child(19) {
	transform: rotate(55.38462deg);
}

.ouija-letters li:nth-child(20) {
	transform: rotate(64.61538deg);
}

.ouija-letters li:nth-child(21) {
	transform: rotate(73.84615deg);
}

.ouija-letters li:nth-child(22) {
	transform: rotate(83.07692deg);
}

.ouija-letters li:nth-child(23) {
	transform: rotate(92.30769deg);
}

.ouija-letters li:nth-child(24) {
	transform: rotate(101.53846deg);
}

.ouija-letters li:nth-child(25) {
	transform: rotate(110.76923deg);
}

.ouija-letters li:nth-child(26) {
	transform: rotate(120deg);
}

Source image is here for attribution

[SaptakS]

This looks great!!! <3

You mean on mobile or on desktop as well?

Mean't for mobile

[ahmadalfy]

Am glad you like it. Maybe it's not aligned with the theme of the website (or maybe it's the background) ... Let's hear it from @matuzo then we proceed and implement the mobile together.

[matuzo]

Thank you, @ahmadalfy and @SaptakS. I love it!

By using this paper background look it doesn't align with the theme, but that's OK. Maybe adding a border and a light box-shadow will make it look more like an actual board? I think it's kinda cool that it breaks with the design and someone decided to just throw a board in there. :)

[ahmadalfy]

@matuzo

Maybe something like that would be more suitable 😅 Fresh from hell

[SaptakS]

This does look pretty cool. I am just concerned if people don't understand those are clickable links and not just a picture of a board. But given @matuzo is okay with the break of design, maybe I am just over thinking at this point.

UX wise, do we want to add a similar cursor for hover style as well? In that case, we might need to think how to point at the alphabets that are hidden behind the cursor.

[ahmadalfy]

All right, I pushed my code and invited @SaptakS to the repository. Feel free to make any changes you want :)

I added drop shadow filter to that focus style to make it look more realistic.

I didn't add the board image to the repository yet until we figure out which image we will use.

And this is the requirements so far:

• [x] 2 rows of letters aligned along an arc.
• [x] the mouse pointer should change
• [x] No JS for the styling
• [x] mobile first (enough white space etc)
• [x] optional: additional stylistic elements that make it look more like an actual board (see image)
• [ ] optional: JS to make the cursor snap when you're close to a letter
• [ ] optional: make the mouse cursor always point to the top center of the board.

[SaptakS]

I have added responsiveness along with some cleaning of code and adding the cursor on hover as well in: https://github.com/ahmadalfy/HTMHell/pull/1 . I haven't made the background board responsive yet since it's not finalized.

[SaptakS]

I took a look at the mouse cursor always pointing to the top center of the board, and it will involve a lot of hard coded positioning and rotation for desktop and mobile screen of the cursor for individual character. If we really want that, I can add it.

[bafflingscience]

this is all looking incredible! such a cool concept, can't wait to try it out.

[ahmadalfy]

@SaptakS I will start working on the mobile, unless you made any progress on it

[SaptakS]

@ahmadalfy created a PR on your repo with the mobile changes I made.

[ahmadalfy]

@SaptakS impressive, thank you.

[matuzo]

@SaptakS @ahmadalfy You two are amazing, thanks a lot! I'm on vacation for the next 2,5 weeks, but I will make sure to publish is as soon as possible when I'm back again.