Sarah's Catalog

Overview

• Site uses flexbox almost everywhere
• Contains unique and component classes
• Utilizes Semantic HTML elements to identify and label
• I use VSCode, GitHub, and the Deploy to Neocities repository to quickly publish my entire repository to Neocities

Core Layout

The site is flexible and fluid, but hard limits are set to prevent overflow and keep the site dynamic. For example, I use max-widths for the left, right, and middle

• grid: a 3 row grid with a varying amount of columns
• row-1, row-2, row-3: the rows in the grid
• wrapper: wraps the sidebars (left + right) and middle
• left: contains the left sidebars
• middle: holds all of the main content
• right: contains the right sidebars
• footer: section at the very bottom of the page

Components

• content: innermost part of the middle where the content actually goes
• button: removes the border, rounds border's corners, boldens text
• scrollable: overflow-y: scroll, so any overlap on the y-axis will become scrollable
• footer-text: changes the color, size, and padding for the text in the footer
• text: changes the color of the text to the default off white color and size
• centered: centers by using margin: 0 auto, allowing the left and right margins to even out, but not too far out to where it would overlap (max-width: 100%)
• content-border: border or frame for the content
• blinkies: spaces and pads the blinkies into a flex row
• links: removes the underline from links
• flex-row: turns a box into a flex row
• flex-column: same thing but flex column
• list: provides padding for lists; prevents the bullet points from overlapping the content border
• indent: creates an indentation with margin-left
• top-nav-btn: styles the top navigational buttons
• sidebar-border: border or frame for the sidebars

Templates

The following are general templates I tend to reuse throughout my files and code (from outside to inside classes or parents -> children):

• Sidebars
• sidebar
• sidebar-border
• left-sidebar/right-sidebar

• Content
• content-border
• content, text

Setup

• Two folders: images and pages
• Index and home HTML files, and all CSS files are located in the root directory
• I use 1 CSS file with the exception of the test page's CSS page
• This is used to style the home page while other pages use the style element to re-customize
• Open workspace file > Edit in VSCode with Live Server extension > (GitHub Desktop) > Commit files to branch > Publish to origin > Fetch origin
• When making huge strucutral changes to the site, I like to create a template, and paste all of the unique content to try to avoid any confusion
• And when I need to edit all of the files, I'll usually change it for one file, then paste it across the rest
• Also have 2 monitors, so I'm able to have the browser on the secondary monitor, and view the changes in realtime. Notes on either

Deploy to Neocities

• (Created by bcomnes)
• It's a yml file, or Github Actions workflow, which runs a specific version of its repository on a trigger event (e.g push, pull)
• Utilizes a secret to store Neocities' API
• I changed dist_dir to . so it would copy the entire repository, and used the newer version of Deploy to Neocities (v3) instead of the older version
• (By default, a folder called public will be published to Neocities)

Customization

• Hex values
• What can I customize color-wise? Body, wrapper, content and left/right sidebars, content and sidebar borders, site name, top navigational buttons, footer and general text color
• When picking the colors for each page, I like using hex color palettes you can find on Pinterest and also just eyeballing it
• How it usually goes is that the background color is the lightest for the content and sidebars, and the border color is usually a brighter color or one of similar value

Old Version - 12/5/26

Terms/Info

• Flex container = parent
• Flex item = child

What could be done better? What's done well? And future plans

• I feel like the weakest point of the website is the fact that it's pretty empty, could use more folders, and it doesn't use JavaScript (JS)
• But the site finally feels like it's really come together. It's really cool to see it working on my phone because I wasn't sure how I was going to do this. When testing it seemed like it was going to be annoying to have to account for different devices
• Using JS would upgrade what can be done because there's only so much you can do with pure HTML and CSS
• However, I can still do a lot without JS. So for now I'd like to add artwork and add arrows beneath it so it feels interactive world or series of rooms
• And re-learn JS so I could create or implement a simple game