Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Completed website HTML tweaks #3807

Merged
merged 11 commits into from Mar 6, 2019
Merged

Completed website HTML tweaks #3807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9e93239
removed shortcut from favicon, added external tag to hrefs and tweake…
CDNRae Feb 28, 2019
4999b43
made fixes outlined in PR review
CDNRae Mar 1, 2019
92ba015
changed footer span to footer div
CDNRae Mar 1, 2019
7f1b6a3
refactor(css/style.css): Put CSS properties in lexical order
plroebuck Mar 4, 2019
4e12e9d
style(css/style.css): Add description list declarations
plroebuck Mar 4, 2019
4b526e7
docs(_includes/default.html): Fix missing page title
plroebuck Mar 4, 2019
e823bd1
docs(_includes/default.html): Fixed URLs in footer
plroebuck Mar 4, 2019
94b94f7
docs(docs): Remove unneeded div from footer
plroebuck Mar 4, 2019
5db3d1e
style(_includes/default.html): Reformatted CC license anchor tag
plroebuck Mar 4, 2019
1316df3
docs(_includes/default.html): Change to description list for last mod…
plroebuck Mar 4, 2019
40ffe4f
docs(docs): Revert removal of footer div tag
plroebuck Mar 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 23 additions & 15 deletions docs/_includes/default.html
View file
Open in desktop
Expand Up @@ -2,8 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>{{ title }}</title>
<link
rel="preload"
href="https://opencollective.com/static/images/user.svg"
Expand All @@ -13,7 +13,7 @@
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/prism.css" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.ico" />

<!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->
</head>
Expand All @@ -23,29 +23,37 @@
<h1>
<a href="/">
<img
id="mocha-logo"
src="/images/mocha-logo.svg"
alt="Mocha"
width="192"
height="192"
alt="Mocha logo"
/>
</a>
</h1>

<p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
</header>

<main id="content">{{ content }}</main>

<footer>
<span>
<a href="https://mochajs.org">mochajs.org</a> is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"
>Creative Commons Attribution 4.0 International License</a
<div>
<a rel="home" href="https://mochajs.org/">mochajs.org</a>
is licensed under a
<a
rel="license external noopener"
href="https://creativecommons.org/licenses/by/4.0/">
Creative Commons Attribution 4.0 International License</a
>.
<p>
<em>Last updated: {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}</em>
</p></span
>
<dl class="dl-inline last-modified">
<dt>Last updated</dt>
<dd>
<time
itemprop="lastModified"
datetime="{{ 'now' | date: '%Y-%m-%dT%H:%M:%SZ' }}">
{{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}
</time>
</dd>
</dl>
</div>
</footer>
</body>
</html>
88 changes: 55 additions & 33 deletions docs/css/style.css
View file
Open in desktop
Expand Up @@ -3,8 +3,8 @@ html {
}

body {
color: #2c2c2c;
border-top: 2px solid #ddd;
color: #2c2c2c;
}

@keyframes fadein {
Expand All @@ -29,8 +29,8 @@ body {

header,
#content {
max-width: 920px;
margin: 0 auto;
max-width: 920px;
padding-left: 30px;
padding-right: 30px;
}
Expand All @@ -39,27 +39,31 @@ header {
padding-top: 20px;
}

#mocha-logo {
height: 192px;
width: 192px;
}

#content {
padding-bottom: 60px;
}

#_header h1 {
animation: fadein 1s forwards;
margin-top: 0;
margin-left: -19px;
opacity: 0;
animation: fadein 1s forwards;
}

#tag {
animation: fadein 1s forwards, slideright 1s forwards;
color: #c29d7f;
font-weight: 100;
font-size: 30px;
font-weight: 100;
letter-spacing: 2px;
margin-top: -158px;
margin-left: 185px;
margin-bottom: 125px;
letter-spacing: 2px;

animation: fadein 1s forwards, slideright 1s forwards;
}

#tag em {
Expand Down Expand Up @@ -94,29 +98,29 @@ nav.badges a + a {
}

#_backers a img {
width: 64px;
background: url(/images/backer-background.svg?inline) center center no-repeat;
width: 64px;
}

h2 {
margin-top: 80px;
border-bottom: 1px solid #ddd;
font-weight: 400;
letter-spacing: 1px;
border-bottom: 1px solid #ddd;
margin-top: 80px;
text-transform: uppercase;
}

h3 {
border-bottom: 1px solid #eee;
font-weight: 200;
letter-spacing: 1px;
border-bottom: 1px solid #eee;
margin-top: 40px;
text-transform: uppercase;
}

h3 > code {
text-transform: none;
font-size: 14px;
text-transform: none;
}

#content > p:first-child {
Expand All @@ -134,34 +138,34 @@ a:hover {
}

a.direct-link {
background: url(../images/link-icon.svg) center center no-repeat;
background-size: auto 60%;
opacity: 0;
position: absolute;
transform: translateX(-100%);
text-decoration: none;
text-indent: -60px;
transform: translateX(-100%);
width: 30px;
background: url(../images/link-icon.svg) center center no-repeat;
background-size: auto 60%;
opacity: 0;
}

:hover > a.direct-link {
opacity: 1;
}

ul {
box-sizing: content-box;
column-count: 2;
column-gap: 30px;
margin-top: 20px;
padding: 0 15px;
column-gap: 30px;
column-count: 2;
box-sizing: content-box;
}

ul li {
margin-top: 5px;
list-style: none;
border-bottom: 1px solid #eee;
padding: 5px 0;
break-inside: avoid;
list-style: none;
margin-top: 5px;
padding: 5px 0;
}

code {
Expand All @@ -170,36 +174,54 @@ code {
}

pre {
margin: 20px 0;
padding: 20px;
background-color: #f3f3f3;
border: 1px solid #ddd;
border-bottom-color: #ccc;
background-color: #f3f3f3;
border-radius: 3px;
box-shadow: inset 0 0 10px #ddd;
margin: 20px 0;
overflow-x: auto;
padding: 20px;
}

img.screenshot {
display: block;
margin: 30px auto;
border-radius: 3px;
box-shadow: 0 3px 10px #dedede, 0 1px 5px #888;
display: block;
margin: 30px auto;
max-width: 100%;
}

footer {
background-color: #eee;
border-top: 1px solid #ddd;
padding: 50px 0;
text-align: right;
border-top: 1px solid #ddd;
}

footer span {
display: block;
margin-right: 30px;
footer div {
color: #888;
font-size: 0.8em;
margin-right: 30px;
}

.last-modified {
font-style: italic;
}

.dl-inline dt,
.dl-inline dd {
display: inline;
margin: 0;
}

.dl-inline dt:after {
content: ': ';
}

.dl-inline dd + dt:before {
content: '';
display: block;
}

@media all and (max-width: 600px) {
Expand All @@ -214,12 +236,12 @@ footer span {
}

pre {
padding: 10px;
margin: 20px -11px;
padding: 10px;
}
}

blockquote {
padding: 10px;
border-left: 1px solid #eee;
padding: 10px;
}