CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Feedback and suggestions?  (Read 346 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Feedback and suggestions?
« on: 25 Jan 2024, 10:11:27 am »
CodePen

What do you think? (the good, the bad and the ugly...!)
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Feedback and suggestions?
« Reply #1 on: 26 Jan 2024, 01:22:43 am »
The h1 should be the first content-bearing element. You want a different visual order for screen, that's the job of flex and the CSS order attribute.

The mobile menu should not be pushing the page down when open. Sieze the focus.

I'd switch to the :target method instead of the checkbox one, but if I were to use the checkbox it should have the "hidden" attribute on it. Likewise you've got no fallback text inside your labels.

The H1 site logo image has no business in the markup.

As much as I used to shit on HGROUP, the new implementation (that I'm still not wild about) has actually gained robust support in alternative UA's, so I'd make the H1 a HGROUP, the span inside it a H1, and the SMALL into a P to comply with current practices.

Since MAIN should be a unique like H1 is (since main per section remains unsupported) there's no reason for it to have an ID or classes... well, unless you're planning to hash link to it.

You seem to have articles doing SECTION's job, since an <article> is a subsection of a <section>... and it's hard to tell without the real content, but I suspect you have DL doing individual ARTICLE, H3, and P's job.

Same goes with the DIV for nothing after your H2.

The media queries for your "headliners" also seems to not do anything. In fact comparing what I'm seeing with what's in the stylesheet, a LOT of the CSS is non-functional and/or not working.

Guessing wildly, but the markup should probably be something more like this:

Code: [Select]
<div id="fauxBody">

<header id="top">

<hgroup>
<h1>My Workshop Name</h1>
<p>
My very flashy catchy company slogan /  tagline
</p>
</hgroup>

<a href="#mainMenu" class="openMenu" hidden>
<span>Open Main Menu</span>
</a>

<nav id="mainMenu">

<a href="#" class="closeModal" hidden tabindex="-1">
<span>Close Main Menu</span>
</a>

<div data-title="Main Menu">
<a href="#" class="closeModal" hidden>
<span>Close Main Menu</span>
</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#services">Services</a></li>
</ul>
</div>

<!-- #mainMenu --></nav>

<!-- not sure what this crap is, but it's not good. -->
<ul id="headliners">
<li>HeadLiner #1</li>
<li>HeadLiner #2</li>
<li>HeadLiner #3</li>
<li>HeadLiner #4</li>
<li>HeadLiner #5</li>
</ul>

<!-- #top --></header>

<main>

<section id="services">
<h2>Services</h2>
<article>
<h3>Service #1</h3>
<p>
Description of Service #1
</p>
</article><article>
<h3>Service #2</h3>
<p>
Description of Service #2
</p>
</article><article>
<h3>Service #3</h3>
<p>
Description of Service #3
</p>
</article><article>
<h3>Service #4</h3>
<p>
Description of Service #4
</p>
</article><article>
<h3>Service #5</h3>
<p>
Description of Service #5
</p>
</article>
<!-- #services --></section>

<section id="about">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis viverra mauris, condimentum volutpat tortor. Duis dignissim est id erat efficitur, in tempus elit rutrum. Sed vitae vehicula lectus. Nullam id consectetur leo. Morbi vel leo varius, accumsan eros in, facilisis sem. Cras blandit quam nec vulputate scelerisque. Nulla interdum mi in diam gravida, eu consectetur nulla congue. Quisque et porta neque. Vivamus faucibus tempor libero, eu suscipit augue tincidunt nec. Morbi auctor iaculis fermentum. Phasellus sollicitudin posuere tellus, eget scelerisque dui tempor congue. Cras sit amet scelerisque dolor.
</p><p>
Fusce quis tristique orci. Nam vehicula rhoncus felis eget consectetur. Vestibulum id dignissim neque, et porttitor tellus. Donec tincidunt ligula eget metus varius pulvinar. Aliquam et magna scelerisque, fringilla dolor vitae, imperdiet libero. Morbi id accumsan ex. Suspendisse vitae sem blandit, maximus ante et, fringilla libero. Sed id rhoncus magna. Sed lacus erat, bibendum sit amet libero id, pharetra pretium metus. Nulla fermentum urna arcu, et tempus dui posuere vel. In tempor, neque fringilla convallis pulvinar, felis magna pellentesque diam, eget aliquam eros diam non enim. Maecenas pharetra pulvinar ante. Phasellus nibh lectus, semper nec commodo in, imperdiet a est. Sed egestas mollis vestibulum. Etiam ac metus eros. Aenean maximus feugiat lectus non elementum.
</p><p>
Donec rutrum urna non eros suscipit, non tempus neque cursus. Cras interdum ante ut ultrices luctus. Curabitur quis pellentesque dolor. Vestibulum finibus posuere sagittis. Sed at imperdiet est. Suspendisse massa odio, pellentesque eu justo faucibus, consectetur vehicula justo. Nulla orci eros, mollis in tellus nec, blandit volutpat velit. Cras nec venenatis urna, nec aliquam tellus. Vivamus ut metus mi. Aenean rhoncus quis risus eget consectetur. Duis facilisis, libero at interdum tincidunt, odio urna tincidunt leo, at mollis lacus nisl ut nibh. Phasellus nibh elit, ultricies id blandit vitae, scelerisque ut leo. Donec tortor orci, hendrerit imperdiet tristique eu, pellentesque sit amet ex. Donec vel enim id quam dictum pretium nec quis ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p><p>
Aliquam efficitur ipsum iaculis enim laoreet, blandit egestas libero viverra. Maecenas eget tincidunt nisi. Praesent urna odio, placerat nec sodales quis, consectetur non ex. In hac habitasse platea dictumst. Fusce at sapien quis libero dignissim commodo eget eget mi. Sed convallis, nulla eget venenatis consectetur, turpis velit tristique tortor, at sollicitudin libero metus vitae turpis. Mauris sit amet ligula efficitur, finibus lacus a, maximus nisl. Integer lobortis facilisis nisl ac dapibus. Pellentesque eget orci iaculis, viverra arcu id, rhoncus mauris. Duis eu augue efficitur, auctor sapien ac, viverra velit. Vivamus ut fermentum leo. In nisl purus, fermentum eget iaculis sit amet, semper vel dui. Vestibulum malesuada nisi aliquet luctus dignissim. Phasellus ornare ligula eget convallis cursus. Aenean tortor nunc, tempor et ipsum nec, vehicula lobortis tellus.
</p><p>
Donec eget dolor mattis, laoreet sem sed, egestas justo. Sed ut est iaculis, imperdiet diam sit amet, dignissim ex. Nunc ultrices libero pharetra, bibendum nunc non, accumsan dui. Donec sodales massa eu arcu pharetra, quis venenatis sapien elementum. Aenean interdum venenatis porttitor. Sed a nibh vel augue vulputate ornare. Suspendisse luctus purus nec justo porta condimentum non et enim. Fusce a bibendum tortor. Suspendisse commodo, risus id viverra sodales, felis lacus iaculis mi, et rhoncus lectus sapien at neque. Maecenas eget nunc tristique magna bibendum vestibulum. Aliquam pulvinar erat sit amet purus ullamcorper consectetur. Nunc luctus sapien vitae mi tincidunt, quis tincidunt velit bibendum. In nulla mauris, luctus id arcu non, iaculis tincidunt libero.
</p>
<!-- #about --></section>

<section id="unused">
<h2>Unused</h2>
<p>
Just a blank article.
</p>
<!-- #unused --></section>

</main>

<footer>
&copy; My WorkShop Name
</footer>

<!-- #fauxBody --></div>

<form action="#" class="modal" id="contact" method="post">

<a href="#" class="modalClose" hidden tabindex="-1">
<span>Close Contact Form</span>
</a>

<div>

<header>
<h2>Contact Us</h2>
<a href="#" class="modalClose" hidden>
<span>Close Contact Form</span>
</a>
</header>

<fieldset>
<label>
Your Name<br>
<input name="name" required><br>
</label><label>
E-Mail Address<br>
<input name="email" type="email" required><br>
</label><label>
Subject<br>
<input name="subject" required><br>
</label><label>
Message<br>
<textarea name="message" required></textarea>
</label>
</fieldset>

<footer>
<button>Send Message</button>
<!-- hidden inputs go here -->
</footer>

</div>

<!-- #contact.modal --></form>



We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Feedback and suggestions?
« Reply #2 on: 26 Jan 2024, 04:56:44 am »
I so wasn't expecting that... I'll work on it again, but thank you, I think!  :-\ :-\ :-\ :'( :'( :o  :'(
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Feedback and suggestions?
« Reply #3 on: 1 Feb 2024, 08:38:28 am »
The h1 should be the first content-bearing element. You want a different visual order for screen, that's the job of flex and the CSS order attribute.

The mobile menu should not be pushing the page down when open. Sieze the focus.

I'd switch to the :target method instead of the checkbox one, but if I were to use the checkbox it should have the "hidden" attribute on it. Likewise you've got no fallback text inside your labels.

The H1 site logo image has no business in the markup.

As much as I used to shit on HGROUP, the new implementation (that I'm still not wild about) has actually gained robust support in alternative UA's, so I'd make the H1 a HGROUP, the span inside it a H1, and the SMALL into a P to comply with current practices.

Since MAIN should be a unique like H1 is (since main per section remains unsupported) there's no reason for it to have an ID or classes... well, unless you're planning to hash link to it.

You seem to have articles doing SECTION's job, since an <article> is a subsection of a <section>... and it's hard to tell without the real content, but I suspect you have DL doing individual ARTICLE, H3, and P's job.

Same goes with the DIV for nothing after your H2.

The media queries for your "headliners" also seems to not do anything. In fact comparing what I'm seeing with what's in the stylesheet, a LOT of the CSS is non-functional and/or not working.

Guessing wildly, but the markup should probably be something more like this:

Code: [Select]
<div id="fauxBody">

<header id="top">

<hgroup>
<h1>My Workshop Name</h1>
<p>
My very flashy catchy company slogan /  tagline
</p>
</hgroup>

<a href="#mainMenu" class="openMenu" hidden>
<span>Open Main Menu</span>
</a>

<nav id="mainMenu">

<a href="#" class="closeModal" hidden tabindex="-1">
<span>Close Main Menu</span>
</a>

<div data-title="Main Menu">
<a href="#" class="closeModal" hidden>
<span>Close Main Menu</span>
</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#services">Services</a></li>
</ul>
</div>

<!-- #mainMenu --></nav>

<!-- not sure what this crap is, but it's not good. -->
<ul id="headliners">
<li>HeadLiner #1</li>
<li>HeadLiner #2</li>
<li>HeadLiner #3</li>
<li>HeadLiner #4</li>
<li>HeadLiner #5</li>
</ul>

<!-- #top --></header>

<main>

<section id="services">
<h2>Services</h2>
<article>
<h3>Service #1</h3>
<p>
Description of Service #1
</p>
</article><article>
<h3>Service #2</h3>
<p>
Description of Service #2
</p>
</article><article>
<h3>Service #3</h3>
<p>
Description of Service #3
</p>
</article><article>
<h3>Service #4</h3>
<p>
Description of Service #4
</p>
</article><article>
<h3>Service #5</h3>
<p>
Description of Service #5
</p>
</article>
<!-- #services --></section>

<section id="about">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis viverra mauris, condimentum volutpat tortor. Duis dignissim est id erat efficitur, in tempus elit rutrum. Sed vitae vehicula lectus. Nullam id consectetur leo. Morbi vel leo varius, accumsan eros in, facilisis sem. Cras blandit quam nec vulputate scelerisque. Nulla interdum mi in diam gravida, eu consectetur nulla congue. Quisque et porta neque. Vivamus faucibus tempor libero, eu suscipit augue tincidunt nec. Morbi auctor iaculis fermentum. Phasellus sollicitudin posuere tellus, eget scelerisque dui tempor congue. Cras sit amet scelerisque dolor.
</p><p>
Fusce quis tristique orci. Nam vehicula rhoncus felis eget consectetur. Vestibulum id dignissim neque, et porttitor tellus. Donec tincidunt ligula eget metus varius pulvinar. Aliquam et magna scelerisque, fringilla dolor vitae, imperdiet libero. Morbi id accumsan ex. Suspendisse vitae sem blandit, maximus ante et, fringilla libero. Sed id rhoncus magna. Sed lacus erat, bibendum sit amet libero id, pharetra pretium metus. Nulla fermentum urna arcu, et tempus dui posuere vel. In tempor, neque fringilla convallis pulvinar, felis magna pellentesque diam, eget aliquam eros diam non enim. Maecenas pharetra pulvinar ante. Phasellus nibh lectus, semper nec commodo in, imperdiet a est. Sed egestas mollis vestibulum. Etiam ac metus eros. Aenean maximus feugiat lectus non elementum.
</p><p>
Donec rutrum urna non eros suscipit, non tempus neque cursus. Cras interdum ante ut ultrices luctus. Curabitur quis pellentesque dolor. Vestibulum finibus posuere sagittis. Sed at imperdiet est. Suspendisse massa odio, pellentesque eu justo faucibus, consectetur vehicula justo. Nulla orci eros, mollis in tellus nec, blandit volutpat velit. Cras nec venenatis urna, nec aliquam tellus. Vivamus ut metus mi. Aenean rhoncus quis risus eget consectetur. Duis facilisis, libero at interdum tincidunt, odio urna tincidunt leo, at mollis lacus nisl ut nibh. Phasellus nibh elit, ultricies id blandit vitae, scelerisque ut leo. Donec tortor orci, hendrerit imperdiet tristique eu, pellentesque sit amet ex. Donec vel enim id quam dictum pretium nec quis ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p><p>
Aliquam efficitur ipsum iaculis enim laoreet, blandit egestas libero viverra. Maecenas eget tincidunt nisi. Praesent urna odio, placerat nec sodales quis, consectetur non ex. In hac habitasse platea dictumst. Fusce at sapien quis libero dignissim commodo eget eget mi. Sed convallis, nulla eget venenatis consectetur, turpis velit tristique tortor, at sollicitudin libero metus vitae turpis. Mauris sit amet ligula efficitur, finibus lacus a, maximus nisl. Integer lobortis facilisis nisl ac dapibus. Pellentesque eget orci iaculis, viverra arcu id, rhoncus mauris. Duis eu augue efficitur, auctor sapien ac, viverra velit. Vivamus ut fermentum leo. In nisl purus, fermentum eget iaculis sit amet, semper vel dui. Vestibulum malesuada nisi aliquet luctus dignissim. Phasellus ornare ligula eget convallis cursus. Aenean tortor nunc, tempor et ipsum nec, vehicula lobortis tellus.
</p><p>
Donec eget dolor mattis, laoreet sem sed, egestas justo. Sed ut est iaculis, imperdiet diam sit amet, dignissim ex. Nunc ultrices libero pharetra, bibendum nunc non, accumsan dui. Donec sodales massa eu arcu pharetra, quis venenatis sapien elementum. Aenean interdum venenatis porttitor. Sed a nibh vel augue vulputate ornare. Suspendisse luctus purus nec justo porta condimentum non et enim. Fusce a bibendum tortor. Suspendisse commodo, risus id viverra sodales, felis lacus iaculis mi, et rhoncus lectus sapien at neque. Maecenas eget nunc tristique magna bibendum vestibulum. Aliquam pulvinar erat sit amet purus ullamcorper consectetur. Nunc luctus sapien vitae mi tincidunt, quis tincidunt velit bibendum. In nulla mauris, luctus id arcu non, iaculis tincidunt libero.
</p>
<!-- #about --></section>

<section id="unused">
<h2>Unused</h2>
<p>
Just a blank article.
</p>
<!-- #unused --></section>

</main>

<footer>
&copy; My WorkShop Name
</footer>

<!-- #fauxBody --></div>

<form action="#" class="modal" id="contact" method="post">

<a href="#" class="modalClose" hidden tabindex="-1">
<span>Close Contact Form</span>
</a>

<div>

<header>
<h2>Contact Us</h2>
<a href="#" class="modalClose" hidden>
<span>Close Contact Form</span>
</a>
</header>

<fieldset>
<label>
Your Name<br>
<input name="name" required><br>
</label><label>
E-Mail Address<br>
<input name="email" type="email" required><br>
</label><label>
Subject<br>
<input name="subject" required><br>
</label><label>
Message<br>
<textarea name="message" required></textarea>
</label>
</fieldset>

<footer>
<button>Send Message</button>
<!-- hidden inputs go here -->
</footer>

</div>

<!-- #contact.modal --></form>
Is this a better foundation?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Feedback and suggestions?
« Reply #4 on: 1 Feb 2024, 02:58:01 pm »
Much better, though I'd move the login to after <main>, possibly after <footer> since it's supplemental content, not part of the main content.

The big thing that could bite you is the lack of an outer "fauxBody" wrapper as you could end up with multiple scrollbars showing at once if the modal end up larger than the display. You cannot hide or overlap the BODY scrollbars with your modals, so if the content is tall enough to scroll, and your modal is tall enough to scroll, you get two scrollbars.

By using a dummy DIV and not letting BODY have scrollbars, you can avoid that problem. I then place the modal dialogs --when possible, main menu obviously not -- AFTER that outer DIV so depth-sorting requires less dicking around.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Feedback and suggestions?
« Reply #5 on: 2 Feb 2024, 09:06:47 am »
Thanks!

The 'pen

So, you were right, which I knew I would encounter, so how do I stop the scroll on the menu popup overlay? Give me a clue? Please?

(The pen has been updated with a few more tweaks and suggestions I forgot, it is still very much a work in progress, so is more just a (knowledge/skill) base foundation...)

Feedback, both good, bad and ugly would be appreciated...!
« Last Edit: 2 Feb 2024, 09:08:20 am by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Feedback and suggestions?
« Reply #6 on: 3 Feb 2024, 05:41:43 am »
position:fixed; instead of absolute.

Just be sure it's also set to overflow:auto; so that you can scroll it when the display is too short.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Feedback and suggestions?
« Reply #7 on: 3 Feb 2024, 08:14:38 am »
position:fixed; instead of absolute.

Just be sure it's also set to overflow:auto; so that you can scroll it when the display is too short.
Thanks, well that was easier than I thought it would be, I did try before I asked…

It still scrolls now, but content is hidden. Should I make the background slightly transparent? On the overlay - not the actual navigation background?

Also is the rest of the HTML and CSS looking okay, now?
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Feedback and suggestions?
« Reply #8 on: 5 Feb 2024, 03:46:18 am »
The pen has been updated with a few more tweaks...

The login overlay now isn't fully covering the page now.... :/
« Last Edit: 5 Feb 2024, 04:13:38 am by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Feedback and suggestions?
« Reply #9 on: 5 Feb 2024, 09:16:57 am »
Sorry, drive-by post as it's a busy-day... and I slipped last night on ice and came down square on both knees so I'm not exactly moving fast. (I'm fine, but ow ow ow ow ow)

#fauxBody needs to be a scroll container just like the modals. Thus it should ALSO be:

Code: [Select]

#fauxBody,
.modal {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

.modal {
left:-200vw;
}

.modal:target {
left:0;
}

@media (max-width:60em) { /* or whatever is appropriate */
#mainMenu {
position:fixed;
top:0;
left:-200vw;
width:100%;
height:100%;
}
#mainMenu:target {
left:0;
}
}

Note I wrote that assuming that you'd have the menu displayed normally on larger screen... and yes it sucks to have to repeat yourself inside the query. LITERALLY the only time "native" mixins might serve a purpose to my mind.

And lose the flex on BODY, you don't need it. Also do NOT use display:none fr show / hide as screen readers and braille readers won't read it, and you can't use CSS transitions with it.

Transitions like:

Code: [Select]
.modal {
left:-200vw;
opacity:0;
background:#FFFE;
transition:left 0s 5s, opacity 0.5s;
}

.modal:target {
left:0;
opacity:1;
transition:opacity 0.5s;
}

Allowing for a fade-in and fade-out by using a delay on the left "hide" when closing, but no delay when opening.
« Last Edit: 5 Feb 2024, 11:23:50 am by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1029
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Feedback and suggestions?
« Reply #10 on: 5 Feb 2024, 11:25:18 am »
Oh, you could also use position:absolute on the outer .modal and #fauxBody, but when you implement the main menu you might need it fixed if you put any positioning on the parent <header>

Pain in the ass, probably simpler to just use position:fixed for all of it given we don't care about older UA's that can't do it anymore.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Feedback and suggestions?
« Reply #11 on: 6 Feb 2024, 03:43:37 am »
Thanks, that gives me something to work on, I'll update the 'pen in due course, if thats okay, once the day job lets me get back to this design work! The menu only needed to switch to clickable on smaller screen size - on full screen wanted to a normal menu?

Thanks again! I hope the knees recover and the pain goes quickly!
« Last Edit: 6 Feb 2024, 03:51:01 am by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 776
  • Karma: +8/-0
    • Grumpy Young Man
Re: Feedback and suggestions?
« Reply #12 on: 23 Feb 2024, 11:45:01 am »
Well the modal close animation has an issue, but I'm getting close (until you give me your opinion/feedback, that is!)

The 'pen

Edit 1: needs more work for mobile/smaller screens… 🤦🏽‍♂️🤐🤷🏻‍♂️
« Last Edit: 23 Feb 2024, 01:16:56 pm by GrumpyYoungMan »
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

 

SMF spam blocked by CleanTalk

Advertisement