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

Styling for warning/info/note #8

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Styling for warning/info/note #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5cff044
Added note, warning and info.
evangelion1204 Jul 30, 2014
5016823
Adjusted colors to be more opaque like website scheme
evangelion1204 Jul 31, 2014
6f4f480
Added format page and example styles in content.
evangelion1204 Aug 13, 2014
e7e3933
Adjustments (boxes and menu)
evangelion1204 Aug 15, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@
<!--<link rel="stylesheet" href="/public/css/syntax.css">-->
<link rel="stylesheet" href="/public/css/pygments.css">
<link rel="stylesheet" href="/public/css/hyde.css">
<link rel="stylesheet" href="/public/css/additional.css">

<link rel="stylesheet" href="/public/css/gh-fork-ribbon.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="/public/css/gh-fork-ribbon.ie.css">
<![endif]-->

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

<!-- Icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/public/favicon.ico">
<link rel="shortcut icon" href="/public/favicon.ico">

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
Expand Down
2 changes: 1 addition & 1 deletion examples/01-PageObject.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Page with login box and currency selector.

The Page Factory needs to be created only once per Mink session.

<p class="message">
<p class="warning">
Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
</p>

Expand Down
2 changes: 1 addition & 1 deletion examples/02-HtmlElements.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ On a page there is a sidebar on the left. Inside a sidebar there are multiple si

The Page Factory needs to be created only once per Mink session.

<p class="message">
<p class="warning">
Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
</p>

Expand Down
2 changes: 1 addition & 1 deletion examples/03-BEM.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ On a page there is a sidebar on the left. Inside a sidebar there are multiple si

The Page Factory needs to be created only once per Mink session.

<p class="message">
<p class="warning">
Do not use <code>getPage</code> of the Page Factory which is currently not fully implemented.
</p>

Expand Down
159 changes: 159 additions & 0 deletions format.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
---
layout: page
title: Formatting
---

# Example Heading Level 1
## This are warnings

Some text which might me long or short. With followed example PHP code.

<p class="warning round">
This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="warning">
This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="warning round pastel">
This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="warning pastel">
This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="warning round pastel border">
This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="warning pastel border">
This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="warning round pastel border icon-black">
This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="warning pastel border icon-black">
This is some warning message with some embedded code <code>getPage</code> for which we have something to say.
</p>

```php
<?php

class Test
{
public function doSomething(array $data)
{
foreach ( $data as &$entry ) {
$entry .= '.';
}
}
}
?>
```

## This are info

Now even more text and code

<p class="info round">
This is some info message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="info">
This is some info message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="info round pastel">
This is some info message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="info pastel">
This is some info message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="info round pastel border">
This is some info message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="info pastel border">
This is some info message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="info round pastel border icon-black">
This is some info message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="info pastel border icon-black">
This is some info message with some embedded code <code>getPage</code> for which we have something to say.
</p>

```php
<?php

class Test
{
public function doSomething(array $data)
{
foreach ( $data as &$entry ) {
$entry .= '.';
}
}
}
?>
```

## Are those notes?

Even more to say.

<p class="note round">
This is some note message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="note">
This is some note message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="note round pastel">
This is some note message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="note pastel">
This is some note message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="note round pastel border">
This is some note message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="note pastel border">
This is some note message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="note round pastel border version2 icon-black">
This is some note message with some embedded code <code>getPage</code> for which we have something to say.
</p>

<p class="note pastel border version2 icon-black">
This is some note message with some embedded code <code>getPage</code> for which we have something to say.
</p>

```php
<?php

class Test
{
public function doSomething(array $data)
{
foreach ( $data as &$entry ) {
$entry .= '.';
}
}
}
?>
```

100 changes: 100 additions & 0 deletions public/css/additional.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
.note,
.warning,
.info {
padding: 10px 10px 10px 40px;

margin: 10px 0;
}

.round {
border-radius: 6px;
}


.border {
border: 1px dashed #353535;
}

.note:before,
.warning:before,
.info:before {
display: block;
float: left;
margin-left: -30px;
margin-top: 2px;

font-family: FontAwesome;

width: 20px;
height: 18px;

font-size: 18px;

text-align: center;
}

.note.icon-black:before,
.warning.icon-black:before,
.info.icon-black:before {
color: black;
}

.note {
background: #e6ab0c;
color: white;
}

.note.pastel.version2 {
background-color: rgba(255, 255, 0, 0.65);
}

.note.pastel {
background-color: rgba(230, 198, 12, 0.6);
/*background-color: #e6c60c;*/
color: #353535;
}

.note:before {
content: "\f071";
}

.warning {
color: white;
background: #D8000C;
}

.warning.pastel {
/*background-color: #d8655f;*/
background-color: rgba(255, 60, 0, 0.40);
color: #353535;
}

.warning:before {
content: "\f06a";
}

.info {
color: white;
background: #00529B;
}

.info.pastel {
background-color: rgba(0, 100, 255, 0.30);
color: #353535;
}

.info:before {
content: "\f05a";
}

.lead {
margin-bottom: 2rem;
}

.sidebar-nav {
margin-bottom: 2rem;
}

.sidebar a {
text-shadow: 1px 1px 1px #408DB5;
}