Making a new page for the website is super easy! HTML is dumb easy, and I have set up some CSS infrastructure to facilitate pretty pages!
To get started, ask Tom how to get into his VPS. Once you have the credentials, use the following commands to make a new page:
This will log you into the VPS, put you in the directory where the website files are held, and copy the page template into a new file named my-awesome-new-page.html.
You don't have to copy template.html to make a new page, or use my index.css file for styling. I want this website to be a collaborative effort between all of us, and it would be really cool if we all had our own way/style of making webpages.
For learning the ins and outs of HTML and CSS, I've been using the w3schools HTML tutorial and CSS tutorial. They have pages for pretty much every HTML element and CSS property. Highly recommend.
Once you have an HTML file to start working in, you're probably going to want to style things in your own way. To ease the process of creating a page, I've defined some variables and classes in index.css, and will go over everything here.
Because I'm gay, I spent some time making a desaturated 10-color palette that I think looks nice. They're named as follows:
These are defined at the top of index.css, and you can add more if you so desire.
To set an HTML element's text color to one of the above, add text-color-[COLOR NAME] to the element's class attribute. Similarly, adding background-[COLOR NAME] will change the element's background color. Class and id attributes are described in more detail below.
In CSS, if you're customizing an HTML element's properties, you can use the var keyword to use a custom color for that property. For example, if I wanted to change the text color for all links on my webpage to iceberg, I would specify that in my CSS file:
In HTML, there are a few ways to use this palette. At the bottom of index.css, I've defined some custom selectors, on both id and class levels. These are slightly different, but both relatively straightforward.
An id selector is good for having a reproducible set of properties. These selectors are prepended with a # in CSS. For example, if I wanted to have a way to make some of the <div> elements on my page have a certain color and padding and use them to hold a block of content, I could define a #content-block id selector in my CSS file, and set the id attribute on the appropriate elements in my HTML file.
This is generally good practice for creating more modular pages in raw HTML/CSS. I've written some custom id selectors for this page and the landing page, which are described below.
A class selector is good for mixing-and-matching properties. These selectors are prepended with a . in CSS. All space-separated tokens in an HTML element's class attribute are interpreted as CSS class selectors, and are applied to that element. For example, I can make the background color of a certain <div> element stone, while making its text color black.
Again, there are custom class selectors for the above color palette, and for some text formatting as well (justification, size, font). Feel free to add more for your own use cases.
To make things a bit easier, I've defined some custom id attributes for common page components. For reference, I always stick these id attributes onto <div> elements. They might work with other elements, but I can only make guarantees for that one.
Note that this is very much a work-in-progress, and that there will probably be more custom id attributes in the future (assuming we stick to HTML/CSS).