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="https://github.com/linuxmint/website-wizixo/raw/master/mint-section-header.html"/>, <include src="https://github.com/linuxmint/website-wizixo/raw/master/mint-section-title.html" title="Privacy"/> and <include src="https://github.com/linuxmint/website-wizixo/raw/master/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