Main Website

---

The goal of this project is to redesign the main Linux Mint website.

Scope

• We only care about the landing page for now.
• We only work with static content (HTML/CSS, no server backend).

Themes

In this project we modify a theme called Wizixo.

Pros:

• Great block separators, easy to use
• Gradients and geometrical shapes
• Perfect color palette

Cons:

• Fonts (small, pale, roboto..)

Structure

• wizixo/documentation contains the theme documentation.
• wizixo/template contains the root of the mint website. This is where we work.
• wizixo/* contains the gulp file to regenerate the assets.
• wizixo/template/mint-section-*.html contain HTML/CSS sections which are used in multiple pages.
• wizixo/template/mint-page-*.html are the source for Mint pages. They can contain <include> tags to include common sections which are replaced using build.py.
• wizixo/build.py is a script which builds the Mint pages.

Install and running

Clone the project:

git clone https://github.com/linuxmint/website-wizixo.git

Navigate to project folder:

cd website-wizixo/wizixo

Navigate to the wizixo folder and install the dependencies:

npm install
#or
yarn

Now, build the pages:

yarn build
# or you can run the build.py file on root folder

Run the local server:

npm start
#or
yarn start

(ou can use others local http servers like: live server or python http.server)

Building pages

To avoid duplicating the same headers and footers in every single page, we put common sections in mint-section-*.html files.

We then work on pages called mint-page-*.html which include these sections with <include> tags.

Let's take an example:

• mint-page-privacy.html is the page we work on, it's in our git tree.
• It contains three tags to include the header, title and the footer: <include src="mint-section-header.html"/>, <include src="mint-section-title.html" title="Privacy"/> and <include src="mint-section-footer.html"/>
• When we run build.py, it generates mint-privacy.html using the content of mint-page-privacy.html and it replaces the include tags with the content of the header and footer sections.

Note that with the exception of src, attributes are also used. In the example above, title="Privacy is used to replace $title with Privacy when injecting the content of mint-section-title.html.

The resulting mint-privacy.html page is what we can open with our Web browser.

Web pages

Category	Page	Filename	Notes
Common sections	Header	mint-section-header.html	HTML head, body all the way down to the menu (included).
	Footer	mint-section-footer.html	Footer section.
	Title	mint-section-title.html	Title section, used at the top of the page in all pages, except the main page.
Sponsors footer	mint-section-sponsors.tml	A sponsor section just above the footer, on all pages except the sponsors, partners and home pages.
Home	Home page	mint-page-main.html	Describes what Mint is, why it's good, to newcomers.
Download	Linux Mint 20.2	mint-page-download.html	Same as old website
	LMDE 4	mint-page-download-lmde.html	Same as old website
	All versions	mint-page-download-all.html	Same as old website
	Edition	mint-page-edition.html	Same as old website, download links with mirrors for a particular edition
	Release notes	mint-page-notes.html	Same as old website
	New features	mint-page-features.html	Same as old website
	Verify	mint-page-verify.html	Same as old website
Project	Donors	mint-page-donors.html	Same as old website
	Sponsors	mint-page-sponsors.html	Same as old website
	Partners	mint-page-partners.html	Same as old website
	Store	mint-page-store.html	Same as old website
	Get Involved	mint-page-get-involved.html	Same as old website
	Development	mint-page-development.html	Describes our projects (replaces https://projects.linuxmint.com/)
	Mirrors	mint-page-mirrors.html	Same as old website
About	About Linux Mint	mint-page-about.html	Describes the OS and the project more in details.
	FAQ	mint-page-faq.html	Accordion style? Answer main questions people have.
	Documentation	mint-page-documentation.html	Should really push people towards the main documents rather than just list all of them in a table.
	Screenshots	mint-page-screenshots.html	Same as old website
	Team	mint-page-team.html	Same as old website
	Contact	mint-page-contact.html	Same as old website
	Privacy and Cookies	mint-page-privacy.html	Same as old website
	Brand	mint-page-brand.html	Should provide resources for using our brand (logo, name..etc), explain what is OK and what isn't, explain what people can do with Linux Mint without the need to ask for permission etc...
Links	Local Communities	mint-page-communities.html	Same as old website