Update Semantic
Fixes #40,#24
This commit is contained in:
Tim Schumacher
parent
1715f27f44
commit
2027b94179
621 changed files with 172488 additions and 15939 deletions
74
web/semantic/examples/feed.css
Normal file
74
web/semantic/examples/feed.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/*******************************
|
||||
Global
|
||||
*******************************/
|
||||
|
||||
/*-------------------
|
||||
Sidebar
|
||||
--------------------*/
|
||||
|
||||
#feed .sidebar {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Grid
|
||||
--------------------*/
|
||||
|
||||
#feed .pusher,
|
||||
#feed .grid,
|
||||
#feed .grid > .column {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*-------------------
|
||||
Inbox
|
||||
--------------------*/
|
||||
|
||||
#feed .pusher {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#feed .tab .item .description {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
#feed .current {
|
||||
float: right;
|
||||
margin: 0.5em 0em 0em 1em;
|
||||
}
|
||||
|
||||
#feed .left.column {
|
||||
background-color: #F7F7F7;
|
||||
padding: 1em 2em;
|
||||
max-width: 600px;
|
||||
}
|
||||
#feed .left.column .menu {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
#feed .right.column {
|
||||
padding: 1em 2em;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#feed .right.column {
|
||||
font-size: 16px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Responsive
|
||||
*******************************/
|
||||
|
||||
@media only screen and (max-width : 1000px) {
|
||||
#feed .inbox .date {
|
||||
float: none;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width : 1250px) {
|
||||
#feed .left.column > .menu .item {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
183
web/semantic/examples/feed.html
Normal file
183
web/semantic/examples/feed.html
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Standard Meta -->
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<!-- Site Properities -->
|
||||
<title>Feed Example - Semantic</title>
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
|
||||
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.js"></script>
|
||||
<script src="../dist/semantic.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="feed.css">
|
||||
<script src="feed.js"></script>
|
||||
</head>
|
||||
<body id="feed">
|
||||
<div class="ui large inverted vertical sidebar menu">
|
||||
<a class="active item">
|
||||
Dogs Weekly <span class="ui label">213</span>
|
||||
</a>
|
||||
<a class="item">
|
||||
Joystiq <span class="ui label">113</span>
|
||||
</a>
|
||||
<div class="item">
|
||||
<b>Archived Feeds</b>
|
||||
<div class="menu">
|
||||
<a class="item">
|
||||
Engadget <span class="ui label">11</span>
|
||||
</a>
|
||||
<a class="item">
|
||||
NY Times Tech Blog <span class="ui label">21</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="item">
|
||||
<i class="bookmark icon"></i> Favorites
|
||||
</a>
|
||||
<div class="ui dropdown item">
|
||||
<i class="add icon"></i> New
|
||||
<div class="menu">
|
||||
<a class="item"><i class="rss icon"></i> Feed</a>
|
||||
<a class="item"><i class="tag icon"></i> Tag</a>
|
||||
<a class="item"><i class="folder icon"></i> Group</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui divided two column padded grid">
|
||||
<div class="left column">
|
||||
<div class="ui left floated launch icon button">
|
||||
<i class="sidebar icon"></i>
|
||||
</div>
|
||||
<div class="ui right floated launch primary button">
|
||||
<i class="mail icon"></i> Compose
|
||||
</div>
|
||||
<div class="ui secondary pointing filter menu">
|
||||
<a class="active red item" data-tab="unread">Unread</a>
|
||||
<a class="blue item" data-tab="saved">Saved</a>
|
||||
<a class="green item" data-tab="all">All</a>
|
||||
</div>
|
||||
|
||||
<div class="ui active tab" data-tab="unread">
|
||||
<div class="ui very relaxed divided link list">
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 14, 2013</div>
|
||||
<div class="description">Scientists discover new breed of dog</div>
|
||||
</a>
|
||||
<a class="active item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 14, 2013</div>
|
||||
<div class="description">Weekly Webcomic Wrapup fought the law, and the law won</div>
|
||||
</a>
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 10, 2013</div>
|
||||
<div class="description">Dogs colony in Antarctica</div>
|
||||
</a>
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 09, 2013</div>
|
||||
<div class="description">Famous dog whisperer Chakotay dies today at 104</div>
|
||||
</a>
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 07, 2013</div>
|
||||
<div class="description">Top 10 Things to Know about Labradoodles</div>
|
||||
</a>
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 05, 2013</div>
|
||||
<div class="description">Study shows children enjoy the company of animals</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui tab" data-tab="saved">
|
||||
<div class="ui very relaxed divided link list">
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 14, 2013</div>
|
||||
<div class="description">Your favorite saved article</div>
|
||||
</a>
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 14, 2013</div>
|
||||
<div class="description">Your favorite saved article</div>
|
||||
</a>
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 14, 2013</div>
|
||||
<div class="description">Your favorite saved article</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui tab" data-tab="all">
|
||||
<div class="ui very relaxed divided link list">
|
||||
<a class="item">
|
||||
<div class="left floated ui star rating">
|
||||
<i class="link icon"></i>
|
||||
</div>
|
||||
<div class="right floated date">Sep 14, 2013</div>
|
||||
<div class="description">There turns out there is only one article under all.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui divider"></div>
|
||||
|
||||
<div class="current">Showing <b>6</b> of 213</div>
|
||||
|
||||
<div class="ui text menu">
|
||||
<a class="icon item"><i class="icon left chevron"></i></a>
|
||||
<a class="active item">1</a>
|
||||
<div class="disabled item">...</div>
|
||||
<a class="item">10</a>
|
||||
<a class="item">11</a>
|
||||
<a class="item">12</a>
|
||||
<a class="icon item"><i class="icon right chevron"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right column">
|
||||
<h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1>
|
||||
|
||||
<a class="ui label">Unread</a>
|
||||
<a class="ui label">Comics</a>
|
||||
|
||||
<div class="ui divider"></div>
|
||||
<p>So there's this video game coming out Tuesday called Grand Theft Auto 5. Don't know if you've heard of it. Anyways, it's all about crime and gangs and some roughneck ne'er-do-wells, so I thought this would be the perfect time to talk about times when we've been... well, less than perfect.</p>
|
||||
<p>When I was a young'un, I was a frequent visitor to the local swimming pool. I was also a frequent lover of AirHeads candy, which the pool happened to sell. Waiting, watching, stalking the counter like a big cat in the savannah, I waited for the perfect opportunity to strike. While the lifeguards were busy, I snuck through the gate, reached up and took both cherry and "mystery white" AirHeads. I quickly ran out to the sidewalk and reveled in my sweet, delicious victory... for all of ten seconds, before I felt guilty enough to sneak back in and return the .20 worth of candy I had stolen.</p>
|
||||
<p>While you confess your crimes - hopefully minor, and nothing you can be persecuted for - take a moment to enjoy this week's webcomics, and vote for your favorite after the jump.</p>
|
||||
<div class="ui divider"></div>
|
||||
<div class="ui basic button">Save</div>
|
||||
<div class="ui basic button">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
23
web/semantic/examples/feed.js
Normal file
23
web/semantic/examples/feed.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
$(document)
|
||||
.ready(function() {
|
||||
|
||||
$('.filter.menu .item')
|
||||
.tab()
|
||||
;
|
||||
|
||||
$('.ui.rating')
|
||||
.rating({
|
||||
clearable: true
|
||||
})
|
||||
;
|
||||
|
||||
$('.ui.sidebar')
|
||||
.sidebar('attach events', '.launch.button')
|
||||
;
|
||||
|
||||
$('.ui.dropdown')
|
||||
.dropdown()
|
||||
;
|
||||
|
||||
})
|
||||
;
|
||||
103
web/semantic/examples/grid.css
Normal file
103
web/semantic/examples/grid.css
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
#grid {
|
||||
background-color: #1B1C1D;
|
||||
padding: 0em 3em;
|
||||
}
|
||||
|
||||
#grid h2 {
|
||||
margin: 2em 0em 1.5em;
|
||||
}
|
||||
|
||||
/* Shaded */
|
||||
#grid .shaded.examples .row {
|
||||
position: relative;
|
||||
}
|
||||
#grid .shaded.examples .grid > .column {
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
}
|
||||
#grid .shaded.examples .grid .column:not(.row):after {
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px 0px 0px 1px #DDD inset;
|
||||
content: "";
|
||||
display: block;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
|
||||
#grid .divided.examples .grid .column:not(.row):after {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
content: "";
|
||||
display: block;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
#grid .nested.examples .grid .grid {
|
||||
box-shadow: 0px 0px 0px 1px #AAA inset;
|
||||
}
|
||||
#grid .nested.examples .grid .grid .column:after {
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px 0px 0px 1px #DDD inset;
|
||||
content: "";
|
||||
display: block;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
#grid .simple.examples .grid .column:not(.row):not(.grid):after {
|
||||
content: "";
|
||||
display: block;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Uncomment to animate examples
|
||||
#grid .examples {
|
||||
margin: 0 auto;
|
||||
-webkit-animation: grid 7s ease infinite;
|
||||
-moz-animation: grid 7s ease infinite;
|
||||
animation: grid 7s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes grid {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
45% {
|
||||
width: 85%;
|
||||
}
|
||||
55% {
|
||||
width: 85%;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes grid {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
45% {
|
||||
width: 85%;
|
||||
}
|
||||
55% {
|
||||
width: 85%;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes grid {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
45% {
|
||||
width: 85%;
|
||||
}
|
||||
55% {
|
||||
width: 85%;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
*/
|
||||
1439
web/semantic/examples/grid.html
Normal file
1439
web/semantic/examples/grid.html
Normal file
File diff suppressed because it is too large
Load diff
134
web/semantic/examples/homepage.css
Normal file
134
web/semantic/examples/homepage.css
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
/*******************************
|
||||
Global
|
||||
*******************************/
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Global
|
||||
*******************************/
|
||||
|
||||
#home .menu .right.menu > .mobile.item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Masthead
|
||||
---------------*/
|
||||
|
||||
#home .masthead {
|
||||
background-image: url(images/bg.jpg);
|
||||
margin: 0em;
|
||||
padding: 5rem 0rem;
|
||||
}
|
||||
#home .masthead .column {
|
||||
position: relative;
|
||||
}
|
||||
#home .masthead .information {
|
||||
margin: 10em 1em 1em 350px;
|
||||
}
|
||||
#home .masthead .information p {
|
||||
max-width: 600px;
|
||||
}
|
||||
#home .masthead .image {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
bottom: -110px;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Ribbons
|
||||
---------------*/
|
||||
|
||||
#home .segment h1 {
|
||||
font-size: 3em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#home .vertical.segment {
|
||||
padding: 12rem 0rem;
|
||||
}
|
||||
|
||||
#home .feature.segment {
|
||||
margin: 0em;
|
||||
padding: 6rem 0rem;
|
||||
}
|
||||
#home .feature.segment p {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
#home .selection.list {
|
||||
margin: 0em -0.5em;
|
||||
}
|
||||
|
||||
#home .logo.row {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
/*--------------
|
||||
Footer
|
||||
---------------*/
|
||||
|
||||
#home .footer.segment {
|
||||
background-color: #000000;
|
||||
padding: 3rem 0rem;
|
||||
}
|
||||
|
||||
|
||||
/*******************************
|
||||
Responsive
|
||||
*******************************/
|
||||
|
||||
/* Mobile Only */
|
||||
@media only screen and (max-width : 768px) {
|
||||
|
||||
#home .menu .right.menu > .item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#home .menu .right.menu > .mobile.item {
|
||||
display: block;
|
||||
}
|
||||
#home .menu .right.menu > .mobile.item .menu {
|
||||
left: auto;
|
||||
right: 0em;
|
||||
}
|
||||
|
||||
#home h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
#home .masthead.segment .information {
|
||||
margin-left: 170px;
|
||||
}
|
||||
|
||||
#home .masthead.segment .image {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
#home .masthead.segment .button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#home .overview .divided.grid .header .icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#home .overview .divided.grid .header + p {
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
#home .masthead.segment .column {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
#home .masthead.segment .column p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#home .selection.list .right.floated {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
315
web/semantic/examples/homepage.html
Normal file
315
web/semantic/examples/homepage.html
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Standard Meta -->
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<!-- Site Properities -->
|
||||
<title>Homepage Example - Semantic</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
|
||||
<link rel="stylesheet" type="text/css" href="homepage.css">
|
||||
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
|
||||
<script src="../dist/semantic.js"></script>
|
||||
<script src="homepage.js"></script>
|
||||
|
||||
</head>
|
||||
<body id="home">
|
||||
<div class="ui inverted masthead segment">
|
||||
<div class="ui page grid">
|
||||
<div class="column">
|
||||
<div class="ui inverted blue menu">
|
||||
<div class="header item">Cat University</div>
|
||||
<div class="right menu">
|
||||
<div class="ui mobile dropdown link item">
|
||||
Menu
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
<a class="item">Classes</a>
|
||||
<a class="item">Cocktail Hours</a>
|
||||
<a class="item">Community</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui dropdown link item">
|
||||
Courses
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="menu">
|
||||
<a class="item">Petting</a>
|
||||
<a class="item">Feeding</a>
|
||||
<a class="item">Mind Reading</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="item">Library</a>
|
||||
<a class="item">Community</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="images/cat.png" class="ui medium image">
|
||||
<div class="ui hidden transition information">
|
||||
<h1 class="ui inverted header">
|
||||
An Old Cat Can Learn New Tricks
|
||||
</h1>
|
||||
<p>At least he won't reach his highest potential unless you enroll him in Cat University's 2013 class.</p>
|
||||
<div class="large basic inverted animated fade ui button">
|
||||
<div class="visible content">Come to ICU 2013</div>
|
||||
<div class="hidden content">Register Now</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui vertical feature segment">
|
||||
<div class="ui centered page grid">
|
||||
<div class="fourteen wide column">
|
||||
<div class="ui three column center aligned stackable divided grid">
|
||||
<div class="column">
|
||||
<div class="ui icon header">
|
||||
<i class="student icon"></i>
|
||||
Courses
|
||||
</div>
|
||||
<p>Take your kitty to a cat-ducation course and learn how to treat her well.</p>
|
||||
<p>
|
||||
<a class="ui button" href="#">
|
||||
Learn
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui icon header">
|
||||
<i class="code icon"></i>
|
||||
Library
|
||||
</div>
|
||||
<p>Dig through our cat library to found out amazing things you can do with your kitty.</p>
|
||||
<p>
|
||||
<a class="ui blue right labeled icon button" href="#">
|
||||
Research
|
||||
<i class="right chevron icon"></i>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui icon header">
|
||||
<i class="user icon"></i>
|
||||
Community
|
||||
</div>
|
||||
<p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p>
|
||||
<p>
|
||||
<a class="ui button" href="#">
|
||||
Share
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui inverted vertical segment">
|
||||
<div class="ui very relaxed stackable page grid">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h1 class="center aligned ui inverted header">
|
||||
The Best Cat Articles
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="ten wide column">
|
||||
<h3 class="ui inverted header">How to Win Your Cats Attention</h3>
|
||||
<p>Getting your cat to notice you is a large part of being a pet owner. Although I have a lot of patience for writing things about cats, perhaps this might be enough body copy to make this section of text look filled out.</p>
|
||||
<p>This and other tips can be found in our newsletter, amazing right?</p>
|
||||
<div class="ui basic inverted animated button button">
|
||||
<div class="visible content">Read More</div>
|
||||
<div class="hidden content"><i class="right arrow icon"></i></div>
|
||||
</div>
|
||||
<div class="ui inverted section divider"></div>
|
||||
<h3 class="ui inverted header">More articles</h3>
|
||||
<div class="ui inverted animated selection list">
|
||||
<div class="item">
|
||||
How to win in a fight with a cat
|
||||
<div class="right floated">Jan 20, 2023</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
A Supposedly Fun Cat Toy I will Never Buy Again
|
||||
<div class="right floated">Jan 1, 2023</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
Much ado about yarn
|
||||
<div class="right floated">Dec 20, 2022</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<div class="ui form segment">
|
||||
<h3 class="ui header">Bi-Daily Newsletter</h3>
|
||||
<p>Sign up and get spammed with cats every day. We have no unsubscribe button!</p>
|
||||
<div class="field">
|
||||
<div class="ui left icon action input">
|
||||
<i class="user icon"></i>
|
||||
<input name="email" type="text" placeholder="name@email.com">
|
||||
<div class="ui black submit button">Sign up</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui error message"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui vertical segment">
|
||||
<div class="ui stackable center aligned page grid">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h1 class="ui header">
|
||||
Many Companies Rely on Our Cat Knowledge
|
||||
</h1>
|
||||
<div class="ui horizontal divider"><i class="heart icon"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="four column logo row">
|
||||
<div class="column">
|
||||
<div class="ui shape">
|
||||
<div class="sides">
|
||||
<div class="active side">
|
||||
<i class="huge github icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge facebook icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge maxcdn icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge pinterest icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge weibo icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge flickr icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui shape">
|
||||
<div class="sides">
|
||||
<div class="side">
|
||||
<i class="huge github icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge facebook icon"></i>
|
||||
</div>
|
||||
<div class="active side">
|
||||
<i class="huge maxcdn icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge pinterest icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge weibo icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge flickr icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui shape">
|
||||
<div class="sides">
|
||||
<div class="side">
|
||||
<i class="huge github icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge facebook icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge maxcdn icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge pinterest icon"></i>
|
||||
</div>
|
||||
<div class="active side">
|
||||
<i class="huge weibo icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge flickr icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="ui shape">
|
||||
<div class="sides">
|
||||
<div class="side">
|
||||
<i class="huge github icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge facebook icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge maxcdn icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge pinterest icon"></i>
|
||||
</div>
|
||||
<div class="side">
|
||||
<i class="huge weibo icon"></i>
|
||||
</div>
|
||||
<div class="active side">
|
||||
<i class="huge flickr icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui inverted footer vertical segment">
|
||||
<div class="ui stackable center aligned page grid">
|
||||
<div class="ten wide column">
|
||||
<div class="ui three column center aligned stackable grid">
|
||||
<div class="column">
|
||||
<h5 class="ui inverted header">Courses</h5>
|
||||
<div class="ui inverted link list">
|
||||
<a class="item">Registration</a>
|
||||
<a class="item">Course Calendar</a>
|
||||
<a class="item">Professors</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h5 class="ui inverted header">Library</h5>
|
||||
<div class="ui inverted link list">
|
||||
<a class="item">A-Z</a>
|
||||
<a class="item">Most Popular</a>
|
||||
<a class="item">Recently Changed</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h5 class="ui inverted header">Community</h5>
|
||||
<div class="ui inverted link list">
|
||||
<a class="item">BBS</a>
|
||||
<a class="item">Careers</a>
|
||||
<a class="item">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<h5 class="ui inverted header">Contact Us</h5>
|
||||
<addr>
|
||||
237 Catberry Road <br>
|
||||
Milton Keynes, London <br>
|
||||
</addr>
|
||||
<p>(404) 867-5309</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
57
web/semantic/examples/homepage.js
Normal file
57
web/semantic/examples/homepage.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
$(document)
|
||||
.ready(function() {
|
||||
|
||||
var
|
||||
changeSides = function() {
|
||||
$('.ui.shape')
|
||||
.eq(0)
|
||||
.shape('flip over')
|
||||
.end()
|
||||
.eq(1)
|
||||
.shape('flip over')
|
||||
.end()
|
||||
.eq(2)
|
||||
.shape('flip back')
|
||||
.end()
|
||||
.eq(3)
|
||||
.shape('flip back')
|
||||
.end()
|
||||
;
|
||||
},
|
||||
validationRules = {
|
||||
firstName: {
|
||||
identifier : 'email',
|
||||
rules: [
|
||||
{
|
||||
type : 'empty',
|
||||
prompt : 'Please enter an e-mail'
|
||||
},
|
||||
{
|
||||
type : 'email',
|
||||
prompt : 'Please enter a valid e-mail'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
;
|
||||
|
||||
$('.ui.dropdown')
|
||||
.dropdown({
|
||||
on: 'hover'
|
||||
})
|
||||
;
|
||||
|
||||
$('.ui.form')
|
||||
.form(validationRules, {
|
||||
on: 'blur'
|
||||
})
|
||||
;
|
||||
|
||||
$('.masthead .information')
|
||||
.transition('scale in', 1000)
|
||||
;
|
||||
|
||||
setInterval(changeSides, 3000);
|
||||
|
||||
})
|
||||
;
|
||||
BIN
web/semantic/examples/images/bg.jpg
Normal file
BIN
web/semantic/examples/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
web/semantic/examples/images/cat.png
Normal file
BIN
web/semantic/examples/images/cat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
web/semantic/examples/images/wireframe/centered-paragraph.png
Normal file
BIN
web/semantic/examples/images/wireframe/centered-paragraph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
web/semantic/examples/images/wireframe/image-square.png
Normal file
BIN
web/semantic/examples/images/wireframe/image-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
web/semantic/examples/images/wireframe/image-text.png
Normal file
BIN
web/semantic/examples/images/wireframe/image-text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
web/semantic/examples/images/wireframe/image.png
Normal file
BIN
web/semantic/examples/images/wireframe/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
BIN
web/semantic/examples/images/wireframe/media-paragraph-alt.png
Normal file
BIN
web/semantic/examples/images/wireframe/media-paragraph-alt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
web/semantic/examples/images/wireframe/media-paragraph.png
Normal file
BIN
web/semantic/examples/images/wireframe/media-paragraph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
web/semantic/examples/images/wireframe/paragraph.png
Normal file
BIN
web/semantic/examples/images/wireframe/paragraph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
web/semantic/examples/images/wireframe/short-paragraph.png
Normal file
BIN
web/semantic/examples/images/wireframe/short-paragraph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
web/semantic/examples/images/wireframe/square-image.png
Normal file
BIN
web/semantic/examples/images/wireframe/square-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
web/semantic/examples/images/wireframe/text-image.png
Normal file
BIN
web/semantic/examples/images/wireframe/text-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
web/semantic/examples/images/wireframe/white-image.png
Normal file
BIN
web/semantic/examples/images/wireframe/white-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
49
web/semantic/examples/kitchensink.css
Normal file
49
web/semantic/examples/kitchensink.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/*******************************
|
||||
Global
|
||||
*******************************/
|
||||
|
||||
/*--------------
|
||||
Demo
|
||||
---------------*/
|
||||
|
||||
#sink {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#sink .demo.container {
|
||||
width: 700px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
#sink .demo.container .example {
|
||||
padding: 2em 0em;
|
||||
margin: 2em 0em;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
|
||||
#sink .demo h4 {
|
||||
font-size: 1.5em;
|
||||
margin: 2em 0em 1em;
|
||||
}
|
||||
#sink .demo.container .button.demo > .buttons,
|
||||
#sink .demo.container .button.demo > .button,
|
||||
#sink .demo.container .button.demo > .segment > .button {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#sink .demo.container h4:first-child {
|
||||
font-weight: bold !important;
|
||||
margin: 0em 0em 1em !important;
|
||||
}
|
||||
#sink .demo.container .example:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
#sink .demo.container .segment.example {
|
||||
z-index: 1;
|
||||
}
|
||||
#sink .demo.container .ui.label:not(.empty) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#sink .demo.container .segment .ui.label {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
5454
web/semantic/examples/kitchensink.html
Normal file
5454
web/semantic/examples/kitchensink.html
Normal file
File diff suppressed because it is too large
Load diff
Reference in a new issue