kumi/plain-html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'add-css' into 'master'

Browse source 
Add some example CSS

## What does this MR do?

- add some minimalist CSS
- show an example of how to correctly reference CSS

## Are there points in the code the reviewer needs to double check?

Not really...

## Why was this MR needed?

The README mentions wrongly referencing CSS in Troubleshooting but does not show an example of how to do it right.

## What are the relevant issue numbers?

None.

## Screenshots

## Before

![before](/uploads/475480ff7d9326bc32f030a4762ba94d/before.png)

## After

![after](/uploads/0a49104df21ca3c52a05ac346411c034/after.png)

See merge request !12
This commit is contained in:
Achilleas Pipinellis 2016-07-13 12:48:21 +00:00
commit 04984f7cbf
3 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -55,8 +55,9 @@ unless you want to contribute back to the upstream project.
## Troubleshooting
1. CSS is missing! That means that you have wrongly set up the CSS URL in your
HTML files.
HTML files. Have a look at the [index.html] for an example.
[ci]: https://about.gitlab.com/gitlab-ci/
[index.html]: https://gitlab.com/pages/plain-html/blob/master/public/index.html
[userpages]: http://doc.gitlab.com/ee/pages/README.html#user-or-group-pages
[projpages]: http://doc.gitlab.com/ee/pages/README.html#project-pages

7
public/index.html
View file

@ -4,8 +4,15 @@
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Plain HTML site using GitLab Pages</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
<a href="https://gitlab.com/pages/plain-html/">Repository</a>
<a href="https://gitlab.com/pages/">Other Examples</a>
</div>
<h1>Hello World!</h1>
<p>

24
public/style.css Normal file
View file

@ -0,0 +1,24 @@
body {
font-family: sans-serif;
margin: auto;
max-width: 1280px;
}
.navbar {
background-color: #313236;
border-radius: 2px;
max-width: 800px;
}
.navbar a {
color: #aaa;
display: inline-block;
font-size: 15px;
padding: 10px;
text-decoration: none;
}
.navbar a:hover {
color: #ffffff;
}