mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
News feed css and placeholder content
This commit is contained in:
Victoria Wang
parent
f36deda9e0
commit
2ec71cc659
3 changed files with 372 additions and 25 deletions
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
.interior .header-Outro h1 {
|
||||
font-size: 2.5em;
|
||||
margin-top: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.site-url {
|
||||
font-size:18px;
|
||||
|
|
@ -282,7 +282,7 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
.misc-icon {
|
||||
background: url(../img/misc-file.png) no-repeat -1px -1px;
|
||||
background: url(../img/misc-file.png) no-repeat 0px 0px;
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
display: block;
|
||||
|
|
@ -337,27 +337,80 @@
|
|||
.site-actions a {
|
||||
color: #666;
|
||||
}
|
||||
.page-with-columns .col-66 {
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
@media(min-width:1200px) {
|
||||
.container {
|
||||
width: 1200px;
|
||||
}
|
||||
}
|
||||
@media(min-width:700px) and (max-width:1200px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.content.misc-page.columns { //.colmask
|
||||
float: left;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.col-left {
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.page-with-columns .col-33 {
|
||||
padding: 30px;
|
||||
.right-menu {
|
||||
background: #FAF6F1;
|
||||
}
|
||||
.content.misc-page.columns {
|
||||
padding: 0;
|
||||
.right-menu .col-left {
|
||||
background-color: white;
|
||||
right: 33%;
|
||||
}
|
||||
.page-with-columns {
|
||||
.content.misc-page.columns .col {
|
||||
padding: 25px 30px 30px 30px;
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
.content.misc-page.columns .col-66 {
|
||||
width: 67%;
|
||||
left: 33%;
|
||||
}
|
||||
.content.misc-page.columns .col-33 {
|
||||
width: 33%;
|
||||
left: 33%;
|
||||
}
|
||||
.interior .header-Outro.with-columns {
|
||||
padding-top: 22px;
|
||||
}
|
||||
.header-Outro.with-columns h3 {
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
.header-Outro.with-columns .content {
|
||||
padding: 0;
|
||||
}
|
||||
.header-Outro.with-columns .col {
|
||||
padding-left: 0;
|
||||
padding: 25px 0 8px 30px;
|
||||
}
|
||||
.header-Outro.short h3 {
|
||||
.header-Outro.with-columns .col-32 {
|
||||
width: 33%;
|
||||
}
|
||||
.header-Outro.with-columns .col-66 {
|
||||
width: 67%;
|
||||
border-right: 1px solid #0B0F11;
|
||||
}
|
||||
.feed-filter {
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
margin-top: 1.5em;
|
||||
font-size: 0.8em;
|
||||
margin-left: 2.2em;
|
||||
}
|
||||
.interior .header-Outro .feed-filter a {
|
||||
color: white;
|
||||
margin-left: 13px;
|
||||
}
|
||||
.site-suggestion {
|
||||
float: left;
|
||||
|
|
@ -366,6 +419,21 @@
|
|||
margin-bottom: 20px;
|
||||
height: 160px;
|
||||
}
|
||||
.stats {
|
||||
margin-bottom: 2em;
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.content.misc-page.columns .stats .col {
|
||||
padding: 0;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.large-portrait {
|
||||
border: 10px solid white;
|
||||
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
}
|
||||
.site-portrait {
|
||||
border: 5px solid white;
|
||||
-moz-box-shadow: 1px 1px 2px 1px rgba(0,0,0,.2);
|
||||
|
|
@ -405,10 +473,130 @@ a.tag:hover {
|
|||
.following {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.following .avatar {
|
||||
.avatar {
|
||||
height:37px;
|
||||
width:37px;
|
||||
margin: 0 4px 4px 0;
|
||||
float: left;
|
||||
}
|
||||
.news-item {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.news-item.update, .news-item.tags, .news-item.comment.for-me, .news-item.tip.for-me {
|
||||
margin: 1.8em 0;
|
||||
}
|
||||
.news-item:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.news-item.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
.news-item .user {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
.news-item .comment {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
font-size: .8em;
|
||||
}
|
||||
.news-item.for-me .comment {
|
||||
color: #000;
|
||||
font-style: normal;
|
||||
margin-top: .2em;
|
||||
font-size: .9em;
|
||||
margin-bottom: -.4em;
|
||||
}
|
||||
.news-item .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #E6E6E6;
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.news-item.comment .icon {
|
||||
background: #DAEEA5;
|
||||
}
|
||||
.news-item.comment.for-me .icon, .news-item.tip.for-me .icon {
|
||||
background-size: 62px 62px;
|
||||
width: 82px;
|
||||
height: 62px;
|
||||
background-position: right top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.news-item .icon-mini {
|
||||
|
||||
}
|
||||
.news-item.update .icon {
|
||||
background: #E93250;
|
||||
}
|
||||
.news-item.tip .icon {
|
||||
background: #FFCC00;
|
||||
}
|
||||
.news-item.follow .icon {
|
||||
background: #3399CC;
|
||||
}
|
||||
.news-item .title {
|
||||
margin-bottom: .4em;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
.news-item .date {
|
||||
float: right;
|
||||
color: #aaa;
|
||||
font-size: 11px;
|
||||
margin-top: .5em;
|
||||
}
|
||||
.news-item .files {
|
||||
background: white;
|
||||
}
|
||||
.news-item .file {
|
||||
width: 90px;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.news-item .file a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.news-item .html-thumbnail {
|
||||
margin-top: 1px;
|
||||
margin-left: 0px;
|
||||
width: auto;
|
||||
}
|
||||
.news-item .site-suggestion {
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.news-item .tag {
|
||||
float: none;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.news-item .actions {
|
||||
font-size: 11px;
|
||||
}
|
||||
.news-item .actions a {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.news-item .content {
|
||||
padding: 0 0 0 32px;
|
||||
}
|
||||
.news-item .comments {
|
||||
margin-bottom: 1.5em;
|
||||
margin-top: .7em;
|
||||
}
|
||||
.news-item .comments .comment {
|
||||
font-size: .8em;
|
||||
}
|
||||
.news-item .comments .comment .user {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.news-item .comments .comment .actions {
|
||||
margin-top: .3em;
|
||||
}
|
||||
.news-item .avatar {
|
||||
margin-right: 10px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -2,17 +2,18 @@
|
|||
<div class="row content">
|
||||
<div class="col col-66">
|
||||
<h3>My Feed</h3>
|
||||
<p><a href="">All Activity</a> <a href="">Activity on your profile</a></p>
|
||||
<div class="feed-filter"><a href="">All Activity</a> <a href="">Activity on your profile</a></div>
|
||||
</div>
|
||||
<div class="col col-33">
|
||||
<div class="col col-32">
|
||||
<h3>My Website</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content misc-page columns">
|
||||
<div class="page-with-columns">
|
||||
<div class="container">
|
||||
<div class="content misc-page columns right-menu"><div class="col-left">
|
||||
<div class="col col-66">
|
||||
<% if false %>
|
||||
<div class="welcome">
|
||||
<h4>Welcome to your Neocities news feed!</h4>
|
||||
<p>You aren't following any websites yet! Once you do, updates will show up here and you can like and comment on them. Here are some website suggestions based on your tags, or <a href="/browse">check out all the sites on Neocities!</a></p>
|
||||
|
|
@ -84,16 +85,174 @@
|
|||
</div>
|
||||
<a class="tag" href="http://neocities.org">Games</a>
|
||||
</div>
|
||||
<% end %>
|
||||
<!-- --------------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<!-- need to add a class of "first" to the first news-item element -->
|
||||
|
||||
<div class="news-item comment">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
<a href="" class="user">Foo</a> commented on <a href="" class="user">Derp's</a> website: <a href="" class="comment">I really like your site, your graphics are awesome and...</a>
|
||||
<span class="date">30m</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-item tags">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
New sites in <a href="" class="tag">games</a><span class="date">3h</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="site-suggestion">
|
||||
<div class="site-portrait">
|
||||
<a href="http://dragonquest.neocities.org">
|
||||
<img src="http://neocities.org/site_screenshots/dragonquest.jpg">
|
||||
<span class="caption">dragonquest</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-suggestion">
|
||||
<div class="site-portrait">
|
||||
<a href="http://dragonquest.neocities.org">
|
||||
<img src="http://neocities.org/site_screenshots/dragonquest.jpg">
|
||||
<span class="caption">dragonquest</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-suggestion">
|
||||
<div class="site-portrait">
|
||||
<a href="http://dragonquest.neocities.org">
|
||||
<img src="http://neocities.org/site_screenshots/dragonquest.jpg">
|
||||
<span class="caption">dragonquest</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-suggestion">
|
||||
<div class="site-portrait">
|
||||
<a href="http://dragonquest.neocities.org">
|
||||
<img src="http://neocities.org/site_screenshots/dragonquest.jpg">
|
||||
<span class="caption">dragonquest</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item follow">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
<a href="" class="user">Foo</a> followed <a href="" class="user">Derp's</a> website<span class="date">7h</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item tip">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
You tipped <a href="" class="user">Derp's</a> website: <a href="" class="comment">Wow, great work here! Please keep updating :)</a><span class="date">Apr 23</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item comment">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
<a href="" class="user">Foo</a> commented on <a href="" class="user">Derp's</a> website: <a href="" class="comment">I had a question - how did you make it so that the...</a>
|
||||
<span class="date">Apr 20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item follow">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
You followed <a href="" class="user">Derp's</a> website<span class="date">Apr 7</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item update">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
<a href="" class="user">Derp</a> made an update <span class="date">Apr 7</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="files">
|
||||
<div class="file">
|
||||
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">css</span><span class="title">styles.css</span></a></div>
|
||||
</div>
|
||||
<div class="file">
|
||||
<div class="html-thumbnail html"><a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg"><span class="title">styles.css</span></a></div>
|
||||
</div>
|
||||
<div class="file">
|
||||
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">js</span><span class="title">styles.css</span></a></div>
|
||||
</div>
|
||||
<div class="file">
|
||||
<div class="html-thumbnail image"><a href=""><img src="/site_thumbnails/victoria/constructioncat2.png.105x63.png"><span class="title">cat.jpg</span></a></div>
|
||||
</div>
|
||||
<div class="file">
|
||||
<div class="html-thumbnail misc"><a href=""><span class="misc-icon">js</span><span class="title">styles.css</span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item comment for-me">
|
||||
<div class="title">
|
||||
<div class="icon" style="background-image:url(https://neocities.org/site_screenshots/codeventurer.jpg);"></div>
|
||||
<a href="" class="user">Derpie</a>
|
||||
<span class="date">Apr 7</span>
|
||||
<div class="comment">Your site is amazing. Very helpful information. Would love to see more updates if you have time. Your site is amazing. Very helpful information. Would love to see more updates if you have time. </div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
|
||||
<div class="comments">
|
||||
<div class="comment">
|
||||
<img class="avatar" src="https://neocities.org/site_screenshots/victoria.jpg">
|
||||
<a href="" class="user">victoria</a> Indeed, it's great!<span class="date">Apr 7</span>
|
||||
<div class="actions"><a href="">Like (1)</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item comment">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
<a href="" class="user">Foo</a> commented on <a href="" class="user">Derp's</a> website: <a href="" class="comment">I had a question - how did you make it so that the...</a>
|
||||
<span class="date">Apr 7</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item follow">
|
||||
<div class="title">
|
||||
<div class="icon"></div>
|
||||
You followed <a href="" class="user">Derp's</a> website<span class="date">Apr 7</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item tip for-me">
|
||||
<div class="title">
|
||||
<div class="icon" style="background-image:url(https://neocities.org/site_screenshots/victoria.jpg);"></div>
|
||||
<a href="" class="user">victoria</a> tipped you .01 BTC
|
||||
<span class="date">Apr 7</span>
|
||||
<div class="comment">Hey, this looks great!</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="actions"><a href="">Like (1)</a> <a href="">Reply</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col col-33">
|
||||
<p class="site-url"><a href="http://<%= current_site.username %>.neocities.org" target="_blank">http://<%= current_site.username %>.neocities.org</a></p>
|
||||
<div>Last updated <strong><%= current_site.updated_at.ago %></strong></div>
|
||||
<div><strong><%= current_site.hits.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %></strong> hits
|
||||
24 followers
|
||||
3 tips ($13.55)
|
||||
<div class="stats">
|
||||
<div class="col col-50">Last updated<br><strong><%= current_site.updated_at.ago %></strong></div>
|
||||
<div class="col col-50">
|
||||
<div><strong><%= current_site.hits.to_s.reverse.gsub(/...(?=.)/,'\&,').reverse %></strong> hits</div>
|
||||
<div><strong>24</strong> followers</div>
|
||||
<div><strong>3</strong> tips ($13.55)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg" style="width:340px"></a>
|
||||
<a href=""><img src="http://neocities.org/site_screenshots/codeventurer.jpg" style="width:340px" class="large-portrait"></a>
|
||||
|
||||
<h3>Following</h3>
|
||||
<div class="following">
|
||||
|
|
@ -123,5 +282,5 @@
|
|||
<a class="tag" href="http://neocities.org">Art</a>
|
||||
<a class="tag" href="http://neocities.org">Cooking</a>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue