notes

from photography.qmd:

in this page I will include all of my photos but in a grid style 12 columns, use 3 of those? how does that syntax read again?
NESTING: Within here include the lipstick series.
photos I have simply edited

Notes

This is index.qmd or rather the intro page. Currently looking to add:

full width

nice minimalist font, black, sharper contrast.. maybe bolded

font-family: helvetica

font-weight: normal, bold,

font-style:italic, normal

grid spacing using page-layout: custom (Bootstrap CSS grid layout system 5.1), essentially wrapping whatever qmd page in a 3 column .grid (div I think). See gemini code below. Index.qmd will likely remain a large singular photo if I have the guts/ photos to make it that haha. Then the additional .qmd files will be:

Digital art

Nacotitlan

Old photography

Writings

::: {.grid} ::: {.g-col-12 .g-col-md-3} ### My Portfolio

This is where your Ten Toes “Sidebar” content goes. - Home - About - Archive :::

::: {.g-col-12 .g-col-md-9} ## My Work — listing: contents: posts type: grid columns: 3 — ::: :::

g-col-12 s

lots of images

left side bar, not top nav bar, sidebar should be

Notes on .scss/ .css files

Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Syntax: $variablename: value;

NOTES

the content of my website is essentially a collection of qmd documents

I wonder if in this I can support large image files… shouldnt be an issue

To add a CSS stylesheet to your document, just provide the css option. For example:

format: html: css: styles.css

Using the css option works well for simple tweaks to document appearance. If you want to do more extensive customization see the documentation on HTML Themes.

a big chunk of my protfolios apearance will be in customzing the css (font and positioning of images.. grids, etc.) and the sidebar

includes

If you want to include additional content in your document from another file, you can use the include-in-*options:

Option

Description

include-in-header

Include contents of file, verbatim, at the end of the header. This can be used, for example, to include special CSS or JavaScript in HTML documents or to inject commands into the LaTeX preamble.

Summary of where things go:

CSS Styles: All the design rules go into styles.css.: visual polish, colors, specific spacing, effects, etc.

Layout/ Site-wide Structure: This is handled by _quarto.yml… i.e.: (Navigation, Sidebars, Themes).

The Content: Your actual images and posts go into individual .qmd files (e.g., in a /posts folder), which the “Listing” feature will automatically pull into the grid.

KEY: my website setting MUST BE GLOBAL, so write most of my setting in quarto.yml. alternatively treat every portfolio page somewhat differently, in which case,

The .qmd file is for Content & Page-Specific Layout. (Markdown + Bootstrap Classes).

The .css file is for Visual Polish. (Colors, specific spacing, hover effects).

Achieving the ten toes look

CSS Grid

If you are using page-layout: custom, you’ll likely want to utilize the Bootstrap CSS Grid layout system (which is available by default in Quarto documents) for creating more sophisticated layouts.

For example, here’s a simple 2-column grid:

This column takes 1/3 of the page

::: {.g-col-8} This column takes 2/3 of the page :::

Bootstrap’s CSS Grid system includes facilities for responsiveness, wrapping, nesting, and fine grained customization of column behavior.

Note that this isn’t the traditional Bootstrap grid used in older versions of Bootstrap – rather, it’s a brand new layout system introduced in Bootstrap 5.1 based on the CSS Grid standard. Quarto uses this newer system because it has more sophisticated layout capabilities akin to what LaTeX offers for print documents.

See the Bootstrap CSS Grid documentation for additionals details.