crappyrules
/
notehub
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

mobile friendly styling added

master
Christian Mueller 12 years ago
parent
8a6eadf79a
commit
a13d9cd415
3 changed files with 98 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      LANDING.md
  2. 177
      resources/public/style.less
  3. 1
      src/NoteHub/views/pages.clj

9
LANDING.md
Unescape View File

@ -1,8 +1,11 @@
## News ## News
- January 2014: NoteHub API v1.0 [introduced](/api).
- January 2014: NoteHub 2.0 released: new theme, more performance, extended markdown - January 2014:
- September 2013: Solarized color theme [added](https://github.com/chmllr/NoteHub/pull/4) (thanks Brandon!) ([Demo](http://notehub.org/2012/6/16/how-notehub-is-built?theme=solarized-dark)) - Mobile friendly styling added.
- NoteHub API v1.0 [introduced](/api).
- NoteHub 2.0 released: new theme, more performance, extended markdown.
- September 2013: Solarized color theme [added](https://github.com/chmllr/NoteHub/pull/4) (thanks Brandon!) ([Demo](http://notehub.org/2012/6/16/how-notehub-is-built?theme=solarized-dark)).
## About ## About
[NoteHub](http://notehub.org) is a free and hassle-free anonymous pastebin for markdown pages intended for anonymous one-off publishing. [NoteHub](http://notehub.org) is a free and hassle-free anonymous pastebin for markdown pages intended for anonymous one-off publishing.

177
resources/public/style.less
Unescape View File

@ -17,162 +17,167 @@
// mixins // mixins
.helvetica { .helvetica {
font-weight: 300; font-weight: 300;
font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif'; font-family: 'Helvetica Neue','Helvetica','Arial','Lucida Grande','sans-serif';
} }
.central-element { .central-element {
@media screen and (min-width: 1024px) {
width: @width; width: @width;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
}
@media screen and (max-width: 1023px) {
margin-left: 1em;
margin-right: 1em;
}
} }
.thin-border { .thin-border {
border: 1px solid @foreground; border: 1px solid @foreground;
} }
// end mixins // end mixins
.ui-border {
border-radius: 3px;
.thin-border;
}
code, pre { code, pre {
font-family: "Menlo", "Andale Mono", "Consolas", Fixed, monospace; font-family: "Menlo", "Andale Mono", "Consolas", Fixed, monospace;
font-size: 0.9em; font-size: 0.9em;
} }
a { a {
color: @link_fresh; color: @link_fresh;
text-decoration: none; text-decoration: none;
border-bottom: 1px dotted; border-bottom: 1px dotted;
} }
a:hover { a:hover {
color: @link_hover; color: @link_hover;
} }
a:visited { a:visited {
color: @link_visited; color: @link_visited;
} }
#draft { #draft {
margin-bottom: 3em; margin-bottom: 3em;
}
.ui-border {
border-radius: 3px;
.thin-border;
} }
.button { .button {
cursor: pointer; cursor: pointer;
} }
.ui-elem { .ui-elem {
.helvetica; .helvetica;
border-radius: 3px; border-radius: 3px;
.thin-border; .thin-border;
padding: 0.3em; padding: 0.3em;
opacity: 0.8; opacity: 0.8;
font-size: 1em; font-size: 1em;
background: @background; background: @background;
} }
.landing-button, textarea, fieldset { .landing-button, textarea, fieldset {
border: none; border: none;
} }
.landing-button { .landing-button {
box-shadow: 0 2px 5px #aaa; box-shadow: 0 2px 5px #aaa;
text-decoration: none; text-decoration: none;
font-size: 1.5em; font-size: 1.5em;
background: #0a2; background: #0a2;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
.helvetica; .helvetica;
} }
.landing-button:hover { .landing-button:hover {
background: #0b2; background: #0b2;
} }
#panel { #panel {
.helvetica; .helvetica;
position: fixed; position: fixed;
width: 100%; width: 100%;
border-top: 1px dotted @foreground_halftone; border-top: 1px dotted @foreground_halftone;
background: @background_halftone; background: @background_halftone;
padding: 0.2em; padding: 0.2em;
bottom: 0px; bottom: 0px;
font-size: 0.7em; font-size: 0.7em;
text-align: center; text-align: center;
} }
#panel a { #panel a {
border: none; border: none;
} }
html, body { html, body {
background: @background; background: @background;
color: @foreground; color: @foreground;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#hero { #hero {
padding-top: 5em; padding-top: 5em;
padding-bottom: 5em; padding-bottom: 5em;
text-align: center; text-align: center;
} }
#hero h1 { #hero h1 {
font-size: 2.5em; font-size: 2.5em;
} }
#hero h2 { #hero h2 {
.helvetica; .helvetica;
margin: 2em; margin: 2em;
} }
article { article {
font-family: @text_font, 'Georgia'; font-family: @text_font, 'Georgia';
.central-element; .central-element;
margin-top: 5em; margin-top: 5em;
text-align: justify; text-align: justify;
font-size: @font_size; font-size: @font_size;
} }
article p { article p {
line-height: 140%; line-height: 140%;
} }
article > h1:first-child { article > h1:first-child {
text-align: center; text-align: center;
font-size: 2em; font-size: 2em;
margin: 2em; margin: 2em;
} }
.centered { .centered {
text-align: center; text-align: center;
} }
.bottom-space { .bottom-space {
margin-bottom: 7em; margin-bottom: 7em;
} }
pre { pre {
border-radius: 3px; border-radius: 3px;
padding: 0.5em; padding: 0.5em;
border: 1px dotted @foreground_halftone; border: 1px dotted @foreground_halftone;
background: @background_halftone; background: @background_halftone;
} }
*:focus { *:focus {
outline: 0px none transparent; outline: 0px none transparent;
} }
textarea { textarea {
width: @width; width: @width;
border-radius: 5px; border-radius: 5px;
font-family: Courier; font-family: Courier;
font-size: 1em; font-size: 1em;
height: 500px; height: 500px;
} }
.hidden, .markdown { .hidden, .markdown {
display: none; display: none;
} }
#dashed-line { #dashed-line {
border-bottom: 1px dashed @foreground_halftone; border-bottom: 1px dashed @foreground_halftone;
margin-top: 3em; margin-top: 3em;
margin-bottom: 3em; margin-bottom: 3em;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: @header_font,'Noticia Text','PT Serif','Georgia'; font-family: @header_font,'Noticia Text','PT Serif','Georgia';
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
} }
th { th {
padding: 0.3em; padding: 0.3em;
background-color: @background_halftone; background-color: @background_halftone;
} }
td { td {
border-top: 1px dotted @foreground_halftone; border-top: 1px dotted @foreground_halftone;
padding: 0.3em; padding: 0.3em;
} }
.middot { .middot {
padding: 0.5em; padding: 0.5em;

1
src/NoteHub/views/pages.clj
Unescape View File

@ -29,6 +29,7 @@
[:head [:head
[:title (print-str (get-message :name) "—" title)] [:title (print-str (get-message :name) "—" title)]
[:meta {:charset "UTF-8"}] [:meta {:charset "UTF-8"}]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1.2"}]
[:link {:rel "stylesheet/less" :type "text/css" :href "/style.less"}] [:link {:rel "stylesheet/less" :type "text/css" :href "/style.less"}]
(html (html
(include-js "/js/less.js") (include-js "/js/less.js")

Write Preview
Loading…
Cancel
Save