This page is my website style guide, a mostly useless page that I will use to lay out how I want to format my website. I hope to write down all the general guidelines I think of to keep this website somewhat uniform in appearance, as well as document things I may likely forget later. I hope it will be interesting to some other people too, so I'm putting it up here. I will start with the more technical things, like hooking up to the Pi on a desktop and coding, and later on will define style and formatting guides.
The main way I upload to the raspberry server is by opening an ubuntu terminal and navigating to the folder on my PC where I have all the website pages organized as they will appear on the pi. For me, it is the following.
cd /mnt/j/leviticusrhoden
The next step is to upload that whole folder to the pi, where the Apache server will look when it is requested to serve up the website. scp stands for secure copy, so we are asking my desktop to copy files over SSH. -r * means we are copying all files and folders at the current location. Then we address the pi and the location in the pi that we want to copy these files to. Altogether, that gives us the following.
scp -r * pi@10.0.0.19:/var/www/html
Running that code will prompt a password for the pi, which is raspberry by default, but I have changed and won't share. Then, I can send over those updated files to the pi and they will appear when someone opens the website.
This ends up being a very convenient way to workflow. Now as I make pages, it takes about 5 keypresses to load them onto the pi so I can see how they look. Very handy for all but the most tedious tinkering, where I use a browser based html runner. Make sure the .php files are saved and organized, upload it all, and the website is updated!
The layout of this site is meant to group my projects into general clusters. I have a wide range of projects from carpentry to research to writing. On the homepage, there is a directory of pages broken down by the type of project they are. Each group has a main page, which gives a brief overview of all the projects in that category. Each of these projects are linked both on the homepage and on their category’s page.
Each page has a main, h1 heading. This is the big, centered text that should be the same as it appears in the Table of Contents and on topic pages. Directly under the main heading, there is a link to homepage and the topic page the project is classified as. In the main body, subheadings separate the text into different sections in such a way to make skimming the text to find something specific easier. The text should be broken up in small paragraphs, such that they look good on skinny screens. After the last paragraph in a subsection, two instances of line break should be called to add an empty line between the end of a section and the subtitle of the next. At the bottom of the page, there should be links to the homepage and the parent category page.
An example .php file for this setup is shown here and downloadable here.
Each html/php file starts with the following header, these examples taken from the example.php file shown here and downloadable here.
<html> <head> <link href="../css/styles.css" rel="stylesheet" type="text/css"> <title> Name that apears in browser, should be same as below. </title> </head> <body> <h1> Main title of the page goes here. </h1> <address> <a href="index.php">leviticusrhoden.com Homepage</a> </address> <address> <a href="website/styleguide.php">Back to Styleguide (replace with parent page)</a> </address>
After this header, we see the general format of the subsections, each with a blank like between them.
Paragraph 2. This one I made longer to showcase how it drops down a line, it's quite interesting. Also appreciate <a href="website/hostingpi.php">this link</a> as an example of link html. Remember to put a <b>../</b> in the address for each step back in the directories you need to go from the current page before you can go down a branch to the page you want.<h2> First subheading, often Introduction </h2> <p> First Paragraph. </p><p> Second paragraph, notice the double line break after. </p><br><br> <h2> Another Subheading </h2> <p> Paragraph 1. </p><p></p><br><br>
And the end of each page has the following footer, along with the links put at the top to the homepage and parent page.
<address> <a href="index.php">leviticusrhoden.com Homepage</a> </address> <address> <a href="website/styleguide.php">Back to Style Guide (replace with parent page)</a> </address> </body> </html>
The colors scheme of this website is very simple. I'm using a cream-beige color for the background and a dark purple for all text, even hyperlinks, which become the normal purple-ish color after being clicked. The cream color is #EAEABD and the purple is #1E064B.
This website uses this .css file to define a site wide scheme (you can download it to either use it yourself or to inspect with a text editor). Within it, tags are given the following properties.
The body of the website is assigned a cream-beige color, #EAEABD, and has margins of 35 pixels along the sides.
Headings are aligned center, with the purple color code #1E064B
Subheadings are all aligned left, at the margins of the body.
Paragraphs are justified and have an indent of 40 pixels at the start.
dl, the whole list, is aligned left. Both sub tags dt and dd are colored purple.
Blockquotes are justified, and every line is indented 80 pixels, or twice as much as the indent at the start of a paragraph.