Pens from Sarah Frisk https://codepen.io/sfrisk/ en nospam@codepen.io Copyright 2024 2022-07-20T21:32:27-07:00 #CodePenChallenge: Mega Menu https://codepen.io/sfrisk/pen/qBpaZjB https://codepen.io/sfrisk/pen/qBpaZjB Sarah Frisk

See the Code - See it Full Page - See Details

I feel like this is my most cursed codepen. My inspiration was basically "What if Bob from Bob's Burger's had a website?" and I just super leaned into that aesthetic. As of right now, it is not responsive, but who knows, one day it may be? I tried to limit how much I actually edited in the original html file, although I made a few tweaks for css reasons. Otherwise, it mostly stayed the same. Anyway Enjoy! / I'm sorry.

]]>
#CodePenChallenge: Mega Menu 2022-03-21T23:46:01-07:00
#CodePenChallenge: Giant Buttons https://codepen.io/sfrisk/pen/jOYryEo https://codepen.io/sfrisk/pen/jOYryEo Sarah Frisk

See the Code - See it Full Page - See Details

]]>
#CodePenChallenge: Giant Buttons 2022-03-21T19:26:52-07:00
Comic Closed Caption Settings with CSS Variables & Local Storage https://codepen.io/sfrisk/pen/GRqKjWp https://codepen.io/sfrisk/pen/GRqKjWp Sarah Frisk

See the Code - See it Full Page - See Details

Building off of https://codepen.io/sfrisk/pen/XWdLWZY This pen shows how to create user settings for Closed Captions on a comic using CSS Variables and Local Storage. To see the whole thing live in action on a website, check it out at https://tavern-wenches.com/settings/#settings

]]>
Comic Closed Caption Settings with CSS Variables & Local Storage 2020-10-05T16:58:40-07:00
Responsive and Accessible Comic Page https://codepen.io/sfrisk/pen/XWdLWZY https://codepen.io/sfrisk/pen/XWdLWZY Sarah Frisk

See the Code - See it Full Page - See Details

A responsive, accessible comic! * Fully responsive. Switching to mobile sizes will stack the comic vertically * Screen reader accessible with descriptive alt text of each panel * CC Mode that will provide the reader with a large copy of the text they can read in a sans-serif font. To see how you can add a settings page to this, using CSS variables that dynamically adjust the text, see https://codepen.io/sfrisk/pen/GRqKjWp

]]>
Responsive and Accessible Comic Page 2022-07-20T21:32:27-07:00
Custom Dashed :focus States https://codepen.io/sfrisk/pen/RwrrWqM https://codepen.io/sfrisk/pen/RwrrWqM Sarah Frisk

See the Code - See it Full Page - See Details

A proof of concept of doing dashed focus states for elements

]]>
Custom Dashed :focus States 2020-06-09T21:16:25-07:00
Accessible, D&D Classes Tabs https://codepen.io/sfrisk/pen/vYNVpgX https://codepen.io/sfrisk/pen/vYNVpgX Sarah Frisk

See the Code - See it Full Page - See Details

An accessible example of tabs built in Vue in the style of a popular RPG franchise.

]]>
Accessible, D&D Classes Tabs 2021-01-12T18:57:21-07:00
Tavern Wenches Cast https://codepen.io/sfrisk/pen/jObEMLb https://codepen.io/sfrisk/pen/jObEMLb Sarah Frisk

See the Code - See it Full Page - See Details

An interactive banner used for my webcomic, Tavern Wenches, to explore various "heroic" characters in the comic.

]]>
Tavern Wenches Cast 2020-10-06T02:46:19-07:00
Tavern Wenches Comic - Responsive Character Sheet https://codepen.io/sfrisk/pen/zYxeeBG https://codepen.io/sfrisk/pen/zYxeeBG Sarah Frisk

See the Code - See it Full Page - See Details

A Responsive RPG Character sheet using CSS Columns

]]>
Tavern Wenches Comic - Responsive Character Sheet 2020-03-16T17:15:57-07:00
Responsive Comic - Image Replacement https://codepen.io/sfrisk/pen/ZEzqzwZ https://codepen.io/sfrisk/pen/ZEzqzwZ Sarah Frisk

See the Code - See it Full Page - See Details

]]>
Responsive Comic - Image Replacement 2020-01-16T17:02:39-07:00
CSS Palette Loader (Based on Gal Shir's Palette Loader on Dribble) https://codepen.io/sfrisk/pen/JwxJVO https://codepen.io/sfrisk/pen/JwxJVO Sarah Frisk

See the Code - See it Full Page - See Details

Based on this Dribble: https://dribbble.com/shots/2954773-Palette-Loader (although the timing is a bit off)

]]>
CSS Palette Loader (Based on Gal Shir's Palette Loader on Dribble) 2019-01-14T22:02:37-07:00