forked from GNUsocial/gnusocial.rocks
Compare commits
117 Commits
| Author | SHA1 | Date |
|---|---|---|
 Eliseu Amaro
|
8ef334f2cd
|
|
|
Eliseu Amaro
|
9f3cd0dcf0
|
|
|
Eliseu Amaro
|
2768f63aa4
|
|
|
Eliseu Amaro
|
9ce7b433f9
|
|
|
Eliseu Amaro
|
c8cbcf6ed3
|
|
|
Eliseu Amaro
|
c7f74fee5d
|
|
|
Eliseu Amaro
|
437675b9aa
|
|
|
Eliseu Amaro
|
5e9f28e47b
|
|
|
Eliseu Amaro
|
34ff91c8d4
|
|
|
Eliseu Amaro
|
b86e27c43a
|
|
|
Eliseu Amaro
|
4203dbb317
|
|
 Diogo Peralta Cordeiro
|
1d4a62f0cb
|
|
|
Diogo Peralta Cordeiro
|
1ea3ee6fdb
|
|
|
Diogo Peralta Cordeiro
|
87582d755e
|
|
|
Diogo Peralta Cordeiro
|
e709472656
|
|
|
Diogo Peralta Cordeiro
|
e539c2a3ef
|
|
|
Diogo Peralta Cordeiro
|
052782bd17
|
|
|
Diogo Peralta Cordeiro
|
1acaee501d
|
|
|
Diogo Peralta Cordeiro
|
b00d522ecd
|
|
|
Diogo Peralta Cordeiro
|
8047f30c9f
|
|
|
Eliseu Amaro
|
3978c7e2df
|
|
|
Diogo Peralta Cordeiro
|
68dce55907
|
|
|
Diogo Peralta Cordeiro
|
7d4070c761
|
|
|
Diogo Peralta Cordeiro
|
2a10c0600f
|
|
|
Diogo Peralta Cordeiro
|
038d196fcd
|
|
|
Diogo Peralta Cordeiro
|
3b466fd58d
|
|
|
Diogo Peralta Cordeiro
|
b7199fbe35
|
|
|
Diogo Peralta Cordeiro
|
7459875db7
|
|
|
Diogo Peralta Cordeiro
|
b2bb52879b
|
|
|
Eliseu Amaro
|
025ad2d26f
|
|
|
Diogo Peralta Cordeiro
|
b8ec457f9e
|
|
|
Diogo Peralta Cordeiro
|
980e4fcb03
|
|
|
Diogo Peralta Cordeiro
|
4c9e39be09
|
|
|
Diogo Peralta Cordeiro
|
dca77353dc
|
|
|
Diogo Peralta Cordeiro
|
c906957499
|
|
|
Diogo Peralta Cordeiro
|
fce2d52b21
|
|
|
Diogo Peralta Cordeiro
|
e93b319205
|
|
|
Diogo Peralta Cordeiro
|
5c6f430204
|
|
|
Diogo Peralta Cordeiro
|
50b36d1b3a
|
|
|
Eliseu Amaro
|
628d9b8a10
|
|
|
Diogo Peralta Cordeiro
|
523885484b
|
|
|
Diogo Peralta Cordeiro
|
8e262b80e7
|
|
|
Diogo Peralta Cordeiro
|
eed9cff6d2
|
|
|
Eliseu Amaro
|
fe5b3b2fba
|
|
|
Eliseu Amaro
|
d87acfc0ec
|
|
|
Eliseu Amaro
|
0d8aaebfb0
|
|
|
Eliseu Amaro
|
868fb0bc8b
|
|
|
Eliseu Amaro
|
0cc54b683f
|
|
|
Eliseu Amaro
|
7fbd880b6d
|
|
|
Eliseu Amaro
|
eb68ab6079
|
|
|
Diogo Peralta Cordeiro
|
4496d8d601
|
|
 Hugo Sales
|
ee6df29c23
|
|
|
Hugo Sales
|
09ce7f0734
|
|
|
Diogo Peralta Cordeiro
|
48605f718d
|
|
Eliseu Amaro
|
94e9fac122 | |
|
Eliseu Amaro
|
0d8aa92234 | |
|
Eliseu Amaro
|
cf28f30a4d | |
|
Eliseu Amaro
|
dabae9fbb4 | |
|
Eliseu Amaro
|
8c0dd20720 | |
|
Eliseu Amaro
|
736d35428a | |
|
Diogo Peralta Cordeiro
|
4c24c78e4a
|
|
|
Eliseu Amaro
|
ffea552a93 | |
|
Diogo Peralta Cordeiro
|
91ac3f7c07
|
|
|
Diogo Peralta Cordeiro
|
3fc71b68af
|
|
|
Diogo Peralta Cordeiro
|
b393708e29
|
|
|
Eliseu Amaro
|
50ebd19082 | |
|
Diogo Peralta Cordeiro
|
930b520c72
|
|
|
Eliseu Amaro
|
9ee437d8aa | |
|
Eliseu Amaro
|
be6560bfcb
|
|
|
Eliseu Amaro
|
f360ebb457
|
|
|
Eliseu Amaro
|
b12753a18f
|
|
|
Eliseu Amaro
|
389f913e74
|
|
|
Eliseu Amaro
|
f1ac5cc5b5
|
|
|
Eliseu Amaro
|
30518ea977
|
|
|
Eliseu Amaro
|
35f7daf77f
|
|
|
Eliseu Amaro
|
ba290a956a
|
|
|
Eliseu Amaro
|
e91012f240
|
|
|
Diogo Peralta Cordeiro
|
2fb0f16e6b
|
|
|
Diogo Peralta Cordeiro
|
85e55bffb7
|
|
|
Diogo Peralta Cordeiro
|
f9f64f242c
|
|
|
Diogo Peralta Cordeiro
|
69d0d5d6e0
|
|
|
Diogo Peralta Cordeiro
|
94b8112060
|
|
|
Diogo Peralta Cordeiro
|
e424bb74b4
|
|
|
Diogo Peralta Cordeiro
|
6160f9a24a
|
|
|
Diogo Peralta Cordeiro
|
fbf06df5d5
|
|
|
Diogo Peralta Cordeiro
|
c96eae78ee
|
|
|
Diogo Peralta Cordeiro
|
a430c12627
|
|
|
Diogo Peralta Cordeiro
|
dc54fa75ea
|
|
|
Diogo Peralta Cordeiro
|
d1b6a4b464
|
|
|
Eliseu Amaro
|
672dfe2a11
|
|
|
Eliseu Amaro
|
a4615ec409
|
|
|
Eliseu Amaro
|
7863bcc4d0
|
|
|
Eliseu Amaro
|
6e8c9c49c9
|
|
|
Eliseu Amaro
|
ff0370af35
|
|
|
Eliseu Amaro
|
45f96f5ec9
|
|
|
Eliseu Amaro
|
978e9443a5
|
|
|
Eliseu Amaro
|
64e4a2c875
|
|
|
Eliseu Amaro
|
5d97a5ce51
|
|
|
Eliseu Amaro
|
b900cc7527
|
|
|
Eliseu Amaro
|
23b5d81c42
|
|
|
Diogo Peralta Cordeiro
|
9888d51bc5
|
|
|
Diogo Peralta Cordeiro
|
5d4dae70da
|
|
|
Diogo Peralta Cordeiro
|
58cda45781
|
|
|
Diogo Peralta Cordeiro
|
e43a71d5af
|
|
|
Diogo Peralta Cordeiro
|
cf1e0e9328
|
|
|
Diogo Peralta Cordeiro
|
3997afe4ff
|
|
|
Diogo Peralta Cordeiro
|
be986a44ec
|
|
|
Diogo Peralta Cordeiro
|
703f4a3084
|
|
|
Diogo Peralta Cordeiro
|
95631ed6d0
|
|
|
Diogo Peralta Cordeiro
|
3803f13d81
|
|
|
Diogo Peralta Cordeiro
|
2634f52f58
|
|
|
Diogo Peralta Cordeiro
|
346ff51fe1
|
|
|
Diogo Peralta Cordeiro
|
6da7c5f614
|
|
|
Diogo Peralta Cordeiro
|
d1dd65e731
|
|
|
Diogo Peralta Cordeiro
|
496e5e9b38
|
|
|
Diogo Peralta Cordeiro
|
038c85b3ce
|
|
|
Diogo Peralta Cordeiro
|
4b22fa37ae
|
|
|
@ -1,2 +1,5 @@
|
|||
# gnusocial.rocks
|
||||
# GNU social's webpage
|
||||
|
||||
Hosted @ [gnusocial.rocks](https://www.gnusocial.rocks)
|
||||
|
||||
_Uses [bashblog](https://github.com/cfenollosa/bashblog) for v3's pages_
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="main.css" type="text/css" />
|
||||
<link rel="stylesheet" href="blog.css" type="text/css" />
|
||||
<link rel="alternate" type="application/rss+xml" title="Subscribe to this page..." href="feed.rss" />
|
||||
<title>All posts - My fancy blog</title>
|
||||
</head><body>
|
||||
</div></div></div>
|
||||
<div id="template-wrapper"><div class="template-unit">
|
||||
<h3>All posts</h3>
|
||||
<h4 class='allposts_header'>September 2021</h4>
|
||||
<ul>
|
||||
<li><a href="./updates-interface-and-accessibility.html">Updates: Interface and accessibility</a> — September 13, 2021</li>
|
||||
</ul>
|
||||
<div id="all_posts"><a href="all_tags.html">All tags</a> — <a href="feed.rss">Subscribe</a></div>
|
||||
</div>
|
||||
<div id="footer">CC by-nc-nd <a href="http://twitter.com/example">John Smith</a> — <a href="mailto:john@smith.com">john@smith.com</a><br/>
|
||||
Generated with <a href="https://github.com/cfenollosa/bashblog">bashblog</a>, a single bash script to easily create blogs like this one</div>
|
||||
</div></div>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="main.css" type="text/css" />
|
||||
<link rel="stylesheet" href="blog.css" type="text/css" />
|
||||
<link rel="alternate" type="application/rss+xml" title="Subscribe to this page..." href="feed.rss" />
|
||||
<title>All tags - My fancy blog</title>
|
||||
</head><body>
|
||||
</div></div></div>
|
||||
<div id="template-wrapper"><div class="template-unit">
|
||||
<h3>All tags</h3>
|
||||
<ul>
|
||||
</ul>
|
||||
<div id="all_posts"><a href="all_posts.html">All posts</a> — <a href="feed.rss">Subscribe</a></div>
|
||||
</div>
|
||||
<div id="footer">CC by-nc-nd <a href="http://twitter.com/example">John Smith</a> — <a href="mailto:john@smith.com">john@smith.com</a><br/>
|
||||
Generated with <a href="https://github.com/cfenollosa/bashblog">bashblog</a>, a single bash script to easily create blogs like this one</div>
|
||||
</div></div>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
grid-area: primary;
|
||||
}
|
||||
#entry-wrapper {
|
||||
grid-area: secundary;
|
||||
}
|
||||
header {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 11vw auto auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"sidebar primary"
|
||||
"sidebar secundary"
|
||||
"sidebar footer footer";
|
||||
column-gap: 1.33rem;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
width: max-content;
|
||||
height: 100%;
|
||||
background-color: #201e1f;
|
||||
top: 0;
|
||||
-webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
|
||||
17px 26px 15px 0px rgba(0, 0, 0, 0);
|
||||
box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
|
||||
17px 26px 15px 0px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
header b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header .menu-list {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.header-main {
|
||||
margin: 0.5em 0.2em 0.2em 0.5em;
|
||||
border-radius: 3px 5px 5px 3px;
|
||||
font-size: 1.802rem;
|
||||
background: #a22430;
|
||||
padding: 0.2em 0.4em;
|
||||
width: min-content, auto;
|
||||
color: #f6f4f6;
|
||||
-webkit-box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
|
||||
17px 26px 15px 0px rgba(0, 0, 0, 0);
|
||||
box-shadow: 2px 5px 16px 0px rgba(34, 30, 34, 0.4),
|
||||
17px 26px 15px 0px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.header-main * {
|
||||
color: #f6f4f6;
|
||||
}
|
||||
|
||||
.header-main img {
|
||||
height: 1em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
color: #f6f4f6;
|
||||
}
|
||||
|
||||
.menu-link:hover,
|
||||
.menu-link:focus {
|
||||
color: #c8bcc8;
|
||||
transition: 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.menu-selected,
|
||||
.menu-selected > a {
|
||||
color: #fff;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
/* Trust me */
|
||||
padding: 0 22vw 11vw 5rem;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.content-head {
|
||||
margin-top: 0.7em;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
/* Distancing itself from main content */
|
||||
#entry-wrapper:first-of-type {
|
||||
padding-top: 0.666rem;
|
||||
}
|
||||
|
||||
/* This is an individual section */
|
||||
.entry-unit {
|
||||
padding-top: 1rem;
|
||||
border-top: 2px solid #221e2233;
|
||||
}
|
||||
|
||||
/* This is an individual section */
|
||||
.entry-unit h3 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.entry-unit:nth-of-type(n + 2) {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
|
||||
.entry-unit ul :last-child {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
.entry-unit ul + p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.entry-unit img {
|
||||
display: block;
|
||||
max-width: 800px;
|
||||
max-height: 400px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.allposts_header + ul :last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.content-wrapper h1,
|
||||
.content-wrapper h2,
|
||||
.content-wrapper h3,
|
||||
.content-wrapper h4,
|
||||
.content-wrapper h5,
|
||||
.content-wrapper h6,
|
||||
.content-wrapper label {
|
||||
font-family: "open_sansbold";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
color: #666666;
|
||||
margin: 0;
|
||||
padding-left: 1em;
|
||||
border-left: 0.3em #aaa solid;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: monospace;
|
||||
margin-bottom: 1rem;
|
||||
white-space: pre;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
s:after {
|
||||
font-size: 1em;
|
||||
content: "\2713";
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
margin-left: 4px;
|
||||
color: #201e1f;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 1rem;
|
||||
background: #201e1f;
|
||||
color: #e9eaed;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
grid-column-start: sidebar-start;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
footer a {
|
||||
font-family: "open_sansbold";
|
||||
font-weight: bold;
|
||||
color: #e9eaed;
|
||||
}
|
||||
|
||||
.content-wrapper img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"sidebar"
|
||||
"primary"
|
||||
"secundary"
|
||||
"footer";
|
||||
}
|
||||
|
||||
header {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-color: #201e1f;
|
||||
width: 100vw;
|
||||
height: max-content;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
header a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header .menu-list {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header .header-main {
|
||||
left: 0;
|
||||
margin: 0 0 0.5rem 0;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
#entry-wrapper {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: 1rem 1rem 2rem 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
@media (pointer:fine) {
|
||||
body {
|
||||
font-kerning: auto;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
pre,
|
||||
form,
|
||||
body,
|
||||
html,
|
||||
p,
|
||||
blockquote,
|
||||
fieldset,
|
||||
input,
|
||||
textarea {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
a img,
|
||||
:link img,
|
||||
:visited img {
|
||||
border: none;
|
||||
}
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
form {
|
||||
all: unset;
|
||||
}
|
||||
html {
|
||||
font-size: 100%;
|
||||
}
|
||||
body,
|
||||
html {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: "open_sansregular", sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.75;
|
||||
color: #221e22;
|
||||
background-color: #f6f4f6;
|
||||
}
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
color: #A6263E;
|
||||
}
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration-line: underline !important;
|
||||
transition: 500ms ease-in-out;
|
||||
}
|
||||
a:active {
|
||||
text-decoration-line: underline !important;
|
||||
}
|
||||
b {
|
||||
font-family: 'open_sansbold';
|
||||
font-weight: bold;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
label {
|
||||
color: #3f3b3b;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
margin: 3rem 0 1.38rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
font-size: 1.802rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.602rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.424rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.266rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
small,
|
||||
.text_small {
|
||||
font-size: 0.889rem;
|
||||
}
|
||||
ul li {
|
||||
margin-left: 2rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
|
@ -1,284 +1,398 @@
|
|||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box !important;
|
||||
-moz-box-sizing: border-box !important;
|
||||
box-sizing: border-box !important;
|
||||
scroll-margin: 5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- BASE STYLES --
|
||||
* Most of these are inherited from Base, but I want to change a few.
|
||||
*/
|
||||
body {
|
||||
line-height: 1.7em;
|
||||
color: #3F3B3B;
|
||||
font-size: 13px;
|
||||
a img,
|
||||
:link img,
|
||||
:visited img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #c33541;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
color: #a22430;
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
label {
|
||||
color: #3F3B3B;
|
||||
::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.pure-img-responsive {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
form {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- LAYOUT STYLES --
|
||||
* These are some useful classes which I will need
|
||||
*/
|
||||
.l-box {
|
||||
padding: 1em;
|
||||
ul li {
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
|
||||
.l-box-lrg {
|
||||
padding: 2em;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
body,
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
height: 100vh;
|
||||
font-size: 1rem;
|
||||
font-family: "open_sansregular", sans-serif;
|
||||
color: #221e22;
|
||||
background-color: #f6f4f6;
|
||||
}
|
||||
|
||||
.is-center {
|
||||
text-align: center;
|
||||
body * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header {
|
||||
z-index: 66;
|
||||
position: fixed;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
background: #a22430;
|
||||
max-height: 4rem;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0.5rem 1rem 0.5rem 1rem;
|
||||
|
||||
|
||||
/*
|
||||
* -- PURE FORM STYLES --
|
||||
* Style the form inputs and labels
|
||||
*/
|
||||
.pure-form label {
|
||||
margin: 1em 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 100%;
|
||||
box-shadow: 0 1px 1px rgba(162, 36, 48, 0.1), 0 2px 2px rgba(162, 36, 48, 0.1),
|
||||
0 4px 4px rgba(162, 36, 48, 0.1), 0 8px 8px rgba(162, 36, 48, 0.1),
|
||||
0 16px 16px rgba(162, 36, 48, 0.1);
|
||||
}
|
||||
|
||||
.pure-form input[type] {
|
||||
border: 2px solid #ddd;
|
||||
box-shadow: none;
|
||||
font-size: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
header ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- PURE BUTTON STYLES --
|
||||
* I want my pure-button elements to look a little different
|
||||
*/
|
||||
.pure-button {
|
||||
background-color: #1f8dd6;
|
||||
color: white;
|
||||
padding: 0.5em 2em;
|
||||
border-radius: 5px;
|
||||
header * {
|
||||
font-size: inherit;
|
||||
color: #f6f4f6;
|
||||
height: 100vh;
|
||||
max-height: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.pure-button-primary {
|
||||
background: white;
|
||||
color: #A22430;
|
||||
border-radius: 5px;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- MENU STYLES --
|
||||
* I want to customize how my .pure-menu looks at the top of the page
|
||||
*/
|
||||
|
||||
.home-menu {
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
|
||||
}
|
||||
.home-menu {
|
||||
background: #fcfbfa;
|
||||
}
|
||||
.pure-menu.pure-menu-fixed {
|
||||
/* Horizontal scroll when overflows */
|
||||
overflow-x: auto;
|
||||
/* Fixed menus normally have a border at the bottom. */
|
||||
border-bottom: none;
|
||||
/* I need a higher z-index here because of the scroll-over effect. */
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-heading {
|
||||
color: #3F3B3B;
|
||||
font-weight: 400;
|
||||
font-size: 120%;
|
||||
.menu-heading {
|
||||
display: flex;
|
||||
color: #f6f4f6;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-selected a {
|
||||
color: #817F7F;
|
||||
}
|
||||
.pure-menu-selected > .pure-menu-link, .pure-menu-selected > .pure-menu-link:visited {
|
||||
color: #817F7F;
|
||||
.menu-heading img {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.home-menu a {
|
||||
color: #c33541;
|
||||
}
|
||||
.home-menu li a:hover,
|
||||
.home-menu li a:focus {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a22430;
|
||||
.menu-link {
|
||||
padding: 2px 12px;
|
||||
font-size: 0.8em;
|
||||
color: #f6f4f6;
|
||||
font-family: "open_sansbold", sans-serif;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075), 0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075), 0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- SPLASH STYLES --
|
||||
* This is the blue top section that appears on the page.
|
||||
*/
|
||||
.menu-link:focus,
|
||||
.menu-link:hover,
|
||||
.ribbon-content a:focus,
|
||||
.ribbon-content a:hover {
|
||||
text-decoration: none !important;
|
||||
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 0.075), inset 0 2px 2px hsl(0deg 0% 0% / 0.075), inset 0 4px 4px hsl(0deg 0% 0% / 0.075), inset 0 8px 8px hsl(0deg 0% 0% / 0.075), inset 0 16px 16px hsl(0deg 0% 0% / 0.075);
|
||||
}
|
||||
|
||||
.splash-container {
|
||||
background: #E9EAED;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
/* The following styles are required for the "scroll-over" effect */
|
||||
width: 100%;
|
||||
height: 20em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed !important;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #221e22ee;
|
||||
border-radius: 0.5rem;
|
||||
padding: 4px 8px;
|
||||
color: #f6f4f6;
|
||||
float: inline-end;
|
||||
width: max-content;
|
||||
box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
|
||||
0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
|
||||
0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
|
||||
}
|
||||
|
||||
hr {
|
||||
float: inline-start;
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
color: snow;
|
||||
}
|
||||
|
||||
#log-of-past-successes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2000px) and (min-height: 1000px) {
|
||||
.content,
|
||||
.content-team {
|
||||
padding-left: 20% !important;
|
||||
padding-right: 20% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
.l-box {
|
||||
margin-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.menu-list {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.content,
|
||||
.content ~ * {
|
||||
top: unset !important;
|
||||
padding-top: 0 !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.soc {
|
||||
top: 3rem !important;
|
||||
height: calc(100vh - 4rem);
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
font-size: 3rem !important;
|
||||
}
|
||||
|
||||
.splash-head img {
|
||||
height: 3rem !important;
|
||||
width: 3rem !important;
|
||||
}
|
||||
|
||||
.content,
|
||||
.ribbon-wrapper,
|
||||
.content-team {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.content-team .g .l-box-lrg:last-child {
|
||||
flex: 1 !important;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.l-box {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative !important;
|
||||
}
|
||||
}
|
||||
|
||||
.body-wrapper {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.body-wrapper a {
|
||||
font-family: "open_sansbold", sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.splash {
|
||||
/* absolute center .splash within .splash-container */
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 4em; left: 0; bottom: 0; right: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background-color: #f6f4f6;
|
||||
}
|
||||
|
||||
/* This is the subheading that appears on the blue section */
|
||||
.splash-subhead {
|
||||
color: #3F3B3B;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.8;
|
||||
.splash-head {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
width: border-box;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 6rem;
|
||||
color: #a22430;
|
||||
cursor: default;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- CONTENT STYLES --
|
||||
* This represents the content area (everything below the blue section)
|
||||
*/
|
||||
.content-wrapper {
|
||||
/* These styles are required for the "scroll-over" effect */
|
||||
position: absolute;
|
||||
top: 20em;
|
||||
width: 100%;
|
||||
min-height: 12%;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
|
||||
.splash-head img {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* We want to give the content area some more padding */
|
||||
.content {
|
||||
padding: 1em 1em 3em;
|
||||
}
|
||||
|
||||
/* This is the class used for the main content headers (<h2>) */
|
||||
.content-head {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin: 2em 0 1em;
|
||||
font-family: "open_sansbold", sans-serif;
|
||||
}
|
||||
|
||||
/* This is a modifier class used when the content-head is inside a ribbon */
|
||||
.content-head-ribbon {
|
||||
color: #3F3B3B;
|
||||
.content {
|
||||
z-index: 2;
|
||||
position: sticky;
|
||||
padding: 3rem;
|
||||
background-color: #e9eaed;
|
||||
}
|
||||
|
||||
/* This is the class used for the content sub-headers (<h3>) */
|
||||
.content-subhead {
|
||||
color: #A22430;
|
||||
[class^="content"] h1 {
|
||||
font-family: "open_sansbold", sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "open_sansbold", sans-serif !important;
|
||||
margin: 0.4em 0 0.2em 0 !important;
|
||||
}
|
||||
|
||||
.is-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content .g {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content .g .l-box {
|
||||
flex: 1;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
.content ~ * {
|
||||
z-index: 3;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.ribbon-wrapper {
|
||||
background-color: #f6f4f6;
|
||||
padding: 4rem;
|
||||
}
|
||||
.content-subhead i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
/* This is the class used for the dark-background areas. */
|
||||
.ribbon {
|
||||
background: #E9EAED;
|
||||
color: #3F3B3B;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* The footer */
|
||||
footer {
|
||||
border-top: solid 1px #eeeeee;
|
||||
background: #fbfbfb;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
.ribbon img {
|
||||
min-width: 15rem;
|
||||
max-height: 200px;
|
||||
margin: 0 2rem 2rem 2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||
* On tablets and other medium-sized devices, we want to customize some
|
||||
* of the mobile styles.
|
||||
*/
|
||||
@media (min-width: 48em) {
|
||||
|
||||
/* We increase the body font size */
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* We can align the menu header to the left, but float the
|
||||
menu items to the right. */
|
||||
.home-menu {
|
||||
text-align: left;
|
||||
}
|
||||
.home-menu ul {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* We increase the height of the splash-container */
|
||||
/* .splash-container {
|
||||
height: 500px;
|
||||
}*/
|
||||
|
||||
/* We decrease the width of the .splash, since we have more width
|
||||
to work with */
|
||||
.splash {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
|
||||
/* We remove the border-separator assigned to .l-box-lrg */
|
||||
.l-box-lrg {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ribbon-content h2 {
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||
* On desktops and other large devices, we want to over-ride some
|
||||
* of the mobile and tablet styles.
|
||||
*/
|
||||
@media (min-width: 78em) {
|
||||
/* We increase the header font size even more */
|
||||
.splash-head {
|
||||
font-size: 300%;
|
||||
}
|
||||
.ribbon-content a {
|
||||
background-color: #a22430;
|
||||
color: #f6f4f6;
|
||||
padding: 4px 12px;
|
||||
margin-right: 4px;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
|
||||
0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
|
||||
0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #f6f4f666;
|
||||
padding: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
|
||||
0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
|
||||
0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
|
||||
}
|
||||
|
||||
.card h1,.card h2,.card h3,.card h {
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
.content-team {
|
||||
z-index: 3;
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
padding: 4rem;
|
||||
background-color: #e9eaed;
|
||||
}
|
||||
|
||||
.content-team .g {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content-team .g .l-box-lrg {
|
||||
text-align: justify-all;
|
||||
padding-inline-end: 2rem;
|
||||
}
|
||||
|
||||
.content-team .g .l-box-lrg:first-child {
|
||||
flex: 1;
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
.content-team .g .l-box-lrg:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content-team .g .l-box-lrg:last-child {
|
||||
flex: 0.5;
|
||||
}
|
||||
|
||||
#nodes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-collapse: collapse;
|
||||
padding-bottom: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: max-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#nodes td,
|
||||
#nodes th {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
#nodes tr:nth-child(even) {
|
||||
background-color: #f6f4f6;
|
||||
}
|
||||
|
||||
#nodes tr:nth-child(odd) {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
#nodes tr:hover {
|
||||
background-color: #e9eaed;
|
||||
}
|
||||
|
||||
#nodes th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: #a22430;
|
||||
color: #f6f4f6;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background-color: #333333;
|
||||
color: #e9eaed;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
font-family: "open_sansbold", sans-serif;
|
||||
font-weight: bold;
|
||||
color: #e9eaed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"expert","formats":["ttf","woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","webonly":"Y","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features":"all","subset_ot_features_list":"","base64":"Y","style_link":"Y","css_stylesheet":"opensans.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sansbold';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Bold Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Bold </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Bold</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Bold in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sansbold_italic';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Bold Italic Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Bold Italic </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Bold Italic</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Bold Italic in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Bold Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sansextrabold';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Extrabold Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Extrabold Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Extrabold Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Extrabold Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Extrabold Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sansextrabold_italic';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Extrabold Italic Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Extrabold Italic </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Extrabold Italic</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Extrabold Italic in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Extrabold Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sansitalic';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Italic Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Italic </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Italic</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Italic in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sanslight';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Light Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Light Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Light Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Light Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Light Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sanslight_italic';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Light Italic Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Light Italic </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Light Italic</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Light Italic in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Light Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sansregular';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sanssemibold';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Semibold Regular Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Semibold Regular </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Semibold Regular</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Semibold Regular in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Semibold Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,623 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
</script>
|
||||
<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
|
||||
<link rel="stylesheet" href="opensans.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<style type="text/css">
|
||||
body{
|
||||
font-family: 'open_sanssemibold_italic';
|
||||
}
|
||||
</style>
|
||||
|
||||
<title>Open Sans Semibold Italic Specimen</title>
|
||||
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$('#container').easyTabs({defaultContent:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="header">
|
||||
Open Sans Semibold Italic </div>
|
||||
<ul class="tabs">
|
||||
<li><a href="#specimen">Specimen</a></li>
|
||||
<li><a href="#layout">Sample Layout</a></li>
|
||||
<li><a href="#glyphs">Glyphs & Languages</a></li>
|
||||
<li><a href="#installing">Installing Webfonts</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div id="main_content">
|
||||
|
||||
|
||||
<div id="specimen">
|
||||
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<div class="huge">AaBb</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="glyph_range">A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
<table class="sample_table">
|
||||
<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section" id="bodycomparison">
|
||||
|
||||
|
||||
<div id="xheight">
|
||||
<div class="fontbody">◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
|
||||
<div class="fontbody" style="z-index:1">
|
||||
body<span>Open Sans Semibold Italic</span>
|
||||
</div>
|
||||
<div class="arialbody" style="z-index:1">
|
||||
body<span>Arial</span>
|
||||
</div>
|
||||
<div class="verdanabody" style="z-index:1">
|
||||
body<span>Verdana</span>
|
||||
</div>
|
||||
<div class="georgiabody" style="z-index:1">
|
||||
body<span>Georgia</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section psample psample_row1" id="">
|
||||
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
<div class="section psample psample_row2" id="">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row4" id="">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="white_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="section psample psample_row1 fullreverse">
|
||||
<div class="grid2 firstcol">
|
||||
<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid3">
|
||||
<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample psample_row2 fullreverse">
|
||||
<div class="grid3 firstcol">
|
||||
<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid4">
|
||||
<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="grid5">
|
||||
<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row3" id="">
|
||||
<div class="grid5 firstcol">
|
||||
<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="grid7">
|
||||
<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
|
||||
<div class="grid12 firstcol">
|
||||
<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div>
|
||||
<div class="black_blend"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="layout">
|
||||
|
||||
<div class="section">
|
||||
|
||||
<div class="grid12 firstcol">
|
||||
<h1>Lorem Ipsum Dolor</h1>
|
||||
<h2>Etiam porta sem malesuada magna mollis euismod</h2>
|
||||
|
||||
<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="grid8 firstcol">
|
||||
<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
<h3>Pellentesque ornare sem</h3>
|
||||
|
||||
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
|
||||
|
||||
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
|
||||
|
||||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
|
||||
|
||||
<h3>Cras mattis consectetur</h3>
|
||||
|
||||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
|
||||
|
||||
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid4 sidebar">
|
||||
|
||||
<div class="box reverse">
|
||||
<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
</div>
|
||||
|
||||
<p class="caption">Maecenas sed diam eget risus varius.</p>
|
||||
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
|
||||
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
|
||||
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="glyphs">
|
||||
<div class="section">
|
||||
<div class="grid12 firstcol">
|
||||
|
||||
<h1>Language Support</h1>
|
||||
<p>The subset of Open Sans Semibold Italic in this kit supports the following languages:<br />
|
||||
|
||||
Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo </p>
|
||||
<h1>Glyph Chart</h1>
|
||||
<p>The subset of Open Sans Semibold Italic in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
|
||||
<div id="glyph_chart">
|
||||
|
||||
<div><p>&#13;</p> </div>
|
||||
<div><p>&#32;</p> </div>
|
||||
<div><p>&#33;</p>!</div>
|
||||
<div><p>&#34;</p>"</div>
|
||||
<div><p>&#35;</p>#</div>
|
||||
<div><p>&#36;</p>$</div>
|
||||
<div><p>&#37;</p>%</div>
|
||||
<div><p>&#38;</p>&</div>
|
||||
<div><p>&#39;</p>'</div>
|
||||
<div><p>&#40;</p>(</div>
|
||||
<div><p>&#41;</p>)</div>
|
||||
<div><p>&#42;</p>*</div>
|
||||
<div><p>&#43;</p>+</div>
|
||||
<div><p>&#44;</p>,</div>
|
||||
<div><p>&#45;</p>-</div>
|
||||
<div><p>&#46;</p>.</div>
|
||||
<div><p>&#47;</p>/</div>
|
||||
<div><p>&#48;</p>0</div>
|
||||
<div><p>&#49;</p>1</div>
|
||||
<div><p>&#50;</p>2</div>
|
||||
<div><p>&#51;</p>3</div>
|
||||
<div><p>&#52;</p>4</div>
|
||||
<div><p>&#53;</p>5</div>
|
||||
<div><p>&#54;</p>6</div>
|
||||
<div><p>&#55;</p>7</div>
|
||||
<div><p>&#56;</p>8</div>
|
||||
<div><p>&#57;</p>9</div>
|
||||
<div><p>&#58;</p>:</div>
|
||||
<div><p>&#59;</p>;</div>
|
||||
<div><p>&#60;</p><</div>
|
||||
<div><p>&#61;</p>=</div>
|
||||
<div><p>&#62;</p>></div>
|
||||
<div><p>&#63;</p>?</div>
|
||||
<div><p>&#64;</p>@</div>
|
||||
<div><p>&#65;</p>A</div>
|
||||
<div><p>&#66;</p>B</div>
|
||||
<div><p>&#67;</p>C</div>
|
||||
<div><p>&#68;</p>D</div>
|
||||
<div><p>&#69;</p>E</div>
|
||||
<div><p>&#70;</p>F</div>
|
||||
<div><p>&#71;</p>G</div>
|
||||
<div><p>&#72;</p>H</div>
|
||||
<div><p>&#73;</p>I</div>
|
||||
<div><p>&#74;</p>J</div>
|
||||
<div><p>&#75;</p>K</div>
|
||||
<div><p>&#76;</p>L</div>
|
||||
<div><p>&#77;</p>M</div>
|
||||
<div><p>&#78;</p>N</div>
|
||||
<div><p>&#79;</p>O</div>
|
||||
<div><p>&#80;</p>P</div>
|
||||
<div><p>&#81;</p>Q</div>
|
||||
<div><p>&#82;</p>R</div>
|
||||
<div><p>&#83;</p>S</div>
|
||||
<div><p>&#84;</p>T</div>
|
||||
<div><p>&#85;</p>U</div>
|
||||
<div><p>&#86;</p>V</div>
|
||||
<div><p>&#87;</p>W</div>
|
||||
<div><p>&#88;</p>X</div>
|
||||
<div><p>&#89;</p>Y</div>
|
||||
<div><p>&#90;</p>Z</div>
|
||||
<div><p>&#91;</p>[</div>
|
||||
<div><p>&#92;</p>\</div>
|
||||
<div><p>&#93;</p>]</div>
|
||||
<div><p>&#94;</p>^</div>
|
||||
<div><p>&#95;</p>_</div>
|
||||
<div><p>&#96;</p>`</div>
|
||||
<div><p>&#97;</p>a</div>
|
||||
<div><p>&#98;</p>b</div>
|
||||
<div><p>&#99;</p>c</div>
|
||||
<div><p>&#100;</p>d</div>
|
||||
<div><p>&#101;</p>e</div>
|
||||
<div><p>&#102;</p>f</div>
|
||||
<div><p>&#103;</p>g</div>
|
||||
<div><p>&#104;</p>h</div>
|
||||
<div><p>&#105;</p>i</div>
|
||||
<div><p>&#106;</p>j</div>
|
||||
<div><p>&#107;</p>k</div>
|
||||
<div><p>&#108;</p>l</div>
|
||||
<div><p>&#109;</p>m</div>
|
||||
<div><p>&#110;</p>n</div>
|
||||
<div><p>&#111;</p>o</div>
|
||||
<div><p>&#112;</p>p</div>
|
||||
<div><p>&#113;</p>q</div>
|
||||
<div><p>&#114;</p>r</div>
|
||||
<div><p>&#115;</p>s</div>
|
||||
<div><p>&#116;</p>t</div>
|
||||
<div><p>&#117;</p>u</div>
|
||||
<div><p>&#118;</p>v</div>
|
||||
<div><p>&#119;</p>w</div>
|
||||
<div><p>&#120;</p>x</div>
|
||||
<div><p>&#121;</p>y</div>
|
||||
<div><p>&#122;</p>z</div>
|
||||
<div><p>&#123;</p>{</div>
|
||||
<div><p>&#124;</p>|</div>
|
||||
<div><p>&#125;</p>}</div>
|
||||
<div><p>&#126;</p>~</div>
|
||||
<div><p>&#160;</p> </div>
|
||||
<div><p>&#161;</p>¡</div>
|
||||
<div><p>&#162;</p>¢</div>
|
||||
<div><p>&#163;</p>£</div>
|
||||
<div><p>&#164;</p>¤</div>
|
||||
<div><p>&#165;</p>¥</div>
|
||||
<div><p>&#166;</p>¦</div>
|
||||
<div><p>&#167;</p>§</div>
|
||||
<div><p>&#168;</p>¨</div>
|
||||
<div><p>&#169;</p>©</div>
|
||||
<div><p>&#170;</p>ª</div>
|
||||
<div><p>&#171;</p>«</div>
|
||||
<div><p>&#172;</p>¬</div>
|
||||
<div><p>&#173;</p>­</div>
|
||||
<div><p>&#174;</p>®</div>
|
||||
<div><p>&#175;</p>¯</div>
|
||||
<div><p>&#176;</p>°</div>
|
||||
<div><p>&#177;</p>±</div>
|
||||
<div><p>&#178;</p>²</div>
|
||||
<div><p>&#179;</p>³</div>
|
||||
<div><p>&#180;</p>´</div>
|
||||
<div><p>&#181;</p>µ</div>
|
||||
<div><p>&#182;</p>¶</div>
|
||||
<div><p>&#183;</p>·</div>
|
||||
<div><p>&#184;</p>¸</div>
|
||||
<div><p>&#185;</p>¹</div>
|
||||
<div><p>&#186;</p>º</div>
|
||||
<div><p>&#187;</p>»</div>
|
||||
<div><p>&#188;</p>¼</div>
|
||||
<div><p>&#189;</p>½</div>
|
||||
<div><p>&#190;</p>¾</div>
|
||||
<div><p>&#191;</p>¿</div>
|
||||
<div><p>&#192;</p>À</div>
|
||||
<div><p>&#193;</p>Á</div>
|
||||
<div><p>&#194;</p>Â</div>
|
||||
<div><p>&#195;</p>Ã</div>
|
||||
<div><p>&#196;</p>Ä</div>
|
||||
<div><p>&#197;</p>Å</div>
|
||||
<div><p>&#198;</p>Æ</div>
|
||||
<div><p>&#199;</p>Ç</div>
|
||||
<div><p>&#200;</p>È</div>
|
||||
<div><p>&#201;</p>É</div>
|
||||
<div><p>&#202;</p>Ê</div>
|
||||
<div><p>&#203;</p>Ë</div>
|
||||
<div><p>&#204;</p>Ì</div>
|
||||
<div><p>&#205;</p>Í</div>
|
||||
<div><p>&#206;</p>Î</div>
|
||||
<div><p>&#207;</p>Ï</div>
|
||||
<div><p>&#208;</p>Ð</div>
|
||||
<div><p>&#209;</p>Ñ</div>
|
||||
<div><p>&#210;</p>Ò</div>
|
||||
<div><p>&#211;</p>Ó</div>
|
||||
<div><p>&#212;</p>Ô</div>
|
||||
<div><p>&#213;</p>Õ</div>
|
||||
<div><p>&#214;</p>Ö</div>
|
||||
<div><p>&#215;</p>×</div>
|
||||
<div><p>&#216;</p>Ø</div>
|
||||
<div><p>&#217;</p>Ù</div>
|
||||
<div><p>&#218;</p>Ú</div>
|
||||
<div><p>&#219;</p>Û</div>
|
||||
<div><p>&#220;</p>Ü</div>
|
||||
<div><p>&#221;</p>Ý</div>
|
||||
<div><p>&#222;</p>Þ</div>
|
||||
<div><p>&#223;</p>ß</div>
|
||||
<div><p>&#224;</p>à</div>
|
||||
<div><p>&#225;</p>á</div>
|
||||
<div><p>&#226;</p>â</div>
|
||||
<div><p>&#227;</p>ã</div>
|
||||
<div><p>&#228;</p>ä</div>
|
||||
<div><p>&#229;</p>å</div>
|
||||
<div><p>&#230;</p>æ</div>
|
||||
<div><p>&#231;</p>ç</div>
|
||||
<div><p>&#232;</p>è</div>
|
||||
<div><p>&#233;</p>é</div>
|
||||
<div><p>&#234;</p>ê</div>
|
||||
<div><p>&#235;</p>ë</div>
|
||||
<div><p>&#236;</p>ì</div>
|
||||
<div><p>&#237;</p>í</div>
|
||||
<div><p>&#238;</p>î</div>
|
||||
<div><p>&#239;</p>ï</div>
|
||||
<div><p>&#240;</p>ð</div>
|
||||
<div><p>&#241;</p>ñ</div>
|
||||
<div><p>&#242;</p>ò</div>
|
||||
<div><p>&#243;</p>ó</div>
|
||||
<div><p>&#244;</p>ô</div>
|
||||
<div><p>&#245;</p>õ</div>
|
||||
<div><p>&#246;</p>ö</div>
|
||||
<div><p>&#247;</p>÷</div>
|
||||
<div><p>&#248;</p>ø</div>
|
||||
<div><p>&#249;</p>ù</div>
|
||||
<div><p>&#250;</p>ú</div>
|
||||
<div><p>&#251;</p>û</div>
|
||||
<div><p>&#252;</p>ü</div>
|
||||
<div><p>&#253;</p>ý</div>
|
||||
<div><p>&#254;</p>þ</div>
|
||||
<div><p>&#255;</p>ÿ</div>
|
||||
<div><p>&#338;</p>Œ</div>
|
||||
<div><p>&#339;</p>œ</div>
|
||||
<div><p>&#376;</p>Ÿ</div>
|
||||
<div><p>&#710;</p>ˆ</div>
|
||||
<div><p>&#732;</p>˜</div>
|
||||
<div><p>&#8192;</p> </div>
|
||||
<div><p>&#8193;</p> </div>
|
||||
<div><p>&#8194;</p> </div>
|
||||
<div><p>&#8195;</p> </div>
|
||||
<div><p>&#8196;</p> </div>
|
||||
<div><p>&#8197;</p> </div>
|
||||
<div><p>&#8198;</p> </div>
|
||||
<div><p>&#8199;</p> </div>
|
||||
<div><p>&#8200;</p> </div>
|
||||
<div><p>&#8201;</p> </div>
|
||||
<div><p>&#8202;</p> </div>
|
||||
<div><p>&#8208;</p>‐</div>
|
||||
<div><p>&#8209;</p>‑</div>
|
||||
<div><p>&#8210;</p>‒</div>
|
||||
<div><p>&#8211;</p>–</div>
|
||||
<div><p>&#8212;</p>—</div>
|
||||
<div><p>&#8216;</p>‘</div>
|
||||
<div><p>&#8217;</p>’</div>
|
||||
<div><p>&#8218;</p>‚</div>
|
||||
<div><p>&#8220;</p>“</div>
|
||||
<div><p>&#8221;</p>”</div>
|
||||
<div><p>&#8222;</p>„</div>
|
||||
<div><p>&#8226;</p>•</div>
|
||||
<div><p>&#8230;</p>…</div>
|
||||
<div><p>&#8239;</p> </div>
|
||||
<div><p>&#8249;</p>‹</div>
|
||||
<div><p>&#8250;</p>›</div>
|
||||
<div><p>&#8287;</p> </div>
|
||||
<div><p>&#8364;</p>€</div>
|
||||
<div><p>&#8482;</p>™</div>
|
||||
<div><p>&#9724;</p>◼</div>
|
||||
<div><p>&#64256;</p>ff</div>
|
||||
<div><p>&#64257;</p>fi</div>
|
||||
<div><p>&#64258;</p>fl</div>
|
||||
<div><p>&#64259;</p>ffi</div>
|
||||
<div><p>&#64260;</p>ffl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="specs">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="installing">
|
||||
<div class="section">
|
||||
<div class="grid7 firstcol">
|
||||
<h1>Installing Webfonts</h1>
|
||||
|
||||
<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
|
||||
|
||||
<h2>1. Upload your webfonts</h2>
|
||||
<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
|
||||
|
||||
<h2>2. Include the webfont stylesheet</h2>
|
||||
<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
|
||||
|
||||
|
||||
<code>
|
||||
@font-face{
|
||||
font-family: 'MyWebFont';
|
||||
src: url('WebFont.eot');
|
||||
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
|
||||
url('WebFont.woff') format('woff'),
|
||||
url('WebFont.ttf') format('truetype'),
|
||||
url('WebFont.svg#webfont') format('svg');
|
||||
}
|
||||
</code>
|
||||
|
||||
<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
|
||||
<code><link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /></code>
|
||||
|
||||
<h2>3. Modify your own stylesheet</h2>
|
||||
<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
|
||||
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
|
||||
|
||||
<h2>4. Test</h2>
|
||||
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid5 sidebar">
|
||||
<div class="box">
|
||||
<h2>Troubleshooting<br />Font-Face Problems</h2>
|
||||
<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
|
||||
|
||||
<h3>Fonts not showing in any browser</h3>
|
||||
|
||||
<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
|
||||
|
||||
<h3>Fonts not loading in iPhone or iPad</h3>
|
||||
|
||||
<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
|
||||
|
||||
<h3>Fonts not loading in Firefox</h3>
|
||||
|
||||
<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
|
||||
|
||||
<h3>Fonts not loading in IE</h3>
|
||||
|
||||
<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
|
||||
|
||||
<h3>Fonts not loading in IE9</h3>
|
||||
|
||||
<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>©2010-2017 Font Squirrel. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,129 @@
|
|||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
|
|
@ -0,0 +1,396 @@
|
|||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center, dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend, table,
|
||||
caption, tbody, tfoot, thead, tr, th, td
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 300px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="24mm"
|
||||
height="32mm"
|
||||
viewBox="0 0 24 32"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
sodipodi:docname="gnu-social-logo-invert.svg"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1272"
|
||||
inkscape:window-height="1370"
|
||||
id="namedview15"
|
||||
showgrid="false"
|
||||
inkscape:zoom="4.1802625"
|
||||
inkscape:cx="34.19964"
|
||||
inkscape:cy="34.245384"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="40"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="text853"
|
||||
inkscape:pagecheckerboard="true"
|
||||
inkscape:document-rotation="0" />
|
||||
<defs
|
||||
id="defs2">
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath859">
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#g855"
|
||||
id="use861"
|
||||
width="100%"
|
||||
height="100%" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath859-6">
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#g855-5"
|
||||
id="use861-7"
|
||||
width="100%"
|
||||
height="100%" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="god"
|
||||
style="display:inline"
|
||||
transform="matrix(0.47865128,0,0,0.49161708,-14.705595,-398.94875)">
|
||||
<g
|
||||
id="g925"
|
||||
transform="translate(-0.78308734,0.63723314)"
|
||||
style="stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
aria-label="G"
|
||||
transform="matrix(1.1244589,0,0,1.0100747,-4.0043422,-41.191528)"
|
||||
id="text853"
|
||||
style="font-style:normal;font-weight:normal;font-size:62.4449px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.650468">
|
||||
<path
|
||||
d="m 57.519148,882.96567 15.136086,-0.34554 c 2.683308,32.77448 -38.469541,31.2716 -37.509928,1.14675 0.765452,-24.70233 28.91666,-31.98544 36.591541,-12.62905 l -8.609996,2.55008 c -2.217355,-7.40984 -15.919823,-6.7186 -18.887403,6.64234 -2.987313,20.18788 16.147591,22.80711 20.177199,10.75693 l -4.809555,-1.81516 z"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:62.4449px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.650468"
|
||||
id="path855"
|
||||
sodipodi:nodetypes="ccccccccc" />
|
||||
</g>
|
||||
<g
|
||||
id="layer1"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
transform="matrix(2.4597335,0,0,2.2285081,17.450109,805.89108)">
|
||||
<g
|
||||
transform="matrix(0.26458333,0,0,0.26458333,23.293448,-84.126738)"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
id="g4669">
|
||||
<g
|
||||
id="g4644"
|
||||
transform="matrix(1.1438703,0,0,1.1748557,-102.13483,-617.9937)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.00091;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
|
||||
<g
|
||||
id="g857"
|
||||
clip-path="url(#clipPath859)"
|
||||
transform="matrix(1.5815392,0,0,1.5815392,-36.266003,-486.77024)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g855"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g851"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
id="path4611"
|
||||
d="m 10.221803,2.7640969 c -1.7786174,0.1401817 -5.298108,9.1732331 2.008294,9.2604011 3.522746,-0.03369 3.68736,-2.4918871 3.68736,-2.4918871 0,0 0.09877,-2.1214767 -1.810756,-2.1214767 -1.909525,0 -1.282562,1.3806415 -2.798444,1.3806415 C 8.9024217,7.725778 10.547922,3.1080283 10.221803,2.7640969 Z"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.454216;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
|
||||
sodipodi:nodetypes="cccscc" />
|
||||
</g>
|
||||
<g
|
||||
id="g884"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
transform="matrix(-2.2148845,0,0,2.1523642,91.41328,809.04412)">
|
||||
<g
|
||||
transform="matrix(0.26458333,0,0,0.26458333,23.293448,-84.126738)"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
id="g880">
|
||||
<g
|
||||
id="g878"
|
||||
transform="matrix(1.1438703,0,0,1.1748557,-102.13483,-617.9937)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.00091;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
|
||||
<g
|
||||
id="g876"
|
||||
clip-path="url(#clipPath859)"
|
||||
transform="matrix(1.5815392,0,0,1.5815392,-36.266003,-486.77024)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g874"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g872"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="layer1-3"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
transform="matrix(-2.4597335,0,0,2.2285081,95.97825,806.11208)">
|
||||
<g
|
||||
transform="matrix(0.26458333,0,0,0.26458333,23.293448,-84.126738)"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
id="g4669-2">
|
||||
<g
|
||||
id="g4644-2"
|
||||
transform="matrix(1.1438703,0,0,1.1748557,-102.13483,-617.9937)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.00091;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
|
||||
<g
|
||||
id="g857-1"
|
||||
clip-path="url(#clipPath859-6)"
|
||||
transform="matrix(1.5815392,0,0,1.5815392,-36.266003,-486.77024)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g855-5"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g851-3"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
id="path4611-3"
|
||||
d="m 10.221803,2.7640969 c -1.7786174,0.1401817 -5.298108,9.1732331 2.008294,9.2604011 3.522746,-0.03369 3.68736,-2.4918871 3.68736,-2.4918871 0,0 0.09877,-2.1214767 -1.810756,-2.1214767 -1.909525,0 -1.282562,1.3806415 -2.798444,1.3806415 C 8.9024217,7.725778 10.547922,3.1080283 10.221803,2.7640969 Z"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.454216;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
|
||||
sodipodi:nodetypes="cccscc" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer3"
|
||||
inkscape:label="not god"
|
||||
transform="matrix(0.30264901,0,0,0.31084723,-3.7297254,-247.63757)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -0,0 +1,191 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="32mm"
|
||||
height="32mm"
|
||||
viewBox="0 0 32 32"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
|
||||
sodipodi:docname="gnu-social-logo.svg">
|
||||
<defs
|
||||
id="defs2">
|
||||
<inkscape:perspective
|
||||
sodipodi:type="inkscape:persp3d"
|
||||
inkscape:vp_x="0 : 261.18107 : 1"
|
||||
inkscape:vp_y="0 : 999.99994 : 0"
|
||||
inkscape:vp_z="744.09447 : 261.18107 : 1"
|
||||
inkscape:persp3d-origin="372.04724 : 85.787379 : 1"
|
||||
id="perspective2888" />
|
||||
<inkscape:perspective
|
||||
id="perspective2859"
|
||||
inkscape:persp3d-origin="0.5 : -264.66666 : 1"
|
||||
inkscape:vp_z="0.99999998 : -264.49999 : 1"
|
||||
inkscape:vp_y="0 : 999.99994 : 0"
|
||||
inkscape:vp_x="0 : -264.49999 : 1"
|
||||
sodipodi:type="inkscape:persp3d" />
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath859">
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#g855"
|
||||
id="use861"
|
||||
width="100%"
|
||||
height="100%" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath859-6">
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#g855-5"
|
||||
id="use861-7"
|
||||
width="100%"
|
||||
height="100%" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="3.959798"
|
||||
inkscape:cx="31.153109"
|
||||
inkscape:cy="63.414111"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="g4644"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1343"
|
||||
inkscape:window-height="908"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="502"
|
||||
inkscape:window-maximized="0" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<g
|
||||
transform="matrix(0.26458333,0,0,0.26458333,21.355743,-86.198078)"
|
||||
style="display:inline"
|
||||
id="g4669">
|
||||
<g
|
||||
id="g4644"
|
||||
transform="matrix(1.1438703,0,0,1.1748557,-102.38737,-617.48862)">
|
||||
<path
|
||||
sodipodi:nodetypes="ccsc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4639"
|
||||
d="m 96.925831,881.563 c -3.735488,21.79036 -38.392563,21.90151 -38.392563,21.90151 0,0 21.203396,-6.56966 19.750703,-22.34174 -1.327052,-14.408 18.64186,0.44023 18.64186,0.44023 z"
|
||||
style="fill:#a22430;fill-opacity:1;stroke:none" />
|
||||
<rect
|
||||
style="fill:#a22430;fill-opacity:1;stroke:none"
|
||||
id="rect3328"
|
||||
width="89.521233"
|
||||
height="77.451447"
|
||||
x="27.052763"
|
||||
y="805.25439"
|
||||
ry="12.913471" />
|
||||
<g
|
||||
id="g1648"
|
||||
transform="translate(-1.0511846,4.0452309)">
|
||||
<path
|
||||
d="m 75.610791,846.58166 15.657446,-0.32108 c 2.775732,30.4546 -39.794609,29.0581 -38.801944,1.06558 0.791819,-22.95383 29.91268,-29.72142 37.851922,-11.73514 l -8.906566,2.36958 c -2.29373,-6.88534 -16.468174,-6.24303 -19.537969,6.17219 -3.09021,18.75891 16.703785,21.19274 20.872192,9.99551 l -4.975219,-1.68668 z"
|
||||
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:62.4449px;line-height:1.25;font-family:'Open Sans';-inkscape-font-specification:'Open Sans Bold';display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.63773;stroke-opacity:1"
|
||||
id="path855"
|
||||
sodipodi:nodetypes="ccccccccc" />
|
||||
<g
|
||||
id="layer1-2"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
transform="matrix(2.4407772,0,0,2.2113337,34.49393,805.56571)">
|
||||
<g
|
||||
transform="matrix(0.26458333,0,0,0.26458333,23.293448,-84.126738)"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
id="g4669-8">
|
||||
<g
|
||||
id="g4644-5"
|
||||
transform="matrix(1.1438703,0,0,1.1748557,-102.13483,-617.9937)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.00091;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
|
||||
<g
|
||||
id="g857"
|
||||
clip-path="url(#clipPath859)"
|
||||
transform="matrix(1.5815392,0,0,1.5815392,-36.266003,-486.77024)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g855"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g851"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
id="path4611"
|
||||
d="m 10.221803,2.7640969 c -1.7786174,0.1401817 -5.298108,9.1732331 2.008294,9.2604011 3.522746,-0.03369 3.68736,-2.4918871 3.68736,-2.4918871 0,0 0.09877,-2.1214767 -1.810756,-2.1214767 -1.909525,0 -1.282562,1.3806415 -2.798444,1.3806415 C 8.9024217,7.725778 10.547922,3.1080283 10.221803,2.7640969 Z"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.454216;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
|
||||
sodipodi:nodetypes="cccscc" />
|
||||
</g>
|
||||
<g
|
||||
id="layer1-3"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
transform="matrix(-2.4407772,0,0,2.2113337,111.75456,805.785)">
|
||||
<g
|
||||
transform="matrix(0.26458333,0,0,0.26458333,23.293448,-84.126738)"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1"
|
||||
id="g4669-2">
|
||||
<g
|
||||
id="g4644-2"
|
||||
transform="matrix(1.1438703,0,0,1.1748557,-102.13483,-617.9937)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.00091;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
|
||||
<g
|
||||
id="g857-1"
|
||||
clip-path="url(#clipPath859-6)"
|
||||
transform="matrix(1.5815392,0,0,1.5815392,-36.266003,-486.77024)"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g855-5"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1">
|
||||
<g
|
||||
id="g851-3"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
id="path4611-3"
|
||||
d="m 10.221803,2.7640969 c -1.7786174,0.1401817 -5.298108,9.1732331 2.008294,9.2604011 3.522746,-0.03369 3.68736,-2.4918871 3.68736,-2.4918871 0,0 0.09877,-2.1214767 -1.810756,-2.1214767 -1.909525,0 -1.282562,1.3806415 -2.798444,1.3806415 C 8.9024217,7.725778 10.547922,3.1080283 10.221803,2.7640969 Z"
|
||||
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.454216;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
|
||||
sodipodi:nodetypes="cccscc" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
#title{font-size: x-large;}
|
||||
a.ablack{color:black !important;}
|
||||
li{margin-bottom:8px;}
|
||||
ul,ol{margin-left:24px;margin-right:24px;}
|
||||
#all_posts{margin-top:24px;text-align:center;}
|
||||
.subtitle{font-size:small;margin:12px 0px;}
|
||||
.content p{margin-left:24px;margin-right:24px;}
|
||||
h1{margin-bottom:12px !important;}
|
||||
#description{font-size:large;margin-bottom:12px;}
|
||||
h3{margin-top:42px;margin-bottom:8px;}
|
||||
h4{margin-left:24px;margin-right:24px;}
|
||||
img{max-width:100%;}
|
||||
#twitter{line-height:20px;vertical-align:top;text-align:right;font-style:italic;color:#333;margin-top:24px;font-size:14px;}
|
||||
|
|
@ -3,40 +3,11 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
||||
<title>GNU social — Some public communities</title>
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<style>
|
||||
.content-wrapper {
|
||||
top: 2em;
|
||||
}
|
||||
#nodes {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#nodes td, #nodes th {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#nodes tr:nth-child(even){background-color: #f2f2f2;}
|
||||
|
||||
#nodes tr:hover {background-color: #ddd;}
|
||||
|
||||
#nodes th {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
text-align: left;
|
||||
background-color: #A22430;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/style.css">
|
||||
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/reset.css">
|
||||
<?php
|
||||
$query = urlencode('
|
||||
{
|
||||
|
|
@ -61,17 +32,19 @@
|
|||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="/">GNU social</a>
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item"><a href="/" class="pure-menu-link">Home</a></li>
|
||||
<li class="pure-menu-item"><a href="/v2" class="pure-menu-link">Version 2</a></li>
|
||||
<li class="pure-menu-item"><a href="/v3" class="pure-menu-link">Version 3</a></li>
|
||||
<div class="home-menu menu menu-horizontal menu-fixed">
|
||||
<a class="menu-heading" href="https://gnusocial.rocks/">
|
||||
<img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social">
|
||||
</a>
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item"><a href="/" class=" menu-link">Home</a></li>
|
||||
<li class="menu-item"><a href="/v2" class=" menu-link">Version 2</a></li>
|
||||
<li class="menu-item"><a href="/v3" class=" menu-link">Version 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<div class="splash-container">
|
||||
<div class="splash">
|
||||
|
||||
<h2 class="content-head is-center">Some public GNU social communities</h2>
|
||||
<p>Please note that the servers listed here are not run by us and we are not responsible for their operation or
|
||||
|
|
@ -102,10 +75,12 @@
|
|||
you want to be listed here, please go to https://the-federation.info/register/<yournode.tld>.
|
||||
After some seconds, you should see your node added.</p>
|
||||
</div>
|
||||
<footer class="l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
103
docs/index.html
103
docs/index.html
|
|
@ -1,50 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>GNU social — Documentation</title>
|
||||
<link rel="shortcut icon" href="//gnusocial.rocks/favicon.ico">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="//gnusocial.rocks/assets/css/style.css">
|
||||
<style>
|
||||
.content-wrapper {
|
||||
top: 2em;
|
||||
}
|
||||
</style>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
||||
<title>GNU social — Documentation
|
||||
</title>
|
||||
<link rel="shortcut icon" href="https://www.gnusocial.rocks/favicon.ico">
|
||||
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/reset.css">
|
||||
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/css/blog.css">
|
||||
<link rel="stylesheet" href="https://www.gnusocial.rocks/assets/fonts/opensans/opensans.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="//gnusocial.rocks/">GNU social</a>
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item pure-menu-selected"><a
|
||||
href="#" class="pure-menu-link">Documentation</a></li>
|
||||
<li class="pure-menu-item"><a href="/user" class="pure-menu-link">User</a></li>
|
||||
<li class="pure-menu-item"><a href="/administrator" class="pure-menu-link">Administrator</a></li>
|
||||
<li class="pure-menu-item"><a href="/developer" class="pure-menu-link">Developer</a></li>
|
||||
<header>
|
||||
<a class="header-main" href="https://gnusocial.rocks/">
|
||||
<img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social"><b>gnu</b>social
|
||||
</a>
|
||||
<aside class="header-sidebar">
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item menu-selected">
|
||||
<a href="#" class="menu-link">Documentation
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="/user" class="menu-link">User
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="/administrator" class="menu-link">Administrator
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="/developer" class="menu-link">Developer
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="/designer" class="menu-link">Designer
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
</aside>
|
||||
</header>
|
||||
|
||||
<h2 class="content-head is-center">Documentation</h2>
|
||||
<p>GNU social is distributed with three documentations.</p>
|
||||
<p>The <a href="/user">User</a> one is intended to illustrate the various common use cases, possibilities regarding customization and introduce the existing functionalities.</p>
|
||||
<p>The <a href="/administrator">Administrator</a> one explains the step by step of how to install and maintain a GNU social instance, be it as node of The Free Network or as an intranet social network in a company setting.</p>
|
||||
<p>The <a href="/developer">Developer</a> one starts by introducing the Modules system and architecture, then the plugin development process and finally the exciting internals of GNU social for those looking forward to make the most advanced contributions.</p>
|
||||
|
||||
</div>
|
||||
<footer class="l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
The documentation's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/v3/docs">hosted here</a>.
|
||||
</footer>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<main class="content">
|
||||
<h2 class="content-head is-center">Documentation
|
||||
</h2>
|
||||
<p>GNU social is distributed with four documentations.
|
||||
</p>
|
||||
<p>The
|
||||
<a href="/user">User
|
||||
</a> one is intended to illustrate the various common use cases, possibilities regarding customization and introduce the existing functionalities.
|
||||
</p>
|
||||
<p>The
|
||||
<a href="/administrator">Administrator
|
||||
</a> one explains the step by step of how to install and maintain a GNU social instance, be it as node of The Free Network or as an intranet social network in a company setting.
|
||||
</p>
|
||||
<p>The
|
||||
<a href="/developer">Developer
|
||||
</a> one starts by introducing the Modules system and architecture, then the plugin development process and finally the exciting internals of GNU social for those looking forward to make the most advanced contributions.
|
||||
</p>
|
||||
<p>The
|
||||
<a href="/designer">Designer
|
||||
</a> one is an in-depth overview of the design motifs, and the design language used. Useful for creating new plugins and help as a basis for new themes.
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
<footer class="footer l-box is-center">
|
||||
This site's source is
|
||||
<a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<channel><title>My fancy blog</title><link>http://example.com/blog/index.html</link>
|
||||
<description>A blog about turtles and carrots</description><language>en</language>
|
||||
<lastBuildDate>Mon, 13 Sep 2021 17:31:02 +0100</lastBuildDate>
|
||||
<pubDate>Mon, 13 Sep 2021 17:31:02 +0100</pubDate>
|
||||
<atom:link href="http://example.com/blog/feed.rss" rel="self" type="application/rss+xml" />
|
||||
<item><title>
|
||||
Updates: Interface and accessibility
|
||||
</title><description><![CDATA[
|
||||
|
||||
<p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI.
|
||||
This update has been in the works for a long time… Many considerations had to be done, and given the current state of
|
||||
modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes.</p>
|
||||
|
||||
<p>We hope you like it!</p>
|
||||
|
||||
<h3>The prime directive</h3>
|
||||
|
||||
<blockquote><p>Modern looking, consistent and accessible UI across all browsers.
|
||||
Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p></blockquote>
|
||||
|
||||
<p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
|
||||
To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader.
|
||||
In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
|
||||
markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>
|
||||
|
||||
<h3>Features</h3>
|
||||
|
||||
<ul>
|
||||
<li>Accessible
|
||||
|
||||
<ul>
|
||||
<li>Easy to use keyboard only navigation
|
||||
|
||||
<ul>
|
||||
<li>Feedback on focused elements</li>
|
||||
<li>Keyboard shortcuts to access main regions</li>
|
||||
<li>Vi-like shortcuts</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Screen reader tested
|
||||
|
||||
<ul>
|
||||
<li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
|
||||
<li>Brief description of navigation links</li>
|
||||
<li>Using semantic HTML whenever possible</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Special care given for styling solutions that could break accessibility</li>
|
||||
<li>Colors and type sizes in accordance to W3C contrast guidelines
|
||||
|
||||
<ul>
|
||||
<li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Fast, the content provided to the user really is just markup and some CSS rules
|
||||
|
||||
<ul>
|
||||
<li>Optionally there will be some small use cases where JS makes sense (it’s the only thing modern browsers understand e.e)
|
||||
|
||||
<ul>
|
||||
<li>For example, cropping your avatar before uploading a new one.</li>
|
||||
<li>This is the only example until now.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Dark and light default themes available (according to your system theme)</li>
|
||||
<li>Graceful degradation for unsupported HTML elements</li>
|
||||
<li>Achieving modern user interface patterns without JS</li>
|
||||
<li>Various layout engines tested and work as they should
|
||||
|
||||
<ul>
|
||||
<li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc…)</li>
|
||||
<li>WebkitGTK (Epiphany, Midori, etc…)</li>
|
||||
<li>Gecko (Firefox and derivatives)</li>
|
||||
<li>Goanna (Palemoon, Basilisk, etc…)</li>
|
||||
<li>Internet Explorer</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Video</h3>
|
||||
|
||||
<h4>Keyboard tests</h4>
|
||||
|
||||
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
]]></description><link>http://example.com/blog/updates-interface-and-accessibility.html</link>
|
||||
<guid>http://example.com/blog/./updates-interface-and-accessibility.html</guid>
|
||||
<dc:creator>John Smith</dc:creator>
|
||||
<pubDate>Mon, 13 Sep 2021 17:30:12 +0100</pubDate></item>
|
||||
</channel></rss>
|
||||
147
index.html
147
index.html
|
|
@ -3,128 +3,135 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
||||
<meta name="description" content="GNU social; A free software social networking platform.">
|
||||
<title>GNU social — a free software social networking platform</title>
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<link rel="stylesheet" href="assets/css/reset.css">
|
||||
<link rel='stylesheet' type='text/css' href="assets/fonts/opensans/opensans.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="#">GNU social</a>
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
|
||||
<li class="pure-menu-item"><a href="v2/" class="pure-menu-link">Version 2</a></li>
|
||||
<li class="pure-menu-item"><a href="v3/" class="pure-menu-link">Version 3</a></li>
|
||||
<div class="home-menu menu menu-horizontal menu-fixed">
|
||||
<a class="menu-heading" href="https://gnusocial.rocks/">
|
||||
<img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social">
|
||||
</a>
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item menu-selected"><a href="#" class="menu-link">Home</a></li>
|
||||
<li class="menu-item"><a href="v2/" class="menu-link">Version 2</a></li>
|
||||
<li class="menu-item"><a href="v3/" class="menu-link">Version 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="splash-container">
|
||||
<div class="body-wrapper">
|
||||
<div class="splash-container">
|
||||
<div class="splash">
|
||||
<h1 class="splash-head">
|
||||
<a href="#"><img src="/assets/img/logo.png" alt="GNU social"></a>
|
||||
</h1>
|
||||
<div class="splash-head">
|
||||
<img src="assets/img/gnu-social-logo.svg" alt="GNU social">
|
||||
<b>gnu</b>social
|
||||
</div>
|
||||
<p class="splash-subhead">
|
||||
The free software social networking platform.
|
||||
</p>
|
||||
<!--
|
||||
<a href="communities/" class="pure-button pure-button-primary">Join</a>
|
||||
<a href="v2/" class="pure-button pure-button-primary">Version 2</a>
|
||||
<a href="communities/" class="button button-primary">Join</a>
|
||||
<a href="v2/" class="button button-primary">Version 2</a>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
|
||||
<h2 class="content-head is-center">Features</h2>
|
||||
<h1 class="content-head">Features</h1>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<div class="g">
|
||||
<div class="l-box u-1 u-md-1-2 u-lg-1-4">
|
||||
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-rocket"></i> Versatile
|
||||
</h3>
|
||||
<h2 class="content-subhead">
|
||||
Versatile
|
||||
</h2>
|
||||
<p>
|
||||
GNU social supports both single-user and community modes and can be used in an intranet environment or as part of the wider Free Network.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-mobile"></i> Accessible
|
||||
</h3>
|
||||
<div class="l-box u-1 u-md-1-2 u-lg-1-4">
|
||||
<h2 class="content-subhead">
|
||||
Accessible
|
||||
</h2>
|
||||
<p>
|
||||
Follows AnyBrowser and A11Y guidelines. It runs virtually anywhere you can run a common piece of web software, such as WordPress or Drupal. JavaScript is optional.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-th-large"></i> Customizable
|
||||
</h3>
|
||||
<div class="l-box u-1 u-md-1-2 u-lg-1-4">
|
||||
<h2 class="content-subhead">
|
||||
Customizable
|
||||
</h2>
|
||||
<p>
|
||||
True to the Unix-philosophy of small programs to do a small job, GNU social can be easily expanded and customized via its simple plugin API.
|
||||
</p>
|
||||
</div>
|
||||
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
||||
<h3 class="content-subhead">
|
||||
<i class="fa fa-check-square-o"></i> Privacy focused
|
||||
</h3>
|
||||
<div class="l-box u-1 u-md-1-2 u-lg-1-4">
|
||||
<h2 class="content-subhead">
|
||||
Privacy focused
|
||||
</h2>
|
||||
<p>
|
||||
GNU social is part of the GNU project, it's 100% free software, with no malicious features or spyware.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ribbon l-box-lrg pure-g">
|
||||
<div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
|
||||
<img width="300" alt="File Icons" class="pure-img-responsive" src="/assets/img/connections-gordon-johnson-pixabay.svg">
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
|
||||
<div class="ribbon-wrapper">
|
||||
<div class="ribbon">
|
||||
<img alt="Decentralized social network." src="assets/img/connections-gordon-johnson-pixabay.svg">
|
||||
<div class="ribbon-content">
|
||||
<h1 class="content-head content-head-ribbon">Where can I join GNU social?</h1>
|
||||
|
||||
<h2 class="content-head content-head-ribbon">Where can I join GNU social?</h2>
|
||||
|
||||
<p>There are many kinds of GNU social server instances online right now!</p>
|
||||
<p><a href="communities/">Click here</a> to see a list of popular GNU social sites you can join!</p>
|
||||
<strong>Disclaimer: </strong><i>Please note that the GNU social development team is not responsible for
|
||||
the operation or content of sites that run its software.</i>
|
||||
<p>There are many kinds of GNU social server instances online right now!</p>
|
||||
<p><a href="communities/">Click here</a> to see a list of popular GNU social sites you can join!</p>
|
||||
<em><b>Disclaimer:</b> Please note that the GNU social development team is not responsible for
|
||||
the operation or content of sites that run its software.</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 class="content-head is-center">Support GNU social</h2>
|
||||
<p>Support the team making GNU social possible!</p>
|
||||
<div class="pure-g">
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
|
||||
<h4>Who makes GNU social?</h4>
|
||||
<p>The current development team is lead by <a href="https://www.diogo.site/">Diogo Cordeiro</a>. A list containing the current devs and other contributors is available <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/experimental/CREDITS.md">here</a>. The founders of the GNU social project were <a href="https://mat.tl/">Matt Lee</a>,
|
||||
<a href="https://en.wikipedia.org/wiki/Evan_Prodromou">Evan Prodromou</a> and
|
||||
<a href="http://mmn-o.se">Mikael Nordfeldth</a>.
|
||||
</p>
|
||||
<div class="content-team">
|
||||
<h1>Support the team making GNU social possible!</h1>
|
||||
<div class="g">
|
||||
<div class="l-box-lrg u-1 u-md-1-3">
|
||||
<h2>Who makes GNU social?</h2>
|
||||
<p>Many developers have been involved in the making of GNU social. It's hard to keep a precise record of so many valuable contributions.</p>
|
||||
<p>Version 3 development is being maintained by <a href="https://www.diogo.site/">Diogo Cordeiro</a>, <a href="https://hsal.es/">Hugo Sales</a> and <a href="https://eliseuama.ro/">Eliseu Amaro</a>.</p>
|
||||
<p>Version 2 development was maintained by <a href="https://www.diogo.site/">Diogo Cordeiro</a> with many important contributions from <a href="https://loadaverage.org/XRevan86">Alexei Sorokin</a> and the help of <a href="soc/">Summer of Code students</a>.</p>
|
||||
<p>The project started with <a href="https://mat.tl/">Matt Lee</a> and StatusNet with <a href="https://en.wikipedia.org/wiki/Evan_Prodromou">Evan Prodromou</a>. It was since been maintained by <a href="http://mmn-o.se">Mikael Nordfeldth</a>.</p>
|
||||
<p>A list of contributors is available <a href="https://code.undefinedhackers.net/GNUsocial/gnu-social/src/branch/experimental/CREDITS.md">here</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
|
||||
<h4>Discuss</h4>
|
||||
<p>Discuss the project on our IRC channel <a href="https://webchat.freenode.net/?channels=#social">#social</a> on irc.freenode.net</p>
|
||||
<p>Contribute code, report bugs and request features on our <a href="https://notabug.org/diogo/gnu-social">repository</a>.
|
||||
</p>
|
||||
<p>If you are a student you can also apply to <a href="/soc">GNU social's Summer of Code</a>.
|
||||
</p>
|
||||
<div class="l-box-lrg u-1 u-md-1-3">
|
||||
<h2>Discuss</h2>
|
||||
<p>Discuss the project on:<br>
|
||||
XMPP: <a
|
||||
href="xmpp:gnusocial@conference.bka.li?join">xmpp:gnusocial@conference.bka.li?join</a>,<br>
|
||||
IRC: <a
|
||||
href="ircs://irc.libera.chat:6697/#social">ircs://irc.libera.chat:6697/#social</a> or<br>
|
||||
Matrix: <a
|
||||
href="https://matrix.to/#/#social:libera.chat">#social:libera.chat</a>.</p>
|
||||
<p>Contribute code, report bugs and request features on our <a href="https://notabug.org/diogo/gnu-social">repository</a>.</p>
|
||||
<p>You can also ask for help on our <a href="https://lists.gnu.org/mailman/listinfo/social-discuss">mailing list</a>.</p>
|
||||
<p>If you are a student you can also apply to <a href="/soc">GNU social's Summer of Code</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
|
||||
<h4>Tell Others</h4>
|
||||
<div class="l-box-lrg u-1 u-md-1-3">
|
||||
<h2>Tell Others</h2>
|
||||
<p><a href="assets/tgz/logos.tar.gz">gs-logos.tar.gz</a> (14.2 kB)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
body{font-family:Georgia,"Times New Roman",Times,serif;margin:0;padding:0;background-color:#F3F3F3;}
|
||||
#template-wrapper{padding:5px;background-color:#DDD;width:100%;max-width:874px;margin:24px auto;}
|
||||
#template{border:solid 1px #ccc;background-color:#fff;padding:0px 48px 24px 48px;top:0;}
|
||||
.headerholder{background-color:#f9f9f9;border-top:solid 1px #ccc;border-left:solid 1px #ccc;border-right:solid 1px #ccc;}
|
||||
.header{width:100%;max-width:800px;margin:0px auto;padding-top:24px;padding-bottom:8px;}
|
||||
.content{margin-bottom:5%;}
|
||||
.nomargin{margin:0;}
|
||||
.description{margin-top:10px;border-top:solid 1px #666;padding:10px 0;}
|
||||
h3{font-size:20pt;width:100%;font-weight:bold;margin-top:32px;margin-bottom:0;}
|
||||
.clear{clear:both;}
|
||||
#footer{padding-top:10px;border-top:solid 1px #666;color:#333333;text-align:center;font-size:small;font-family:"Courier New","Courier",monospace;}
|
||||
a{text-decoration:none;color:#003366 !important;}
|
||||
a:visited{text-decoration:none;color:#336699 !important;}
|
||||
blockquote{background-color:#f9f9f9;border-left:solid 4px #e9e9e9;margin-left:12px;padding:12px 12px 12px 24px;}
|
||||
blockquote img{margin:12px 0px;}
|
||||
blockquote iframe{margin:12px 0px;}
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
<article id="apply">
|
||||
<h2>How to apply?</h2>
|
||||
<p>First read <a href="https://www.gnu.org/software/soc-projects/guidelines.html">GNU's guidelines</a> on how to prepare a good proposal.</p>
|
||||
<p>Then please contact us on GS's <a href="irc://irc.freenode.net:6697/social">IRC channel (#social@irc.freenode.net)</a> to get started on your proposal. For an example proposal, you can refer to <a href="https://www.diogo.site/projects/GNU-social/soc/2018/proposal.pdf">AP plugin proposal</a>.</p>
|
||||
<p>Then please contact us on <a href="https://agile.gnusocial.rocks/doku.php?id=development_discussion">GS's Development chat</a> to get started on your proposal. For an example proposal, you can refer to <a href="https://www.diogo.site/projects/GNU-social/soc/2018/proposal.pdf">AP plugin proposal</a>.</p>
|
||||
<p>We also suggest that you <a href="https://gnusocial.network/try/">create an account in the fediverse</a>.</p>
|
||||
<p>You can contact Diogo either on the above mentioned IRC channel (under the nick: up201705417), <a href="https://www.diogo.site/#contact">by email</a> or on his <a href="https://loadaverage.org/diogo">GNU social profile</a>.</p>
|
||||
<a href="https://summerofcode.withgoogle.com/" class="BigButton"><strong>GO!</strong></a>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Assessment | GNU social SoC</title>
|
||||
<title>Assessment | GNU social Summer of Code 2020</title>
|
||||
<link rel="icon" href="../../favicon.png">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
<label for="show-menu" id="menu-button">Menu</label>
|
||||
<input id="show-menu" role="button" type="checkbox">
|
||||
<ul id="menu">
|
||||
<li><a href="./"><strong>← GS GSoC</strong></a></li>
|
||||
<li><a href="./"><strong>← GS SoC 2020</strong></a></li>
|
||||
<li><a href="#Grading_System_employed_0">Grading</a></li>
|
||||
<li><a href="#Web_Technologies_69">Proposal</a></li>
|
||||
<li><a href="#Internship__Training_91">Summer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1>GNU social Summer of Code</h1>
|
||||
<h1>GNU social Summer of Code 2020</h1>
|
||||
<p>Organized by <strong><a href="https://www.diogo.site/">Diogo Cordeiro</a></strong></p>
|
||||
<p>Mentors: <a href="https://www.diogo.site/">Diogo Cordeiro</a>, <a href="https://loadaverage.org/XRevan86">Alexei Sorokin</a>, <a href="https://dansup.com">Daniel Supernault</a>, <a href="https://www.hackerposse.com/~rozzin/">Joshua Judson Rosen</a> and <a href="https://github.com/phablulo">Phablulo Joel</a></p>
|
||||
</header>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=show&project_id=1">Kanban board GS v2</a> [<a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=03795efb8138c4e7661a900c234c0df1bc3fc03cdfcda8619cd5d0e666de">Public</a>]<br>
|
||||
<a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=show&project_id=2">Kanban board GS v3</a> [<a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=d2293e55cabae7cceff9fb496c651328195357d392b9e61a9f229ed6d463">Public</a>]<br>
|
||||
<a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=show&project_id=3">Kanban board Pleroma FE</a> [<a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=38a6276b337d873d349357796c265403d4ff4bc3d8d11819e849271044b0">Public</a>]<br>
|
||||
<!--<a href="https://www.diogo.site/projects/GNU-social/soc/2020/roadmap.txt">GSoC Roadmap</a><br>-->
|
||||
<a href="daily_report/archive/roadmap.txt">GSoC Roadmap</a><br>
|
||||
<a href="https://notabug.org/diogo/gnu-social/issues">Issue tracker</a>
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -94,9 +94,7 @@
|
|||
<p>Quick reminder that the GNU social Summer of Code 2020 assessing week has started! You should have opened your Merge Requests by now. Additionally, if you're on GSoC, you need to fill Google's forms.</p>
|
||||
<p>Best wishes!</p>
|
||||
<h3>First Evaluations open June 30 - July 2 17:00 (GMT+1)</h3>
|
||||
<p>Quick reminder that the GNU social Summer of Code 2020 assessing week has started! You should have opened your Merge Requests by now. Additionally, we need you to fill two forms.</p>
|
||||
<p>Mentor Evaluation: (information on that one at your email inbox)</p>
|
||||
<p><a href="https://forms.gle/95mkjEfmddepuVTv5">Student Self Assessment</a></p>
|
||||
<p>Quick reminder that the GNU social Summer of Code 2020 assessing week has started! You should have opened your Merge Requests by now. Additionally, we need you to fill two forms (check your email inbox!).</p>
|
||||
<p>These two forms together will only take 10 minutes to complete and are <b>REQUIRED</b> - don't miss the deadline and fail GS SoC because you didn't take 10 minutes to complete the evaluation.</p>
|
||||
<p><strong>Deadline for students to complete the evaluation form is Thursday, July 2nd at 17:00 (GMT+1).</strong></p>
|
||||
<p>Best wishes!</p>
|
||||
|
|
@ -171,6 +169,7 @@ Expected hours this week: 32
|
|||
32 - 23 = 9h debited from May
|
||||
23 - 9 = 14 debitable May hours remaining</pre>
|
||||
</p>
|
||||
<p>Keep up with the <a href="daily_report/archive/roadmap-as-of-june.txt">roadmap</a> folks!</p>
|
||||
<h3>Bonding period end (--06-01)</h3>
|
||||
<p>
|
||||
<pre><b>Total of May dedicated hours per student</b>
|
||||
|
|
@ -195,7 +194,7 @@ May tasks moved all to June.
|
|||
May tasks moved all to June.</pre>
|
||||
</p>
|
||||
<h3>Bonding Period Start (--05-04)</h3>
|
||||
<p><a href="roadmap-as-of-may.txt">GSoC Roadmap published</a> and added to day-to-day links!</p>
|
||||
<p><a href="daily_report/archive/roadmap-as-of-may.txt">GSoC Roadmap published</a> and added to day-to-day links!</p>
|
||||
<h3>New landing page (--04-14)</h3>
|
||||
<p>Poll results:
|
||||
<ul>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -314,7 +314,7 @@
|
|||
- You're allowed to create subsections and even sections
|
||||
</pre>
|
||||
</p>
|
||||
<p>Then please contact us on GS's <a href="irc://irc.freenode.net:6697/social">IRC channel (#social@irc.freenode.net)</a> to get started on your proposal. For an example proposal, you can refer to <a href="/soc/2019/accepted_proposals/network.pdf">Network Services Improvements proposal from last year</a>.</p>
|
||||
<p>Then please contact us on <a href="https://agile.gnusocial.rocks/doku.php?id=development_discussion">GS's Development chat</a> to get started on your proposal. For an example proposal, you can refer to <a href="/soc/2019/accepted_proposals/network.pdf">Network Services Improvements proposal from last year</a>.</p>
|
||||
<p>In this year proposal, you should also specify your timezone. With respect to the time you will have to dedicate, GSoC demands 30h to 40h of work per week. GNU social's Summer of Code expects you to work an average of 36.5h/week, you can organize that time as you please, but you must be sure to dedicate that in your weekly work or to be overly productive.</p>
|
||||
<p>We suggest you to do a four-day work week with 6h of work/day + 3h to document, review/test and report the progress you've done (you usually won't need that much for this and we won't complain as long as you're doing well/being highly productive). As breaks are important, we recommend a 1h lunch break, 15min break after 4h of continuous work and a further 15mins break after 6h of work. These breaks won't be considered as part of your work time.</p>
|
||||
<p>Note that 6h*4 = 24h, which is below the minimum 30h demanded by Google, if you only do the 24h/week, you'll have to prove your worth. Otherwise, we might require that you either do a 5-day week or that you scale it up to 7.5h in your 4-day week.</p>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
<li><a href="#about">How was it?</a></li>
|
||||
<li><a href="ideas.php">Ideas of 2020</a></li>
|
||||
<li><a href="announcements.php">Programme 2020</a></li>
|
||||
<li><a href="academics.html">Academics</a></li>
|
||||
<li id="menu-title">Tech Reports</li>
|
||||
<li><a href="#v3_frontend">V3 Frontend</a></li>
|
||||
<li><a href="#v3_backend">V3 Backend</a></li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Assessment | GNU social Summer of Code 2021</title>
|
||||
<link rel="icon" href="../../favicon.png">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://hackersatporto.com/assets/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<nav id="side-menu">
|
||||
<label for="show-menu" id="menu-button">Menu</label>
|
||||
<input id="show-menu" role="button" type="checkbox">
|
||||
<ul id="menu">
|
||||
<li><a href="./"><strong>← GS SoC 2021</strong></a></li>
|
||||
<li><a href="#Grading_System_employed_0">Grading</a></li>
|
||||
<li><a href="#Web_Technologies_69">Proposal</a></li>
|
||||
<li><a href="#Internship__Training_91">Summer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1>GNU social Summer of Code 2021</h1>
|
||||
</header>
|
||||
<article id="about">
|
||||
<h1 class="code-line" data-line-start=0 data-line-end=1 ><a id="Grading_System_employed_0"></a>Grading System employed</h1>
|
||||
<h2 class="code-line" data-line-start=2 data-line-end=3 ><a id="Effective_Grading_2"></a>Effective Grading</h2>
|
||||
<p class="has-line-data" data-line-start="3" data-line-end="4">Either <em>pass</em> or <em>fail</em>.</p>
|
||||
<h2 class="code-line" data-line-start=5 data-line-end=6 ><a id="Qualitative_Grading_5"></a>Qualitative Grading</h2>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Grade</th>
|
||||
<th>Definition</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>31337</td>
|
||||
<td>Outstanding</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1337</td>
|
||||
<td>Very Good</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Competent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>0</td>
|
||||
<td>Failed</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 class="code-line" data-line-start=13 data-line-end=14 ><a id="Method_13"></a>Method</h2>
|
||||
<p class="has-line-data" data-line-start="14" data-line-end="15">Graded every month, the ceiled average is the final.</p>
|
||||
<p class="has-line-data" data-line-start="16" data-line-end="17">No Quantitative Grading system will be used.</p>
|
||||
<p class="has-line-data" data-line-start="18" data-line-end="19">The contributions will be evaluated according to the following directives:</p>
|
||||
<blockquote>
|
||||
<p class="has-line-data" data-line-start="20" data-line-end="21">Autonomy with which the work was done</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li class="has-line-data" data-line-start="21" data-line-end="22">Low (was unable to progress autonomously);</li>
|
||||
<li class="has-line-data" data-line-start="22" data-line-end="24">Competent (some autonomy but with blocking situations that required the<br>
|
||||
intervention of the mentor);</li>
|
||||
<li class="has-line-data" data-line-start="24" data-line-end="26">Very Good (very good ability to solve problems independently in useful time<br>
|
||||
with the mentor mostly focused on defining the next steps of the work);</li>
|
||||
<li class="has-line-data" data-line-start="26" data-line-end="28">Outstanding (is sometimes able to suggest surprising and valid alternatives to what was originally planned by the mentor).</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p class="has-line-data" data-line-start="28" data-line-end="29">Objectives satisfaction</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li class="has-line-data" data-line-start="29" data-line-end="30">Low (haven't reached to the minimum objectives admissible for the proposed work);</li>
|
||||
<li class="has-line-data" data-line-start="30" data-line-end="31">Competent (the objectives were reached though not entirely);</li>
|
||||
<li class="has-line-data" data-line-start="31" data-line-end="32">Very Good (reached up fully);</li>
|
||||
<li class="has-line-data" data-line-start="32" data-line-end="34">Outstanding (exceeded up the objectives set).</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p class="has-line-data" data-line-start="34" data-line-end="35">Intrinsic difficulty level of their work</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li class="has-line-data" data-line-start="35" data-line-end="37">Low (relatively easy work, both from a scientific or technical point of view,<br>
|
||||
based on widespread knowledge);</li>
|
||||
<li class="has-line-data" data-line-start="37" data-line-end="39">Competent (work with some high complexity of details requiring more advanced<br>
|
||||
knowledge/expertise, either technical or scientific);</li>
|
||||
<li class="has-line-data" data-line-start="39" data-line-end="41">Very Good (relatively complex work, requiring a substantial knowledge and<br>
|
||||
technical skills, or resulting in some innovative contribution);</li>
|
||||
<li class="has-line-data" data-line-start="41" data-line-end="43">Outstanding (InSaNe).</li>
|
||||
</ul>
|
||||
<h3 class="code-line" data-line-start=46 data-line-end=47 ><a id="Grade_formula_per_month_46"></a>Grade formula per month</h3>
|
||||
<pre>
|
||||
Autonomy level
|
||||
Satisfaction of objectives | Low Competent Very Good Outstanding
|
||||
-----------+-------------------------------------------------------
|
||||
Low | 0 0 0 0
|
||||
Competent | 42 42 42 1337
|
||||
Very Good | 42 1337 1337 31337
|
||||
Outstanding| 42 1337 1337 31337
|
||||
|
||||
Grade from matrix above
|
||||
Difficulty level | 0 42 1337 31337
|
||||
-----------+-----------------------------------------
|
||||
Low | 0 0 42 1337
|
||||
Competent | 0 42 1337 1337
|
||||
Very Good | 0 1337 1337 1337
|
||||
Outstanding| 0 1337 1337 31337
|
||||
</pre>
|
||||
<hr>
|
||||
<h1 class="code-line" data-line-start=67 data-line-end=68 ><a id="Modules_67"></a>Modules</h1>
|
||||
<p>N.B.: The following are the minimum averages in GNU social's Summer of Code, we will come up with a custom
|
||||
"transcript" for any interested student.</p>
|
||||
<h2 class="code-line" data-line-start=69 data-line-end=70 ><a id="Web_Technologies_69"></a>Web Technologies</h2>
|
||||
<h3 class="code-line" data-line-start=71 data-line-end=72 ><a id="Amount_of_time_allocated_to_each_module_unit_71"></a>Amount of time allocated to each module unit</h3>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Designation</th>
|
||||
<th>Time (hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Autonomous study</td>
|
||||
<td>80</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mentorship</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Project work</td>
|
||||
<td>46</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total</td>
|
||||
<td>146</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="code-line" data-line-start=79 data-line-end=80 ><a id="Assessment_Components_79"></a>Assessment Components</h3>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Designation</th>
|
||||
<th>Weight (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Proposal</td>
|
||||
<td>80</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Proof of Competence</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="code-line" data-line-start=85 data-line-end=86 ><a id="Proposed_Credits_85"></a>Proposed Credits</h3>
|
||||
<p class="has-line-data" data-line-start="86" data-line-end="88">1 Carnegie Unit<br>
|
||||
5 ECTS</p>
|
||||
<p><strong><a href="proposal_rating_guidelines.txt">Proposal Rating Guidelines</a></strong><p>
|
||||
<hr>
|
||||
<h2 class="code-line" data-line-start=91 data-line-end=92 ><a id="Internship__Training_91"></a>Internship | Training</h2>
|
||||
<h3 class="code-line" data-line-start=93 data-line-end=94 ><a id="Amount_of_time_allocated_to_each_module_unit_93"></a>Amount of time allocated to each module unit</h3>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Designation</th>
|
||||
<th>Time (hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Internship</td>
|
||||
<td>276.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Autonomous Study</td>
|
||||
<td>93.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Final Report</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mentorship</td>
|
||||
<td>44</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total</td>
|
||||
<td>438</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="code-line" data-line-start=102 data-line-end=103 ><a id="Assessment_Components_102"></a>Assessment Components</h3>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Designation</th>
|
||||
<th>Weight (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Practical or project work</td>
|
||||
<td>100</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="code-line" data-line-start=107 data-line-end=108 ><a id="Proposed_Credits_107"></a>Proposed Credits</h3>
|
||||
<p class="has-line-data" data-line-start="108" data-line-end="112">4 Carnegie Unit<br>
|
||||
18 Austria, Italy, and Spain ECTS<br>
|
||||
16 Finland, The Netherlands, Portugal, and Russia ECTS<br>
|
||||
15 Germany, Belgium, Romania, and Hungary ECTS</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
||||
<title>GNU social — Summer of Code 2021 Ideas</title>
|
||||
<link rel="shortcut icon" href="../../favicon.ico">
|
||||
<link rel="stylesheet" href="../../assets/css/reset.css">
|
||||
<link rel="stylesheet" href="../../assets/css/blog.css">
|
||||
<link rel="stylesheet" href="../../assets/fonts/opensans/opensans.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a class="header-main" href="https://gnusocial.rocks/">
|
||||
<img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social"><b>gnu</b>social
|
||||
</a>
|
||||
<aside class="header-sidebar">
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item"><a href="/soc" class="menu-link">Programme</a></li>
|
||||
<li class="menu-item menu-selected"><a href="/soc/2021" class="menu-link">2021</a></li>
|
||||
<li class="menu-item"><a href="/soc/#about-soc" class="menu-link">About</a></li>
|
||||
<li class="menu-item"><a href="#ideas" class="menu-link">Ideas</a></li>
|
||||
<li class="menu-item"><a href="/soc/#apply" class="menu-link">Apply</a></li>
|
||||
<li class="menu-item"><a href="../study_resources.html" class="menu-link">Study Resources</a></li>
|
||||
<li class="menu-item"><a href="academics.html" class="menu-link">Academics</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<main class="content soc">
|
||||
<h2 class="content-head is-center">Summer of Code 2021</h2>
|
||||
|
||||
<article id="about">
|
||||
<h2>About the programme</h2>
|
||||
<p>Check the <a href="/soc/">programme page</a> to learn more about the programme and on how to apply.</p>
|
||||
<p>GNU social is a social communication software used in <a href="https://blog.diogo.site/posts/what-is-the-fediverse">federated social networks</a>. It is widely supported and has a large userbase.</p>
|
||||
<p>If you would like to know how is it like to be a GSoC student at GNU social, <a href="https://blog.diogo.site/posts/gsoc-2018">read this blog post</a>!</p>
|
||||
</article>
|
||||
<article id="stipend">
|
||||
<h2>Summer Stipend</h2>
|
||||
<p>Usually we participate in Google Summer of Code and are thus are able to give accepted students a stipend. It's not the case this year. Last year we've had a successful student supported by <a href="https://thefreaks.club/">The Freaks Club</a>, you can reach thndrbvr and try your luck, or look for another sponsor.</p>
|
||||
</article>
|
||||
<article id="ideas">
|
||||
<h2>Ideas</h2>
|
||||
<p>The community has not proposed ideas for 2021 yet. As the current development team is planning on major active development of v3 with NLnet sponsorship this year, as a student you can either try to join the development of v3 or contribute with plugins for v2, which is the latest release.</p>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
<footer class="l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>GNU social — Summer of Code 2021 Ideas</title>
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<style>
|
||||
.content-wrapper {
|
||||
top: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="/">GNU social</a>
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item"><a href="/soc" class="pure-menu-link">Programme</a></li>
|
||||
<li class="pure-menu-item pure-menu-selected">2021</li>
|
||||
<li class="pure-menu-item"><a href="/soc/#about-soc" class="pure-menu-link">About</a></li>
|
||||
<li class="pure-menu-item"><a href="#ideas" class="pure-menu-link">Ideas</a></li>
|
||||
<li class="pure-menu-item"><a href="/soc/#apply" class="pure-menu-link">Apply</a></li>
|
||||
<li class="pure-menu-item"><a href="../study_resources.html" class="pure-menu-link">Study Resources</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
|
||||
<h2 class="content-head is-center">Summer of Code 2021</h2>
|
||||
|
||||
<article id="about">
|
||||
<h2>About the programme</h2>
|
||||
<p>Check the <a href="/soc/">programme page</a> to learn more about the programme and on how to apply.</p>
|
||||
<p>GNU social is a social communication software used in <a href="https://blog.diogo.site/posts/what-is-the-fediverse">federated social networks</a>. It is widely supported and has a large userbase.</p>
|
||||
<p>If you would like to know how is it like to be a GSoC student at GNU social, <a href="https://blog.diogo.site/posts/gsoc-2018">read this blog post</a>!</p>
|
||||
</article>
|
||||
<article id="stipend">
|
||||
<h2>Summer Stipend</h2>
|
||||
<p>Usually we participate in Google Summer of Code and are thus are able to give accepted students a stipend. It's not the case this year. Last year we've had a successful student supported by <a href="https://thefreaks.club/">The Freaks Club</a>, you can reach thndrbvr and try your luck, or look for another sponsor.</p>
|
||||
</article>
|
||||
<article id="ideas">
|
||||
<h2>Ideas</h2>
|
||||
<p>The community has not proposed ideas for 2021 yet. As the current development team is planning on major active development of v3 with NLnet sponsorship this year, as a student you can either try to join the development of v3 or contribute with plugins for v2, which is the latest release.</p>
|
||||
</article>
|
||||
</div>
|
||||
<footer class="l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
# Proposal Rating Guidelines
|
||||
## Scores
|
||||
- 31337: Outstanding. Ex.: Went above and beyond (user stories split into small tasks, small tasks estimated,
|
||||
defined MVP, planned any additional work, defined time off or limited time, well defined in case of emergency
|
||||
(NOT "I will complete tasks earlier so I will have more time"))
|
||||
- 1337: Very Good. Ex.: Included more than requirements (added mocks, diagrams, etc).
|
||||
- 42: Competent. Ex.: Completed the minimum requirements (proposal's required questions).
|
||||
- 0: Failed. Ex.: Either Below Average or Poor. Ex: Missed a few requirements (missed 1 or 2 required questions) or Didn't complete
|
||||
requirements (incomplete, didn't follow template, etc).
|
||||
|
||||
## Key Aspects
|
||||
- Idea - Does the idea solve real problems? Was the audience defined? Is it realistic, does it bring potential security
|
||||
issues? As a potential user, would you use the proposed? Can problems be easier solved by existing technologies?
|
||||
- Understood Project? - Did the student research other projects doing similar things? Did the student show the full
|
||||
scope of the project (backend, frontend, defined APIs, database, structure models, ML models, mockups, user journey,
|
||||
user stories, etc.)?
|
||||
- Project Planning - Did the student understand the whole complexity of the project, show smaller tasks and estimated?
|
||||
Does the student have a version when things go wrong, as planned, and better than expected? Did the student balance
|
||||
whole parts of the project (frontend and backend developing simultaneously) to have a better chance to achieve working
|
||||
functionality?
|
||||
- Engagement - Engaged on IRC, engaged on NotABug, listened to proposal feedback and updated their proposal,
|
||||
helped others, closed issues, etc.
|
||||
|
||||
## Criteria
|
||||
Once proposals have been finalised, student proposals will be graded based on the following criteria:
|
||||
|
||||
### Project
|
||||
- Does it solve the problem we need solving? Does applicant clearly identify the problem?
|
||||
- Does it offer a sensible solution?
|
||||
- Does it offer supporting evidence for technologies chosen, e.g. bootstrap. Sometimes a compare/contrast of different
|
||||
technologies considered can be helpful.
|
||||
- Nice bonus features in addition to the main project = good, ONLY unrelated 'bonus' features = bad.
|
||||
|
||||
### Plan
|
||||
- Does the proposal have a realistic timeline?
|
||||
- Are deliverables correct and timely?
|
||||
- Does the student have enough time in the week to carry their plan?
|
||||
- Bonus for "what if things go wrong planning", e.g. bonus features towards the end of the plan that can be removed
|
||||
if/when the bugs strike.
|
||||
|
||||
### Team working skills
|
||||
- Can the student carry out tasks on their own over a three month period?
|
||||
- Clear evidence of communication skills
|
||||
- Lower points for gross over-communication ("what should I name this variable?"), better if they quietly and
|
||||
competently get the job done but interact at appropriate times, e.g. GNU social bugs, sensible progress reports.
|
||||
- Is the student capable of following existing guidelines and instructions where appropriate?
|
||||
|
||||
## Extras
|
||||
|
||||
### Experience
|
||||
The experience criterion isn't specifically part of the grading rubric, but it's important for us to see some of the
|
||||
following in the application:
|
||||
|
||||
- Does the student have reasonable evidence they've competently done something relevant to this before? e.g.: one or more of
|
||||
- a {NotABug, CodeBerg, GitGud, GitLab, GitHub,...} profile,
|
||||
- merge requests on GNU social's repo,
|
||||
- published software,
|
||||
- code from a higher education institution assignment?
|
||||
- Note: we don't require MRs to GNU social's repository. It's handy as a source of evidence, but any of the others
|
||||
should do just fine.
|
||||
- Absolutely no work available - not even a published app, some work experience, or code from a class assignment, is a
|
||||
red flag.
|
||||
|
||||
### How the ranking process works
|
||||
All students with a finalised proposal will have their proposals reviewed by one or more mentors in the organisation,
|
||||
and ranked out of 4 based on the criteria above. This score will also be averaged to provide a mean result. These
|
||||
scores are not the final acceptance criteria - so a 1337 won't automatically win over an 42 - but they do help provide
|
||||
general guidelines for the mentors who are choosing from a large body of qualified students.
|
||||
|
||||
### Accepted students
|
||||
Students will be notified of their acceptance by Google when all accepted students are announced, and will _not_ be
|
||||
notified of their internal grades. Please note that we usually have more highly qualified applicants than slots
|
||||
available for the organisation, so sometimes proposals that are genuinely very good have to be rejected. We genuinely
|
||||
wish we could take you all!
|
||||
|
||||
Students who successfully finish the summer of code and are interested in a "GNU social Summer of Code transcript" may
|
||||
request one and that will come with a score and include an adapted proposal assessing.
|
||||
|
||||
|
||||
---
|
||||
These guidelines were adapted from [InterMine](http://intermine.org/internships/guidance/grading-criteria-2019/) and AnitaB.
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Assessment | GNU social Summer of Code 2022</title>
|
||||
<link rel="icon" href="../../favicon.png">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://hackersatporto.com/assets/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<nav id="side-menu">
|
||||
<label for="show-menu" id="menu-button">Menu</label>
|
||||
<input id="show-menu" role="button" type="checkbox">
|
||||
<ul id="menu">
|
||||
<li><a href="./"><strong>← GS SoC 2022</strong></a></li>
|
||||
<li><a href="#Grading_System_employed_0">Grading</a></li>
|
||||
<li><a href="#Web_Technologies_69">Proposal</a></li>
|
||||
<li><a href="#Internship__Training_91">Summer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h1>GNU social Summer of Code 2022</h1>
|
||||
</header>
|
||||
<article id="about">
|
||||
<h1 class="code-line" data-line-start=0 data-line-end=1 ><a id="Grading_System_employed_0"></a>Grading System employed</h1>
|
||||
<h2 class="code-line" data-line-start=2 data-line-end=3 ><a id="Effective_Grading_2"></a>Effective Grading</h2>
|
||||
<p class="has-line-data" data-line-start="3" data-line-end="4">Either <em>pass</em> or <em>fail</em>.</p>
|
||||
<h2 class="code-line" data-line-start=5 data-line-end=6 ><a id="Qualitative_Grading_5"></a>Qualitative Grading</h2>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Grade</th>
|
||||
<th>Definition</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>31337</td>
|
||||
<td>Outstanding</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1337</td>
|
||||
<td>Very Good</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>42</td>
|
||||
<td>Competent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>0</td>
|
||||
<td>Failed</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 class="code-line" data-line-start=13 data-line-end=14 ><a id="Method_13"></a>Method</h2>
|
||||
<p class="has-line-data" data-line-start="14" data-line-end="15">Graded every month, the ceiled average is the final.</p>
|
||||
<p class="has-line-data" data-line-start="16" data-line-end="17">No Quantitative Grading system will be used.</p>
|
||||
<p class="has-line-data" data-line-start="18" data-line-end="19">The contributions will be evaluated according to the following directives:</p>
|
||||
<blockquote>
|
||||
<p class="has-line-data" data-line-start="20" data-line-end="21">Autonomy with which the work was done</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li class="has-line-data" data-line-start="21" data-line-end="22">Low (was unable to progress autonomously);</li>
|
||||
<li class="has-line-data" data-line-start="22" data-line-end="24">Competent (some autonomy but with blocking situations that required the<br>
|
||||
intervention of the mentor);</li>
|
||||
<li class="has-line-data" data-line-start="24" data-line-end="26">Very Good (very good ability to solve problems independently in useful time<br>
|
||||
with the mentor mostly focused on defining the next steps of the work);</li>
|
||||
<li class="has-line-data" data-line-start="26" data-line-end="28">Outstanding (is sometimes able to suggest surprising and valid alternatives to what was originally planned by the mentor).</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p class="has-line-data" data-line-start="28" data-line-end="29">Objectives satisfaction</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li class="has-line-data" data-line-start="29" data-line-end="30">Low (haven't reached to the minimum objectives admissible for the proposed work);</li>
|
||||
<li class="has-line-data" data-line-start="30" data-line-end="31">Competent (the objectives were reached though not entirely);</li>
|
||||
<li class="has-line-data" data-line-start="31" data-line-end="32">Very Good (reached up fully);</li>
|
||||
<li class="has-line-data" data-line-start="32" data-line-end="34">Outstanding (exceeded up the objectives set).</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p class="has-line-data" data-line-start="34" data-line-end="35">Intrinsic difficulty level of their work</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li class="has-line-data" data-line-start="35" data-line-end="37">Low (relatively easy work, both from a scientific or technical point of view,<br>
|
||||
based on widespread knowledge);</li>
|
||||
<li class="has-line-data" data-line-start="37" data-line-end="39">Competent (work with some high complexity of details requiring more advanced<br>
|
||||
knowledge/expertise, either technical or scientific);</li>
|
||||
<li class="has-line-data" data-line-start="39" data-line-end="41">Very Good (relatively complex work, requiring a substantial knowledge and<br>
|
||||
technical skills, or resulting in some innovative contribution);</li>
|
||||
<li class="has-line-data" data-line-start="41" data-line-end="43">Outstanding (InSaNe).</li>
|
||||
</ul>
|
||||
<h3 class="code-line" data-line-start=46 data-line-end=47 ><a id="Grade_formula_per_month_46"></a>Grade formula per month</h3>
|
||||
<pre>
|
||||
Autonomy level
|
||||
Satisfaction of objectives | Low Competent Very Good Outstanding
|
||||
-----------+-------------------------------------------------------
|
||||
Low | 0 0 0 0
|
||||
Competent | 42 42 42 1337
|
||||
Very Good | 42 1337 1337 31337
|
||||
Outstanding| 42 1337 1337 31337
|
||||
|
||||
Grade from matrix above
|
||||
Difficulty level | 0 42 1337 31337
|
||||
-----------+-----------------------------------------
|
||||
Low | 0 0 42 1337
|
||||
Competent | 0 42 1337 1337
|
||||
Very Good | 0 1337 1337 1337
|
||||
Outstanding| 0 1337 1337 31337
|
||||
</pre>
|
||||
<hr>
|
||||
<h1 class="code-line" data-line-start=67 data-line-end=68 ><a id="Modules_67"></a>Modules</h1>
|
||||
<p>N.B.: The following are the minimum averages in GNU social's Summer of Code, we will come up with a custom
|
||||
"transcript" for any interested student.</p>
|
||||
<h2 class="code-line" data-line-start=69 data-line-end=70 ><a id="Web_Technologies_69"></a>Web Technologies</h2>
|
||||
<h3 class="code-line" data-line-start=71 data-line-end=72 ><a id="Amount_of_time_allocated_to_each_module_unit_71"></a>Amount of time allocated to each module unit</h3>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Designation</th>
|
||||
<th>Time (hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Autonomous study</td>
|
||||
<td>80</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mentorship</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Project work</td>
|
||||
<td>46</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total</td>
|
||||
<td>146</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="code-line" data-line-start=79 data-line-end=80 ><a id="Assessment_Components_79"></a>Assessment Components</h3>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Designation</th>
|
||||
<th>Weight (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Proposal</td>
|
||||
<td>80</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Proof of Competence</td>
|
||||
<td>20</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="code-line" data-line-start=85 data-line-end=86 ><a id="Proposed_Credits_85"></a>Proposed Credits</h3>
|
||||
<p class="has-line-data" data-line-start="86" data-line-end="88">1 Carnegie Unit<br>
|
||||
5 ECTS</p>
|
||||
<p><strong><a href="proposal_rating_guidelines.txt">Proposal Rating Guidelines</a></strong><p>
|
||||
<hr>
|
||||
<h2 class="code-line" data-line-start=91 data-line-end=92 ><a id="Internship__Training_91"></a>Internship | Training</h2>
|
||||
<h3 class="code-line" data-line-start=93 data-line-end=94 ><a id="Amount_of_time_allocated_to_each_module_unit_93"></a>Amount of time allocated to each module unit</h3>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Designation</th>
|
||||
<th>Time (hours)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Internship</td>
|
||||
<td>276.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Autonomous Study</td>
|
||||
<td>93.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Final Report</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mentorship</td>
|
||||
<td>44</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total</td>
|
||||
<td>438</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="code-line" data-line-start=102 data-line-end=103 ><a id="Assessment_Components_102"></a>Assessment Components</h3>
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Designation</th>
|
||||
<th>Weight (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Practical or project work</td>
|
||||
<td>100</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3 class="code-line" data-line-start=107 data-line-end=108 ><a id="Proposed_Credits_107"></a>Proposed Credits</h3>
|
||||
<p class="has-line-data" data-line-start="108" data-line-end="112">4 Carnegie Unit<br>
|
||||
18 Austria, Italy, and Spain ECTS<br>
|
||||
16 Finland, The Netherlands, Portugal, and Russia ECTS<br>
|
||||
15 Germany, Belgium, Romania, and Hungary ECTS</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
||||
<title>GNU social — Summer of Code 2022 Ideas</title>
|
||||
<link rel="shortcut icon" href="../../favicon.ico">
|
||||
<link rel="stylesheet" href="../../assets/css/reset.css">
|
||||
<link rel="stylesheet" href="../../assets/css/blog.css">
|
||||
<link rel="stylesheet" href="../../assets/fonts/opensans/opensans.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<a class="header-main" href="https://gnusocial.rocks/">
|
||||
<img src="https://www.gnusocial.rocks/assets/img/gnu-social-logo-invert.svg" alt="GNU social"><b>gnu</b>social
|
||||
</a>
|
||||
<aside class="header-sidebar">
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item"><a href="/soc" class="menu-link">Programme</a></li>
|
||||
<li class="menu-item menu-selected"><a href="/soc/2022" class="menu-link">2022</a></li>
|
||||
<li class="menu-item"><a href="/soc/#about-soc" class="menu-link">About</a></li>
|
||||
<li class="menu-item"><a href="#ideas" class="menu-link">Ideas</a></li>
|
||||
<li class="menu-item"><a href="/soc/#apply" class="menu-link">Apply</a></li>
|
||||
<li class="menu-item"><a href="../study_resources.html" class="menu-link">Study Resources</a></li>
|
||||
<li class="menu-item"><a href="academics.html" class="menu-link">Academics</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<main class="content soc">
|
||||
<h2 class="content-head is-center">Summer of Code 2022</h2>
|
||||
<article id="about">
|
||||
<h2>About the programme</h2>
|
||||
<p>Check the <a href="/soc/">programme page</a> to learn more about the programme and on how to apply.</p>
|
||||
<p>GNU social is a social communication software used in <a href="https://blog.diogo.site/posts/what-is-the-fediverse">federated social networks</a>. It is widely supported and has a large userbase.</p>
|
||||
<p>If you would like to know how is it like to be a GSoC student at GNU social, <a href="https://blog.diogo.site/posts/gsoc-2018">read this blog post</a>!</p>
|
||||
</article>
|
||||
|
||||
<article id="stipend">
|
||||
<h2>Summer Stipend</h2>
|
||||
<p>We no longer participate in Google Summer of Code since 2021. In 2020 we've had a successful student supported by <a href="https://thefreaks.club/">The Freaks Club</a>, you can reach thndrbvr and try your luck, or look for another sponsor. Otherwise, there will be no stipend.</p>
|
||||
</article>
|
||||
|
||||
<article id="ideas">
|
||||
<h2>Ideas</h2>
|
||||
<p>Below is a list of ideas you can work on this Summer at GNU social. You should pick one (or mix a couple) of them and <a href="https://agile.gnusocial.rocks/doku.php?id=affairs:development_discussion">talk on IRC about it</a>. The community will help you understanding what has to be done so you can put a good proposal together.</p>
|
||||
|
||||
<h3>Improve GNU social v3 form handling</h3>
|
||||
<p><strong>Description:</strong> Our current forms have their controller embedded in the UI construction.</p>
|
||||
<p><strong>Outcomes:</strong> Processing on dedicated controller, splitting logic from UI.</p>
|
||||
<p><strong>Skills required:</strong> PHP</p>
|
||||
<p><strong>Skills preferred:</strong> Twig</p>
|
||||
<p><strong>Mentors:</strong> Hugo Sales, Eliseu Amaro</p>
|
||||
<p><strong>Difficulty:</strong> Hard</p>
|
||||
<p><strong>Workload:</strong> 350h</p>
|
||||
|
||||
<h3>XMPP Plugin</h3>
|
||||
<p><strong>Description:</strong> - Add XMPP Notifications queue; - Add reply to note via XMPP; - and Add XMPP chat.</p>
|
||||
<p><strong>Outcomes:</strong> This would be a port of the v2 XMPP plugin with improved functionality.</p>
|
||||
<p><strong>Skills required:</strong> PHP, XMPP</p>
|
||||
<p><strong>Mentors:</strong> Diogo Cordeiro, Alexey Sorokin, Joshua Judson Rosen</p>
|
||||
<p><strong>Difficulty:</strong> Hard</p>
|
||||
<p><strong>Workload:</strong> 350h</p>
|
||||
|
||||
<h3>Integrate GS cache into Symfony and Configurable Autoloader</h3>
|
||||
<p><strong>Description:</strong> We have a custom cache system which is not understood by Symfony. Improve our autoloader so it can be configurable instead of just loading everything.</p>
|
||||
<p><strong>Outcomes:</strong> Symfony profiler can give useful information concerning cache. Decide which plugins should be loaded on runtime; Replace components with local ones; Replace templates with local ones.</p>
|
||||
<p><strong>Skills required:</strong> PHP</p>
|
||||
<p><strong>Mentors:</strong> Hugo Sales, Diogo Cordeiro</p>
|
||||
<p><strong>Difficulty:</strong> Hard</p>
|
||||
<p><strong>Workload:</strong> 350h</p>
|
||||
|
||||
<h3>Old school image manipulation without JS</h3>
|
||||
<p><strong>Description:</strong> Pure HTML + CSS solutions for Image-related manipulation</p>
|
||||
<p><strong>Outcomes:</strong> Provide an easy Twig macro interface for image manipulation, this includes: cropping images without requiring client side JS; adding annotations to images; and a plugin to have a XMP interface background animaton using SVGs.</p>
|
||||
<p><strong>Skills required:</strong> CSS2.2, PHP</p>
|
||||
<p><strong>Skills preferred:</strong> Twig</p>
|
||||
<p><strong>Mentors:</strong> Eliseu Amaro</p>
|
||||
<p><strong>Difficulty:</strong> Medium</p>
|
||||
<p><strong>Workload:</strong> 350h</p>
|
||||
|
||||
<h3>Bring back GNU social v2 themes</h3>
|
||||
<p><strong>Description:</strong> Restore that nostalgic and old-fashioned UI.</p>
|
||||
<p><strong>Outcomes:</strong> Have a heartwarmed community finding you wholesome.</p>
|
||||
<p><strong>Skills required:</strong> Semantic HTML, CSS2.2, Orca</p>
|
||||
<p><strong>Mentors:</strong> Eliseu Amaro</p>
|
||||
<p><strong>Difficulty:</strong> Medium</p>
|
||||
<p><strong>Workload:</strong> 350h</p>
|
||||
|
||||
<h3>Reliability Engineering</h3>
|
||||
<p><strong>Description: </strong>Create unit tests for components and plugins.</p>
|
||||
<p><strong>Outcomes:</strong> Review the whole unfully tested codebase.</p>
|
||||
<p><strong>Skills required:</strong> PHP, PHPUnit</p>
|
||||
<p><strong>Mentors:</strong> Hugo Sales, Diogo Cordeiro, Eliseu Amaro</p>
|
||||
<p><strong>Difficulty:</strong> Medium</p>
|
||||
<p><strong>Workload:</strong> 350h</p>
|
||||
|
||||
<h3>Bring back LinkRedirectPlugin, URLShortnerPlugin, HappeningsPlugin, PollPlugin, and SMSPlugin</h3>
|
||||
<p><strong>Description:</strong> Restore these functionalities that were available in v2.</p>
|
||||
<p><strong>Outcomes:</strong> The user can set a url shortner, create events, and create polls.</p>
|
||||
<p><strong>Skills required:</strong> PHP, CSS2.2, HTML</p>
|
||||
<p><strong>Mentors:</strong> Diogo Cordeiro, Eliseu Amaro</p>
|
||||
<p><strong>Difficulty:</strong> Medium</p>
|
||||
<p><strong>Workload:</strong> 350h</p>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
<footer class="l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
# Proposal Rating Guidelines
|
||||
## Scores
|
||||
- 31337: Outstanding. Ex.: Went above and beyond (user stories split into small tasks, small tasks estimated,
|
||||
defined MVP, planned any additional work, defined time off or limited time, well defined in case of emergency
|
||||
(NOT "I will complete tasks earlier so I will have more time"))
|
||||
- 1337: Very Good. Ex.: Included more than requirements (added mocks, diagrams, etc).
|
||||
- 42: Competent. Ex.: Completed the minimum requirements (proposal's required questions).
|
||||
- 0: Failed. Ex.: Either Below Average or Poor. Ex: Missed a few requirements (missed 1 or 2 required questions) or Didn't complete
|
||||
requirements (incomplete, didn't follow template, etc).
|
||||
|
||||
## Key Aspects
|
||||
- Idea - Does the idea solve real problems? Was the audience defined? Is it realistic, does it bring potential security
|
||||
issues? As a potential user, would you use the proposed? Can problems be easier solved by existing technologies?
|
||||
- Understood Project? - Did the student research other projects doing similar things? Did the student show the full
|
||||
scope of the project (backend, frontend, defined APIs, database, structure models, ML models, mockups, user journey,
|
||||
user stories, etc.)?
|
||||
- Project Planning - Did the student understand the whole complexity of the project, show smaller tasks and estimated?
|
||||
Does the student have a version when things go wrong, as planned, and better than expected? Did the student balance
|
||||
whole parts of the project (frontend and backend developing simultaneously) to have a better chance to achieve working
|
||||
functionality?
|
||||
- Engagement - Engaged on IRC, engaged on NotABug, listened to proposal feedback and updated their proposal,
|
||||
helped others, closed issues, etc.
|
||||
|
||||
## Criteria
|
||||
Once proposals have been finalised, student proposals will be graded based on the following criteria:
|
||||
|
||||
### Project
|
||||
- Does it solve the problem we need solving? Does applicant clearly identify the problem?
|
||||
- Does it offer a sensible solution?
|
||||
- Does it offer supporting evidence for technologies chosen, e.g. bootstrap. Sometimes a compare/contrast of different
|
||||
technologies considered can be helpful.
|
||||
- Nice bonus features in addition to the main project = good, ONLY unrelated 'bonus' features = bad.
|
||||
|
||||
### Plan
|
||||
- Does the proposal have a realistic timeline?
|
||||
- Are deliverables correct and timely?
|
||||
- Does the student have enough time in the week to carry their plan?
|
||||
- Bonus for "what if things go wrong planning", e.g. bonus features towards the end of the plan that can be removed
|
||||
if/when the bugs strike.
|
||||
|
||||
### Team working skills
|
||||
- Can the student carry out tasks on their own over a three month period?
|
||||
- Clear evidence of communication skills
|
||||
- Lower points for gross over-communication ("what should I name this variable?"), better if they quietly and
|
||||
competently get the job done but interact at appropriate times, e.g. GNU social bugs, sensible progress reports.
|
||||
- Is the student capable of following existing guidelines and instructions where appropriate?
|
||||
|
||||
## Extras
|
||||
|
||||
### Experience
|
||||
The experience criterion isn't specifically part of the grading rubric, but it's important for us to see some of the
|
||||
following in the application:
|
||||
|
||||
- Does the student have reasonable evidence they've competently done something relevant to this before? e.g.: one or more of
|
||||
- a {NotABug, CodeBerg, GitGud, GitLab, GitHub,...} profile,
|
||||
- merge requests on GNU social's repo,
|
||||
- published software,
|
||||
- code from a higher education institution assignment?
|
||||
- Note: we don't require MRs to GNU social's repository. It's handy as a source of evidence, but any of the others
|
||||
should do just fine.
|
||||
- Absolutely no work available - not even a published app, some work experience, or code from a class assignment, is a
|
||||
red flag.
|
||||
|
||||
### How the ranking process works
|
||||
All students with a finalised proposal will have their proposals reviewed by one or more mentors in the organisation,
|
||||
and ranked out of 4 based on the criteria above. This score will also be averaged to provide a mean result. These
|
||||
scores are not the final acceptance criteria - so a 1337 won't automatically win over an 42 - but they do help provide
|
||||
general guidelines for the mentors who are choosing from a large body of qualified students.
|
||||
|
||||
### Accepted students
|
||||
Students will be notified of their acceptance by Google when all accepted students are announced, and will _not_ be
|
||||
notified of their internal grades. Please note that we usually have more highly qualified applicants than slots
|
||||
available for the organisation, so sometimes proposals that are genuinely very good have to be rejected. We genuinely
|
||||
wish we could take you all!
|
||||
|
||||
Students who successfully finish the summer of code and are interested in a "GNU social Summer of Code transcript" may
|
||||
request one and that will come with a score and include an adapted proposal assessing.
|
||||
|
||||
|
||||
---
|
||||
These guidelines were adapted from [InterMine](http://intermine.org/internships/guidance/grading-criteria-2019/) and AnitaB.
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?php header('Location: https://www.gnusocial.rocks/soc/'.date('Y'), true, 302);exit;
|
||||
214
soc/index.html
214
soc/index.html
|
|
@ -2,70 +2,91 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>GNU social — Summer of Code</title>
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="/assets/css/style.css">
|
||||
<style>
|
||||
.content-wrapper {
|
||||
top: 2em;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
||||
<title>GNU social — Summer of Code</title>
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="../assets/css/reset.css">
|
||||
<link rel="stylesheet" href="../assets/css/style.css">
|
||||
<link rel="stylesheet" href="../assets/fonts/opensans/opensans.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="/">GNU social</a>
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item pure-menu-selected">Editions:</li>
|
||||
<li class="pure-menu-item"><a href="2021/" class="pure-menu-link">2021</a></li>
|
||||
<li class="pure-menu-item"><a href="2020/" class="pure-menu-link">2020</a></li>
|
||||
<li class="pure-menu-item"><a href="2019/" class="pure-menu-link">2019</a></li>
|
||||
<li class="pure-menu-item"><a href="2018/" class="pure-menu-link">2018</a></li>
|
||||
<header>
|
||||
<div class="home-menu menu menu-horizontal menu-fixed">
|
||||
<a class="menu-heading" href="/">
|
||||
<img src="../assets/img/gnu-social-logo-invert.svg" alt="GNU social">
|
||||
</a>
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item menu-selected">Editions:</li>
|
||||
<li class="menu-item"><a href="2022/" class="menu-link">2022</a></li>
|
||||
<li class="menu-item"><a href="2021/" class="menu-link">2021</a></li>
|
||||
<li class="menu-item"><a href="2020/" class="menu-link">2020</a></li>
|
||||
<li class="menu-item"><a href="2019/" class="menu-link">2019</a></li>
|
||||
<li class="menu-item"><a href="2018/" class="menu-link">2018</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content-wrapper">
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="body-wrapper">
|
||||
<div class="content">
|
||||
|
||||
<h2 class="content-head is-center">Summer of Code</h2>
|
||||
<h1 class="content-head">Summer of Code</h1>
|
||||
|
||||
<article id="about-gs">
|
||||
<h2>About GNU social</h2>
|
||||
<p>GNU social is the eldest free social networking platform for public and private communications used in <a href="https://blog.diogo.site/posts/what-is-the-fediverse">federated social networks</a>. It's versatile, extensible and privacy focused. We've been modernizing the existing codebase, ensuring inter-operationality as defined by the IndieWeb and we're developing a modern frontend. This makes GNU social accessible: easy to install and use, and follows AnyBrowser and A11Y guidelines.</p>
|
||||
<p>Our objective is to further differentiate GNU social from the alternative software available, either FOSS or Proprietary/Centralized while setting an example of how a secure, performant and plug-and-play software should be in modern day's web.</p>
|
||||
<p>GNU social is the eldest free social networking platform for public and private communications used in <a
|
||||
href="https://blog.diogo.site/posts/what-is-the-fediverse">federated social networks</a>. It's
|
||||
versatile, extensible and privacy focused. We've been modernizing the existing codebase, ensuring
|
||||
inter-operationality as defined by the IndieWeb and we're developing a modern frontend. This makes GNU
|
||||
social accessible: easy to install and use, and follows AnyBrowser and A11Y guidelines.</p>
|
||||
<p>Our objective is to further differentiate GNU social from the alternative software available, either FOSS
|
||||
or Proprietary/Centralized while setting an example of how a secure, performant and plug-and-play
|
||||
software should be in modern day's web.</p>
|
||||
</article>
|
||||
|
||||
<article id="about-soc">
|
||||
<h2>About Summer of Code</h2>
|
||||
<p>With respect to the time you will have to dedicate, GNU social's Summer of Code expects you to work an average of 36.5h/week. You can organize that time as you please, but you must be sure to dedicate that in your weekly work or to be overly productive.</p>
|
||||
<p>We suggest you to do a four-day work week with 6h of work/day + 3h to document, review/test and report the progress you've done (you usually won't need that much for this and we won't complain as long as you're doing well/being highly productive). As breaks are important, we recommend a 1h lunch break, 15min break after 4h of continuous work and a further 15mins break after 6h of work. These breaks won't be considered as part of your work time.</p>
|
||||
<p>Note that 6h*4 = 24h, if you only do the 24h/week, you'll have to prove your worth. Otherwise, we might require that you either do a 5-day week or that you scale it up to 7.5h in your 4-day week.</p>
|
||||
<p>In general, you will always have to work at least 120h/month, ideally 146h/month (or the productively equivalent). We do not accept that you transfer expected work time from a month to another. Nonetheless, an under-performing week will make us request more hours from you in the week after (up to the limit of 40h).</p>
|
||||
<p>Click <a href="academics.html">here</a> to better understand how we distribute the load. Also note that every summer of code ends with a final tech report, <a href="http://www.gnusocial.rocks/soc/2020/tech_report/v3_fe/technical_report.pdf">here's an example</a> of a frontend rework.</p>
|
||||
<p>With respect to the time you will have to dedicate, GNU social's Summer of Code expects you to work an
|
||||
average of 36.5h/week. You can organize that time as you please, but you must be sure to dedicate that
|
||||
in your weekly work or to be overly productive.</p>
|
||||
<p>We suggest you to do a four-day work week with 6h of work/day + 3h to document, review/test and report
|
||||
the progress you've done (you usually won't need that much for this and we won't complain as long as
|
||||
you're doing well/being highly productive). As breaks are important, we recommend a 1h lunch break,
|
||||
15min break after 4h of continuous work and a further 15mins break after 6h of work. These breaks won't
|
||||
be considered as part of your work time.</p>
|
||||
<p>Note that 6h*4 = 24h, if you only do the 24h/week, you'll have to prove your worth. Otherwise, we might
|
||||
require that you either do a 5-day week or that you scale it up to 7.5h in your 4-day week.</p>
|
||||
<p>In general, you will always have to work at least 120h/month, ideally 146h/month (or the productively
|
||||
equivalent). We do not accept that you transfer expected work time from a month to another. Nonetheless,
|
||||
an under-performing week will make us request more hours from you in the week after (up to the limit of
|
||||
40h).</p>
|
||||
<p>Click <a href="2022/academics.html">here</a> to better understand how we distribute the load. Also note
|
||||
that every summer of code ends with a final tech report, <a
|
||||
href="http://www.gnusocial.rocks/soc/2020/tech_report/v3_fe/technical_report.pdf">here's an
|
||||
example</a> of a frontend rework.</p>
|
||||
</article>
|
||||
|
||||
<article id="apply">
|
||||
<h2>How to apply?</h2>
|
||||
<p>Close some <a href="https://notabug.org/diogo/gnu-social/issues">open issues</a>. For that, <a href="study_resources.html">learn the necessary</a> to acquire a good <a href="https://docs.gnusocial.rocks/">insight on the codebase</a>. That's how you will start to provide major valuable contributions.</p>
|
||||
<p>We require some merge requests as that is the only way we have of knowing that you've actually tried to understand the codebase and have the minimal necessary programming autonomy for the summer of code.</p>
|
||||
<p>After you've done some code contributions, there's the proposal. That's how we make your application "official". Please contact us on GS's <a href="irc://irc.freenode.net:6697/social">IRC channel (#social@irc.freenode.net)</a> to get started with it.</p>
|
||||
<p>Close some <a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=d2293e55cabae7cceff9fb496c651328195357d392b9e61a9f229ed6d463">open bugs</a>. For that, <a href="study_resources.html">learn the necessary</a> to acquire a good <a href="https://docs.gnusocial.rocks/">insight on the codebase</a>. That's how you will start to provide major valuable contributions.</p>
|
||||
<p>We require some merge requests as that is the only way we have of knowing that you've actually tried to
|
||||
understand the codebase and have the minimal necessary programming autonomy for the summer of code.</p>
|
||||
<p>After you've done some code contributions, there's the proposal. That's how we make your application
|
||||
"official". Please contact us on <a
|
||||
href="https://agile.gnusocial.rocks/doku.php?id=affairs:development_discussion">GS's Development
|
||||
chat</a> to get started with it.</p>
|
||||
<p><strong>Suggestion:</strong>
|
||||
<ul>
|
||||
<li>Header:</li>
|
||||
<ul>
|
||||
<li>Header:
|
||||
<ul>
|
||||
<li>Name</li>
|
||||
<li>Email</li>
|
||||
<li>Other contact forms (IRC, XMPP)</li>
|
||||
<li>Timezone</li>
|
||||
<li>Project name</li>
|
||||
<li>*Proof of Competence link</li>
|
||||
</ul>
|
||||
</ul></li>
|
||||
<li>Summary</li>
|
||||
<li>Benefits</li>
|
||||
<li>Deliverables</li>
|
||||
|
|
@ -78,58 +99,91 @@
|
|||
<li>*References</li>
|
||||
</ul>
|
||||
<pre>
|
||||
* - if applicable
|
||||
N.B.:
|
||||
- Plan and Timeline may be together
|
||||
- Deliverables may come up after timeline
|
||||
- You're allowed to create subsections and even sections
|
||||
* - if applicable
|
||||
N.B.:
|
||||
- Plan and Timeline may be together
|
||||
- Deliverables may come up after timeline
|
||||
- You're allowed to create subsections
|
||||
and even sections
|
||||
</pre>
|
||||
<p>Understand that we need you to put some effort on the tentative timeline and relevant research. The point being that if you are to work on a large component or in significant changes, you must show us that you do understand and have gone through the planning work required to implement it properly.</p>
|
||||
<p>Click <a href="proposal_rating_guidelines.txt">here</a> to understand how we'll rate your proposal.</p>
|
||||
<p>For an example proposal, you can refer to <a href="2019/accepted_proposals/network.pdf">GNU social v2 Network Services Improvements proposal</a> (old format).</p>
|
||||
<p>Understand that we need you to put some effort on the tentative timeline and relevant research. The point
|
||||
being that if you are to work on a large component or in significant changes, you must show us that you
|
||||
do understand and have gone through the planning work required to implement it properly.</p>
|
||||
<p>Click <a href="2022/proposal_rating_guidelines.txt">here</a> to understand how we'll rate your proposal.</p>
|
||||
<p>For an example proposal, you can refer to <a href="2019/accepted_proposals/network.pdf">GNU social v2
|
||||
Network Services Improvements proposal</a> (old format).</p>
|
||||
</article>
|
||||
|
||||
<article id="log-of-past-successes">
|
||||
<hr>
|
||||
|
||||
<article id="log-of-past-successes" class="card">
|
||||
<h2><a href="#log-of-past-successes">Past successes</a></h2>
|
||||
<section class="card">
|
||||
<h3 id="log-of-2019-successes"><a href="#log-of-2020-successes">In 2020</a></h3>
|
||||
|
||||
<h3 id="log-of-2019-successes"><a href="#log-of-2020-successes">In 2020</a></h3>
|
||||
<h4><a href="https://www.diogo.site/projects/GNU-social/soc/2020/accepted_proposals/frontend_eliseu.pdf">V3
|
||||
Frontend</a></h4>
|
||||
<p>Modular and meaningful Web UX for GNU social v3</p>
|
||||
<p>Proposed by <a href="https://eliseuama.ro/">Eliseu Amaro</a> and mentored by <a
|
||||
href="https://www.hackerposse.com/~rozzin/">Joshua Judson Rosen</a>, <a
|
||||
href="https://github.com/phablulo">Phablulo Joel</a> and <a href="https://dansup.com">Daniel
|
||||
Supernault</a>.</p>
|
||||
<a class="button" href="2020/tech_report/v3_fe/">Technical Report</a>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4><a href="https://www.diogo.site/projects/GNU-social/soc/2020/proposals/frontend_eliseu.pdf">V3 Frontend</a></h4>
|
||||
<p>Modular and meaningful Web UX for GNU social v3</p>
|
||||
<p>Proposed by <a href="https://eliseuama.ro/">Eliseu Amaro</a> and mentored by <a href="https://www.hackerposse.com/~rozzin/">Joshua Judson Rosen</a>, <a href="https://github.com/phablulo">Phablulo Joel</a> and <a href="https://dansup.com">Daniel Supernault</a>.</p>
|
||||
<a href="2020/tech_report/v3_fe/">Technical Report</a>
|
||||
<h4><a href="https://summerofcode.withgoogle.com/archive/2020/projects/5483698721390592/">V3 Backend</a>
|
||||
</h4>
|
||||
<p>Initial implementation of GNU social v3's backend.</p>
|
||||
<p>Proposed by <a href="https://hsal.es/">Hugo Sales</a> and mentored by <a href="https://www.diogo.site/">Diogo
|
||||
Cordeiro</a> and <a href="https://loadaverage.org/XRevan86">Alexei Sorokin</a>.</p>
|
||||
<a class="button" href="2020/tech_report/v3_be/">Technical Report</a>
|
||||
<hr>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h3 id="log-of-2019-successes"><a href="#log-of-2019-successes">In 2019</a></h3>
|
||||
|
||||
<h4><a href="https://summerofcode.withgoogle.com/archive/2020/projects/5483698721390592/">V3 Backend</a></h4>
|
||||
<p>Initial implementation of GNU social v3's backend.</p>
|
||||
<p>Proposed by <a href="https://hsal.es/">Hugo Sales</a> and mentored by <a href="https://www.diogo.site/">Diogo Cordeiro</a> and <a href="https://loadaverage.org/XRevan86">Alexei Sorokin</a>.</p>
|
||||
<a href="2020/tech_report/v3_be/">Technical Report</a>
|
||||
<h4><a href="https://summerofcode.withgoogle.com/archive/2019/projects/6021217092370432/">Improvements on
|
||||
GNU social's network systems</a></h4>
|
||||
<p>Private Messaging, further development on ActivityPub, improved Remote Actions.</p>
|
||||
<p>Proposed by <a href="https://loadaverage.org/tenma">Bruno Casteleiro</a> and mentored by <a
|
||||
href="https://diogo.site/">Diogo Cordeiro</a>.</p>
|
||||
<a class="button" href="2019/tech_report/network/">Technical Report</a>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4><a href="https://summerofcode.withgoogle.com/archive/2019/projects/6155433343975424/">Optimizations on
|
||||
Load Balance System and Storage Usage</a></h4>
|
||||
<p>Image System, Embed Plugin, Queue System, Caching System.</p>
|
||||
<p>Proposed by <a href="https://loadaverage.org/biodan">Miguel Dantas</a> and mentored by <a
|
||||
href="https://diogo.site/">Diogo Cordeiro</a>.</p>
|
||||
<a class="button" href="2019/tech_report/load/">Technical Report</a>
|
||||
<hr>
|
||||
</section>
|
||||
|
||||
<h3 id="log-of-2019-successes"><a href="#log-of-2019-successes">In 2019</a></h3>
|
||||
<section class="card">
|
||||
<h3 id="log-of-2018-successes"><a href="#log-of-2018-successes">In 2018</a></h3>
|
||||
|
||||
<h4><a href="https://summerofcode.withgoogle.com/archive/2019/projects/6021217092370432/">Improvements on GNU social's network systems</a></h4>
|
||||
<p>Private Messaging, further development on ActivityPub, improved Remote Actions.</p>
|
||||
<p>Proposed by <a href="https://loadaverage.org/tenma">Bruno Casteleiro</a> and mentored by <a href="https://diogo.site/">Diogo Cordeiro</a>.</p>
|
||||
<a href="2019/tech_report/network/">Technical Report</a>
|
||||
|
||||
|
||||
<h4><a href="https://summerofcode.withgoogle.com/archive/2019/projects/6155433343975424/">Optimizations on Load Balance System and Storage Usage</a></h4>
|
||||
<p>Image System, Embed Plugin, Queue System, Caching System.</p>
|
||||
<p>Proposed by <a href="https://loadaverage.org/biodan">Miguel Dantas</a> and mentored by <a href="https://diogo.site/">Diogo Cordeiro</a>.</p>
|
||||
<a href="2019/tech_report/load/">Technical Report</a>
|
||||
|
||||
|
||||
<h3 id="log-of-2018-successes"><a href="#log-of-2018-successes">In 2018</a></h3>
|
||||
|
||||
<h4><a href="https://summerofcode.withgoogle.com/archive/2018/projects/5289876471676928/">GS ActivityPub Plugin</a></h4>
|
||||
<p>The tendency is that newer software will focus in the implementation of the ActivityPub Protocol (as it is newer and considered to be simpler) instead of OStatus, given that, it is important for GNU social to support it in order to stay updated and relevant in an even larger fediverse.</p>
|
||||
<p>Proposed by <a href="https://www.diogo.site/">Diogo Cordeiro</a> and mentored by <a href="https://github.com/dansup">Daniel Supernault</a> and <a href="https://mmn-o.se/">Mikael Nordfeldth</a>.</p>
|
||||
<a href="2018/">Technical Report</a>
|
||||
<h4><a href="https://summerofcode.withgoogle.com/archive/2018/projects/5289876471676928/">GS ActivityPub
|
||||
Plugin</a></h4>
|
||||
<p>The tendency is that newer software will focus in the implementation of the ActivityPub Protocol (as it
|
||||
is newer and considered to be simpler) instead of OStatus, given that, it is important for GNU social to
|
||||
support it in order to stay updated and relevant in an even larger fediverse.</p>
|
||||
<p>Proposed by <a href="https://www.diogo.site/">Diogo Cordeiro</a> and mentored by <a
|
||||
href="https://github.com/dansup">Daniel Supernault</a> and <a href="https://mmn-o.se/">Mikael
|
||||
Nordfeldth</a>.</p>
|
||||
<a class="button" href="2018/">Technical Report</a>
|
||||
<hr>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
<footer class="l-box is-center">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="l-box is-center footer">
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>.
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,143 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="main.css" type="text/css" />
|
||||
<link rel="stylesheet" href="blog.css" type="text/css" />
|
||||
<link rel="alternate" type="application/rss+xml" title="Subscribe to this page..." href="feed.rss" />
|
||||
<title>Updates: Interface and accessibility - My fancy blog</title>
|
||||
</head><body>
|
||||
</div></div></div>
|
||||
<div id="template-wrapper"><div class="template-unit">
|
||||
<!-- entry begin -->
|
||||
<h3><a class="ablack" href="updates-interface-and-accessibility.html">
|
||||
Updates: Interface and accessibility
|
||||
</a></h3>
|
||||
<!-- bashblog_timestamp: #202109131730.12# -->
|
||||
<div class="subtitle">September 13, 2021 —
|
||||
John Smith
|
||||
</div>
|
||||
<!-- text begin -->
|
||||
|
||||
<p>Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI.
|
||||
This update has been in the works for a long time… Many considerations had to be done, and given the current state of
|
||||
modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes.</p>
|
||||
|
||||
<p>We hope you like it!</p>
|
||||
|
||||
<h3>The prime directive</h3>
|
||||
|
||||
<blockquote><p>Modern looking, consistent and accessible UI across all browsers.
|
||||
Non-JS version as the primary focus, <strong>JS is optional</strong> and should be regarded as such.</p></blockquote>
|
||||
|
||||
<p>The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
|
||||
To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader.
|
||||
In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
|
||||
markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.</p>
|
||||
|
||||
<h3>Features</h3>
|
||||
|
||||
<ul>
|
||||
<li>Accessible
|
||||
|
||||
<ul>
|
||||
<li>Easy to use keyboard only navigation
|
||||
|
||||
<ul>
|
||||
<li>Feedback on focused elements</li>
|
||||
<li>Keyboard shortcuts to access main regions</li>
|
||||
<li>Vi-like shortcuts</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Screen reader tested
|
||||
|
||||
<ul>
|
||||
<li>Notifies the user when focusing on key elements, such as the feed, notes and actions</li>
|
||||
<li>Brief description of navigation links</li>
|
||||
<li>Using semantic HTML whenever possible</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Special care given for styling solutions that could break accessibility</li>
|
||||
<li>Colors and type sizes in accordance to W3C contrast guidelines
|
||||
|
||||
<ul>
|
||||
<li>Chosen specifically blue-ish and grey-ish hues for faster page loading perception</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Fast, the content provided to the user really is just markup and some CSS rules
|
||||
|
||||
<ul>
|
||||
<li>Optionally there will be some small use cases where JS makes sense (it’s the only thing modern browsers understand e.e)
|
||||
|
||||
<ul>
|
||||
<li>For example, cropping your avatar before uploading a new one.</li>
|
||||
<li>This is the only example until now.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Dark and light default themes available (according to your system theme)</li>
|
||||
<li>Graceful degradation for unsupported HTML elements</li>
|
||||
<li>Achieving modern user interface patterns without JS</li>
|
||||
<li>Various layout engines tested and work as they should
|
||||
|
||||
<ul>
|
||||
<li>Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc…)</li>
|
||||
<li>WebkitGTK (Epiphany, Midori, etc…)</li>
|
||||
<li>Gecko (Firefox and derivatives)</li>
|
||||
<li>Goanna (Palemoon, Basilisk, etc…)</li>
|
||||
<li>Internet Explorer</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Video</h3>
|
||||
|
||||
<h4>Keyboard tests</h4>
|
||||
|
||||
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Login, Update nickname" src="https://tube.tchncs.de/videos/embed/8c86754a-8c71-4a28-8e47-8ef83a9b5b35" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<h3>Images</h3>
|
||||
|
||||
<p><em>Default dark theme</em>
|
||||
<img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_dark.png" alt="" style="display: block; width: 600px; max-width: 100%;">
|
||||
<img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_dark.png" alt="" style="display: block; width: 600px; max-width: 100%; margin-top: 1rem"></p>
|
||||
|
||||
<blockquote><p>Settings are re-organized, allowing to focus into view each “tab” using the <em>details</em> HTML element.</p></blockquote>
|
||||
|
||||
<p><em>Default light theme</em>
|
||||
<img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_light.png" alt="" style="display: block; width: 600px; max-width: 100%;">
|
||||
<img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_light.png" alt="" style="display: block; width: 600px; max-width: 100%; margin-top: 1rem"></p>
|
||||
|
||||
<h4>Bonus :‘)</h4>
|
||||
|
||||
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Eliseu was recording a reply with orca, but I had non-tested changes" src="https://tube.tchncs.de/videos/embed/17a0c9c5-0f1c-4bae-a77d-08b4be67c986?start=54s" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
<!-- text end -->
|
||||
<!-- entry end -->
|
||||
</div>
|
||||
<div id="footer">CC by-nc-nd <a href="http://twitter.com/example">John Smith</a> — <a href="mailto:john@smith.com">john@smith.com</a><br/>
|
||||
Generated with <a href="https://github.com/cfenollosa/bashblog">bashblog</a>, a single bash script to easily create blogs like this one</div>
|
||||
</div></div>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
Updates: Interface and accessibility
|
||||
|
||||
Hello everyone! Throughout the past year there has been a lot of work in creating a polished, modern looking UI.
|
||||
This update has been in the works for a long time... Many considerations had to be done, and given the current state of
|
||||
modern browsers (and their over-reliance in JS) many more surfaced, leading to further testing and fixes.
|
||||
|
||||
We hope you like it!
|
||||
|
||||
### The prime directive
|
||||
> Modern looking, consistent and accessible UI across all browsers.
|
||||
> Non-JS version as the primary focus, **JS is optional** and should be regarded as such.
|
||||
|
||||
The Web is 95% typography, the art and technique of arranging type to make text more readable and pleasing.
|
||||
To achieve this, a textual hierarchy is fundamental, text should present a clear, readable structure to the reader.
|
||||
In much of the same fashion, the way we perceive Web pages relies upon the same fundamentals. As such, by focusing on the
|
||||
markup, we hope to achieve an accessible, fast and polished structure by which any browser and screen reader relies upon.
|
||||
|
||||
### Features
|
||||
* Accessible
|
||||
* Easy to use keyboard only navigation
|
||||
* Feedback on focused elements
|
||||
* Keyboard shortcuts to access main regions
|
||||
* Vi-like shortcuts
|
||||
* Screen reader tested
|
||||
* Notifies the user when focusing on key elements, such as the feed, notes and actions
|
||||
* Brief description of navigation links
|
||||
* Using semantic HTML whenever possible
|
||||
* Special care given for styling solutions that could break accessibility
|
||||
* Colors and type sizes in accordance to W3C contrast guidelines
|
||||
* Chosen specifically blue-ish and grey-ish hues for faster page loading perception
|
||||
* Fast, the content provided to the user really is just markup and some CSS rules
|
||||
* Optionally there will be some small use cases where JS makes sense (it's the only thing modern browsers understand e.e)
|
||||
* For example, cropping your avatar before uploading a new one.
|
||||
* This is the only example until now.
|
||||
* Dark and light default themes available (according to your system theme)
|
||||
* Graceful degradation for unsupported HTML elements
|
||||
* Achieving modern user interface patterns without JS
|
||||
* Various layout engines tested and work as they should
|
||||
* Qt WebEngine (Qutebrowser, Falkon, Otter Browser, etc...)
|
||||
* WebkitGTK (Epiphany, Midori, etc...)
|
||||
* Gecko (Firefox and derivatives)
|
||||
* Goanna (Palemoon, Basilisk, etc...)
|
||||
* Internet Explorer
|
||||
|
||||
### Video
|
||||
#### Keyboard tests
|
||||
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Orca reading the Public feed" src="https://tube.tchncs.de/videos/embed/9a16e84c-4150-4849-ac63-019c9a3782d9" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<hr>
|
||||
|
||||
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Login, Update nickname" src="https://tube.tchncs.de/videos/embed/8c86754a-8c71-4a28-8e47-8ef83a9b5b35" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<hr>
|
||||
|
||||
### Images
|
||||
*Default dark theme*
|
||||
<img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_dark.png" alt="" style="display: block; width: 600px; max-width: 100%;">
|
||||
<img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_dark.png" alt="" style="display: block; width: 600px; max-width: 100%; margin-top: 1rem">
|
||||
> Settings are re-organized, allowing to focus into view each "tab" using the *details* HTML element.
|
||||
|
||||
*Default light theme*
|
||||
<img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:timeline_light.png" alt="" style="display: block; width: 600px; max-width: 100%;">
|
||||
<img src="https://agile.gnusocial.rocks/lib/exe/fetch.php?media=interface:settings_light.png" alt="" style="display: block; width: 600px; max-width: 100%; margin-top: 1rem">
|
||||
|
||||
#### Bonus :')
|
||||
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" title="GNU social v3 Accessibility: Eliseu was recording a reply with orca, but I had non-tested changes" src="https://tube.tchncs.de/videos/embed/17a0c9c5-0f1c-4bae-a77d-08b4be67c986?start=54s" frameborder="0" allowfullscreen></iframe>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
global_title="GNU social V3"
|
||||
global_description="Development blog where we announce our progress."
|
||||
global_url="https://gnusocial.rocks/v3"
|
||||
template_archive_title="Blog"
|
||||
|
||||
global_author="GNU social development team"
|
||||
global_author_url="https://www.gnusocial.rocks/"
|
||||
global_email="mail@diogo.site"
|
||||
|
||||
global_license="<a href="https://creativecommons.org/licenses/by-sa/4.0/">Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a>"
|
||||
|
||||
header_file="templates/header.template"
|
||||
body_begin_file="templates/body.template"
|
||||
footer_file=".empty"
|
||||
body_end_file="templates/footer.template"
|
||||
|
||||
body_begin_file_index="templates/abstract.template"
|
||||
body_end_file_index="templates/milestones.template"
|
||||
number_of_index_articles="5"
|
||||
archive_index="index.html"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" href="../assets/css/reset.css">
|
||||
<link rel="stylesheet" href="../assets/css/blog.css">
|
||||
<link rel="stylesheet" href="../assets/fonts/opensans/opensans.css">
|
||||
<title>All tags - GNU social V3</title>
|
||||
</head><body>
|
||||
<header>
|
||||
<div class="home-menu menu menu-horizontal menu-fixed">
|
||||
<div class="home-menu menu menu-horizontal menu-fixed">
|
||||
<a class="header-main" href="/"><img src="../assets/img/gnu-social-logo-invert.svg" alt="GNU social"><b>gnu</b>social</a>
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item menu-selected"><a href="index.html" class="menu-link">Blog Index</a></li>
|
||||
<li class="menu-item"><a href="https://code.gnusocial.rocks/" class="menu-link">Repository</a></li>
|
||||
<li class="menu-item"><a href="https://coverage.gnusocial.rocks/" class="menu-link">Code Coverage</a></li>
|
||||
<li class="menu-item"><a href="https://docs.gnusocial.rocks/" class="menu-link">Documentation</a></li>
|
||||
<li class="menu-item"><a href="https://agile.gnusocial.rocks/" class="menu-link">Wiki</a></li>
|
||||
<li class="menu-item"><a href="https://kanban.undefinedhackers.net/?controller=BoardViewController&action=readonly&token=d2293e55cabae7cceff9fb496c651328195357d392b9e61a9f229ed6d463" class="menu-link">Roadmap</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
</div>
|
||||
<div id="entry-wrapper"><div class="entry-unit">
|
||||
<h3>All tags</h3>
|
||||
<ul>
|
||||
</ul>
|
||||
<div id="all_posts"><a href="index.html">Blog</a> — <a href="feed.rss">Subscribe</a></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<footer>
|
||||
This site's source is <a href="https://code.undefinedhackers.net/GNUsocial/gnusocial.rocks">hosted here</a>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue