zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +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-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}
.input-Area, %input-Area{
background:#fff; border:1px solid $c-Border; font-family:$arial; line-height:1.25;
margin-bottom:$spacing*2; padding:$spacing*2 $spacing; width:50%;
&:focus{background:$c-Lighter; border:1px solid #50B6D5; @include box-shadow($bs-2)}
background:#fff;
border:1px solid $c-Border;
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{
@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 */
@ -97,3 +115,20 @@ legend, .legend{
@extend %input-Area;
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
// while allowing for larger sections to expand the whole page for BG purposes
.content{
margin:0 auto; max-width:1000px; padding:$spacing*5;
& > :last-child{margin-bottom:0} // kill any extra margin on the last element in the .content div
margin:0 auto;
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);
position:relative;
.footer-Content {
padding-top:40px;
padding-bottom:40px;
}
h2 {
font-size: 1.45em;
.footer-Content{
padding-top:40px;
padding-bottom:40px;
}
}
@ -41,7 +37,7 @@
@media (max-device-width:480px), screen and (max-width:800px){
min-height:2px;
padding:0;
padding-right:100px!important;
}
.action-Link{
@ -50,27 +46,33 @@
right:$spacing*3;
@media (max-device-width:480px), screen and (max-width:800px){
position: static
position:static
}
}
}
.footer-icon {
background-repeat: no-repeat;
display: block;
position: absolute;
right: 0px;
top: -70px;
background-repeat:no-repeat;
position:absolute;
right:0;
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{
padding-right:$spacing*3;
.footer-icon {
background-image: url(../img/support-us.png);
width: 92px;
height: 104px;
right: 5px;
.footer-icon{
background-image: url(../img/support-us.png);
height:104px;
right:5px;
width:92px;
}
}
@ -82,8 +84,12 @@
border-bottom:1px solid rgba(0,0,0,.1);
border-top:1px solid rgba(0,0,0,.1);
margin:20px 0;
overflow: hidden;
overflow:hidden;
padding:20px 0;
.footer-icon{
top:14px
}
}
&:before, &:after {
@ -96,7 +102,7 @@
width:1px;
@media (max-device-width:480px), screen and (max-width:800px){
display:none
display:none;
}
}
@ -112,11 +118,14 @@
.f-Col-3{
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);
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{
padding-top: 22px;
@extend .content;
@media (max-device-width:480px), screen and (max-width:800px){
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){
@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{
background:#30424b;
background: -moz-linear-gradient(top, #2b3c43 0%, #354751 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b3c43), color-stop(100%,#354751)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2b3c43 0%,#354751 100%); /* IE10+ */
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;
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:#30424b -webkit-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Chrome10+,Safari5.1+ */
background:#30424b -o-linear-gradient(top, #2b3c43 0%,#354751 100%); /* Opera 11.10+ */
background:#30424b -ms-linear-gradient(top, #2b3c43 0%,#354751 100%); /* IE10+ */
background:#30424b linear-gradient(to bottom, #2b3c43 0%,#354751 100%); /* W3C */
@include box-shadow($outroShadow);
color:#fafafa;
}
@ -60,15 +49,15 @@ $outroShadow:inset 0px 7px 10px 0px rgba(0, 0, 0, 0.10);
li{
padding-left:$spacing*9;
padding-right:$spacing*3;
margin-bottom: 18px;
margin-bottom:18px;
}
h2{
font-size:22px;
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{
background-position:0 -40px;
}
}
@ -97,20 +85,15 @@ $outroShadow:inset 0px 7px 10px 0px rgba(0, 0, 0, 0.10);
position:relative
}
$signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
.signup-Form{
background:#354751;
border-radius:4px 4px 0 0;
@include box-shadow($signupShadow);
height:600%;
overflow:hidden;
position:absolute;
top:-45px;
-moz-box-shadow:$signupShadow;
-webkit-box-shadow:$signupShadow;
box-shadow:$signupShadow;
@media (max-device-width:480px), screen and (max-width:800px){
height:auto;
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);
font-size: 1.8em;
}
hr{
border-bottom:1px solid #4a6677;
border-top:1px solid #1d282d;
margin:4px 0 22px;
}
fieldset{
background:url(../img/sign-up-bg.png) repeat-x center top;
padding: 20px 33px;
}
label{
color:#81b8c6;
@media (max-device-width:480px), screen and (max-width:800px){
font-size:70%
}
}
$inputAreaShadow:inset 1px 3px 10px 0px rgba(0, 0, 0, 0.20);
.input-Area{
background:#29383f;
border:0px solid black;
border:0 solid black;
@include box-shadow($inputAreaShadow);
color:#557380;
margin-bottom:$spacing*7;
margin-right:$spacing;
padding: 11px 12px 9px 12px;
width:62%;
-moz-box-shadow:$inputAreaShadow;
-webkit-box-shadow:$inputAreaShadow;
box-shadow:$inputAreaShadow;
&: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{
padding:10px 25px;
}
@ -274,15 +241,13 @@ $signupShadow: 1px 2px 12px 2px rgba(0, 0, 0, 0.15);
}
}
.hp h1.logo {
padding-top: 45px;
padding-bottom: 0;
}
.hp h1.logo img {
margin-left: -10px;
@media (max-device-width:480px), screen and (max-width:800px){
margin-left: 20px;
}
.hp .logo{
padding-top:45px;
@media (max-device-width:480px), screen and (max-width:800px){
padding-left:20px;
padding-right:20px;
}
}
.constant-Nav{

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

@ -22,41 +22,6 @@
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
.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-Border: #ccc;
// Place holder for inputs
$placeholderColor:#5E7F8D;
// ----------------------------------------------------------------
// Fonts Families
@ -69,7 +72,7 @@ $alpha: $base-font-multiplier * 3.125; // 50px
$beta: $base-font-multiplier * 2.5; // 40px
$gamma: $base-font-multiplier * 2; // 32px
$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
$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-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

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-style: italic; }
blockquote:before, blockquote:after {
font-size: 1.25em;
font-size: 1.375em;
font-weight: 400;
line-height: 1;
position: relative;
@ -306,7 +306,7 @@ nav a {
padding: 8px 12px; }
legend, .legend {
font-size: 1.25em;
font-size: 1.375em;
margin-left: -4px;
padding: 0 4px; }
@ -327,7 +327,7 @@ legend, .legend {
line-height: 1.25;
margin-bottom: 8px;
padding: 8px 4px;
width: 50%; }
width: 80%; }
.input-Area:focus, .text-Area:focus, .select-Container:focus, .input-Number:focus {
background: #f8f8f8;
border: 1px solid #50B6D5;
@ -446,6 +446,26 @@ legend, .legend {
.input-Number {
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-Neg:hover, .btn-Disable, .btn-Square, .btn-Round {
background: #343434;
@ -868,7 +888,7 @@ h4, .delta {
font-weight: 300; }
h5, .eps {
font-size: 1.25em;
font-size: 1.375em;
font-weight: 300; }
h6, .zeta {
@ -909,11 +929,11 @@ body {
.page {
min-height: 25px; } }
.content, .header-Content, .footer-Content {
.content, .footer-Content {
margin: 0 auto;
max-width: 1000px;
padding: 20px; }
.content > :last-child, .header-Content > :last-child, .footer-Content > :last-child {
.content > :last-child, .footer-Content > :last-child {
margin-bottom: 0; }
a {
@ -943,11 +963,9 @@ a {
min-height: 42px;
overflow: hidden; }
.header-Content {
padding-top: 22px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.header-Content {
padding: 0; } }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.header-Content {
padding: 0; } }
.blurb {
background: #fff; }
@ -965,24 +983,21 @@ a {
min-height: 2px; } }
.header-Outro {
background: #30424b;
background: -moz-linear-gradient(top, #2b3c43 0%, #354751 100%);
background: #30424b -moz-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* 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+ */
background: -webkit-linear-gradient(top, #2b3c43 0%, #354751 100%);
background: #30424b -webkit-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* 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+ */
background: -ms-linear-gradient(top, #2b3c43 0%, #354751 100%);
background: #30424b -ms-linear-gradient(top, #2b3c43 0%, #354751 100%);
/* IE10+ */
background: linear-gradient(to bottom, #2b3c43 0%, #354751 100%);
background: #30424b 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: inset 0px 7px 10px 0px 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);
-moz-box-shadow: inset 0 7px 10px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 7px 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 7px 10px 0 rgba(0, 0, 0, 0.1);
color: #fafafa; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
@ -994,7 +1009,6 @@ a {
padding-right: 12px;
margin-bottom: 18px; }
.intro-List h2 {
font-size: 22px;
margin-bottom: 2px; }
.intro-List p {
color: #B2BCC1; }
@ -1023,13 +1037,13 @@ a {
.signup-Form {
background: #354751;
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%;
overflow: hidden;
position: absolute;
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); }
top: -45px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.signup-Form {
height: auto;
@ -1054,33 +1068,17 @@ a {
font-size: 70%; } }
.signup-Form .input-Area {
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;
margin-bottom: 28px;
margin-right: 4px;
padding: 11px 12px 9px 12px;
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); }
width: 62%; }
.signup-Form .input-Area:focus {
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 {
padding: 10px 25px; }
@ -1169,15 +1167,12 @@ a {
.hp .hp-Logo.in-View {
left: -90px !important; } }
.hp h1.logo {
padding-top: 45px;
padding-bottom: 0; }
.hp h1.logo img {
margin-left: -10px; }
.hp .logo {
padding-top: 45px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.hp h1.logo img {
margin-left: 20px; } }
.hp .logo {
padding-left: 20px;
padding-right: 20px; } }
.constant-Nav {
margin-left: -88px;
@ -1239,28 +1234,6 @@ a {
.single-Col {
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 {
margin: 0 auto 30px !important; }
@ -1279,8 +1252,6 @@ a {
.footer-Intro .footer-Content {
padding-top: 40px;
padding-bottom: 40px; }
.footer-Intro h2 {
font-size: 1.45em; }
.f-Col {
-moz-box-sizing: content-box;
@ -1292,7 +1263,7 @@ a {
@media (max-device-width: 480px), screen and (max-width: 800px) {
.f-Col {
min-height: 2px;
padding: 0; } }
padding-right: 100px !important; } }
.f-Col .action-Link {
bottom: 0;
position: absolute;
@ -1303,18 +1274,27 @@ a {
.footer-icon {
background-repeat: no-repeat;
display: block;
position: absolute;
right: 0px;
right: 0;
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 {
padding-right: 12px; }
.f-Col-1 .footer-icon {
background-image: url(../img/support-us.png);
width: 92px;
height: 104px;
right: 5px; }
right: 5px;
width: 92px; }
.f-Col-2 {
padding-left: 15px;
@ -1326,7 +1306,9 @@ a {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin: 20px 0;
overflow: hidden;
padding: 20px 0; } }
padding: 20px 0; }
.f-Col-2 .footer-icon {
top: 14px; } }
.f-Col-2:before, .f-Col-2:after {
background: url("../img/border.png") no-repeat 0 -20px;
content: "";
@ -1349,10 +1331,13 @@ a {
.f-Col-3 {
padding-left: 20px; }
@media (max-device-width: 480px), screen and (max-width: 800px) {
.f-Col-3 {
padding-left: 0; } }
.f-Col-3 .footer-icon {
background-image: url(../img/latest-news.png);
width: 134px;
height: 103px; }
height: 103px;
width: 134px; }
.footer-Outro {
background: #ccdf9b;
@ -1382,3 +1367,29 @@ a {
.alert {
background-color: #F39C12;
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-Base'; // restyle and make classes specific for your project here
// Print Styling
//@import '_project-sass/print-Styles'; // Styling for printing of websites
// Specific Modules
@import '_project-sass/project-Website-Gallery'; // Browse website specific styling
// FIXITFIXITFIXITFIXIT
// @import 'tidy';

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

@ -2,13 +2,6 @@ $(document).ready(function() {
// do scrolly things on scroll
$(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) {
$(".hp-Logo").addClass('in-View');
$(".constant-Nav").addClass('in-View');

69
views/_header.erb
View file

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

44
views/_int-footer.erb
View file

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

30
views/browse.erb
View file

@ -3,18 +3,11 @@
document.location.href = '/browse?current_page='+currentPage+'&'+$('#search_criteria').serialize();
}
</script>
<div class="content">
<ul class="row website-Gallery">
<h2 class="content">Websites on NeoCities</h2>
<div class="row content">
<div class="row">
<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">
<div class="col col-50">
<form id="search_criteria" action="/browse" method="GET">
<fieldset class="grouping">
<label class="text-Label" for="sort_by">Sort By:</label>
@ -38,12 +31,20 @@
</fieldset>
</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> <!-- end .row.content -->
<ul class="row website-Gallery">
<% @sites.each do |site| %>
<li>
<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>
</li>
<% end %>
@ -66,4 +67,3 @@
</div>
<% end %>
<% end %>
</div> <!-- end .content -->

8
views/index.erb
View file

@ -126,7 +126,7 @@
<ul class="col col-50 intro-List">
<li class="intro-Tools">
<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">
You get 10 MB of space to make whatever you’d like with HTML, CSS, JS, IMG, TXT, and MD files.
</p>
@ -176,9 +176,9 @@
</div> <!-- end .header-Outro -->
</header>
<main class="content-Base">
</header>
<main class="content-Base">
<div class="content">