|
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513 |
- @primary: rgb(114, 120, 191);
- @secondary: rgb(114, 191, 133);
- @subheaders: #444;
- @headerTextColor: black;
- @sansFont: 'Open Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
- @serifFont: Lora, 'Palatino Linotype', 'Book Antiqua', 'New York', 'DejaVu serif', serif;
- @monoFont: Hack, consolas, Menlo-Regular, Menlo, Monaco, 'ubuntu mono', monospace, monospace;
- @dangerCol: #e21d27;
- @errUrgentCol: #ecc63c;
- @proSelectedCol: #71D571;
- @textLinkColor: rgb(0, 0, 238);
-
- body {
- font-family: @serifFont;
- font-size-adjust: 0.5;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- background-color: white;
- color: #111;
-
- h1, header h2 {
- a {
- color: @headerTextColor;
- .transition-duration(0.2s);
- &:hover {
- color: #303030;
- text-decoration: none;
- }
- }
- }
- h1, h2, h3 {
- line-height: 1.2;
- }
-
- &#post article, &#collection article p, &#subpage article p {
- display: block;
- unicode-bidi: embed;
- white-space: pre;
- }
-
- &#post {
- #wrapper, pre {
- max-width: 40em;
- margin: 0 auto;
- a:hover {
- text-decoration: underline;
- }
- }
-
- blockquote {
- p + p {
- margin: -2em 0 0.5em;
- }
- }
- article {
- margin-bottom: 2em !important;
-
- h1, h2, h3, h4, h5, h6, p, ul, ol, code {
- display: inline;
- margin: 0;
- }
- hr + p, ol, ul {
- display: block;
- margin-top: -1rem;
- margin-bottom: -1rem;
- }
- ol, ul {
- margin: 2rem 0 -1rem;
- ol, ul {
- margin: 1.25rem 0 -0.5rem;
- }
- }
- li {
- margin-top: -0.5rem;
- margin-bottom: -0.5rem;
- }
- h2#title {
- .article-title;
- }
- h1 {
- font-size: 1.5em;
- }
- h2 {
- font-size: 1.17em;
- }
- }
-
- header {
- nav {
- span, a {
- &.pinned {
- &.selected {
- font-weight: bold;
- }
- &+.views {
- margin-left: 2em;
- }
- }
- }
- }
- }
- .owner-visible {
- display: none;
- }
- }
-
- &#post, &#collection, &#subpage {
- code {
- .article-code;
- }
- img, video, audio {
- max-width: 100%;
- }
- audio {
- width: 100%;
- white-space: initial;
- }
- pre {
- .code-block;
-
- code {
- background: transparent;
- border: 0;
- padding: 0;
- font-size: 1em;
- white-space: pre-wrap; /* CSS 3 */
- white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
- white-space: -pre-wrap; /* Opera 4-6 */
- white-space: -o-pre-wrap; /* Opera 7 */
- word-wrap: break-word; /* Internet Explorer 5.5+ */
- }
- }
- blockquote {
- .article-blockquote;
- }
- article {
- hr {
- margin-top: 0;
- margin-bottom: 0;
- }
- p.badge {
- background-color: #aaa;
- display: inline-block;
- padding: 0.25em 0.5em;
- margin: 0;
- float: right;
- color: white;
- .rounded(.25em);
- }
- }
- header {
- nav {
- span, a {
- &.pinned {
- &+.pinned {
- margin-left: 1.5em;
- }
- }
- }
- }
- }
- footer {
- nav {
- a {
- margin-top: 0;
- }
- }
- }
- }
- &#collection {
- #welcome, .access {
- margin: 0 auto;
- max-width: 35em;
- h2 {
- font-weight: normal;
- margin-bottom: 1em;
- }
- p {
- font-size: 1.2em;
- line-height: 1.6;
- }
- }
- .access {
- margin: 8em auto;
- text-align: center;
- h2, ul.errors {
- font-size: 1.2em;
- margin-bottom: 1.5em !important;
- }
- }
- header {
- padding: 0 1em;
- text-align: center;
- max-width: 50em;
- margin: 3em auto 4em;
-
- .writeas-prefix {
- a {
- color: #aaa;
- }
- display: block;
- margin-bottom: 0.5em;
- }
- nav {
- display: block;
- margin: 1em 0;
- a:first-child {
- margin: 0;
- }
- }
- }
- nav#manage {
- position: absolute;
- top: 1em;
- left: 1.5em;
- li a.write {
- font-family: @serifFont;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- }
- }
- pre {
- line-height: 1.5;
- }
- }
- &#subpage {
- #wrapper {
- h1 {
- font-size: 2.5em;
- letter-spacing: -2px;
- padding: 0 2rem 2rem;
- }
- }
- }
- &#post {
- pre {
- font-size: 0.75em;
- }
- }
-
- &#collection, &#subpage {
- #wrapper {
- margin-left: auto;
- margin-right: auto;
-
- article {
- margin-bottom: 4em;
-
- &:hover {
- .hidden {
- .opacity(1);
- }
- }
- }
- h2 {
- margin-top: 0em;
- margin-bottom: 0.25em;
- &+time {
- display: block;
- margin-top: 0.25em;
- margin-bottom: 0.25em;
- }
- }
- time {
- font-size: 1.1em;
-
- &+p {
- margin-top: 0.25em;
- }
- }
- footer {
- text-align: left;
- padding: 0;
- }
- }
- #paging {
- overflow: visible;
- padding: 1em 6em 0;
- }
- a.read-more {
- color: #666;
- }
- }
-
- &#me #official-writing {
- h2 {
- font-weight: normal;
- a {
- font-size: 0.6em;
- margin-left: 1em;
- }
- a[name] {
- margin-left: 0;
- }
- a:link, a:visited {
- color: @textLinkColor;
- }
- a:hover {
- text-decoration: underline;
- }
- }
- }
- &#promo {
- div.heading {
- margin: 8em 0;
- }
- div.heading, div.attention-form {
- h1 {
- font-size: 3.5em;
- }
- input {
- padding-left: 0.75em;
- padding-right: 0.75em;
- &[type=email] {
- max-width: 16em;
- }
- &[type=submit] {
- padding-left: 1.5em;
- padding-right: 1.5em;
- }
- }
- }
- h2 {
- margin-bottom: 0;
- font-size: 1.8em;
- font-weight: normal;
- span.write-as {
- color: black;
- }
- &.soon {
- color: lighten(@subheaders, 50%);
- span {
- &.write-as {
- color: lighten(#000, 50%);
- }
- &.note {
- color: lighten(#333, 50%);
- font-variant: small-caps;
- margin-left: 0.5em;
- }
- }
- }
- }
- .half-col a {
- margin-left: 1em;
- margin-right: 1em;
- }
- }
- nav#top-nav {
- display: inline;
- position: absolute;
- top: 1.5em;
- right: 1.5em;
- font-size: 0.95rem;
- font-family: @sansFont;
- text-transform: uppercase;
- a {
- color: #777;
- }
- a + a {
- margin-left: 1em;
- }
- }
-
- footer {
- nav, ul {
- a {
- display: inline-block;
- margin-top: 0.8em;
- .transition-duration(0.1s);
- text-decoration: none;
- + a {
- margin-left: 0.8em;
- }
- &:link, &:visited {
- color: #999;
- }
- &:hover {
- color: #666;
- text-decoration: none;
- }
- }
- }
- a.home {
- &:link, &:visited {
- color: #333;
- }
- font-weight: bold;
- text-decoration: none;
- &:hover {
- color: #000;
- }
- }
- ul {
- list-style: none;
- text-align: left;
- padding-left: 0 !important;
- margin-left: 0 !important;
- .icons img {
- height: 16px;
- width: 16px;
- fill: #999;
- }
- }
- }
- }
-
- nav#full-nav {
- margin: 0;
-
- .left-side {
- display: inline-block;
-
- a:first-child {
- margin-left: 0;
- }
- }
-
- .right-side {
- float: right;
- }
- }
-
- nav#full-nav a.simple-btn, .tool button {
- font-family: @sansFont;
- border: 1px solid #ccc !important;
- padding: .5rem 1rem;
- margin: 0;
- .rounded(.25em);
- text-decoration: none;
- }
-
- .post-title {
- a {
- &:link {
- color: #333;
- }
- &:visited {
- color: #444;
- }
- }
- time, time a:link, time a:visited, &+.time {
- color: #999;
- }
- }
-
- .hidden {
- -moz-transition-property: opacity;
- -webkit-transition-property: opacity;
- -o-transition-property: opacity;
- transition-property: opacity;
- .transition-duration(0.4s);
- .opacity(0);
- }
-
- a {
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
- &.subdued {
- color: #999;
- &:hover {
- border-bottom: 1px solid #999;
- text-decoration: none;
- }
- }
- &.danger {
- color: @dangerCol;
- font-size: 0.86em;
- }
- &.simple-cta {
- text-decoration: none;
- border-bottom: 1px solid #ccc;
- color: #333;
- padding-bottom: 2px;
- &:hover {
- text-decoration: none;
- }
- }
- &.action-btn {
- font-family: @sansFont;
- text-transform: uppercase;
- .rounded(.25em);
- background-color: red;
- color: white;
- font-weight: bold;
- padding: 0.5em 0.75em;
- &:hover {
- background-color: lighten(#f00, 5%);
- text-decoration: none;
- }
- }
- &.hashtag:hover {
- text-decoration: none;
- span + span {
- text-decoration: underline;
- }
- }
- &.hashtag {
- span:first-child {
- color: #999;
- margin-right: 0.1em;
- font-size: 0.86em;
- text-decoration: none;
- }
- }
- }
-
- abbr {
- border-bottom: 1px dotted #999;
- text-decoration: none;
- cursor: help;
- }
-
- body#collection article p, body#subpage article p {
- .article-p;
- }
- pre, body#post article, body#collection article, body#subpage article, body#subpage #wrapper h1 {
- max-width: 40rem;
- margin: 0 auto;
- }
- textarea, pre, body#post article, body#collection article p {
- &.norm, &.sans, &.wrap {
- line-height: 1.4em;
- white-space: pre-wrap; /* CSS 3 */
- white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
- white-space: -pre-wrap; /* Opera 4-6 */
- white-space: -o-pre-wrap; /* Opera 7 */
- word-wrap: break-word; /* Internet Explorer 5.5+ */
- }
- }
- textarea, pre, body#post article, body#collection article, body#subpage article, span, .font {
- &.norm {
- font-family: @serifFont;
- }
- &.sans {
- font-family: @sansFont;
- }
- &.mono, &.wrap, &.code {
- font-family: @monoFont;
- }
- &.mono, &.code {
- max-width: none !important;
- }
- }
- textarea {
- &.section {
- border: 1px solid #ccc;
- padding: 0.65em 0.75em;
- .rounded(.25em);
- &.codable {
- height: 12em;
- resize: vertical;
- }
- }
- }
- .ace_editor {
- height: 12em;
- border: 1px solid #333;
- max-width: initial;
- width: 100%;
- font-size: 0.86em !important;
- border: 1px solid #ccc;
- padding: 0.65em 0.75em;
- margin: 0;
- .rounded(.25em);
- }
-
- p {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- &.intro {
- font-size: 1.25em;
- text-align: center;
- }
- &.upgrade-prompt {
- font-size: 0.9em;
- color: #444;
- }
- &.text-cta {
- font-size: 1.2em;
- text-align: center;
- margin-bottom: 0.5em;
- &+ p {
- text-align: center;
- font-size: 0.7em;
- margin-top: 0;
- color: #666;
- }
- }
- &.error {
- font-style: italic;
- color: @errUrgentCol;
- }
- &.headeresque {
- font-size: 2em;
- }
- }
-
- table.classy {
- width: 95%;
- border-collapse: collapse;
- margin-bottom: 2em;
-
- tr + tr {
- border-top: 1px solid #ccc;
- }
- th {
- text-transform: uppercase;
- font-weight: normal;
- font-size: 95%;
- font-family: @sansFont;
- padding: 1rem 0.75rem;
- text-align: center;
- }
- td {
- height: 3.5rem;
- }
- p {
- margin-top: 0 !important;
- margin-bottom: 0 !important;
- }
-
- &.export {
- .disabled {
- color: #999;
- }
- .disabled, a {
- text-transform: lowercase;
- }
- }
- }
-
- body#collection article, body#subpage article {
- padding-top: 0;
- padding-bottom: 0;
- .book {
- h2 {
- font-size: 1.4em;
- }
- a.hidden.action {
- color: #666;
- float: right;
- font-size: 1em;
- margin-left: 1em;
- margin-bottom: 1em;
- }
- }
- }
- body#post article {
- p.badge {
- font-size: 0.9em;
- }
- }
-
- article {
- h2.post-title a[rel=nofollow]::after {
- content: '\a0 \2934';
- }
- }
-
-
- table.downloads {
- width: 100%;
- td {
- text-align: center;
- }
- img.os {
- width: 48px;
- vertical-align: middle;
- margin-bottom: 6px;
- }
- }
-
- select.inputform, textarea.inputform {
- border: 1px solid #999;
- }
-
- input, button, select.inputform, textarea.inputform {
- padding: 0.5em;
- font-family: @serifFont;
- font-size: 100%;
- .rounded(.25em);
- &[type=submit], &.submit {
- border: 1px solid @primary;
- background: @primary;
- color: white;
- .transition(0.2s);
- &:hover {
- background-color: lighten(@primary, 3%);
- }
- &:disabled {
- cursor: default;
- background-color: desaturate(@primary, 100%) !important;
- border-color: desaturate(@primary, 100%) !important;
- }
- }
- &.error[type=text], textarea.error {
- -webkit-transition: all 0.30s ease-in-out;
- -moz-transition: all 0.30s ease-in-out;
- -ms-transition: all 0.30s ease-in-out;
- -o-transition: all 0.30s ease-in-out;
- outline: none;
- }
- &.danger {
- border: 1px solid @dangerCol;
- background: @dangerCol;
- color: white;
- &:hover {
- background-color: lighten(@dangerCol, 3%);
- }
- }
-
- &.error[type=text]:focus, textarea.error:focus {
- box-shadow: 0 0 5px @errUrgentCol;
- border: 1px solid @errUrgentCol;
- }
- }
-
- div.flat-select {
- display: inline-block;
- position: relative;
- select {
- border: 0;
- background: 0;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- opacity: 0;
- }
-
- &.action {
- &:hover {
- label {
- text-decoration: underline;
- }
- }
- label, select {
- cursor: pointer;
- }
- }
- }
-
- input {
- &.underline{
- border: none;
- border-bottom: 1px solid #ccc;
- padding: 0 .2em .2em;
- font-size: 0.9em;
- color: #333;
- }
- &.inline {
- padding: 0.2rem 0.2rem;
- margin-left: 0;
- font-size: 1em;
- border: 0 !important;
- border-bottom: 1px solid #999 !important;
- width: 7em;
- .rounded(0);
- }
-
- &[type=tel], &[type=text], &[type=email], &[type=password] {
- border: 1px solid #999;
- }
- &.boxy {
- border: 1px solid #999 !important;
- }
- }
-
- #beta, .content-container {
- max-width: 50em;
- margin: 0 auto 3em;
- font-size: 1.2em;
-
- &.tight {
- max-width: 30em;
- }
- &.snug {
- max-width: 40em;
- }
- &.regular {
- font-size: 1em;
- }
- .app {
- + .app {
- margin-top: 1.5em;
- }
- h2 {
- margin-bottom: 0.25em;
- }
- p {
- margin-top: 0.25em;
- }
- }
-
- h2.intro {
- font-weight: normal;
- }
- p {
- line-height: 1.4;
- }
- li {
- margin: 0.3em 0;
- }
- h2 {
- &.light {
- font-weight: normal;
- }
- a {
- .transition-duration(0.2s);
- -moz-transition-property: color;
- -webkit-transition-property: color;
- -o-transition-property: color;
- transition-property: color;
-
- &:link, &:visited, &:hover {
- color: @subheaders;
- }
- &:hover {
- color: lighten(@subheaders, 10%);
- text-decoration: none;
- }
- }
- }
- }
- .content-container {
- &#pricing {
- button {
- cursor: pointer;
- color: white;
- margin-top: 1em;
- margin-bottom: 1em;
- padding-left: 1.5em;
- padding-right: 1.5em;
- border: 0;
- background: @primary;
- .rounded(.25em);
- .transition(0.2s);
-
- &:hover {
- background-color: lighten(@primary, 5%);
- }
- &.unselected {
- cursor: pointer;
- }
- }
- h2 span {
- font-weight: normal;
- }
- .half {
- margin: 0 0 1em 0;
- text-align: center;
- }
- }
- div.features {
- margin-top: 1.5em;
- text-align: center;
- font-size: 0.86em;
- ul {
- text-align: left;
- max-width: 26em;
- margin-left: auto !important;
- margin-right: auto !important;
- li.soon, span.soon {
- color: lighten(#111, 40%);
- }
- }
- }
- div.blurbs {
- >h2 {
- text-align: center;
- color: #333;
- font-weight: normal;
- }
- p.price {
- font-size: 1.2em;
- margin-bottom: 0;
- color: #333;
- margin-top: 0.5em;
- &+p {
- margin-top: 0;
- font-size: 0.8em;
- }
- }
- p.text-cta {
- font-size: 1em;
- }
- }
- }
- footer div.blurbs {
- display: flex;
- flex-flow: row;
- flex-wrap: wrap;
- }
- div.blurbs {
- .half, .third, .fourth {
- font-size: 0.86em;
- h3 {
- font-weight: normal;
- }
- p, ul {
- color: #595959;
- }
- hr {
- margin: 1em 0;
- }
- }
- .half {
- padding: 0 1em 0 0;
- width: ~"calc(50% - 1em)";
- &+.half {
- padding: 0 0 0 1em;
- }
- }
- .third {
- padding: 0;
- width: ~"calc(33% - 1em)";
- &+.third {
- padding: 0 0 0 1em;
- }
- }
- .fourth {
- flex: 1 1 25%;
- -webkit-flex: 1 1 25%;
- h3 {
- margin-bottom: 0.5em;
- }
- ul {
- margin-top: 0.5em;
- }
- }
- }
- .contain-me {
- text-align: left;
- margin: 0 auto 4em;
- max-width: 50em;
- h2 + p, h2 + p + p, p.describe-me {
- margin-left: 1.5em;
- margin-right: 1.5em;
- color: #333;
- }
- }
- footer.contain-me {
- font-size: 1.1em;
- }
- #official-writing, #wrapper {
- h2, h3, h4 {
- color: @subheaders;
- }
- ul {
- &.collections {
- margin-left: 0;
- li {
- &.collection {
- a.title {
- &:link, &:visited {
- color: @headerTextColor;
- }
- }
- }
- a.create {
- color: #444;
- }
- }
- & + p {
- margin-top: 2em;
- margin-left: 1em;
- }
- }
- }
- }
-
- #official-writing, #wrapper {
- h2 {
- &.major {
- color: #222;
- }
- &.bugfix {
- color: #666;
- }
-
- +.android-version {
- a {
- color: #999;
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
- }
-
- li {
- line-height: 1.4;
-
- .item-desc, .prog-lang {
- font-size: 0.6em;
- font-family: 'Open Sans', sans-serif;
- font-weight: bold;
- margin-left: 0.5em;
- margin-right: 0.5em;
- text-transform: uppercase;
- color: #999;
- }
- }
-
- .success {
- color: darken(@proSelectedCol, 20%);
- }
-
- .alert {
- padding: 1em;
- margin-bottom: 1.25em;
- border: 1px solid transparent;
- .rounded(.25em);
- &.info {
- color: #31708f;
- background-color: #d9edf7;
- border-color: #bce8f1;
- }
- &.success {
- color: #3c763d;
- background-color: #dff0d8;
- border-color: #d6e9c6;
- }
-
- p {
- margin: 0;
- &+p {
- margin-top: 0.5em;
- }
- }
- p.dismiss {
- font-family: @sansFont;
- text-align: right;
- font-size: 0.86em;
- text-transform: uppercase;
- }
- }
-
- ul.errors {
- padding: 0;
- text-indent: 0;
- li.urgent {
- list-style: none;
- font-style: italic;
- text-align: center;
- color: @errUrgentCol;
- a:link, a:visited {
- color: purple;
- }
- }
- li.info {
- list-style: none;
- font-size: 1.1em;
- text-align: center;
- }
- }
-
- body#pad #target a.upgrade-prompt {
- padding-left: 1em;
- padding-right: 1em;
- text-align: center;
- font-style: italic;
- color: @primary;
- }
-
- body#pad-sub #posts, .atoms {
- margin-top: 1.5em;
-
- h3 {
- margin-bottom: 0.25em;
- &+ h4 {
- margin-top: 0.25em;
- margin-bottom: 0.5em;
- &+ p {
- margin-top: 0.5em;
- }
- }
- .electron {
- font-weight: normal;
- margin-left: 0.5em;
- }
- }
- h3, h4 {
- a {
- .transition-duration(0.2s);
- -moz-transition-property: color;
- -webkit-transition-property: color;
- -o-transition-property: color;
- transition-property: color;
- }
- }
- h4 {
- font-size: 0.9em;
- font-weight: normal;
- }
- date, .electron {
- margin-right: 0.5em;
- }
- .action {
- font-size: 1em;
- }
- #more-posts p {
- text-align: center;
- font-size: 1.1em;
- }
- p {
- font-size: 0.86em;
- }
- .error {
- display: inline-block;
- font-size: 0.8em;
- font-style: italic;
- color: @errUrgentCol;
-
- strong {
- font-style: normal;
- }
- }
- .error + nav {
- display: inline-block;
- font-size: 0.8em;
- margin-left: 1em;
-
- a + a {
- margin-left: 0.75em;
- }
- }
- }
-
- h2 {
- a, time {
- &+.action {
- margin-left: 0.5em;
- }
- }
- }
- .action {
- font-size: 0.7em;
- font-weight: normal;
- font-family: @serifFont;
-
- &+ .action {
- margin-left: 0.5em;
- }
- &.new-post {
- font-weight: bold;
- }
- }
- article.moved {
- p {
- font-size: 1.2em;
- color: #999;
- }
- }
- span.as {
- .opacity(0.2);
- font-weight: normal;
- }
- span.ras {
- .opacity(0.6);
- font-weight: normal;
- }
-
- header {
- nav {
- .username {
- font-size: 2em;
- font-weight: normal;
- color: #555;
- }
- &#user-nav {
- margin-left: 0;
- & > a, .tabs > a {
- &.selected {
- cursor: default;
- font-weight: bold;
- &:hover {
- text-decoration: none;
- }
- }
- & + a {
- margin-left: 2em;
- }
- }
- a {
- font-size: 1.2em;
- font-family: @sansFont;
- span {
- font-size: 0.7em;
- color: #999;
- text-transform: uppercase;
- margin-left: 0.5em;
- margin-right: 0.5em;
- }
- &.title {
- font-size: 1.6em;
- font-family: @serifFont;
- font-weight: bold;
- }
- }
- nav > ul > li:first-child {
- &> a {
- display: inline-block;
- }
- img {
- position: relative;
- top: -0.5em;
- right: 0.3em;
- }
- }
- ul ul {
- font-size: 0.8em;
- a {
- padding-top: 0.25em;
- padding-bottom: 0.25em;
- }
- }
- li {
- line-height: 1.5;
- }
- }
- &.tabs {
- margin: 0 0 0 1em;
- }
- &+ nav.tabs {
- margin: 0;
- }
- }
- &.singleuser {
- margin: 0.5em 0.25em;
- nav#user-nav {
- nav > ul > li:first-child {
- img {
- top: -0.75em;
- }
- }
- }
- }
- .dash-nav {
- font-weight: bold;
- }
- }
-
- li#create-collection {
- display: none;
- h4 {
- margin-top: 0px;
- margin-bottom: 0px;
- }
- input[type=submit] {
- margin-left: 0.5em;
- }
- }
-
- #collection-options {
- .option {
- textarea {
- font-size: 0.86em;
- font-family: @monoFont;
- }
- .section > p.explain {
- font-size: 0.8em;
- }
- }
- }
-
- .img-placeholder {
- text-align: center;
- img {
- max-width: 100%;
- }
- }
-
- dl {
- &.admin-dl-horizontal {
- dt {
- font-weight: bolder;
- width: 360px;
- }
- dd {
- line-height: 1.5;
- }
- }
- }
- dt {
- float: left;
- clear: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- form {
- dt, dd {
- padding: 0.5rem 0;
- }
- dt {
- line-height: 1.8;
- }
- dd {
- font-size: 0.86em;
- line-height: 2;
- }
- }
- div.row {
- display: flex;
- align-items: center;
- > div {
- flex: 1;
- }
- }
-
- @media all and (max-width: 450px) {
- body#post {
- header {
- nav {
- .xtra-feature {
- display: none;
- }
- }
- }
- }
- }
- @media all and (min-width: 1280px) {
- body#promo {
- div.heading {
- margin: 10em 0;
- }
- }
- }
-
- @media all and (min-width: 1600px) {
- body#promo {
- div.heading {
- margin: 14em 0;
- }
- }
- }
-
- @media all and (max-width: 900px) {
- .half.big {
- padding: 0 !important;
- width: 100% !important;
- }
- .third {
- padding: 0 !important;
- float: none;
- width: 100% !important;
- p.introduction {
- font-size: 0.86em;
- }
- }
- div.blurbs {
- .fourth {
- flex: 1 1 15em;
- -webkit-flex: 1 1 15em;
- }
- }
- .blurbs .third, .blurbs .half {
- p, ul {
- text-align: left;
- }
- }
- .half-col, .big {
- float: none;
- text-align: center;
-
- &+.half-col, &+.big {
- margin-top: 4em !important;
- margin-left: 0;
- }
- }
- #beta, .content-container {
- font-size: 1.15em;
- }
- }
-
- @media all and (max-width: 600px) {
- div.row {
- flex-direction: column;
- }
- .half {
- padding: 0 !important;
- width: 100% !important;
- }
- .third {
- width: 100% !important;
- float: none;
- }
- body#promo {
- div.heading {
- margin: 6em 0;
- }
- h2 {
- font-size: 1.6em;
- }
- .half-col a + a {
- margin-left: 1em;
- }
- .half-col a.channel {
- margin-left: auto !important;
- margin-right: auto !important;
- }
- }
- ul.add-integrations {
- li {
- display: list-item;
- &+ li {
- margin-left: 0;
- }
- }
- }
- }
-
- @media all and (max-height: 500px) {
- body#promo {
- div.heading {
- margin: 5em 0;
- }
- }
- }
-
- @media all and (max-height: 400px) {
- body#promo {
- div.heading {
- margin: 0em 0;
- }
- }
- }
-
- /* Smartphones (portrait and landscape) ----------- */
- @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
- header {
- .opacity(1);
- }
- }
-
- /* Smartphones (portrait) ----------- */
- @media only screen and (max-width : 320px) {
- .content-container#pricing {
- .half {
- float: none;
- width: 100%;
- }
- }
- header {
- .opacity(1);
- }
- }
-
- /* iPads (portrait and landscape) ----------- */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
- header {
- .opacity(1);
- }
- }
-
- @media (pointer: coarse) {
- body footer nav a:not(.pubd) {
- padding: 0.8em 1em;
- margin-left: 0;
- margin-top: 0;
- }
- }
-
- @media print {
- h1 {
- page-break-before: always;
- }
-
- h1, h2, h3, h4, h5, h6 {
- page-break-after: avoid;
- }
-
- table, figure {
- page-break-inside: avoid;
- }
-
- header, footer {
- display: none;
- }
- article#post-body {
- margin-top: 2em;
- margin-left: 0;
- margin-right: 0;
- }
- hr {
- border: 1px solid #ccc;
- }
- }
-
- .code-block {
- padding: 0;
- max-width: 100%;
- margin: 0;
- background: #f8f8f8;
- border: 1px solid #ccc;
- padding: 0.375em 0.625em;
- font-size: 0.86em;
- .rounded(.25em);
- }
- pre.code-block {
- overflow-x: auto;
- }
|