EmSixTeen
EmSixTeen
PostsComments
KPCKevin Powell - Community
Created by EmSixTeen on 3/15/2024 in #os-and-tools
My gulp has broken and I'm seemingly too useless to fix it 😩
In the second message
6 replies
KPCKevin Powell - Community
Created by EmSixTeen on 3/15/2024 in #os-and-tools
My gulp has broken and I'm seemingly too useless to fix it 😩
The entire gulpfile is attached here already
6 replies
KPCKevin Powell - Community
Created by EmSixTeen on 3/15/2024 in #os-and-tools
My gulp has broken and I'm seemingly too useless to fix it 😩
Think these are of use
6 replies
KPCKevin Powell - Community
Created by EmSixTeen on 3/7/2024 in #front-end
Need my column to take up the full height of the available space on desktop - probably simple!
appreciate it
10 replies
KPCKevin Powell - Community
Created by EmSixTeen on 3/7/2024 in #front-end
Need my column to take up the full height of the available space on desktop - probably simple!
Wahey, cheers buddy
10 replies
KPCKevin Powell - Community
Created by EmSixTeen on 2/1/2024 in #front-end
Having trouble adding a sidebar to my grid system
I think that's kinda where my biggest problem is - That the background colours for each section need to stretch full-width of the page, so I don't think it can just be like, 
<container>
  <sidebar></sidebar>

  <section></section>
  <section></section>
  <section></section>
</container>
<container>
  <sidebar></sidebar>

  <section></section>
  <section></section>
  <section></section>
</container>
12 replies
KPCKevin Powell - Community
Created by EmSixTeen on 2/1/2024 in #front-end
Having trouble adding a sidebar to my grid system
I'm free to add the sidebar markup anywhere in that markup, other than between sections 😄
12 replies
KPCKevin Powell - Community
Created by EmSixTeen on 2/1/2024 in #front-end
Having trouble adding a sidebar to my grid system
The sidebar isn't in the pen, that's just the example grid set-up
12 replies
KPCKevin Powell - Community
Created by EmSixTeen on 2/1/2024 in #front-end
Having trouble adding a sidebar to my grid system
Sticky sidebar! The sections need to be under the sidebar, rather than beside, else the background wouldn't go fullwidth
12 replies
KPCKevin Powell - Community
Created by EmSixTeen on 2/1/2024 in #front-end
Having trouble adding a sidebar to my grid system
Example sass: 
.section {
  --grid-spacing-full: minmax(0px, 1fr);
  --grid-spacing-wide: clamp(0px, 2.5vw, 100px);
  --grid-spacing-standard: clamp(0px, 5vw, 100px);
  --grid-spacing-narrow: clamp(1px, 70vw, 750px);

  --section-grid: [full-start] var(--grid-spacing-full) [wide-start]
    var(--grid-spacing-wide) [standard-start] var(--grid-spacing-standard)
    [narrow-start] var(--grid-spacing-narrow) [narrow-end]
    var(--grid-spacing-standard) [standard-end] var(--grid-spacing-wide)
    [wide-end] var(--grid-spacing-full) [full-end];

  display: grid;
  grid-template-columns: var(--section-grid);

  padding-block-start: var(--_p-section);
  padding-block-end: var(--_p-section);
  --_p-section: var(--p-section, 4em);
  --_m-between: var(--m-between, 4em);

  // Every child of .section unless given a class
> * {
    grid-column: standard;
  }

  // All direct children of the .section, except the first
> * + * {
    margin-block-start: var(--_m-between);
  }
}

/* tripe */
html,
body {
  margin: 0;
  padding: 0;
}

h2 {
  margin: 0;
}

iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

section {
  padding: 1em;
  outline: 1px solid red;

> * {
    outline: 1px solid blue;
  }
}
.section {
  --grid-spacing-full: minmax(0px, 1fr);
  --grid-spacing-wide: clamp(0px, 2.5vw, 100px);
  --grid-spacing-standard: clamp(0px, 5vw, 100px);
  --grid-spacing-narrow: clamp(1px, 70vw, 750px);

  --section-grid: [full-start] var(--grid-spacing-full) [wide-start]
    var(--grid-spacing-wide) [standard-start] var(--grid-spacing-standard)
    [narrow-start] var(--grid-spacing-narrow) [narrow-end]
    var(--grid-spacing-standard) [standard-end] var(--grid-spacing-wide)
    [wide-end] var(--grid-spacing-full) [full-end];

  display: grid;
  grid-template-columns: var(--section-grid);

  padding-block-start: var(--_p-section);
  padding-block-end: var(--_p-section);
  --_p-section: var(--p-section, 4em);
  --_m-between: var(--m-between, 4em);

  // Every child of .section unless given a class
> * {
    grid-column: standard;
  }

  // All direct children of the .section, except the first
> * + * {
    margin-block-start: var(--_m-between);
  }
}

/* tripe */
html,
body {
  margin: 0;
  padding: 0;
}

h2 {
  margin: 0;
}

iframe {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

section {
  padding: 1em;
  outline: 1px solid red;

> * {
    outline: 1px solid blue;
  }
}
12 replies
KPCKevin Powell - Community
Created by EmSixTeen on 2/1/2024 in #front-end
Having trouble adding a sidebar to my grid system
Example markup: 
<div class="content-container">
  <section class="section" style="background-color: lavenderblush">
    <div class="text-only">
      <h2>Lorem</h2>
      <div>
        <p>Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue.</p>
        <p>Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu.</p>
      </div>
    </div>
    <div class="video-embed" style="background-color: white">
      <iframe src="https://player.vimeo.com/video/123456789" width="1280" height="720" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"></iframe>
    </div>
  </section>
  <section class="section" style="background-color: lavender">
    <div class="text-only">
      <h2>Fermentum laoreet</h2>
      <div>
        <p>Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim.</p>
      </div>
    </div>
  </section>
  <section class="section" style="background-color: lavenderblush">
    <nav role="navigation" class="prev-next">
      <ul class="prev-next__list" role="list">
        <li class="prev-next__list-item prev-next__list-item--next" role="listitem"><a class="prev-next__next button" href="#">Next</a></li>
      </ul>
    </nav>
  </section>
</div>
<div class="content-container">
  <section class="section" style="background-color: lavenderblush">
    <div class="text-only">
      <h2>Lorem</h2>
      <div>
        <p>Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue.</p>
        <p>Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu.</p>
      </div>
    </div>
    <div class="video-embed" style="background-color: white">
      <iframe src="https://player.vimeo.com/video/123456789" width="1280" height="720" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"></iframe>
    </div>
  </section>
  <section class="section" style="background-color: lavender">
    <div class="text-only">
      <h2>Fermentum laoreet</h2>
      <div>
        <p>Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim.</p>
      </div>
    </div>
  </section>
  <section class="section" style="background-color: lavenderblush">
    <nav role="navigation" class="prev-next">
      <ul class="prev-next__list" role="list">
        <li class="prev-next__list-item prev-next__list-item--next" role="listitem"><a class="prev-next__next button" href="#">Next</a></li>
      </ul>
    </nav>
  </section>
</div>
12 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
It needs to be clear to users that the area is scrollable, in as simple a manner as is viable, that's what it comes down to. That's usually clear by the presence of a scrollbar, but there's no scrollbar on iOS, so need to work around that.
32 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
I'm not even going to entertain this
32 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
Yikes
32 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
I'm not here to argue whether or not I need it, only to figure out how to achieve it or have some form of a workaround or alternate functionality which can communicate the same. 🙂
32 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
I've already said that I need this affordance - that it makes sense to some, yourselves included, doesn't mean that it makes sense to all.
32 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
I don't like changing a user's positon on the page on a button action, but a scroll to top of that container upon action might help
32 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
In that case then there'd be no limit on the height of the container but at least there'd be no 'missing' scrollbar
32 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
tbf I wonder if it might be viable to check for iOS devices, and have the max-height be conditional based on that
32 replies
KPCKevin Powell - Community
Created by EmSixTeen on 10/10/2023 in #front-end
Is there a way to force iOS to display a vertical scrollbar on a desired element?
I can't really just leave stuff like this as-is, that affordance is really needed so if it's not baked in then I need to figure out an alternative. This is intended for low resource areas with a very broad range of IT competency, and the content revolves around life-saving training, so don't really want to open the door for more hindrances and areas of confusion. Would actually love some advice if anyone has any.
32 replies