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

Various CSS/layout fixes/updates

Browse source 
clean up of various html files

clean up of sass / css files

fix width/height issues with responsive website gallery

update responsive layout issues with website gallery

update max-sizing of input-Area class to 90%

updated broken positioning of footer icons
This commit is contained in:
Scott O'Hara 2013-07-23 22:42:05 -04:00
parent 27bcc479d5
commit 08d1d6e68e
15 changed files with 329 additions and 305 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;
}

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
}
} }
// ---------------------------------------------------------------- // ----------------------------------------------------------------

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

@ -23,13 +23,9 @@
@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;
} }
} }
@ -41,7 +37,7 @@
@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-right:100px!important;
} }
.action-Link{ .action-Link{
@ -50,27 +46,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 +84,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 +102,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 +118,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,20 +85,15 @@ $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;
-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;
@ -123,54 +106,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,15 +241,13 @@ $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;
} @media (max-device-width:480px), screen and (max-width:800px){
.hp h1.logo img { padding-left:20px;
margin-left: -10px; padding-right:20px;
@media (max-device-width:480px), screen and (max-width:800px){ }
margin-left: 20px;
}
} }
.constant-Nav{ .constant-Nav{

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

@ -22,41 +22,6 @@
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}

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

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

@ -0,0 +1,33 @@
// ----------------------------------------------------------------
// Project Specific: Browse Websites Gallery
// ----------------------------------------------------------------
.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;
}
}
.neo-SS{
background:#fff;
@include box-shadow($bs-4);
display:block;
height:auto!important;
max-height:125px;
max-width:208px;
padding:$spacing*2;
width:100%;
}

189
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;
@ -306,7 +306,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 +327,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 +446,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 +888,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 +929,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,11 +963,9 @@ 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; } .header-Content {
@media (max-device-width: 480px), screen and (max-width: 800px) { padding: 0; } }
.header-Content {
padding: 0; } }
.blurb { .blurb {
background: #fff; } background: #fff; }
@ -965,24 +983,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 +1009,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,13 +1037,13 @@ 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);
-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;
@ -1054,33 +1068,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 +1167,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;
@ -1239,28 +1234,6 @@ 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; }
@ -1279,8 +1252,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 +1263,7 @@ 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-right: 100px !important; } }
.f-Col .action-Link { .f-Col .action-Link {
bottom: 0; bottom: 0;
position: absolute; position: absolute;
@ -1303,18 +1274,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 +1306,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 +1331,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 +1367,29 @@ a {
.alert { .alert {
background-color: #F39C12; background-color: #F39C12;
color: #fff; } color: #fff; }
.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; }
.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;
max-height: 125px;
max-width: 208px;
padding: 8px;
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');

67
views/_header.erb
View file

@ -1,50 +1,51 @@
<header class="header-Base"> <header class="header-Base">
<nav class="header-Nav clearfix" role="navigation">
<a href="#!" title="show small screen nav" class="small-Nav">
<img src="/assets/img/nav-Icon.png" alt="navigation icon" />
</a>
<ul class="h-Nav constant-Nav">
<li>
<a href="/" title="Back to the Start">NeoCities</a>
</li>
<li>
<a href="/browse" title="Browse NeoCities member websites">Websites</a>
</li>
<li>
<a href="/tutorials" title="Learn to code with these tutorials">Tutorials</a>
</li>
<li>
<a href="/about" title="About NeoCities">About</a>
</li>
</ul>
<ul class="status-Nav"> <nav class="header-Nav clearfix" role="navigation">
<% if !signed_in? %> <a href="#!" title="show small screen nav" class="small-Nav">
<img src="/assets/img/nav-Icon.png" alt="navigation icon" />
</a>
<ul class="h-Nav constant-Nav">
<li> <li>
<a href="/signin" class="sign-In" title="Sign into your account">Sign In</a> <a href="/" title="Back to the Start">NeoCities</a>
</li>
<% else %>
<li>
<a href="/dashboard" class="sign-In">Dashboard</a>
</li> </li>
<li> <li>
<a href="/settings" class="sign-In">Settings</a> <a href="/browse" title="Browse NeoCities member websites">Websites</a>
</li> </li>
<li> <li>
<a href="/signout" class="sign-In">Signout</a> <a href="/tutorials" title="Learn to code with these tutorials">Tutorials</a>
</li> </li>
<% end %> <li>
<a href="/about" title="About NeoCities">About</a>
</li>
</ul>
</ul> <ul class="status-Nav">
<% if !signed_in? %>
<li>
<a href="/signin" class="sign-In" title="Sign into your account">Sign In</a>
</li>
<% else %>
<li>
<a href="/dashboard" class="sign-In">Dashboard</a>
</li>
<li>
<a href="/settings" class="sign-In">Settings</a>
</li>
<li>
<a href="/signout" class="sign-In">Signout</a>
</li>
<% end %>
</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>

40
views/_int-footer.erb
View file

@ -1,24 +1,24 @@
<footer class="footer-Base"> <footer class="footer-Base">
<aside class="footer-Outro">
<div class="footer-Content">
<aside class="footer-Outro"> <div class="row">
<div class="footer-Content"> <p class="tiny col col-60 credits">
<div class="row"> <a href="http://neocities.org" title="NeoCities.org">Neocities.org</a> is an open source
<p class="tiny col col-60 credits"> project led by <a href="http://kyledrake.neocities.org" title="learn about Kyle Drake">Kyle Drake</a>.
<a href="http://neocities.org" title="NeoCities.org">Neocities.org</a> is an open source Fork us on <a href="https://github.com/kyledrake/neocities-web" title="Neocities on GitHub">GitHub</a>.
project led by <a href="http://kyledrake.neocities.org" title="learn about Kyle Drake">Kyle Drake</a>. </p>
Fork us on <a href="https://github.com/kyledrake/neocities-web" title="Neocities on GitHub">GitHub</a>.
</p>
<nav class="footer-Nav col col-40"> <nav class="footer-Nav col col-40">
<ul class="tiny h-Nav"> <ul class="tiny h-Nav">
<!-- <li><a href="api" title="Neocities API">API</a></li> --> <!-- <li><a href="api" title="Neocities API">API</a></li> -->
<li><a href="terms" title="Neocities Terms of Use" rel="nofollow">Terms</a></li> <li><a href="terms" title="Neocities Terms of Use" rel="nofollow">Terms</a></li>
<li><a href="privacy" title="Neocities Privacy Policy" rel="nofollow">Privacy</a></li> <li><a href="privacy" title="Neocities Privacy Policy" rel="nofollow">Privacy</a></li>
<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>

26
views/browse.erb
View file

@ -3,18 +3,11 @@
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"> <h2 class="content">Websites on NeoCities</h2>
<div class="col col-50"> <div class="row content">
<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">
<div class="col col-50">
<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>
@ -38,12 +31,20 @@
</fieldset> </fieldset>
</form> </form>
</div> </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> <!-- 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" />
</a> </a>
</li> </li>
<% end %> <% end %>
@ -66,4 +67,3 @@
</div> </div>
<% end %> <% end %>
<% end %> <% end %>
</div> <!-- end .content -->

6
views/index.erb
View file

@ -126,7 +126,7 @@
<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>
@ -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">