zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-25 09:42:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

merge fixes for design updates

Browse source
This commit is contained in:
Kyle Drake 2013-07-30 00:21:25 +02:00
commit c567da49b7
25 changed files with 487 additions and 438 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
public/assets/css/_base-sass/_forms.scss
View file

@ -18,18 +18,36 @@ legend, .legend{
} }
/* Text Input Areas & Labels */ /* Text Input Areas & Labels */
.text-Label{font-family:$arial; cursor:pointer; display:block; margin-bottom:$spacing} .text-Label{
font-family:$arial;
cursor:pointer;
display:block;
margin-bottom:$spacing;
}
.dis-Label{cursor:not-allowed} .dis-Label{cursor:not-allowed}
.input-Area, %input-Area{ .input-Area, %input-Area{
background:#fff; border:1px solid $c-Border; font-family:$arial; line-height:1.25; background:#fff;
margin-bottom:$spacing*2; padding:$spacing*2 $spacing; width:50%; border:1px solid $c-Border;
&:focus{background:$c-Lighter; border:1px solid #50B6D5; @include box-shadow($bs-2)} font-family:$arial;
line-height:1.25;
margin-bottom:$spacing*2;
padding:$spacing*2 $spacing;
width:80%;
&:focus{
background:$c-Lighter;
border:1px solid #50B6D5;
@include box-shadow($bs-2)
}
} }
.text-Area{ .text-Area{
@extend %input-Area; @extend %input-Area;
display:block; min-height:150px; resize:vertical; width:100% display:block;
min-height:150px;
resize:vertical;
width:100%;
} }
/* Check/Radio Inputs & Labels */ /* Check/Radio Inputs & Labels */
@ -97,3 +115,20 @@ legend, .legend{
@extend %input-Area; @extend %input-Area;
font-size:$base; font-size:$base;
} }
::-webkit-input-placeholder { /* WebKit browsers */
color:$placeholderColor;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:$placeholderColor;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:$placeholderColor;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:$placeholderColor;
font-style: italic;
}

6
public/assets/css/_helper-sass/_layout.scss
View file

@ -20,7 +20,11 @@
// to absolutely make sure there is no extra margin, 0!important is used // to absolutely make sure there is no extra margin, 0!important is used
padding-left:$spacing*5; padding-left:$spacing*5;
position:relative; position:relative;
width:100%; // default width is 100%. width:100%; // default width is 100%
@media (max-device-width:480px), screen and (max-width:800px){
float:none;
padding:0;
}
} }
// Convert columns to inline-blocks so we can center them when our row does not add up to 100% // Convert columns to inline-blocks so we can center them when our row does not add up to 100%

9
public/assets/css/_project-sass/_project-Base.scss
View file

@ -17,8 +17,13 @@ body{background:#CCDF9B}
// Generic tag to wrap around content within sections to apply a max width to the interior content // Generic tag to wrap around content within sections to apply a max width to the interior content
// while allowing for larger sections to expand the whole page for BG purposes // while allowing for larger sections to expand the whole page for BG purposes
.content{ .content{
margin:0 auto; max-width:1000px; padding:$spacing*5; margin:0 auto;
& > :last-child{margin-bottom:0} // kill any extra margin on the last element in the .content div max-width:1000px;
padding:$spacing*5;
& > :last-child{
margin-bottom:0; // kill any extra margin on the last element in the .content div
}
} }
// ---------------------------------------------------------------- // ----------------------------------------------------------------

52
public/assets/css/_project-sass/_project-Footer.scss
View file

@ -23,14 +23,10 @@
@include box-shadow($bs-4); @include box-shadow($bs-4);
position:relative; position:relative;
.footer-Content { .footer-Content{
padding-top:40px; padding-top:40px;
padding-bottom:40px; padding-bottom:40px;
} }
h2 {
font-size: 1.45em;
}
} }
.f-Col{ .f-Col{
@ -41,7 +37,8 @@
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
min-height:2px; min-height:2px;
padding:0; padding-left:15px!important;
padding-right:100px!important;
} }
.action-Link{ .action-Link{
@ -50,27 +47,33 @@
right:$spacing*3; right:$spacing*3;
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
position: static position:static;
} }
} }
} }
.footer-icon { .footer-icon {
background-repeat: no-repeat; background-repeat:no-repeat;
display: block; position:absolute;
position: absolute; right:0;
right: 0px; top:-70px;
top: -70px;
@media (max-device-width:480px), screen and (max-width:800px){
@include vendor(background-size, 100%);
height:90px!important;
top:0;
width:77px!important;
}
} }
.f-Col-1{ .f-Col-1{
padding-right:$spacing*3; padding-right:$spacing*3;
.footer-icon { .footer-icon{
background-image: url(../img/support-us.png); background-image: url(../img/support-us.png);
width: 92px; height:104px;
height: 104px; right:5px;
right: 5px; width:92px;
} }
} }
@ -82,8 +85,12 @@
border-bottom:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1);
border-top:1px solid rgba(0,0,0,.1); border-top:1px solid rgba(0,0,0,.1);
margin:20px 0; margin:20px 0;
overflow: hidden; overflow:hidden;
padding:20px 0; padding:20px 0;
.footer-icon{
top:14px
}
} }
&:before, &:after { &:before, &:after {
@ -96,7 +103,7 @@
width:1px; width:1px;
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
display:none display:none;
} }
} }
@ -112,11 +119,14 @@
.f-Col-3{ .f-Col-3{
padding-left:20px; padding-left:20px;
@media(max-device-width:480px), screen and (max-width:800px){
padding-left:0;
}
.footer-icon { .footer-icon{
background-image: url(../img/latest-news.png); background-image: url(../img/latest-news.png);
width: 134px; height:103px;
height: 103px; width:134px;
} }
} }

93
public/assets/css/_project-sass/_project-Header.scss
View file

@ -11,10 +11,8 @@
} }
.header-Content{ .header-Content{
padding-top: 22px; @media(max-device-width:480px), screen and (max-width:800px){
@extend .content; padding:0;
@media (max-device-width:480px), screen and (max-width:800px){
padding:0
} }
} }
@ -26,27 +24,18 @@
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
@include vendor(background-size, cover); @include vendor(background-size, cover);
min-height:2px min-height:2px;
} }
} }
$outroShadow:inset 0px 7px 10px 0px rgba(0, 0, 0, 0.10);
.header-Outro{ .header-Outro{
background:#30424b; background:#30424b -moz-linear-gradient(top, #2b3c43 0%, #354751 100%); /* FF3.6+ */
background:#30424b -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3c43), color-stop(100%,#354751)); /* Chrome,Safari4+ */
background: -moz-linear-gradient(top, #2b3c43 0%, #354751 100%); /* FF3.6+ */ background:#30424b -webkit-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Chrome10+,Safari5.1+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3c43), color-stop(100%,#354751)); /* Chrome,Safari4+ */ background:#30424b -o-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Opera 11.10+ */
background: -webkit-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Chrome10+,Safari5.1+ */ background:#30424b -ms-linear-gradient(top, #2b3c43 0%,#354751 100%); /* IE10+ */
background: -o-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Opera 11.10+ */ background:#30424b linear-gradient(to bottom, #2b3c43 0%,#354751 100%); /* W3C */
background: -ms-linear-gradient(top, #2b3c43 0%,#354751 100%); /* IE10+ */ @include box-shadow($outroShadow);
background: linear-gradient(to bottom, #2b3c43 0%,#354751 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b3c43', endColorstr='#354751',GradientType=0 ); /* IE6-9 */
-moz-box-shadow:$outroShadow;
-webkit-box-shadow:$outroShadow;
box-shadow:$outroShadow;
color:#fafafa; color:#fafafa;
} }
@ -60,15 +49,15 @@ $outroShadow:inset 0px 7px 10px 0px rgba(0, 0, 0, 0.10);
li{ li{
padding-left:$spacing*9; padding-left:$spacing*9;
padding-right:$spacing*3; padding-right:$spacing*3;
margin-bottom: 18px; margin-bottom:18px;
} }
h2{ h2{
font-size:22px;
margin-bottom:2px; margin-bottom:2px;
} }
p {
color: #B2BCC1; p{
color:#B2BCC1;
} }
} }
@ -88,7 +77,6 @@ $outroShadow:inset 0px 7px 10px 0px rgba(0, 0, 0, 0.10);
.intro-Icon{ .intro-Icon{
background-position:0 -40px; background-position:0 -40px;
} }
} }
@ -97,25 +85,23 @@ $outroShadow:inset 0px 7px 10px 0px rgba(0, 0, 0, 0.10);
position:relative position:relative
} }
$signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
.signup-Form{ .signup-Form{
background:#354751; background:#354751;
border-radius:4px 4px 0 0; border-radius:4px 4px 0 0;
@include box-shadow($signupShadow);
height:600%; height:600%;
overflow:hidden; overflow:hidden;
position:absolute; position:absolute;
top:-45px; top:-45px;
width:95%;
-moz-box-shadow:$signupShadow;
-webkit-box-shadow:$signupShadow;
box-shadow:$signupShadow;
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
height:auto; height:auto;
margin:0; margin:0;
overflow:visible; overflow:visible;
padding-bottom:20px;
position:static; position:static;
width:auto;
} }
h2{ h2{
@ -123,54 +109,38 @@ $signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
text-shadow:0 1px 1px rgba(0,0,0,.5); text-shadow:0 1px 1px rgba(0,0,0,.5);
font-size: 1.8em; font-size: 1.8em;
} }
hr{ hr{
border-bottom:1px solid #4a6677; border-bottom:1px solid #4a6677;
border-top:1px solid #1d282d; border-top:1px solid #1d282d;
margin:4px 0 22px; margin:4px 0 22px;
} }
fieldset{ fieldset{
background:url(../img/sign-up-bg.png) repeat-x center top; background:url(../img/sign-up-bg.png) repeat-x center top;
padding: 20px 33px; padding: 20px 33px;
} }
label{ label{
color:#81b8c6; color:#81b8c6;
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
font-size:70% font-size:70%
} }
} }
$inputAreaShadow:inset 1px 3px 10px 0px rgba(0, 0, 0, 0.20);
.input-Area{ .input-Area{
background:#29383f; background:#29383f;
border:0px solid black; border:0 solid black;
@include box-shadow($inputAreaShadow);
color:#557380; color:#557380;
margin-bottom:$spacing*7; margin-bottom:$spacing*7;
margin-right:$spacing; margin-right:$spacing;
padding: 11px 12px 9px 12px; padding: 11px 12px 9px 12px;
width:62%; width:62%;
-moz-box-shadow:$inputAreaShadow;
-webkit-box-shadow:$inputAreaShadow;
box-shadow:$inputAreaShadow;
&:focus{color:#eee} &:focus{color:#eee}
} }
$placeholderColor: #5E7F8D;
::-webkit-input-placeholder { /* WebKit browsers */
color:$placeholderColor;
font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:$placeholderColor;
font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:$placeholderColor;
font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color:$placeholderColor;
font-style: italic;
}
.btn-Action{ .btn-Action{
padding:10px 25px; padding:10px 25px;
} }
@ -274,14 +244,12 @@ $signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
} }
} }
.hp h1.logo { .hp .logo{
padding-top: 45px; padding-top:45px;
padding-bottom: 0;
}
.hp h1.logo img {
margin-left: -10px;
@media (max-device-width:480px), screen and (max-width:800px){ @media (max-device-width:480px), screen and (max-width:800px){
margin-left: 20px; padding-left:20px;
padding-right:20px;
} }
} }
@ -327,6 +295,7 @@ $signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
position:absolute; position:absolute;
top:0; top:0;
width:70px; width:70px;
z-index:9;
} }
.interior .header-Nav{ .interior .header-Nav{

37
public/assets/css/_project-sass/_project-Main.scss
View file

@ -22,41 +22,8 @@
max-width:800px; max-width:800px;
} }
// Additional Content Area stylings go below...
.website-Gallery{
list-style:none;
margin:0;
padding:0;
li{
@extend .col-25;
float:left;
margin-bottom:$spacing*2;
@media (max-device-width:480px), screen and (max-width:800px){
width:50%
}
}
a{
padding:0 $spacing*2;
display:block;
&:hover{
}
img{
background:#fff;
@include box-shadow($bs-4);
display:block;
padding:$spacing*2;
width:100%;
}
}
}
// About page // About page
.twitter-tweet.twitter-tweet-rendered{margin:0 auto 30px!important} .twitter-tweet.twitter-tweet-rendered{margin:0 auto 30px!important}
// Dashboard
.dash-SS{border:1px solid #ccc; background:rgba(255,255,255,.7); padding:1em; margin-bottom:20px}

9
public/assets/css/_project-sass/_project-Vars.scss
View file

@ -45,6 +45,9 @@ $c-Highlight: #ff0;
$c-Underline: #ccc; // not for links $c-Underline: #ccc; // not for links
$c-Border: #ccc; $c-Border: #ccc;
// Place holder for inputs
$placeholderColor:#5E7F8D;
// ---------------------------------------------------------------- // ----------------------------------------------------------------
// Fonts Families // Fonts Families
@ -69,7 +72,7 @@ $alpha: $base-font-multiplier * 3.125; // 50px
$beta: $base-font-multiplier * 2.5; // 40px $beta: $base-font-multiplier * 2.5; // 40px
$gamma: $base-font-multiplier * 2; // 32px $gamma: $base-font-multiplier * 2; // 32px
$delta: $base-font-multiplier * 1.625; // 26px $delta: $base-font-multiplier * 1.625; // 26px
$eps: $base-font-multiplier * 1.25; // 20px $eps: $base-font-multiplier * 1.375; // 22px
$zeta: $base-font-multiplier * 1.125; // 18px $zeta: $base-font-multiplier * 1.125; // 18px
$base: $base-font-multiplier; // 16px $base: $base-font-multiplier; // 16px
@ -93,6 +96,10 @@ $bs-4: 0 8px 8px -8px rgba(0,0,0,.2);
$bs-5: $bs-4, 0 0 6px rgba(0,0,0,.75) inset; $bs-5: $bs-4, 0 0 6px rgba(0,0,0,.75) inset;
$bs-6: 0 0 6px rgba(255,255,255,.5) inset; $bs-6: 0 0 6px rgba(255,255,255,.5) inset;
$outroShadow:inset 0 7px 10px 0 rgba(0, 0, 0, 0.10);
$signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
$inputAreaShadow:inset 1px 3px 10px 0px rgba(0, 0, 0, 0.20);
// ---------------------------------------------------------------- // ----------------------------------------------------------------
// Layout // Layout

36
public/assets/css/_project-sass/_project-Website-Gallery.scss Normal file
View file

@ -0,0 +1,36 @@
// ----------------------------------------------------------------
// Project Specific: Browse Websites Gallery
// ----------------------------------------------------------------
.website-Gallery{
list-style:none;
margin:0 auto;
padding:0;
width:90%;
li{
@extend .col-25;
float:left;
margin-bottom:$spacing*2;
@media (max-device-width:480px), screen and (max-width:800px){width:50%}
}
a{
padding:0 $spacing*2;
display:block;
}
}
.neo-SS{
background:#fff;
@include box-shadow($bs-4);
display:block;
height:auto!important;
padding:$spacing*2;
width:100%;
}
.hp-Gallery img{
width:100%
}

204
public/assets/css/neo.css
View file

@ -67,7 +67,7 @@ blockquote {
font-size: 1.125em; font-size: 1.125em;
font-style: italic; } font-style: italic; }
blockquote:before, blockquote:after { blockquote:before, blockquote:after {
font-size: 1.25em; font-size: 1.375em;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
position: relative; position: relative;
@ -219,6 +219,10 @@ table {
padding-left: 20px; padding-left: 20px;
position: relative; position: relative;
width: 100%; } width: 100%; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.col {
float: none;
padding: 0; } }
.c-Row { .c-Row {
font-size: 0; font-size: 0;
@ -306,7 +310,7 @@ nav a {
padding: 8px 12px; } padding: 8px 12px; }
legend, .legend { legend, .legend {
font-size: 1.25em; font-size: 1.375em;
margin-left: -4px; margin-left: -4px;
padding: 0 4px; } padding: 0 4px; }
@ -327,7 +331,7 @@ legend, .legend {
line-height: 1.25; line-height: 1.25;
margin-bottom: 8px; margin-bottom: 8px;
padding: 8px 4px; padding: 8px 4px;
width: 50%; } width: 80%; }
.input-Area:focus, .text-Area:focus, .select-Container:focus, .input-Number:focus { .input-Area:focus, .text-Area:focus, .select-Container:focus, .input-Number:focus {
background: #f8f8f8; background: #f8f8f8;
border: 1px solid #50B6D5; border: 1px solid #50B6D5;
@ -446,6 +450,26 @@ legend, .legend {
.input-Number { .input-Number {
font-size: 1em; } font-size: 1em; }
::-webkit-input-placeholder {
/* WebKit browsers */
color: #5e7f8d;
font-style: italic; }
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #5e7f8d;
font-style: italic; }
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #5e7f8d;
font-style: italic; }
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #5e7f8d;
font-style: italic; }
.btn, .btn-Radio, .btn-Check, .btn-Small, .btn-Large, .btn-XLarge, .btn-Wide, .btn-Action, .btn-Action-2, .btn-Action-3, .btn-Neg, .btn, .btn-Radio, .btn-Check, .btn-Small, .btn-Large, .btn-XLarge, .btn-Wide, .btn-Action, .btn-Action-2, .btn-Action-3, .btn-Neg,
.btn-Neg:hover, .btn-Disable, .btn-Square, .btn-Round { .btn-Neg:hover, .btn-Disable, .btn-Square, .btn-Round {
background: #343434; background: #343434;
@ -868,7 +892,7 @@ h4, .delta {
font-weight: 300; } font-weight: 300; }
h5, .eps { h5, .eps {
font-size: 1.25em; font-size: 1.375em;
font-weight: 300; } font-weight: 300; }
h6, .zeta { h6, .zeta {
@ -909,11 +933,11 @@ body {
.page { .page {
min-height: 25px; } } min-height: 25px; } }
.content, .header-Content, .footer-Content { .content, .footer-Content {
margin: 0 auto; margin: 0 auto;
max-width: 1000px; max-width: 1000px;
padding: 20px; } padding: 20px; }
.content > :last-child, .header-Content > :last-child, .footer-Content > :last-child { .content > :last-child, .footer-Content > :last-child {
margin-bottom: 0; } margin-bottom: 0; }
a { a {
@ -943,9 +967,7 @@ a {
min-height: 42px; min-height: 42px;
overflow: hidden; } overflow: hidden; }
.header-Content { @media (max-device-width: 480px), screen and (max-width: 800px) {
padding-top: 22px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.header-Content { .header-Content {
padding: 0; } } padding: 0; } }
@ -965,24 +987,21 @@ a {
min-height: 2px; } } min-height: 2px; } }
.header-Outro { .header-Outro {
background: #30424b; background: #30424b -moz-linear-gradient(top, #2b3c43 0%, #354751 100%);
background: -moz-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* FF3.6+ */ /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b3c43), color-stop(100%, #354751)); background: #30424b -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b3c43), color-stop(100%, #354751));
/* Chrome,Safari4+ */ /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b3c43 0%, #354751 100%); background: #30424b -webkit-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* Chrome10+,Safari5.1+ */ /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2b3c43 0%, #354751 100%); background: #30424b -o-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* Opera 11.10+ */ /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2b3c43 0%, #354751 100%); background: #30424b -ms-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* IE10+ */ /* IE10+ */
background: linear-gradient(to bottom, #2b3c43 0%, #354751 100%); background: #30424b linear-gradient(to bottom, #2b3c43 0%, #354751 100%);
/* W3C */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2b3c43', endColorstr='#354751',GradientType=0 ); -moz-box-shadow: inset 0 7px 10px 0 rgba(0, 0, 0, 0.1);
/* IE6-9 */ -webkit-box-shadow: inset 0 7px 10px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: inset 0 7px 10px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 7px 10px 0px rgba(0, 0, 0, 0.1);
color: #fafafa; } color: #fafafa; }
@media (max-device-width: 480px), screen and (max-width: 800px) { @media (max-device-width: 480px), screen and (max-width: 800px) {
@ -994,7 +1013,6 @@ a {
padding-right: 12px; padding-right: 12px;
margin-bottom: 18px; } margin-bottom: 18px; }
.intro-List h2 { .intro-List h2 {
font-size: 22px;
margin-bottom: 2px; } margin-bottom: 2px; }
.intro-List p { .intro-List p {
color: #B2BCC1; } color: #B2BCC1; }
@ -1023,19 +1041,22 @@ a {
.signup-Form { .signup-Form {
background: #354751; background: #354751;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
-moz-box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
height: 600%; height: 600%;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: -45px; top: -45px;
-moz-box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15); width: 95%; }
-webkit-box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
box-shadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15); }
@media (max-device-width: 480px), screen and (max-width: 800px) { @media (max-device-width: 480px), screen and (max-width: 800px) {
.signup-Form { .signup-Form {
height: auto; height: auto;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
position: static; } } padding-bottom: 20px;
position: static;
width: auto; } }
.signup-Form h2 { .signup-Form h2 {
margin-bottom: 0; margin-bottom: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
@ -1054,33 +1075,17 @@ a {
font-size: 70%; } } font-size: 70%; } }
.signup-Form .input-Area { .signup-Form .input-Area {
background: #29383f; background: #29383f;
border: 0px solid black; border: 0 solid black;
-moz-box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2);
color: #557380; color: #557380;
margin-bottom: 28px; margin-bottom: 28px;
margin-right: 4px; margin-right: 4px;
padding: 11px 12px 9px 12px; padding: 11px 12px 9px 12px;
width: 62%; width: 62%; }
-moz-box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 1px 3px 10px 0px rgba(0, 0, 0, 0.2); }
.signup-Form .input-Area:focus { .signup-Form .input-Area:focus {
color: #eee; } color: #eee; }
.signup-Form ::-webkit-input-placeholder {
/* WebKit browsers */
color: #5e7f8d;
font-style: italic; }
.signup-Form :-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #5e7f8d;
font-style: italic; }
.signup-Form ::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #5e7f8d;
font-style: italic; }
.signup-Form :-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #5e7f8d;
font-style: italic; }
.signup-Form .btn-Action { .signup-Form .btn-Action {
padding: 10px 25px; } padding: 10px 25px; }
@ -1169,15 +1174,12 @@ a {
.hp .hp-Logo.in-View { .hp .hp-Logo.in-View {
left: -90px !important; } } left: -90px !important; } }
.hp h1.logo { .hp .logo {
padding-top: 45px; padding-top: 45px; }
padding-bottom: 0; }
.hp h1.logo img {
margin-left: -10px; }
@media (max-device-width: 480px), screen and (max-width: 800px) { @media (max-device-width: 480px), screen and (max-width: 800px) {
.hp h1.logo img { .hp .logo {
margin-left: 20px; } } padding-left: 20px;
padding-right: 20px; } }
.constant-Nav { .constant-Nav {
margin-left: -88px; margin-left: -88px;
@ -1217,7 +1219,8 @@ a {
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
width: 70px; } width: 70px;
z-index: 9; }
.interior .header-Nav { .interior .header-Nav {
padding-left: 70px; } padding-left: 70px; }
@ -1239,31 +1242,15 @@ a {
.single-Col { .single-Col {
max-width: 800px; } max-width: 800px; }
.website-Gallery {
list-style: none;
margin: 0;
padding: 0; }
.website-Gallery li {
float: left;
margin-bottom: 8px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.website-Gallery li {
width: 50%; } }
.website-Gallery a {
padding: 0 8px;
display: block; }
.website-Gallery a img {
background: #fff;
-moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
display: block;
padding: 8px;
width: 100%; }
.twitter-tweet.twitter-tweet-rendered { .twitter-tweet.twitter-tweet-rendered {
margin: 0 auto 30px !important; } margin: 0 auto 30px !important; }
.dash-SS {
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.7);
padding: 1em;
margin-bottom: 20px; }
.footer-Base { .footer-Base {
color: #5e5b56; } color: #5e5b56; }
.footer-Base h1, .footer-Base h2, .footer-Base h3, .footer-Base h4 { .footer-Base h1, .footer-Base h2, .footer-Base h3, .footer-Base h4 {
@ -1279,8 +1266,6 @@ a {
.footer-Intro .footer-Content { .footer-Intro .footer-Content {
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; } padding-bottom: 40px; }
.footer-Intro h2 {
font-size: 1.45em; }
.f-Col { .f-Col {
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
@ -1292,7 +1277,8 @@ a {
@media (max-device-width: 480px), screen and (max-width: 800px) { @media (max-device-width: 480px), screen and (max-width: 800px) {
.f-Col { .f-Col {
min-height: 2px; min-height: 2px;
padding: 0; } } padding-left: 15px !important;
padding-right: 100px !important; } }
.f-Col .action-Link { .f-Col .action-Link {
bottom: 0; bottom: 0;
position: absolute; position: absolute;
@ -1303,18 +1289,27 @@ a {
.footer-icon { .footer-icon {
background-repeat: no-repeat; background-repeat: no-repeat;
display: block;
position: absolute; position: absolute;
right: 0px; right: 0;
top: -70px; } top: -70px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.footer-icon {
-moz-background-size: 100%;
-ms-background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%;
background-size: 100%;
height: 90px !important;
top: 0;
width: 77px !important; } }
.f-Col-1 { .f-Col-1 {
padding-right: 12px; } padding-right: 12px; }
.f-Col-1 .footer-icon { .f-Col-1 .footer-icon {
background-image: url(../img/support-us.png); background-image: url(../img/support-us.png);
width: 92px;
height: 104px; height: 104px;
right: 5px; } right: 5px;
width: 92px; }
.f-Col-2 { .f-Col-2 {
padding-left: 15px; padding-left: 15px;
@ -1326,7 +1321,9 @@ a {
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
margin: 20px 0; margin: 20px 0;
overflow: hidden; overflow: hidden;
padding: 20px 0; } } padding: 20px 0; }
.f-Col-2 .footer-icon {
top: 14px; } }
.f-Col-2:before, .f-Col-2:after { .f-Col-2:before, .f-Col-2:after {
background: url("../img/border.png") no-repeat 0 -20px; background: url("../img/border.png") no-repeat 0 -20px;
content: ""; content: "";
@ -1349,10 +1346,13 @@ a {
.f-Col-3 { .f-Col-3 {
padding-left: 20px; } padding-left: 20px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.f-Col-3 {
padding-left: 0; } }
.f-Col-3 .footer-icon { .f-Col-3 .footer-icon {
background-image: url(../img/latest-news.png); background-image: url(../img/latest-news.png);
width: 134px; height: 103px;
height: 103px; } width: 134px; }
.footer-Outro { .footer-Outro {
background: #ccdf9b; background: #ccdf9b;
@ -1382,3 +1382,31 @@ a {
.alert { .alert {
background-color: #F39C12; background-color: #F39C12;
color: #fff; } color: #fff; }
.website-Gallery {
list-style: none;
margin: 0 auto;
padding: 0;
width: 90%; }
.website-Gallery li {
float: left;
margin-bottom: 8px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.website-Gallery li {
width: 50%; } }
.website-Gallery a {
padding: 0 8px;
display: block; }
.neo-SS {
background: #fff;
-moz-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.2);
display: block;
height: auto !important;
padding: 8px;
width: 100%; }
.hp-Gallery img {
width: 100%; }

2
public/assets/css/neo.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
public/assets/css/neo.scss
View file

@ -25,8 +25,8 @@
@import '_project-sass/project-Type'; // colors, fonts, sizes @import '_project-sass/project-Type'; // colors, fonts, sizes
@import '_project-sass/project-Base'; // restyle and make classes specific for your project here @import '_project-sass/project-Base'; // restyle and make classes specific for your project here
// Print Styling // Specific Modules
//@import '_project-sass/print-Styles'; // Styling for printing of websites @import '_project-sass/project-Website-Gallery'; // Browse website specific styling
// FIXITFIXITFIXITFIXIT // FIXITFIXITFIXITFIXIT
// @import 'tidy'; // @import 'tidy';

7
public/assets/scripts/app.js
View file

@ -2,13 +2,6 @@ $(document).ready(function() {
// do scrolly things on scroll // do scrolly things on scroll
$(window).bind('scroll', function(){ $(window).bind('scroll', function(){
if($(this).scrollTop() > 460) {
$(".header-Nav").addClass('add-Stripe');
}
if($(this).scrollTop() < 460) {
$(".header-Nav").removeClass('add-Stripe');
}
if($(this).scrollTop() > 100) { if($(this).scrollTop() > 100) {
$(".hp-Logo").addClass('in-View'); $(".hp-Logo").addClass('in-View');
$(".constant-Nav").addClass('in-View'); $(".constant-Nav").addClass('in-View');

13
views/_header.erb
View file

@ -1,8 +1,11 @@
<header class="header-Base"> <header class="header-Base">
<nav class="header-Nav clearfix" role="navigation"> <nav class="header-Nav clearfix" role="navigation">
<a href="#!" title="show small screen nav" class="small-Nav"> <a href="#!" title="show small screen nav" class="small-Nav">
<img src="/assets/img/nav-Icon.png" alt="navigation icon" /> <img src="/assets/img/nav-Icon.png" alt="navigation icon" />
</a> </a>
<ul class="h-Nav constant-Nav"> <ul class="h-Nav constant-Nav">
<li> <li>
<a href="/" title="Back to the Start">NeoCities</a> <a href="/" title="Back to the Start">NeoCities</a>
@ -19,7 +22,6 @@
</ul> </ul>
<ul class="status-Nav"> <ul class="status-Nav">
<% if !signed_in? %> <% if !signed_in? %>
<li> <li>
<a href="/signin" class="sign-In" title="Sign into your account">Sign In</a> <a href="/signin" class="sign-In" title="Sign into your account">Sign In</a>
@ -35,16 +37,15 @@
<a href="/signout" class="sign-In">Signout</a> <a href="/signout" class="sign-In">Signout</a>
</li> </li>
<% end %> <% end %>
</ul> </ul>
</nav> </nav>
<h1 class="logo int-Logo"> <h1 class="logo int-Logo">
<a href="/" title="back to home"> <a href="/" title="back to home">
<span class="hidden">NeoCities.org</span> <span class="hidden">NeoCities.org</span>
<img src="/assets/img/cat.png" alt="Neocities.org" /> <img src="/assets/img/cat.png" alt="Neocities.org" />
</a> </a>
</h1> </h1>
</header> </header>

12
views/_int-footer.erb
View file

@ -1,7 +1,7 @@
<footer class="footer-Base"> <footer class="footer-Base">
<aside class="footer-Outro">
<aside class="footer-Outro">
<div class="footer-Content"> <div class="footer-Content">
<div class="row"> <div class="row">
<p class="tiny col col-60 credits"> <p class="tiny col col-60 credits">
<a href="http://neocities.org" title="NeoCities.org">Neocities.org</a> is an open source <a href="http://neocities.org" title="NeoCities.org">Neocities.org</a> is an open source
@ -17,8 +17,8 @@
<li><a href="contact" title="Contact Us" rel="nofollow">Contact</a></li> <li><a href="contact" title="Contact Us" rel="nofollow">Contact</a></li>
</ul> </ul>
</nav> </nav>
</div> </div> <!-- end .row -->
</div>
</aside>
</footer> </div>
</aside>
</footer>

5
views/about.erb
View file

@ -55,11 +55,11 @@
<a href="https://twitter.com/kyledrake" title="Follow me on Twitter" class="eps">Kyle Drake</a> <a href="https://twitter.com/kyledrake" title="Follow me on Twitter" class="eps">Kyle Drake</a>
</div> </div>
<div class="col col-33"> <div class="col col-33">
<a href="http://t.co/e1x1XoD2qi" title="Visit Kyle's Website"> <a href="http://t.co/e1x1XoD2qi" title="Visit Victoria's Website">
<img src="https://si0.twimg.com/profile_images/2279466871/rqsa3yc6xqubsnexq30r.jpeg" alt="Victoria Wang" class="pic-Rounded" /> <img src="https://si0.twimg.com/profile_images/2279466871/rqsa3yc6xqubsnexq30r.jpeg" alt="Victoria Wang" class="pic-Rounded" />
</a> </a>
<br /> <br />
<a href="https://twitter.com/violasong"title="Follow me on Twitter" class="eps">Victoria Wang</a> <a href="https://twitter.com/violasong" title="Follow me on Twitter" class="eps">Victoria Wang</a>
</div> </div>
<div class="col col-33"> <div class="col col-33">
<a href="http://www.scottohara.me/" title="Visit Scott's Website"> <a href="http://www.scottohara.me/" title="Visit Scott's Website">
@ -86,5 +86,4 @@
</section> </section>
</div> <!-- end .content --> </div> <!-- end .content -->

28
views/browse.erb
View file

@ -3,23 +3,16 @@
document.location.href = '/browse?current_page='+currentPage+'&'+$('#search_criteria').serialize(); document.location.href = '/browse?current_page='+currentPage+'&'+$('#search_criteria').serialize();
} }
</script> </script>
<div class="content">
<ul class="row website-Gallery">
<div class="row">
<div class="row content">
<h2 class="col">Websites on NeoCities</h2>
<div class="col col-50"> <div class="col col-50">
<h2>Websites on NeoCities</h2>
<p>If you like a site, don't forget to bookmark it!<br>Visitor counts are updated hourly.</p>
<div style="margin-bottom: 40px; width: 280px;"><a class="btn-Action" style="padding-top: 10px; padding-bottom: 10px" href="/new">Create your NeoCities site now</a></div>
</div>
<div class="col col-50" style="padding-top: 50px">
<form id="search_criteria" action="/browse" method="GET"> <form id="search_criteria" action="/browse" method="GET">
<fieldset class="grouping"> <fieldset class="grouping">
<label class="text-Label" for="sort_by">Sort By:</label> <label class="text-Label" for="sort_by">Sort By:</label>
<div class="select-Container"> <div class="select-Container">
<select name="sort_by" class="input-Select"> <select name="sort_by" id="sort_by" class="input-Select">
<option value="last_updated" <%= 'selected' if params[:sort_by] == 'last_updated' %>>Last Updated</option> <option value="last_updated" <%= 'selected' if params[:sort_by] == 'last_updated' %>>Last Updated</option>
<option value="hits" <%= 'selected' if params[:sort_by] == 'hits' %>>Most Hits</option> <option value="hits" <%= 'selected' if params[:sort_by] == 'hits' %>>Most Hits</option>
<option value="newest" <%= 'selected' if params[:sort_by] == 'newest' %>>Newest</option> <option value="newest" <%= 'selected' if params[:sort_by] == 'newest' %>>Newest</option>
@ -38,12 +31,20 @@
</fieldset> </fieldset>
</form> </form>
</div> </div>
<div class="col col-50">
<p>If you like a site, don't forget to bookmark it!<br>Visitor counts are updated hourly.</p>
<a class="btn-Action" href="/new" title="create a NeoCities.org site today!">Create your NeoCities site now</a>
</div> </div>
</div> <!-- end .row.content -->
<ul class="row website-Gallery">
<% @sites.each do |site| %> <% @sites.each do |site| %>
<li> <li>
<a href="http://<%= site.username %>.neocities.org" target="_blank"> <a href="http://<%= site.username %>.neocities.org" target="_blank">
<img src="http://neocities.org/site_screenshots/<%= site.username %>.jpg" width="208" height="125" /> <img src="http://neocities.org/site_screenshots/<%= site.username %>.jpg" class="neo-SS" alt="<%= site.username %>" />
</a> </a>
</li> </li>
<% end %> <% end %>
@ -51,7 +52,7 @@
<% if params[:sort_by] != 'random' %> <% if params[:sort_by] != 'random' %>
<% if @page_count > 1 %> <% if @page_count > 1 %>
<div style="font-size: 30pt"> <div class="txt-Center content eps">
<% if @current_page != 1 %> <% if @current_page != 1 %>
<a href="#" onclick="getPage(<%= @current_page - 1 %>); return false"><i class="icon-arrow-left" style="text-decoration: none"></i></a>&nbsp; <a href="#" onclick="getPage(<%= @current_page - 1 %>); return false"><i class="icon-arrow-left" style="text-decoration: none"></i></a>&nbsp;
<% end %> <% end %>
@ -66,4 +67,3 @@
</div> </div>
<% end %> <% end %>
<% end %> <% end %>
</div> <!-- end .content -->

2
views/custom_domain.slim
View file

@ -15,7 +15,7 @@
.content .content
p Adding a custom domain allows you to have a domain name attached to your web site. So if you had a domain like <strong>catsknitting.com</strong>, you could have it point to your NeoCities site! p Adding a custom domain allows you to have a domain name attached to your web site. So if you had a domain like <strong>catsknitting.com</strong>, you could have it point to your NeoCities site!
p You will have to purchase a domain name from a registrar like <a href="https://namecheap.com" target="_blank">Namecheap</a>, and then add an A record to point your domain (catsknitting.com) to the following IP address: p You will have to purchase a domain name from a registrar like <a href="https://www.namecheap.com/?aff=53678" target="_blank">Namecheap</a>, and then add an A record to point your domain (catsknitting.com) to the following IP address:
p <code>5.9.136.200</code> p <code>5.9.136.200</code>
p If you want to add a <strong>www</strong> subdomain, or use a wildcard that will answer to everything (<strong>*</strong>), you will have to make a CNAME pointing to <strong>catsknitting.com</strong> for <strong>www</strong> and/or <strong>*</strong>. p If you want to add a <strong>www</strong> subdomain, or use a wildcard that will answer to everything (<strong>*</strong>), you will have to make a CNAME pointing to <strong>catsknitting.com</strong> for <strong>www</strong> and/or <strong>*</strong>.
p After that, you can add the domain to the box below (just the <strong>catsknitting.com</strong>, don't add any subdomains), and your domain should come online within 5 minutes: p After that, you can add the domain to the box below (just the <strong>catsknitting.com</strong>, don't add any subdomains), and your domain should come online within 5 minutes:

55
views/dashboard.slim
View file

@ -16,76 +16,67 @@ javascript:
h1 Your Website h1 Your Website
- current_site.file_list.each do |file| - current_site.file_list.each do |file|
.row
.span4
- if file.ext == 'html' || file.ext == 'htm' || file.ext == 'txt' || file.ext == 'js' || file.ext == 'css' || file.ext == 'md' - if file.ext == 'html' || file.ext == 'htm' || file.ext == 'txt' || file.ext == 'js' || file.ext == 'css' || file.ext == 'md'
span span
<i class="icon-file-alt icon-3x"></i>&nbsp;&nbsp; <span style="font-size: 20pt">#{file.filename}</span> <i class="icon-file-alt icon-3x"></i>&nbsp;&nbsp; <span style="font-size: 20pt">#{file.filename}</span>
- if file.filename == 'index.html' - if file.filename == 'index.html'
p.tiny p.tiny
This is your index file! It is the "default file" that loads when you go to This is your index file! It is the "default file" that loads when you go to <a href="http://#{current_site.username}.neocities.org">#{current_site.username}.neocities.org</a>. In effect, it's your front page. If you want to change your front page, you need to edit (or overwrite) this file. The default file is always named <b>index.html</b>.
<a href="http://#{current_site.username}.neocities.org">#{current_site.username}.neocities.org</a>.
In effect, it's your front page. If you want to change your front page, you need to edit (or overwrite)
this file. The default file is always named <b>index.html</b>.
div style="margin-bottom: 30px" div style="margin-bottom:30px"
span span
i class="icon-globe" &nbsp;&nbsp; i class="icon-globe" &nbsp;&nbsp;
a href="http://#{current_site.username}.neocities.org/#{file.filename}" target="_blank" View <br />
a href="http://#{current_site.username}.neocities.org/#{file.filename}" target="_blank" View <br>
span span
i class="icon-edit" &nbsp;&nbsp; i class="icon-edit" &nbsp;&nbsp;
a href="/site_files/text_editor/#{file.filename}" Edit with text editor <br> a href="/site_files/text_editor/#{file.filename}" Edit with text editor <br />
span span
i class="icon-edit" &nbsp;&nbsp; i class="icon-edit" &nbsp;&nbsp;
span Edit with visual editor <small style="margin:0; display:inline">(coming soon)</small><br/> span Edit with visual editor <small style="margin:0; display:inline">(coming soon)</small><br/>
span span
i class="icon-edit" &nbsp;&nbsp; i class="icon-edit" &nbsp;&nbsp;
span: a href="/site_files/download/#{file.filename}" Download <br> span: a href="/site_files/download/#{file.filename}" Download <br />
span span
i class="icon-trash" &nbsp;&nbsp; i class="icon-trash" &nbsp;&nbsp;
a href="#" onclick="confirmFileDelete('#{file.filename}')" Delete a href="#" onclick="confirmFileDelete('#{file.filename}')" Delete
- else - else
<i class="icon-picture icon-3x"></i>&nbsp;&nbsp; <font style="font-size: 20pt">#{file.filename}</font> <i class="icon-picture icon-3x"></i>&nbsp;&nbsp; <span style="font-size: 20pt">#{file.filename}</span>
div style="margin-top: 3px; margin-bottom:10px" div style="margin-top: 3px; margin-bottom:10px"
| To use in an HTML file, paste this text: <code class="tiny" style="margin:0">&lt;img src="/#{file.filename}"&gt;</code> | To use in an HTML file, paste this text: <code class="tiny" style="margin:0">&lt;img src="/#{file.filename}"&gt;</code>
a href="http://#{current_site.username}.neocities.org/#{file.filename}" target="_blank" View <br> a href="http://#{current_site.username}.neocities.org/#{file.filename}" target="_blank" View <br />
a href="#" onclick="confirmFileDelete('#{file.filename}')" Delete a href="#" onclick="confirmFileDelete('#{file.filename}')" Delete
.col.col-40 .col.col-40
.row div.txt-Center.dash-SS
.span5 a href="http://#{current_site.username}.neocities.org" style="display:block" target="_blank": img src="/site_screenshots/#{current_site.username}.jpg" alt="screen shot"
a href="http://#{current_site.username}.neocities.org" target="_blank": img src="/site_screenshots/#{current_site.username}.jpg"
h3 class="eps": a href="http://#{current_site.username}.neocities.org" target="_blank" http://#{current_site.username}.neocities.org
br br
h3 class="base" style="line-height:1": a href="http://#{current_site.username}.neocities.org" target="_blank" http://#{current_site.username}.neocities.org
a href="/site_files/#{current_site.username}.zip" class="btn-Action" Download Entire Site
.progress.progress-info.progress-striped .progress.progress-info.progress-striped
.bar style="width: #{(current_site.total_space / Site::MAX_SPACE.to_f) * 100}%" .bar style="width: #{(current_site.total_space / Site::MAX_SPACE.to_f) * 100}%"
h4 class="base": You are currently using #{((current_site.total_space.to_f / Site::MAX_SPACE) * 100).round(1)}% (#{current_site.total_space_in_megabytes}MB) of your #{(Site::MAX_SPACE.to_f / 2**20).to_i}MB of free space. h4.base.txt-Center
You are currently using #{((current_site.total_space.to_f / Site::MAX_SPACE) * 100).round(1)}% (#{current_site.total_space_in_megabytes}MB) of your #{(Site::MAX_SPACE.to_f / 2**20).to_i}MB of free space.
.row style="margin-top: 20px"
.span5 div.txt-Center
div a href="/site_files/upload" class="btn-Action" style="margin-bottom:10px" Upload New Files
a href="/site_files/upload" class="btn-Action" style="margin-bottom:20px" Upload New Files br
div
a href="/site_files/new_page" class="btn-Action" Create New HTML Page a href="/site_files/new_page" class="btn-Action" Create New HTML Page
<hr />
hr
div div
a href="/site_files/#{current_site.username}.zip" class="btn-Action" Download Entire Site
.row style="margin-top: 20px"
.span5
<i class="icon-question-sign icon-3x"></i>&nbsp;&nbsp; <span style="font-size: 20pt">Need to learn web design?</span> <i class="icon-question-sign icon-3x"></i>&nbsp;&nbsp; <span style="font-size: 20pt">Need to learn web design?</span>
div br
div
i class="icon-globe" &nbsp;&nbsp; i class="icon-globe" &nbsp;&nbsp;
a href="/tutorials" target="_blank" Web Design, HTML, CSS, JavaScript Tutorials a href="/tutorials" target="_blank" Web Design, HTML, CSS, JavaScript Tutorials
form method="POST" action="/site_files/delete" id="deleteFilenameForm" form method="POST" action="/site_files/delete" id="deleteFilenameForm"
input name="csrf_token" type="hidden" value="#{csrf_token}" input name="csrf_token" type="hidden" value="#{csrf_token}"
input type="hidden" id="deleteFilenameInput" name="filename" input type="hidden" id="deleteFilenameInput" name="filename"

5
views/error.slim
View file

@ -1,7 +1,8 @@
.page .page
.content-Base.txt-Center .content-Base.txt-Center.col-60 style="margin:0 auto"
h2 Site Error h2 Site Error
p.eps There has been an error performing the requested action. p.eps There has been an error performing the requested action.
<br /> <br />
br
h4 We have been notified of the problem. h4 We have been notified of the problem.
p If you need to add any special information or if this error has not been resolved in a while, <a href="/contact" title="let us know!">contact us</a> and report the problem. Thank you! p.tiny If you need to add any special information or if this error has not been resolved in a while, <a href="/contact" title="let us know!">contact us</a> and report the problem. Thank you!

34
views/index.erb
View file

@ -105,7 +105,7 @@
<div class="logo int-Logo hp-Logo"> <div class="int-Logo hp-Logo">
<a href="/" title="back to home"> <a href="/" title="back to home">
<span class="hidden">NeoCities.org</span> <span class="hidden">NeoCities.org</span>
<img src="assets/img/cat.png" alt="Neocities.org" /> <img src="assets/img/cat.png" alt="Neocities.org" />
@ -113,7 +113,7 @@
</div> </div>
<section class="header-Intro"> <section class="header-Intro">
<h1 class="logo header-Content"> <h1 class="logo header-Content content">
<span class="hidden">NeoCities.org</span> <span class="hidden">NeoCities.org</span>
<img src="assets/img/neocities-Logo.png" alt="Neocities.org" /> <img src="assets/img/neocities-Logo.png" alt="Neocities.org" />
</h1> </h1>
@ -121,12 +121,12 @@
<div class="header-Outro"> <div class="header-Outro">
<div class="row header-Content"> <div class="row header-Content content">
<ul class="col col-50 intro-List"> <ul class="col col-50 intro-List">
<li class="intro-Tools"> <li class="intro-Tools">
<span class="intro-Icon"></span> <span class="intro-Icon"></span>
<h2 class="delta">Create your own free website</h2> <h2 class="eps">Create your own free website</h2>
<p class="tiny"> <p class="tiny">
You get 10 MB of space to make whatever you’d like with HTML, CSS, JS, IMG, TXT, and MD files. You get 10 MB of space to make whatever you’d like with HTML, CSS, JS, IMG, TXT, and MD files.
</p> </p>
@ -146,7 +146,7 @@
<div class="signup-Form"> <div class="signup-Form">
<div class="content"> <div class="content">
<h2 class="gamma">Build your Website!</h2> <h2 class="gamma txt-Center">Build your Website!</h2>
</div> </div>
<p class="txt-Center"> <p class="txt-Center">
Go to your dashboard to<br> start editing your website! Go to your dashboard to<br> start editing your website!
@ -176,9 +176,9 @@
</div> <!-- end .header-Outro --> </div> <!-- end .header-Outro -->
</header> </header>
<main class="content-Base"> <main class="content-Base">
<div class="content"> <div class="content">
@ -186,45 +186,45 @@
<h2 class="delta">Featured Websites</h2> <h2 class="delta">Featured Websites</h2>
<ul class="row website-Gallery"> <ul class="row website-Gallery hp-Gallery">
<li> <li>
<a href="http://dragonquest.neocities.org/" title="The Quest of Dragons" target="_blank"> <a href="http://dragonquest.neocities.org/" title="The Quest of Dragons" target="_blank">
<img src="http://neocities.org/site_screenshots/dragonquest.jpg" alt="Thumbnail of The Quest of Dragons" /> <img src="http://neocities.org/site_screenshots/dragonquest.jpg" class="neo-SS" alt="Thumbnail of The Quest of Dragons" />
</a> </a>
</li> </li>
<li> <li>
<a href="http://codeventurer.neocities.org/" title="codeventurer" target="_blank"> <a href="http://codeventurer.neocities.org/" title="codeventurer" target="_blank">
<img src="http://neocities.org/site_screenshots/codeventurer.jpg" alt="Thumbnail of codeventurer" /> <img src="http://neocities.org/site_screenshots/codeventurer.jpg" class="neo-SS" alt="Thumbnail of codeventurer" />
</a> </a>
</li> </li>
<li> <li>
<a href="http://clouds.neocities.org/" title="Cloud Quotes" target="_blank"> <a href="http://clouds.neocities.org/" title="Cloud Quotes" target="_blank">
<img src="http://neocities.org/site_screenshots/clouds.jpg" alt="Thumbnail of Cloud Quotes" /> <img src="http://neocities.org/site_screenshots/clouds.jpg" class="neo-SS" alt="Thumbnail of Cloud Quotes" />
</a> </a>
</li> </li>
<li> <li>
<a href="http://manatee.neocities.org/" title="Title of Website" target="_blank"> <a href="http://manatee.neocities.org/" title="Title of Website" target="_blank">
<img src="http://neocities.org/site_screenshots/manatee.jpg" alt="Thumbnail of TITLE OF WEBSITE" /> <img src="http://neocities.org/site_screenshots/manatee.jpg" class="neo-SS" alt="Thumbnail of TITLE OF WEBSITE" />
</a> </a>
</li> </li>
<li> <li>
<a href="http://suppilulemur.neocities.org/" title="Sokoban" target="_blank"> <a href="http://suppilulemur.neocities.org/" title="Sokoban" target="_blank">
<img src="http://neocities.org/site_screenshots/suppilulemur.jpg" alt="Thumbnail of Sokoban" /> <img src="http://neocities.org/site_screenshots/suppilulemur.jpg" class="neo-SS" alt="Thumbnail of Sokoban" />
</a> </a>
</li> </li>
<li> <li>
<a href="http://drawinglair.neocities.org/" title="Tomasz Zawadzki" target="_blank"> <a href="http://drawinglair.neocities.org/" title="Tomasz Zawadzki" target="_blank">
<img src="http://neocities.org/site_screenshots/drawinglair.jpg" alt="Thumbnail of Tomasz Zawadzki" /> <img src="http://neocities.org/site_screenshots/drawinglair.jpg" class="neo-SS" alt="Thumbnail of Tomasz Zawadzki" />
</a> </a>
</li> </li>
<li> <li>
<a href="http://eleanor.neocities.org/" title="Eleanor Holroyd's Website" target="_blank"> <a href="http://eleanor.neocities.org/" title="Eleanor Holroyd's Website" target="_blank">
<img src="http://neocities.org/site_screenshots/eleanor.jpg" alt="Thumbnail of Eleanor Holroyd's Website" /> <img src="http://neocities.org/site_screenshots/eleanor.jpg" class="neo-SS" alt="Thumbnail of Eleanor Holroyd's Website" />
</a> </a>
</li> </li>
<li> <li>
<a href="http://cute-animation.neocities.org/" title="Cute Animation" target="_blank"> <a href="http://cute-animation.neocities.org/" title="Cute Animation" target="_blank">
<img src="http://neocities.org/site_screenshots/cute-animation.jpg" alt="Thumbnail of Cute Animation" /> <img src="http://neocities.org/site_screenshots/cute-animation.jpg" class="neo-SS" alt="Thumbnail of Cute Animation" />
</a> </a>
</li> </li>
</ul> </ul>
@ -299,7 +299,7 @@
<div class="col col-33"> <div class="col col-33">
<div class="f-Col f-Col-2 clearfix"> <div class="f-Col f-Col-2 clearfix">
<span class="footer-icon"></span> <span class="footer-icon"></span>
<h2 class="delta">About NeoCities</h2> <h2 class="delta">About Us</h2>
<p class="tiny"> <p class="tiny">
NeoCities is here to bring back the creativity and NeoCities is here to bring back the creativity and
free expression to the world wide web that made it great. free expression to the world wide web that made it great.

13
views/not_found.slim
View file

@ -1,7 +1,10 @@
.row .page
.span8.offset2.text-center .content-Base.txt-Center.col-60 style="margin:0 auto"
h2 Not Found h2 Not Found
h4 We could not find the requested page. Our apologies. br
h5 It you believe this to be in error, please <a href="/contact">contact us</a> and report the problem. Thank you! h4 Sorry but we could not find the requested page.
p It you believe this to be in error, please <a href="/contact" title="get in touch with us">contact us</a> and report the problem. Thank you!
- if request.referer - if request.referer
a href="#{request.referer}" Go Back
a class="btn-Action" href="#{request.referer}" Go Back

10
views/settings.slim
View file

@ -12,7 +12,7 @@
.row .row
.col.col-33 .col.col-33
.content .content
h2.eps.txt-Center Change Password h2.zeta Change Password
form method="POST" action="/change_password" form method="POST" action="/change_password"
input name="csrf_token" type="hidden" value="#{csrf_token}" input name="csrf_token" type="hidden" value="#{csrf_token}"
@ -32,12 +32,12 @@
.col.col-33 .col.col-33
.content .content
h2.eps.txt-Center Change Site (User) Name h2.zeta Change Site (User) Name
form method="POST" action="/change_name" form method="POST" action="/change_name"
input name="csrf_token" type="hidden" value="#{csrf_token}" input name="csrf_token" type="hidden" value="#{csrf_token}"
p It cannot contain spaces, and can only use the following characters: a-z A-Z 0-9 _ - p.tiny It cannot contain spaces, and can only use the following characters: a-z A-Z 0-9 _ -
p Current name: <span style="color: green"><strong>#{current_site.username}</strong></span> p Current name: <span style="color: green"><strong>#{current_site.username}</strong></span>
@ -48,8 +48,8 @@
.col.col-33 .col.col-33
.content .content
h2.eps.txt-Center 18+ Content h2.zeta 18+ Content
p If your site contains objectionable (18+) content, check this box. Your site will not be removed, but it will be listed on a special browse page. We don't have an official policy on what defines 18+ content yet, but basically it's just pornography and lewd/sick/gross images. Thanks for your patience and understanding as we try to find a way to balance out the needs of everyone. p.tiny If your site contains objectionable (18+) content, check this box. Your site will not be removed, but it will be listed on a special browse page. We don't have an official policy on what defines 18+ content yet, but basically it's just pornography and lewd/sick/gross images. Thanks for your patience and understanding as we try to find a way to balance out the needs of everyone.
form method="POST" action="/change_nsfw" form method="POST" action="/change_nsfw"
input name="csrf_token" type="hidden" value="#{csrf_token}" input name="csrf_token" type="hidden" value="#{csrf_token}"

4
views/signin.slim
View file

@ -5,12 +5,12 @@
form method="POST" action="/signin" class="content" form method="POST" action="/signin" class="content"
input name="csrf_token" type="hidden" value="#{csrf_token}" input name="csrf_token" type="hidden" value="#{csrf_token}"
fieldset fieldset.col-60 style="margin:0 auto"
input name="username" type="text" placeholder="Your username" class="input-Area" autocapitalize="off" autocorrect="off" input name="username" type="text" placeholder="Your username" class="input-Area" autocapitalize="off" autocorrect="off"
br br
input name="password" type="password" class="input-Area" placeholder="Your password" input name="password" type="password" class="input-Area" placeholder="Your password"
br br
button class="btn-Action" href="#" Sign in button class="btn-Action" Sign in
hr hr

8
views/site_files/new_page.slim
View file

@ -1,4 +1,5 @@
.content-Base .content-Base
.content
- if @errors - if @errors
div.alert.alert-error div.alert.alert-error
@ -6,9 +7,8 @@
- @errors.each do |error| - @errors.each do |error|
h5 = error h5 = error
h1.txt-Center Create new HTML page h1.txt-Center.beta Create new HTML page
<br />
.txt-Center .txt-Center
form method="POST" action="/site_files/create_page" enctype="multipart/form-data" form method="POST" action="/site_files/create_page" enctype="multipart/form-data"
input name="csrf_token" type="hidden" value="#{csrf_token}" input name="csrf_token" type="hidden" value="#{csrf_token}"
@ -16,8 +16,8 @@
p.eps: input type="text" name="pagefilename" autocapitalize="off" autocorrect="off".html p.eps: input type="text" name="pagefilename" autocapitalize="off" autocorrect="off".html
p: input.btn-Action type="submit" value="Create Page" p: input.btn-Action type="submit" value="Create Page"
.row .row style="padding-top:30px"
.span6.offset3 .col.col-40 style="float:none; margin:0 auto;"
p.eps Note: We will automatically scrub any characters not matching: a-z A-Z 0-9 _ - . p.eps Note: We will automatically scrub any characters not matching: a-z A-Z 0-9 _ - .
p.zeta Page must not already exist. p.zeta Page must not already exist.
p.zeta If you want to make this the index page (and an index page doesn't exist), name it <strong>index.html</strong>. p.zeta If you want to make this the index page (and an index page doesn't exist), name it <strong>index.html</strong>.

14
views/site_files/text_editor.slim
View file

@ -17,7 +17,7 @@ css:
h2 Editing #{params[:filename]} h2 Editing #{params[:filename]}
div.theme-Code .theme-Code
p style="display:inline-block; margin-right:10px" Theme: p style="display:inline-block; margin-right:10px" Theme:
select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();" select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();"
optgroup label="Bright" optgroup label="Bright"
@ -53,17 +53,17 @@ css:
option value="ace/theme/twilight" Twilight option value="ace/theme/twilight" Twilight
option value="ace/theme/vibrant_ink" Vibrant Ink option value="ace/theme/vibrant_ink" Vibrant Ink
.row div id="editor" style="width: 100%; height: 600px; position: relative; margin-bottom:25px"
.span12
div id="editor" style="width: 100%; height: 600px; position: relative;"
== encoding_fix @file_data == encoding_fix @file_data
.row .row
.col.col-33.txt-Center .col.col-33.txt-Center style="margin-bottom:10px"
a.btn-Action href="/dashboard" <i class="icon-remove"></i>&nbsp;&nbsp;Finish Without Saving a.btn-Action href="/dashboard" <i class="icon-remove"></i>&nbsp;&nbsp;Finish Without Saving
.col.col-33.txt-Center
.col.col-33.txt-Center style="margin-bottom:10px"
a.btn-Action href="#" onclick="saveTextFile(false); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save Changes a.btn-Action href="#" onclick="saveTextFile(false); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save Changes
.col.col-33.txt-Center .col.col-33.txt-Center
a.btn-Action href="#" onclick="saveTextFile(true); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save and Finish a.btn-Action href="#" onclick="saveTextFile(true); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save and Finish
@ -100,7 +100,7 @@ css:
if(quit === true) { if(quit === true) {
window.location = '/dashboard'; window.location = '/dashboard';
} }
$('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<font style="font-size: 14pt">Your file has been saved.</font>'); $('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<span style="font-size: 14pt">Your file has been saved.</span>');
setTimeout(function() { setTimeout(function() {
$('#editorUpdates').fadeOut(); //.addClass('hidden'); $('#editorUpdates').fadeOut(); //.addClass('hidden');
}, 2000); }, 2000);