mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
sass now auto-compiles, fix relative_path for site files
This commit is contained in:
Kyle Drake
parent
fbf78f04d6
commit
9aca6cd0a0
10 changed files with 21 additions and 3153 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -18,7 +18,7 @@ doc/
|
|||
tests/coverage
|
||||
config.yml
|
||||
.DS_Store
|
||||
public/assets/css/.sass-cache/
|
||||
public/css/neo.css
|
||||
public/site_thumbnails
|
||||
public/sites
|
||||
public/site_screenshots
|
||||
|
|
@ -26,3 +26,5 @@ public/site_screenshots_test
|
|||
public/site_thumbnails_test
|
||||
*.swp
|
||||
files/map.txt
|
||||
.sass-cache
|
||||
.sass-cache/*
|
||||
|
|
|
|||
2
Gemfile
2
Gemfile
|
|
@ -20,6 +20,7 @@ gem 'screencap'
|
|||
gem 'cocaine'
|
||||
gem 'zipruby'
|
||||
gem 'always_verify_ssl_certificates'
|
||||
gem 'sass', require: nil
|
||||
|
||||
platform :mri do
|
||||
gem 'magic' # sudo apt-get install file, For OSX: brew install libmagic
|
||||
|
|
@ -46,7 +47,6 @@ end
|
|||
|
||||
group :development do
|
||||
gem 'shotgun', require: nil
|
||||
gem 'sass', require: nil
|
||||
end
|
||||
|
||||
group :test do
|
||||
|
|
|
|||
|
|
@ -100,3 +100,16 @@ Mail.defaults do
|
|||
end
|
||||
|
||||
Sinatra::Application.set :erb, escape_html: true
|
||||
|
||||
require 'sass/plugin/rack'
|
||||
Sinatra::Application.use Sass::Plugin::Rack
|
||||
|
||||
Sass::Plugin.options[:template_location] = './public/assets/css'
|
||||
Sass::Plugin.options[:css_location] = './public/css'
|
||||
Sass::Plugin.options[:style] = :nested
|
||||
|
||||
if ENV['RACK_ENV'] == 'production'
|
||||
Sass::Plugin.options[:style] = :compressed
|
||||
Sass::Plugin.options[:never_update] = true
|
||||
Sass::Plugin.options[:full_exception] = false
|
||||
end
|
||||
|
|
@ -371,7 +371,7 @@ class Site < Sequel::Model
|
|||
ThumbnailWorker.perform_async values[:username], relative_path
|
||||
end
|
||||
|
||||
SiteChange.record self, path
|
||||
SiteChange.record self, relative_path
|
||||
|
||||
if self.site_changed != true
|
||||
self.site_changed = true
|
||||
|
|
|
|||
1
public/assets/css/.gitignore
vendored
1
public/assets/css/.gitignore
vendored
|
|
@ -1 +0,0 @@
|
|||
# This file is here simplt to force git to allow the folder within the zip
|
||||
File diff suppressed because it is too large
Load diff
908
public/assets/css/neo.min.css
vendored
908
public/assets/css/neo.min.css
vendored
|
|
@ -1,908 +0,0 @@
|
|||
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,700,700italic,600,400italic,300italic,600italic);
|
||||
@import url(//fonts.googleapis.com/css?family=Droid+Serif:400,700);
|
||||
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
|
||||
|
||||
html { overflow-y: scroll; min-height: 100%; }
|
||||
|
||||
body { line-height: 1.5; }
|
||||
|
||||
body, blockquote, h1, h2, h3, h4, h5, h6, p, pre, form, fieldset, img, legend, table, th, td, caption, hr { border: 0; margin: 0; outline: 0; padding: 0; }
|
||||
|
||||
hr { border-top: 1px solid #ddd; display: block; height: 1px; margin: 24px 0; }
|
||||
|
||||
article, aside, details, figure, figcaption, footer, header, main, nav, section, summary { display: block; }
|
||||
|
||||
[hidden] { display: none; }
|
||||
|
||||
img { color: red; font-style: italic; }
|
||||
|
||||
audio, img, object, embed, video { max-width: 100%; }
|
||||
|
||||
audio, canvas, video { display: inline-block; }
|
||||
|
||||
audio:not([controls]) { display: none; height: 0; }
|
||||
|
||||
svg:not(:root) { overflow: hidden; }
|
||||
|
||||
small { display: block; }
|
||||
|
||||
p small, li small { display: inline; margin: 0; }
|
||||
|
||||
b, strong { font-weight: bold; }
|
||||
|
||||
i, em, dfn { font-style: italic; }
|
||||
|
||||
blockquote { font-size: 1.125em; font-style: italic; }
|
||||
blockquote:before, blockquote:after { font-size: 1.375em; font-weight: 400; line-height: 1; position: relative; top: 2px; }
|
||||
blockquote:before { content: '"'; left: -1px; }
|
||||
blockquote:after { content: '"'; right: -1px; }
|
||||
|
||||
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
|
||||
|
||||
abbr[title], dfn[title] { border-bottom: 1px dotted #cccccc; cursor: help; }
|
||||
|
||||
mark { background: yellow; color: #131313; }
|
||||
|
||||
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
||||
|
||||
sub { bottom: -.25em; }
|
||||
|
||||
sup { top: -.5em; }
|
||||
|
||||
code, kbd, pre, samp { background: #16414c; border-left: 6px solid #acd473; color: #a9b9b9; display: block; font-family: monospace, serif; font-size: 0.9em; padding: 12px 8px 12px 20px; }
|
||||
|
||||
pre { overflow: auto; white-space: pre-wrap; }
|
||||
pre mark { background: #eee; border-bottom: 1px solid #ddd; color: #333; }
|
||||
|
||||
p code, p kbd, p pre, p samp, li code, li kbd, li pre, li samp, pre code, pre kbd, pre pre, pre samp { display: inline-block; margin: 0; padding: 4px; }
|
||||
|
||||
.code-Value { color: #24b9af; }
|
||||
|
||||
.code-Tag { color: #8ab04c; }
|
||||
|
||||
ol, ul { margin: 0 0 8px; padding: 0 0 0 24px; }
|
||||
ol > li:last-child, ul > li:last-child { margin-bottom: 0; }
|
||||
ol li ol, ol li ul, ul li ol, ul li ul { margin-top: 8px; }
|
||||
ol li li, ul li li { font-size: 1em; }
|
||||
|
||||
dd { margin: 0 0 8px; padding-left: 16px; }
|
||||
|
||||
button, input, select, textarea { border: 0; font-family: inherit; font-size: 100%; line-height: normal; margin: 0; text-transform: none; }
|
||||
|
||||
button, html input[type='button'], input[type='reset'], input[type='submit'] { cursor: pointer; -webkit-appearance: button; }
|
||||
|
||||
input[type='search'] { -webkit-appearance: textfield; }
|
||||
|
||||
input[disabled] { background: #eeeeee; cursor: not-allowed; }
|
||||
|
||||
input[readonly] { background: #fafafa; }
|
||||
|
||||
input[type='search']::-webkit-search-decoration { -webkit-appearance: none; }
|
||||
|
||||
buton::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
||||
|
||||
textarea { overflow: auto; vertical-align: top; border: 2px solid #DCE4EC; }
|
||||
|
||||
.tooltip-inner { white-space: pre-wrap; }
|
||||
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
|
||||
.table-Base, .table-Border, .table-Stripe { background: #fafafa; font-size: 0.9em; width: 100%; }
|
||||
.table-Base th, .table-Border th, .table-Stripe th, .table-Base td, .table-Border td, .table-Stripe td { padding: 4px; text-align: left; }
|
||||
|
||||
.table-Header { background: #eee; }
|
||||
|
||||
.table-Footer { background: #e3e3e3; }
|
||||
|
||||
.table-Border { border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; }
|
||||
.table-Border tr { border-top: 1px solid #cccccc; }
|
||||
.table-Border th, .table-Border td { border-left: 1px solid #cccccc; }
|
||||
|
||||
.table-Stripe tr:nth-child(2n) { background: #eeeeee; }
|
||||
|
||||
.row, .c-Row { margin-left: -20px; margin-bottom: 20px; }
|
||||
|
||||
.col { float: left; margin-bottom: 0 !important; padding-left: 20px; position: relative; width: 100%; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .col { float: none; padding: 0; } }
|
||||
|
||||
.c-Row { font-size: 0; text-align: center; }
|
||||
.c-Row .col { display: inline-block; float: none; font-size: 16px; text-align: left; }
|
||||
|
||||
.col-90 { width: 90%; }
|
||||
|
||||
.col-80 { width: 80%; }
|
||||
|
||||
.col-75 { width: 75%; }
|
||||
|
||||
.col-66 { width: 66.6666%; }
|
||||
|
||||
.col-60 { width: 60%; }
|
||||
|
||||
.col-50 { width: 50%; }
|
||||
|
||||
.col-40 { width: 40%; }
|
||||
|
||||
.col-33 { width: 33.3333%; }
|
||||
|
||||
.col-25, .website-Gallery li { width: 25%; }
|
||||
|
||||
.col-20 { width: 20%; }
|
||||
|
||||
.col-10 { width: 10%; }
|
||||
|
||||
.rfl { padding-left: 300px; }
|
||||
.rfl .f-Col { float: left; margin-left: -280px; width: 280px; }
|
||||
|
||||
.rfr { padding-right: 300px; }
|
||||
.rfr .f-Col { float: right; margin-right: -300px; width: 280px; }
|
||||
|
||||
.block { background: #ccc; color: #333; padding: 4px; }
|
||||
.block > :last-child { margin-bottom: 0; }
|
||||
|
||||
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
|
||||
nav li { margin: 0; }
|
||||
nav a { display: inline-block; padding: 4px 8px; text-decoration: underline; }
|
||||
nav a:hover { text-decoration: none; }
|
||||
|
||||
.grouping { padding: 4px 0; }
|
||||
|
||||
.fs-Legend { border: 1px solid #cccccc; margin-bottom: 8px; padding: 8px 12px; }
|
||||
|
||||
legend, .legend { font-size: 1.375em; margin-left: -4px; padding: 0 4px; }
|
||||
|
||||
/* Text Input Areas & Labels */
|
||||
.text-Label, .option-Container { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; cursor: pointer; display: block; margin-bottom: 4px; }
|
||||
|
||||
.dis-Label { cursor: not-allowed; }
|
||||
|
||||
.input-Area, .text-Area, .select-Container, .input-Number { background: #fff; border: 2px solid #cccccc; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 1.25; margin-bottom: 8px; padding: 8px 4px; width: 80%; }
|
||||
.input-Area:focus, .text-Area:focus, .select-Container:focus, .input-Number:focus { background: #f8f8f8; border: 2px solid #50B6D5; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; }
|
||||
|
||||
.text-Area { display: block; min-height: 150px; resize: vertical; width: 100%; }
|
||||
|
||||
/* Check/Radio Inputs & Labels */
|
||||
.option-Container { position: relative; }
|
||||
.option-Container:hover .btn-Radio, .option-Container:hover .btn-Check { border-color: #333; }
|
||||
|
||||
.option-Label { cursor: pointer; display: block; padding-left: 28px; position: relative; z-index: 2; }
|
||||
|
||||
.input-Hide { border: 0 !important; height: 1px !important; left: -999999px !important; overflow: hidden !important; position: absolute !important; width: 1px !important; }
|
||||
|
||||
.btn-Radio, .btn-Check { background: #eeeeee; border: 1px solid #ccc; font-size: 14px; font-weight: bold; height: 19px; left: 0; padding: 2px; position: absolute; top: 0; width: 19px; }
|
||||
.btn-Radio:hover, .input-Radio.selected-Radio .btn-Radio, .btn-Check:hover, .input-Check.selected-Check .btn-Check { background: #e93250; }
|
||||
|
||||
.btn-Radio { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background-clip: padding-box; }
|
||||
|
||||
.input-Radio.selected-Radio .btn-Radio { border-color: #333; }
|
||||
|
||||
.input-Check.selected-Check .btn-Check { border-color: #333; }
|
||||
|
||||
.ifChecked { visibility: hidden; }
|
||||
|
||||
.selected-Check .ifChecked { visibility: visible; }
|
||||
|
||||
/* Drop Down Selection Inputs */
|
||||
.select-Container { background: url(../img/drop-Arrow.png) no-repeat 99% center white; display: inline-block; overflow: hidden; }
|
||||
|
||||
.input-Select { background: none; border: 0; font-size: 0.9em; padding-right: 16px; width: 120%; -webkit-appearance: textarea; }
|
||||
|
||||
.file-Input-Area { position: relative; }
|
||||
.file-Input-Area label { cursor: default; }
|
||||
|
||||
.input-File { cursor: pointer; left: 0; height: 100%; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
|
||||
|
||||
.input-File-Text { cursor: pointer; display: inline-block; }
|
||||
|
||||
/* Inputs not supported in all browsers */
|
||||
.input-Color { border: 1px solid #cccccc; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; margin-bottom: 8px; padding: 0 4px; height: 45px; width: 50%; }
|
||||
.input-Color:focus { background: #f8f8f8; border: 1px solid #50B6D5; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 6px rgba(0, 0, 0, 0.25) inset; }
|
||||
|
||||
.input-Number { font-size: 0.9em; }
|
||||
|
||||
::-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-Disable:hover, .btn-Disable:visited, .btn-Square, .btn-Round { background: #343434; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; background-clip: padding-box; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); color: #f8f8f8; cursor: pointer; display: inline-block; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 0.9em; line-height: 1; padding: 8px 20px; text-align: center; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; vertical-align: middle; -webkit-appearance: none; }
|
||||
.btn.btn-Pad, .btn-Pad.btn-Radio, .btn-Pad.btn-Check, .btn-Pad.btn-Small, .btn-Pad.btn-Large, .btn-Pad.btn-XLarge, .btn-Pad.btn-Wide, .btn-Pad.btn-Action, .btn-Pad.btn-Action-2, .btn-Pad.btn-Action-3, .btn-Pad.btn-Neg, .btn-Pad.btn-Disable, .btn-Pad.btn-Square, .btn-Pad.btn-Round { padding: 8px 16px; }
|
||||
.btn:hover, .btn:active, .btn-Radio:hover, .input-Radio.selected-Radio .btn-Radio, .btn-Check:hover, .input-Check.selected-Check .btn-Check, .btn-Small:hover, .btn-Large:hover, .btn-XLarge:hover, .btn-Wide:hover, .btn-Action:hover, .btn-Action-2:hover, .btn-Action-3:hover, .btn-Neg:hover, .btn-Disable:hover, .btn-Square:hover, .btn-Round:hover, .btn-Radio:active, .btn-Check:active, .btn-Small:active, .btn-Large:active, .btn-XLarge:active, .btn-Wide:active, .btn-Action:active, .btn-Action-2:active, .btn-Action-3:active, .btn-Neg:active, .btn-Disable:active, .btn-Square:active, .btn-Round:active { background: #131313; color: #f8f8f8; }
|
||||
.btn:visited, .btn-Radio:visited, .btn-Check:visited, .btn-Small:visited, .btn-Large:visited, .btn-XLarge:visited, .btn-Wide:visited, .btn-Action:visited, .btn-Action-2:visited, .btn-Action-3:visited, .btn-Neg:visited, .btn-Disable:visited, .btn-Square:visited, .btn-Round:visited { color: #f8f8f8; }
|
||||
|
||||
.btn-Small { font-size: 0.875em; padding: 4px 8px; }
|
||||
.btn-Small.btn-Pad { padding: 4px 12px; }
|
||||
|
||||
.btn-Large { font-size: 2em; padding: 12px; }
|
||||
.btn-Large.btn-Pad { padding: 12px 20px; }
|
||||
|
||||
.btn-XLarge { font-size: 2.5em; padding: 12px 16px; }
|
||||
.btn-XLarge.btn-Pad { padding: 16px 24px; }
|
||||
|
||||
.btn-Wide { display: block; }
|
||||
|
||||
.btn-Action { background: #e93250; background: -webkit-linear-gradient(top, #e93250, #b11f36); background: -moz-linear-gradient(top, #e93250, #b11f36); background: -o-linear-gradient(top, #e93250, #b11f36); background: linear-gradient(top, #e93250, #b11f36); }
|
||||
.btn-Action:hover { background: -webkit-linear-gradient(top, #d51c3a, #841526); background: -moz-linear-gradient(top, #d51c3a, #841526); background: -o-linear-gradient(top, #d51c3a, #841526); background: linear-gradient(top, #d51c3a, #841526); }
|
||||
|
||||
.btn-Action-2 { background: #daeea5; }
|
||||
.btn-Action-2:hover { background: #c0e265; }
|
||||
|
||||
.btn-Action-3 { background: #f6f0e6; }
|
||||
.btn-Action-3:hover { background: #e2ceae; }
|
||||
|
||||
.btn-Neg, .btn-Neg:hover { background: #aaaaaa; color: #f8f8f8; }
|
||||
|
||||
.btn-Disable, .btn-Disable:hover, .btn-Disable:visited { background: #fafafa; border: 1px solid #eee; color: #343434; cursor: default; }
|
||||
|
||||
.btn-Square { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background-clip: padding-box; }
|
||||
|
||||
.btn-Round { -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; background-clip: padding-box; }
|
||||
|
||||
.nav ul, .nav ol { border: 1px solid #ccc; padding: 4px; }
|
||||
.nav li { margin: 0; }
|
||||
.nav a { display: block; padding: 4px 8px; text-decoration: underline; }
|
||||
.nav a:hover { text-decoration: none; }
|
||||
|
||||
.h-Nav > li, .bread > li { float: left; }
|
||||
|
||||
.c-Nav { font-size: 0; text-align: center; }
|
||||
|
||||
.c-Nav > li, .ah-Nav a { display: inline-block; font-size: 16px; }
|
||||
|
||||
.v-Nav { /* really only needs styling applied to it, as vertical nav is default */ }
|
||||
|
||||
.ah-Nav { font-size: 0; }
|
||||
|
||||
.av-Nav .drop-Start { display: block; }
|
||||
|
||||
.drop-Start { position: relative; }
|
||||
.drop-Start:hover { background: #eee; }
|
||||
.drop-Start:hover .drop-Menu { visibility: visible; }
|
||||
.drop-Start a { white-space: nowrap; }
|
||||
|
||||
.drop-Menu { background: #eee; border: 1px solid #ddd; position: absolute; visibility: hidden; z-index: 5; }
|
||||
|
||||
.v-Nav .drop-Menu, .av-Nav .drop-Menu { left: 100%; top: 0; }
|
||||
|
||||
.h-Nav .drop-Menu, .bread .drop-Menu, .ah-Nav .drop-Menu { left: 0; top: 100%; }
|
||||
|
||||
.bread li:last-child:after { content: none; }
|
||||
.bread li:after { content: ">"; display: inline-block; }
|
||||
.bread a { display: inline-block; }
|
||||
.bread span { display: inline-block; padding: 4px 8px; }
|
||||
|
||||
.float-Left { float: left; }
|
||||
|
||||
.float-Right { float: right; }
|
||||
|
||||
.float-None { float: none; }
|
||||
|
||||
.clear { clear: both; }
|
||||
|
||||
.clearfix, .row, .c-Row, nav ul, nav ol, .media, .media-Reverse, .media-No-Wrap-Reverse, .media-No-Wrap { *zoom: 1; }
|
||||
.clearfix:before, .row:before, .c-Row:before, nav ul:before, nav ol:before, .media:before, .media-Reverse:before, .media-No-Wrap-Reverse:before, .media-No-Wrap:before, .clearfix:after, .row:after, .c-Row:after, nav ul:after, nav ol:after, .media:after, .media-Reverse:after, .media-No-Wrap-Reverse:after, .media-No-Wrap:after { content: ""; display: table; }
|
||||
.clearfix:after, .row:after, .c-Row:after, nav ul:after, nav ol:after, .media:after, .media-Reverse:after, .media-No-Wrap-Reverse:after, .media-No-Wrap:after { clear: both; }
|
||||
|
||||
.overflow { overflow: hidden; }
|
||||
|
||||
blockquote, h1, h2, h3, h4, h5, h6, li, p, small, code, kbd, pre, samp, dt, form, table { margin-bottom: 12px; }
|
||||
|
||||
.d-Block, .show { display: block; }
|
||||
|
||||
.d-None, .mobile-Show { display: none; }
|
||||
|
||||
.hidden { display: none !important; visibility: hidden; }
|
||||
|
||||
.invis { border: 0 !important; height: 1px !important; left: -999999px !important; overflow: hidden !important; position: absolute !important; width: 1px !important; }
|
||||
|
||||
.pic, .pic-Rounded { border: 1px solid white; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-clip: padding-box; -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: inline-block; overflow: hidden; width: 90px; }
|
||||
.pic img, .pic-Rounded img { display: block; }
|
||||
|
||||
.pic-Rounded { -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background-clip: padding-box; }
|
||||
|
||||
/*
|
||||
Code Example
|
||||
--------------------------
|
||||
<a href="#" title="TITLE" class="pic-Rounded">
|
||||
<img src="assets/img/little-V.jpg" alt="" />
|
||||
</a>
|
||||
*/
|
||||
.media, .media-Reverse, .media-No-Wrap-Reverse, .media-No-Wrap { margin-bottom: 16px; position: relative; z-index: 2; }
|
||||
.media .media-Text > :last-child, .media-Reverse .media-Text > :last-child, .media-No-Wrap-Reverse .media-Text > :last-child, .media-No-Wrap .media-Text > :last-child { margin-bottom: 0; }
|
||||
.media .media-Object, .media-Reverse .media-Object, .media-No-Wrap-Reverse .media-Object, .media-No-Wrap .media-Object { float: left; margin: 0 16px 8px 0; max-width: 30%; }
|
||||
|
||||
.media-Reverse .media-Object, .media-No-Wrap-Reverse .media-Object { float: right; margin: 0 0 8px 16px; max-width: 30%; }
|
||||
|
||||
.media-No-Wrap { padding-left: 100px; }
|
||||
.media-No-Wrap .media-Text { float: left; width: 100%; }
|
||||
.media-No-Wrap .media-Object { margin-left: -100px; margin-right: 0; }
|
||||
|
||||
.media-No-Wrap-Reverse { padding-right: 100px; }
|
||||
.media-No-Wrap-Reverse .media-Object { margin-right: -100px; margin-left: 0; }
|
||||
|
||||
/*
|
||||
Code Example
|
||||
--------------------------
|
||||
<div class="media">
|
||||
<div class="media-Object">
|
||||
<img src="assets/img/little-V.jpg" alt="" />
|
||||
</div>
|
||||
<div class="media-Text">
|
||||
<h1>Title for Meida Element</h1>
|
||||
<p>Paragraph text to go along with media element.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-- Divs were used in this example, but the media element could be applied to various situations.
|
||||
Ie. could be used for a header or footer area where a logo is placed on the right or left w/text to the side.
|
||||
*/
|
||||
.emph-Block { background: #fafafa; border: 1px solid #ddd; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-clip: padding-box; -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); margin-bottom: 16px; min-height: 50px; padding: 16px; }
|
||||
.emph-Block > :last-child { margin-bottom: 0; }
|
||||
|
||||
.kill-List, .intro-List { list-style: none; padding: 0; }
|
||||
|
||||
.numbered { list-style-type: decimal; }
|
||||
|
||||
.shout-Out { background: #f8f8f8; border-left: 4px solid #343434; padding: 16px; }
|
||||
.shout-Out:before, .shout-Out:after { display: none; }
|
||||
|
||||
.action-Link:after { content: "\00A0" "\00BB"; }
|
||||
|
||||
.txt-Center { text-align: center; }
|
||||
|
||||
.txt-Left { text-align: left; }
|
||||
|
||||
.txt-Right { text-align: right; }
|
||||
|
||||
.txt-Just { text-align: justify; }
|
||||
|
||||
.highlight, .slant { background: yellow; color: #131313; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-clip: padding-box; display: inline-block; padding: 4px; vertical-align: text-top; }
|
||||
|
||||
.slant { -moz-transform: skewX(-16deg); -ms-transform: skewX(-16deg); -o-transform: skewX(-16deg); -webkit-transform: skewX(-16deg); transform: skewX(-16deg); }
|
||||
|
||||
.text-Correct { display: inline-block; -moz-transform: skewX(16deg); -ms-transform: skewX(16deg); -o-transform: skewX(16deg); -webkit-transform: skewX(16deg); transform: skewX(16deg); }
|
||||
|
||||
/*
|
||||
Code Example: Slanted Text w/Highlight
|
||||
--------------------------
|
||||
<span class="slant">
|
||||
Text Goes here
|
||||
</span>
|
||||
|
||||
Code Example: Normal flowing text w/slanted highlight
|
||||
--------------------------
|
||||
<span class="slant">
|
||||
<span class="text-Correct">Text Goes here</span>
|
||||
</span>
|
||||
*/
|
||||
.multi { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 40px; -webkit-column-gap: 40px; column-gap: 40px; -moz-column-rule: 1px outset #eeeeee; -webkit-column-rule: 1px outset #eeeeee; column-rule: 1px outset #eeeeee; }
|
||||
|
||||
body { font-family: "Lucida Grande", verdana, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 { font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; }
|
||||
|
||||
.giga { font-size: 4.375em; font-weight: 700; }
|
||||
|
||||
.ultra { font-size: 3.75em; font-weight: 600; }
|
||||
|
||||
.mega { font-size: 3.5em; font-weight: 300; }
|
||||
|
||||
h1, .alpha { font-size: 3.125em; font-weight: 400; }
|
||||
|
||||
h2, .beta { font-size: 2.5em; font-weight: 400; }
|
||||
|
||||
h3, .gamma { font-size: 2em; font-weight: 400; }
|
||||
|
||||
h4, .delta { font-size: 1.625em; font-weight: 300; }
|
||||
|
||||
h5, .eps { font-size: 1.375em; font-weight: 300; }
|
||||
|
||||
h6, .zeta { font-size: 1.125em; font-weight: 300; }
|
||||
|
||||
p, li, .base { font-size: 0.9em; font-weight: 300; }
|
||||
|
||||
small, .tiny { font-size: 0.875em; font-weight: 300; }
|
||||
|
||||
.mini { font-size: 0.75em; font-weight: 300; }
|
||||
|
||||
.action-Link { float: right; }
|
||||
|
||||
body { background: #CCDF9B; }
|
||||
|
||||
::-moz-selection { background: #e93250; color: #eeeeee; text-shadow: none; }
|
||||
|
||||
::selection { background: #e93250; color: #eeeeee; text-shadow: none; }
|
||||
|
||||
.page { min-height: 600px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .page { min-height: 25px; } }
|
||||
|
||||
.content, .footer-Content { margin: 0 auto; max-width: 1200px; padding: 20px; }
|
||||
.content > :last-child, .footer-Content > :last-child { margin-bottom: 0; }
|
||||
|
||||
a { color: #e93250; }
|
||||
a:hover, a:active { color: #ba142f; }
|
||||
a:visited { color: #A5424B; }
|
||||
|
||||
:focus, a:focus, a:active, input[type="submit"]::-moz-focus-inner { outline: none; }
|
||||
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .col-33, .col-40, .col-60 { float: none; width: 100%; } }
|
||||
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .col-50 { float: none; padding: 0; width: 100% !important; } }
|
||||
|
||||
.header-Base { background: #65a0ad; border-bottom: 6px solid #e93250; min-height: 42px; overflow: hidden; }
|
||||
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .header-Content { padding: 0; } }
|
||||
|
||||
.blurb { background: #fff; }
|
||||
|
||||
.header-Intro { background: url(../img/neocity.jpg) 95% bottom no-repeat; min-height: 214px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .header-Intro { -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; min-height: 2px; } }
|
||||
|
||||
.header-Outro { 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 */ -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; }
|
||||
|
||||
.hp .header-Outro .col-50 { width: 48%; }
|
||||
|
||||
.hp .header-Outro .signup-Area { float: right; }
|
||||
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .intro-List { margin-bottom: 20px; padding: 20px !important; } }
|
||||
.intro-List li { padding-left: 36px; padding-right: 12px; margin-bottom: 20px; }
|
||||
.intro-List h2 { margin-bottom: 2px; }
|
||||
.intro-List p { color: #B2BCC1; }
|
||||
|
||||
.intro-Icon { background: url(../img/icons.png) no-repeat; display: block; height: 37px; left: -10px; position: absolute; top: 2px; width: 37px; }
|
||||
|
||||
.intro-Tools { position: relative; }
|
||||
|
||||
.intro-Question { position: relative; }
|
||||
.intro-Question .intro-Icon { background-position: 0 -40px; }
|
||||
|
||||
.intro-Social { position: relative; }
|
||||
.intro-Social .intro-Icon { background-position: 0 -80px; }
|
||||
|
||||
.signup-Area { min-height: 100px; position: relative; }
|
||||
|
||||
.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; width: 95%; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .signup-Form { height: auto; margin: 0; overflow: visible; padding-bottom: 20px; position: static; width: auto; } }
|
||||
.signup-Form h2 { margin-bottom: 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); font-size: 1.8em; }
|
||||
.signup-Form hr { border-bottom: 1px solid #4a6677; border-top: 1px solid #1d282d; margin: 4px 0 22px; }
|
||||
.signup-Form fieldset { background: url(../img/sign-up-bg.png) repeat-x center top; padding: 20px 33px; }
|
||||
.signup-Form label { color: #81b8c6; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .signup-Form label { font-size: 70%; } }
|
||||
.signup-Form .input-Area { background: #29383f; 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%; }
|
||||
.signup-Form .input-Area:focus { color: #eee; }
|
||||
.signup-Form .btn-Action { padding: 10px 25px; }
|
||||
|
||||
.small-Nav { background: #30424B; display: none; position: fixed; right: 0; top: 0; width: 50px; z-index: 9999; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .small-Nav { display: block; } }
|
||||
|
||||
.header-Nav { background: #5e95a1; border-bottom: 1px solid #92B4BD; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .header-Nav { position: fixed; top: -900px !important; } }
|
||||
.header-Nav.show-Nav { top: 0 !important; }
|
||||
.header-Nav a, .header-Nav a:visited { color: #fff; padding: 8px 12px; text-decoration: none; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .header-Nav a, .header-Nav a:visited { display: block; } }
|
||||
.header-Nav a:hover, .header-Nav a:visited:hover { background: #528995; text-decoration: underline; }
|
||||
.header-Nav a.selected, .header-Nav a:active, .header-Nav a:visited.selected, .header-Nav a:visited:active { background: #528995; text-decoration: underline; }
|
||||
|
||||
.constant-Nav { float: left; position: relative; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .constant-Nav { float: none; }
|
||||
.constant-Nav li { float: none; } }
|
||||
|
||||
.status-Nav { float: right; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .status-Nav { float: none; } }
|
||||
.status-Nav li { float: left; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .status-Nav li { float: none; } }
|
||||
|
||||
.hp .header-Base { padding-top: 46px; }
|
||||
|
||||
.hp .header-Nav { left: 0; position: fixed; top: 0; width: 100%; z-index: 3; }
|
||||
|
||||
.hp .hp-Logo { left: -90px; position: fixed; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s; }
|
||||
.hp .hp-Logo.in-View { left: 0 !important; z-index: 99; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .hp .hp-Logo.in-View { left: -90px !important; } }
|
||||
|
||||
.hp .logo { padding-top: 45px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .hp .logo { padding-left: 20px; padding-right: 20px; } }
|
||||
|
||||
.constant-Nav { margin-left: -88px; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .constant-Nav { margin-left: 0; } }
|
||||
.constant-Nav.in-View { margin-left: 0; padding-left: 70px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .constant-Nav.in-View { padding-left: 0; } }
|
||||
|
||||
.add-Stripe { border-bottom: 6px solid #E93250; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .add-Stripe { border: 0; } }
|
||||
|
||||
.interior .page { padding-top: 22px; float: left; width: 100%; }
|
||||
|
||||
.interior .signup-Form { top: 0; }
|
||||
|
||||
.interior .header-Base { left: 0; overflow: visible; position: fixed; top: 0; width: 100%; z-index: 9; }
|
||||
|
||||
.int-Logo { left: 0; position: absolute; top: 0; width: 70px; z-index: 9; }
|
||||
|
||||
.interior .header-Nav { padding-left: 70px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .interior .header-Nav { width: 100%; } }
|
||||
|
||||
.interior .constant-Nav { margin: 0; }
|
||||
|
||||
.content-Base { background: #f6f0e6; min-height: 500px; padding-bottom: 50px; padding-top: 10px; }
|
||||
.content-Base h1, .content-Base h2, .content-Base h3, .content-Base h4, .content-Base h5, .content-Base h6 { color: #e93250; }
|
||||
|
||||
.content, .footer-Content, .footer-Content { padding: 20px 3%; }
|
||||
|
||||
.single-Col { max-width: 800px; }
|
||||
|
||||
.twitter-tweet.twitter-tweet-rendered { margin: 0 auto 30px !important; }
|
||||
|
||||
.interior .header-Outro { padding-top: 30px; overflow: hidden; }
|
||||
|
||||
.interior .header-Outro h1 { font-size: 2.5em; margin-top: 15px; }
|
||||
|
||||
.site-url { font-size: 18px; margin-bottom: 8px; }
|
||||
|
||||
.site-url a { color: #e93250; font-weight: bold; }
|
||||
|
||||
.interior .header-Outro .subtitle { font-size: 1em; margin-top: -15px; }
|
||||
|
||||
.content.wide, .wide.footer-Content { padding-left: 6%; padding-right: 6%; }
|
||||
|
||||
.content.misc-page, .misc-page.footer-Content { background: #FAF6F1; -moz-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); padding: 1px 3% 40px 3%; }
|
||||
|
||||
.content.misc-page h3, .misc-page.footer-Content h3, .content.misc-page h4, .misc-page.footer-Content h4, .content.misc-page h5, .misc-page.footer-Content h5, .content.misc-page h6, .misc-page.footer-Content h6 { margin-top: 1em; }
|
||||
|
||||
.content.misc-page h2, .misc-page.footer-Content h2 { font-size: 1.6em; margin-top: 1em; }
|
||||
|
||||
.content.misc-page h3, .misc-page.footer-Content h3, .content.misc-page h4, .misc-page.footer-Content h4, .content.misc-page h5, .misc-page.footer-Content h5 { font-size: 1.2em; }
|
||||
|
||||
.content.misc-page h6, .misc-page.footer-Content h6 { font-size: 1em; }
|
||||
|
||||
.content.misc-page h1, .misc-page.footer-Content h1 { font-size: 2.2em; margin-bottom: 20px; }
|
||||
|
||||
.content.misc-page hr, .misc-page.footer-Content hr { margin: 35px 0 25px 0; }
|
||||
|
||||
.interior .header-Outro .col.col-50.signup-Area { padding-left: 0; }
|
||||
|
||||
.interior .header-Outro a { color: #E93250; }
|
||||
|
||||
.interior .header-Outro .btn-Action { color: #fff; }
|
||||
|
||||
.interior .signup-Area { min-height: 164px; }
|
||||
|
||||
.interior .signup-Area img { -moz-box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.1); border: 4px solid white; }
|
||||
|
||||
.interior .signup-Area.large img { border: 6px solid white; }
|
||||
|
||||
.interior .header-Outro .screenshot { width: 235px; height: 141px; }
|
||||
|
||||
.interior .header-Outro ul { margin: 0; padding: 0; }
|
||||
|
||||
.interior .header-Outro ul li { list-style: none; font-size: 80%; margin-bottom: 2px; }
|
||||
|
||||
.interior .signup-Form fieldset { padding: 20px; }
|
||||
|
||||
.interior .header-Outro h2 { margin-top: 12px; font-size: 1.8em; }
|
||||
|
||||
.welcome { background: #daeea5 url(../img/heartcat.png) no-repeat 20px center; background-size: 77px 81px; padding: 20px 20px 20px 108px; margin-bottom: 30px; }
|
||||
|
||||
.welcome h4 { font-size: 1.2em; margin-bottom: 4px; }
|
||||
|
||||
.welcome .close-button { float: right; background: url(../img/welcome-close.png) no-repeat; width: 19px; height: 19px; }
|
||||
|
||||
.files { float: left; background: #E4D8CB; width: 100%; position: relative; }
|
||||
|
||||
.files .header { background: #5E95A1; color: #fff; float: left; width: 100%; padding: 10px 20px; }
|
||||
|
||||
.files .breadcrumbs { float: left; font-weight: bold; margin-top: 4px; }
|
||||
|
||||
.files .actions { float: right; }
|
||||
|
||||
.files .btn-Action { margin-left: 8px; }
|
||||
|
||||
.btn-Action span { background-repeat: no-repeat; }
|
||||
|
||||
.btn-Action.new-Page span { background-image: url(../img/new-page.png); background-position-y: 1px; padding-left: 29px; }
|
||||
|
||||
.btn-Action.new-Folder span { background-image: url(../img/new-folder.png); padding-left: 26px; }
|
||||
|
||||
.btn-Action.upload span { background-image: url(../img/upload.png); padding-left: 24px; }
|
||||
|
||||
.files .list { padding: 20px; }
|
||||
|
||||
.files .list .upload-Boundary { float: left; border: 3px dashed #F6F0E6; width: 100%; margin: 18px 0; padding: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; min-height: 300px; }
|
||||
|
||||
.files .list .upload-Boundary.with-instruction { background: url(../img/drag-drop.png) no-repeat center center; }
|
||||
|
||||
.files .uploading-overlay { width: 100%; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.35); z-index: 100; }
|
||||
|
||||
.files .uploading { background: #fff; font-style: italic; margin-left: auto; margin-right: auto; width: 400px; margin-top: 14%; padding: 25px 40px 28px 40px; -webkit-box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5); -moz-box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5); box-shadow: 1px 1px 21px 5px rgba(50, 50, 50, 0.5); border-radius: 10px; }
|
||||
|
||||
.files .uploading p { margin-bottom: 2px; }
|
||||
|
||||
.files .progress-bar { background: #CCCCCC; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; width: 100%; position: relative; margin-top: 14px; height: 10px; overflow: hidden; }
|
||||
|
||||
.files .progress-bar .progress { background: #E93250; height: 100%; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; position: relative; overflow: hidden; display: block; }
|
||||
|
||||
.file { float: left; padding: 5px 0px; margin-right: 10px; margin-bottom: 10px; width: 125px; text-align: center; display: block; position: relative; }
|
||||
|
||||
.file .title { font-weight: bold; font-size: 12px; color: #666; margin-top: 4px; text-decoration: none; white-space: nowrap; overflow: hidden; display: block; }
|
||||
|
||||
.html-thumbnail { font-size: 11px; margin-top: 5px; margin-left: 10px; display: block; position: relative; width: 105px; height: 63px; }
|
||||
|
||||
.html-thumbnail.html img { width: 105px; height: 63px; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.html-thumbnail.image img { max-width: 105px; max-height: 63px; width: auto; height: auto; }
|
||||
|
||||
.html-thumbnail.misc { width: 63px; height: 63px; margin-left: auto; margin-right: auto; }
|
||||
|
||||
.misc-icon { background: url(../img/misc-file.png) no-repeat 0px 0px; width: 67px; height: 67px; display: block; padding-top: 35px; font-size: 14px; color: #bbb; font-weight: bold; margin-left: auto; margin-right: auto; }
|
||||
|
||||
.overlay a { color: white; text-decoration: none; font-size: 14px; display: block; }
|
||||
|
||||
.overlay i { font-weight: bold; }
|
||||
|
||||
.overlay { position: absolute; top: 0; width: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; }
|
||||
|
||||
.link-overlay { display: block; position: absolute; bottom: 0px; left: 0px; width: 123px; height: 30px; }
|
||||
|
||||
.file > .overlay { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding-top: 15px; background-color: rgba(0, 0, 0, 0.15); }
|
||||
|
||||
.filehover:hover .overlay, .fileimagehover:hover .overlay { display: block; }
|
||||
|
||||
.html-thumbnail.misc.fileimagehover .overlay { margin: 1px 0 0 2px; }
|
||||
|
||||
.site-actions { float: left; margin-top: 20px; font-size: 90%; }
|
||||
|
||||
.site-actions a { color: #666; }
|
||||
|
||||
@media (min-width: 1200px) { .container { width: 1200px; } }
|
||||
@media (min-width: 700px) and (max-width: 1200px) { .container { width: 100%; } }
|
||||
.content.misc-page.columns, .misc-page.columns.footer-Content { float: left; padding: 0; position: relative; clear: both; width: 100%; overflow: hidden; }
|
||||
|
||||
.col-left { float: left; width: 100%; position: relative; border-right: 1px solid #ddd; }
|
||||
|
||||
.right-col { background: #FAF6F1; }
|
||||
|
||||
.content.misc-page .col-33 h3, .misc-page.footer-Content .col-33 h3 { font-size: 1.5em; }
|
||||
|
||||
.content.misc-page .col-33 h3:nth-of-type(1), .misc-page.footer-Content .col-33 h3:nth-of-type(1) { margin-top: 0; }
|
||||
|
||||
.right-col .col-left { background-color: white; right: 33%; }
|
||||
|
||||
.content.misc-page.columns .col, .misc-page.columns.footer-Content .col { padding: 25px 30px 30px 30px; position: relative; overflow: hidden; }
|
||||
|
||||
.content.misc-page.columns .col-66, .misc-page.columns.footer-Content .col-66 { width: 67%; left: 33%; }
|
||||
|
||||
.content.misc-page.columns .col-33, .misc-page.columns.footer-Content .col-33 { width: 33%; left: 33%; }
|
||||
|
||||
.interior .header-Outro.with-columns { padding-top: 22px; }
|
||||
|
||||
.interior .header-Outro.with-columns h3 { float: left; margin-bottom: 0; font-size: 1.7em; }
|
||||
|
||||
.interior .header-Outro.with-columns .content, .interior .header-Outro.with-columns .footer-Content { padding: 0; }
|
||||
|
||||
.interior .header-Outro.with-columns .col { padding: 25px 0 8px 30px; }
|
||||
|
||||
.interior .header-Outro.with-columns .col-32 { width: 33%; }
|
||||
|
||||
.interior .header-Outro.with-columns .col-66 { width: 67%; border-right: 1px solid #0B0F11; }
|
||||
|
||||
.interior .header-Outro.with-columns .col-32 .edit { margin-top: 4px; float: right; margin-right: 30px; color: #fff; }
|
||||
|
||||
.feed-filter { float: left; margin-top: 1.4em; font-size: 0.8em; margin-left: 1.5em; }
|
||||
|
||||
.interior .header-Outro .feed-filter a { color: white; margin-left: 13px; }
|
||||
|
||||
.site-suggestion { float: left; width: 156px; margin-right: 20px; margin-bottom: 20px; height: 160px; }
|
||||
|
||||
.stats { margin-bottom: 2em; float: left; width: 100%; }
|
||||
|
||||
.content.misc-page.columns .stats .col, .misc-page.columns.footer-Content .stats .col { padding: 0; margin-bottom: 2em; }
|
||||
|
||||
.large-portrait { border: 10px solid white; -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2); }
|
||||
|
||||
.site-portrait { border: 5px solid white; -moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2); float: left; margin-bottom: .5em; }
|
||||
|
||||
.site-portrait img { width: 146px; }
|
||||
|
||||
.site-portrait .caption { display: block; clear: both; font-size: .8em; margin-top: .2em; margin-bottom: -.2em; }
|
||||
|
||||
a.tag { font-size: .7em; text-transform: uppercase; background: #FFFFCC; color: #C1A009; float: left; padding: 1px 5px; -moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); margin-right: 3px; margin-right: 10px; margin-bottom: 7px; }
|
||||
|
||||
a.tag:hover { text-decoration: none; background: #FFEE8A; }
|
||||
|
||||
.following { width: 100%; float: left; margin-bottom: 2em; }
|
||||
|
||||
.avatar { height: 37px; width: 37px; margin: 0 4px 4px 0; float: left; }
|
||||
|
||||
.news-item { width: 100%; float: left; }
|
||||
|
||||
.news-item.update, .news-item.tags, .news-item.comment.for-me, .news-item.tip.for-me { margin: 1.8em 0; }
|
||||
|
||||
.news-item:nth-of-type(1) { margin-top: 0; }
|
||||
|
||||
.news-item.first { margin-top: 0; }
|
||||
|
||||
.news-item .user { font-weight: bold; color: #000; }
|
||||
|
||||
.news-item .comment { color: #000; font-style: normal; font-size: .8em; }
|
||||
|
||||
.news-item.for-me .comment { color: #000; font-style: normal; margin-top: .2em; font-size: .9em; margin-bottom: -.4em; }
|
||||
|
||||
.news-item .icon { width: 20px; height: 20px; background: #E6E6E6; float: left; margin-right: 12px; }
|
||||
|
||||
.news-item.comment .icon { background: #DAEEA5; }
|
||||
|
||||
.news-item.comment.for-me .icon, .news-item.tip.for-me .icon { background-size: 62px 62px; width: 82px; height: 62px; background-position: right top; background-repeat: no-repeat; }
|
||||
|
||||
.news-item.update .icon { background: #E93250; }
|
||||
|
||||
.news-item.tip .icon { background: #FFCC00; }
|
||||
|
||||
.news-item.follow .icon { background: #3399CC; }
|
||||
|
||||
.news-item .title { margin-bottom: .4em; position: relative; width: 100%; float: left; }
|
||||
|
||||
.news-item .date { float: right; color: #aaa; font-size: 11px; margin-top: .5em; }
|
||||
|
||||
.news-item .files { background: #eee; padding: 8px 10px 2px 10px; border-top: 1px solid #ddd; margin-bottom: 4px; }
|
||||
|
||||
.news-item .file { width: 90px; margin-bottom: 0; padding: 0; }
|
||||
|
||||
.news-item .file a:hover { text-decoration: none; }
|
||||
|
||||
.news-item .html-thumbnail { margin-top: 1px; margin-left: 0px; width: auto; }
|
||||
|
||||
.news-item .site-suggestion { height: auto; margin-bottom: 10px; }
|
||||
|
||||
.news-item .tag { float: none; margin-left: 4px; }
|
||||
|
||||
.news-item .actions { font-size: 11px; }
|
||||
|
||||
.news-item .actions a { margin-right: 6px; }
|
||||
|
||||
.news-item .content, .news-item .footer-Content { padding: 0 0 0 32px; }
|
||||
|
||||
.news-item .comments { margin-bottom: 1.5em; margin-top: .7em; }
|
||||
|
||||
.news-item .comments .comment { font-size: .8em; clear: both; }
|
||||
|
||||
.news-item .comments .comment .user { margin-right: 5px; }
|
||||
|
||||
.news-item .comments .comment .actions { margin-top: .3em; }
|
||||
|
||||
.news-item .avatar { margin-right: 10px; }
|
||||
|
||||
.signup-Area.large { width: 418px; height: 236px; }
|
||||
|
||||
.interior .header-Outro.with-site-image { padding-top: 20px; }
|
||||
|
||||
.report { margin-top: 2em; float: left; width: 100%; font-size: .8em; }
|
||||
|
||||
.report, .report a { color: #999; }
|
||||
|
||||
.interior .header-Outro .actions a { margin-right: 6px; }
|
||||
|
||||
.interior .header-Outro .stats { margin-bottom: 1.2em; float: left; width: 100%; margin-top: 2em; }
|
||||
|
||||
.interior .header-Outro .stats strong { font-size: 1.5em; font-weight: bold; color: #DAEEA5; }
|
||||
|
||||
.interior .header-Outro .stats span { font-size: .7em; text-transform: uppercase; clear: both; display: block; }
|
||||
|
||||
.interior .header-Outro .stats .stat { float: left; width: 90px; text-align: center; }
|
||||
|
||||
.interior .header-Outro .stats .stat.tips { width: 60px; }
|
||||
|
||||
.btn-Action.follow span { background-image: url(../img/follow.png); padding-left: 22px; }
|
||||
|
||||
.btn-Action.tip span { background-image: url(../img/tip.png); padding-left: 26px; background-position-y: -1px; }
|
||||
|
||||
.btn-Action.share span { background-image: url(../img/share.png); padding-left: 26px; }
|
||||
|
||||
.col-33 .stats .stat { margin-bottom: .4em; }
|
||||
|
||||
.col-33 .stats .stat span { width: 10em; float: left; }
|
||||
|
||||
.archives { float: left; width: 100%; margin-bottom: 2em; }
|
||||
|
||||
.archives img { float: left; border: 3px solid white; -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); width: 72px; }
|
||||
|
||||
.archives img { margin-right: 10px; }
|
||||
|
||||
.more { float: left; clear: both; margin-top: 1em; font-size: .8em; }
|
||||
|
||||
.post-comment { background: #DAEEA5; float: left; width: 111%; padding: 20px 0 10px 30px; margin: -25px 0 28px -30px; }
|
||||
|
||||
.post-comment input { width: 84%; float: left; }
|
||||
|
||||
.post-comment .btn-Action { margin-left: 10px; margin-top: 4px; }
|
||||
|
||||
.supporter-badge { background: url(../img/supporter.png); width: 99px; height: 26px; float: left; margin-top: 7px; margin-left: 10px; }
|
||||
|
||||
.title-with-badge { float: left; width: 100%; }
|
||||
|
||||
.title-with-badge span { float: left; }
|
||||
|
||||
.section.featured-Websites { background: #65A0AD; }
|
||||
|
||||
.section.featured-Websites h2 { color: white; }
|
||||
|
||||
.section { padding: 50px 10%; margin: 0 auto; }
|
||||
|
||||
.section.previews { background: #f6f0e6; }
|
||||
|
||||
.section.previews h2, .section.previews p { color: #31424B; }
|
||||
|
||||
.section h2 { font-size: 1.6em; }
|
||||
|
||||
.section.last { background: #666666; }
|
||||
|
||||
.section.last h2, .section.last blockquote { color: white; }
|
||||
|
||||
.selected { font-weight: bold; }
|
||||
|
||||
.modal-body { max-height: 800px; overflow-y: visible; }
|
||||
|
||||
.tt-dropdown-menu { padding: 0px 10px 0px 10px; background: #FFFFFF; }
|
||||
|
||||
.footer-Base { color: #5e5b56; float: left; width: 100%; }
|
||||
.footer-Base h1, .footer-Base h2, .footer-Base h3, .footer-Base h4 { color: #8b9a7a; }
|
||||
|
||||
.footer-Intro { background: #daeea5; border-top: 1px solid #cedbab; -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); position: relative; }
|
||||
|
||||
.footer-Content { padding-top: 20px; padding-bottom: 20px; padding-left: 40px; padding-right: 20px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .footer-Content { padding-left: 20px; } }
|
||||
|
||||
.footer-Content .row, .footer-Content .c-Row { margin-left: 0; }
|
||||
|
||||
.f-Col { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; min-height: 125px; padding-bottom: 28px; position: relative; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col { min-height: 2px; padding-left: 15px !important; padding-right: 100px !important; } }
|
||||
.f-Col .action-Link { bottom: 0; position: absolute; right: 12px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col .action-Link { position: static; } }
|
||||
|
||||
.footer-icon { background-repeat: no-repeat; position: absolute; 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); height: 104px; right: 5px; width: 92px; }
|
||||
|
||||
.f-Col-2 { padding-left: 15px; padding-right: 6px; position: relative; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col-2 { border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 20px 0; overflow: hidden; 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: ""; height: 200px; opacity: 0.2; position: absolute; top: 0; width: 1px; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .f-Col-2:before, .f-Col-2:after { display: none; } }
|
||||
.f-Col-2:before { left: -14px; }
|
||||
.f-Col-2:after { right: -14px; }
|
||||
.f-Col-2 .footer-icon { background-image: url(../img/about-neocities.png); width: 100px; height: 106px; }
|
||||
|
||||
.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); height: 103px; width: 134px; }
|
||||
|
||||
.footer-Outro { background: #ccdf9b; border-top: 1px solid #b3c388; overflow: hidden; }
|
||||
.footer-Outro a { color: #5e5b56; }
|
||||
|
||||
.credits { margin-bottom: 0; }
|
||||
|
||||
.footer-Nav { text-transform: uppercase; }
|
||||
.footer-Nav .h-Nav, .footer-Nav .bread { float: right; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .footer-Nav .h-Nav, .footer-Nav .bread { float: none; margin-top: 15px; }
|
||||
.footer-Nav .h-Nav li:first-child a, .footer-Nav .bread li:first-child a { padding-left: 0; } }
|
||||
.footer-Nav .h-Nav a, .footer-Nav .bread a { padding: 0 8px; }
|
||||
.footer-Nav .h-Nav li:last-child a, .footer-Nav .bread li:last-child a { padding-right: 0; }
|
||||
|
||||
.alert { background-color: #F5BA00; color: #fff; }
|
||||
|
||||
.website-Gallery { list-style: none; padding: 10px 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.int-Gall li { border: 1px solid #ccc; margin: 0 .5% 12px; width: 24%; }
|
||||
@media (max-device-width: 480px), screen and (max-width: 800px) { .website-Gallery.int-Gall li { width: 49%; } }
|
||||
.website-Gallery.int-Gall li a { padding: 8px; }
|
||||
|
||||
.neo-SS, .neo-Screen-Shot { 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; position: relative; width: 100%; }
|
||||
|
||||
.img-Holder { -moz-background-size: cover !important; -webkit-background-size: cover !important; background-size: cover !important; display: block; }
|
||||
|
||||
.hp-Gallery img, .neo-Screen-Shot img { width: 100%; }
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<%= File.extname(f).sub('.', '') %>
|
||||
</span>
|
||||
<% end %>
|
||||
<span class="title"><%= f %></span>
|
||||
<span class="title" title="<%= f %>"><%= f %></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<link href="/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||
<link href="/assets/css/neo.css" rel="stylesheet" type="text/css" media="all"/>
|
||||
<link href="/css/neo.css" rel="stylesheet" type="text/css" media="all"/>
|
||||
<link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all"/>
|
||||
<link href="/css/styles.css" rel="stylesheet" type="text/css" media="all">
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue