styled the categories (home) page

main
psychobunny 10 years ago
parent 0fceba09a5
commit 6622a827d4

@ -42,7 +42,7 @@
// //
//## Font, line-height, and color for body text, headings, and more. //## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;

@ -1,26 +1,66 @@
.categories { .categories {
list-style-type: none;
padding: 0;
} > li {
margin-bottom: 20px;
.motd { .icon {
margin-bottom: 1em; font-size: 17px;
padding: 14px;
border-radius: 50%;
line-height: 20px;
margin-right: 15px;
min-width: 46px;
min-height: 46px;
text-align: center;
margin-top: 2px;
}
&.default { h1 {
font-size: 22px;
margin: 0;
}
padding: 2em; .stats {
list-style-type: none;
h1 { li {
margin-top: 0; font-size: 20px;
text-align: center;
small {
text-transform: uppercase;
color: @gray-light;
font-weight: 300;
font-size: 12px;
}
}
} }
}
}
.footer { .card {
margin-top: 1em; border-left: 4px solid #ccc;
} padding-left: 20px;
text-align: left;
height: 53px;
margin-top: 2px;
overflow: hidden;
img {
border-radius: 50%;
width: 30px;
height: 30px;
}
.maintenance { p {
.well { font-size: 12px;
white-space: pre-line; margin: 0;
.emoji {
max-width: 12px;
max-height: 12px;
}
}
}
} }
} }

@ -1,3 +1,5 @@
@import url(//fonts.googleapis.com/css?family=Roboto:300,400,500,700);
.brand-primary { .brand-primary {
color: @brand-primary; color: @brand-primary;
} }
@ -228,4 +230,16 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
.badge { .badge {
vertical-align: 17%; vertical-align: 17%;
} }
//END: FIXES FOR BS3, may need to remove these when we get out of the RC releases //END: FIXES FOR BS3, may need to remove these when we get out of the RC releases
.maintenance {
.well {
white-space: pre-line;
}
}
.footer {
margin-top: 1em;
}

@ -1,56 +1,40 @@
<div class="row categories" itemscope itemtype="http://www.schema.org/ItemList"> <ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
<div class="col-sm-12"> <!-- BEGIN categories -->
<!-- BEGIN categories --> <li data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}" class="row">
<div class="{categories.class}" data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}"> <meta itemprop="name" content="{categories.name}">
<meta itemprop="name" content="{categories.name}">
<h4 class="category-title">
<!-- IF !categories.link -->
<span class="badge {categories.unread-class}">{categories.topic_count} </span>
<!-- ENDIF !categories.link -->
<!-- IF categories.link --> <div class="col-xs-7">
<a href="{categories.link}" itemprop="url" target="_blank"> <div class="icon pull-left" style="{function.generateCategoryBackground}">
<!-- ELSE --> <i class="fa {categories.icon}"></i>
<a href="{relative_path}/category/{categories.slug}" itemprop="url"> </div>
<!-- ENDIF categories.link -->
{categories.name}
</a>
</h4>
<!-- IF categories.link --> <h1 class="title pull-left">
<a style="color: {categories.color};" href="{categories.link}" itemprop="url" target="_blank"> <!-- IMPORT partials/categories/link.tpl --><br />
<!-- ELSE --> <small>{categories.description}</small>
<a style="color: {categories.color};" href="{relative_path}/category/{categories.slug}" itemprop="url"> </h1>
<!-- ENDIF categories.link --> </div>
<div
id="category-{categories.cid}" class="category-header category-header-image-{categories.imageClass}" <!-- IF !categories.link -->
title="{categories.description}" <ul class="stats">
style=" <li class="col-xs-1">
<!-- IF categories.backgroundImage -->background-image: url({categories.backgroundImage});<!-- ENDIF categories.backgroundImage --> <span class="{categories.unread-class}">{categories.topic_count}</span><br />
<!-- IF categories.bgColor -->background-color: {categories.bgColor};<!-- ENDIF categories.bgColor --> <small>Topics</small>
" </li>
> <li class="col-xs-1">
<div id="category-{categories.cid}" class="category-slider-{categories.post_count}"> <span class="{categories.unread-class}">{categories.post_count}</span><br />
<!-- IF categories.icon --> <small>Posts</small>
<div class="category-box"><i class="fa {categories.icon} fa-4x"></i></div> </li>
<!-- ENDIF categories.icon --> <li class="col-xs-3">
<div class="category-box" itemprop="description">{categories.description}</div> <!-- IMPORT partials/categories/lastpost.tpl -->
</li>
</ul>
<!-- ELSE -->
<div class="col-xs-3">
<!-- BEGIN posts -->
<div class="category-box">
<div class="post-preview">
<img src="{categories.posts.user.picture}" class="pull-left" />
<p class=""><strong>{categories.posts.user.username}</strong>: {categories.posts.content}</p>
</div>
</div>
<!-- END posts -->
<!-- IF categories.icon -->
<div class="category-box"><i class="fa {categories.icon} fa-4x"></i></div>
<!-- ENDIF categories.icon -->
</div>
</div>
</a>
</div> </div>
<!-- END categories --> <!-- ENDIF !categories.link -->
</div>
<div class="clearfix"></div>
</li>
<!-- END categories -->
</div> </div>

@ -47,7 +47,7 @@
</head> </head>
<body> <body>
<div class="navbar navbar-fixed-top header" role="navigation" id="header-menu"> <div class="navbar navbar-default navbar-fixed-top header" role="navigation" id="header-menu">
<div class="container"> <div class="container">
<!-- IMPORT partials/menu.tpl --> <!-- IMPORT partials/menu.tpl -->
</div> </div>

@ -0,0 +1,7 @@
<!-- BEGIN posts -->
<!-- IF @first -->
<div class="card" style="border-color: {categories.bgColor}">
<p class=""><strong>{categories.posts.user.username}</strong>: {categories.posts.content}</p>
</div>
<!-- ENDIF @first -->
<!-- END posts -->

@ -0,0 +1,7 @@
<!-- IF categories.link -->
<a href="{categories.link}" itemprop="url" target="_blank">
<!-- ELSE -->
<a href="{relative_path}/category/{categories.slug}" itemprop="url">
<!-- ENDIF categories.link -->
{categories.name}
</a>
Loading…
Cancel
Save