mirror of https://github.com/writeas/writefreely
Matt Baer
6 years ago
parent
18b9b2124e
commit
0567564905
@ -0,0 +1,14 @@ |
||||
|
||||
all : local |
||||
|
||||
install : |
||||
cd less/; $(MAKE) install $(MFLAGS)
|
||||
|
||||
clean : |
||||
cd less/; $(MAKE) install $(MFLAGS)
|
||||
|
||||
local : force_look |
||||
cd less/; $(MAKE) $(MFLAGS)
|
||||
|
||||
force_look : |
||||
true
|
||||
@ -0,0 +1,22 @@ |
||||
ifeq ($(shell which lessc),/usr/bin/lessc) |
||||
LESSC=/usr/bin/lessc
|
||||
else |
||||
LESSC=node_modules/.bin/lessc
|
||||
endif |
||||
export LESSC |
||||
|
||||
CSSDIR=../static/css/
|
||||
|
||||
all : |
||||
$(LESSC) app.less --clean-css="--s1 --advanced" $(CSSDIR)write.css
|
||||
$(LESSC) fonts.less --clean-css="--s1 --advanced" $(CSSDIR)fonts.css
|
||||
$(LESSC) icons.less --clean-css="--s1 --advanced" $(CSSDIR)icons.css
|
||||
|
||||
install : |
||||
./install-less.sh
|
||||
$(MAKE) all
|
||||
|
||||
clean : |
||||
rm -f write.css
|
||||
rm -f fonts.css
|
||||
rm -f icons.css
|
||||
@ -0,0 +1,9 @@ |
||||
@import "new-core"; |
||||
@import "core"; |
||||
@import "pad"; |
||||
@import "pad-theme"; |
||||
@import "post-temp"; |
||||
@import "effects"; |
||||
@import "pages/error"; |
||||
@import "lib/elements"; |
||||
@import "lib/material"; |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,39 @@ |
||||
.effect { |
||||
-moz-animation-name: fadeIn; |
||||
-webkit-animation-name: fadeIn; |
||||
-ms-animation-name: fadeIn; |
||||
animation-name: fadeIn; |
||||
-moz-animation-duration: .4s; |
||||
-webkit-animation-duration: .4s; |
||||
-ms-animation-duration: .4s; |
||||
animation-duration: .4s; |
||||
-moz-animation-timing-function: ease-in-out; |
||||
-webkit-animation-timing-function: ease-in-out; |
||||
-ms-animation-timing-function: ease-in-out; |
||||
animation-timing-function: ease-in-out; |
||||
-moz-animation-fill-mode: forwards; |
||||
-webkit-animation-fill-mode: forwards; |
||||
-ms-animation-fill-mode: forwards; |
||||
animation-fill-mode: forwards; |
||||
} |
||||
|
||||
.effect.fade-out { |
||||
-moz-animation-name: fadeOut; |
||||
-webkit-animation-name: fadeOut; |
||||
-ms-animation-name: fadeOut; |
||||
animation-name: fadeOut; |
||||
} |
||||
.del-undo { |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
@-moz-keyframes fadeIn { 0% { opacity: 0; position: static; } 100% { opacity: 1; }} |
||||
@-webkit-keyframes fadeIn { 0% { opacity: 0; position: static; } 100% { opacity: 1; }} |
||||
@-ms-keyframes fadeIn { 0% { opacity: 0; position: static; } 100% { opacity: 1; }} |
||||
@-keyframes fadeIn { 0% { opacity: 0; position: static; } 100% { opacity: 1; }} |
||||
|
||||
@-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; position: absolute; top: -1000px; left: -1000px; }} |
||||
@-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; position: absolute; top: -1000px; left: -1000px; }} |
||||
@-ms-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; position: absolute; top: -1000px; left: -1000px; }} |
||||
@-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; position: absolute; top: -1000px; left: -1000px; }} |
||||
@ -0,0 +1,64 @@ |
||||
/* open-sans-regular - latin */ |
||||
@font-face { |
||||
font-family: 'Open Sans'; |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
src: url('/fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */ |
||||
src: local('Open Sans'), local('OpenSans'), |
||||
url('/fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ |
||||
url('/fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */ |
||||
url('/fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ |
||||
url('/fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ |
||||
} |
||||
/* open-sans-700 - latin */ |
||||
@font-face { |
||||
font-family: 'Open Sans'; |
||||
font-style: normal; |
||||
font-weight: 700; |
||||
src: url('/fonts/open-sans-v13-latin-700.eot'); /* IE9 Compat Modes */ |
||||
src: local('Open Sans Bold'), local('OpenSans-Bold'), |
||||
url('/fonts/open-sans-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ |
||||
url('/fonts/open-sans-v13-latin-700.woff') format('woff'), /* Modern Browsers */ |
||||
url('/fonts/open-sans-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ |
||||
url('/fonts/open-sans-v13-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ |
||||
} |
||||
/* lora-regular - latin */ |
||||
@font-face { |
||||
font-family: 'Lora'; |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
src: url('/fonts/lora-v9-latin-regular.eot'); /* IE9 Compat Modes */ |
||||
src: local('Lora'), local('Lora-Regular'), |
||||
url('/fonts/lora-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('/fonts/lora-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ |
||||
url('/fonts/lora-v9-latin-regular.woff') format('woff'), /* Modern Browsers */ |
||||
url('/fonts/lora-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ |
||||
url('/fonts/lora-v9-latin-regular.svg#Lora') format('svg'); /* Legacy iOS */ |
||||
} |
||||
/* lora-700 - latin */ |
||||
@font-face { |
||||
font-family: 'Lora'; |
||||
font-style: normal; |
||||
font-weight: 700; |
||||
src: url('/fonts/lora-v9-latin-700.eot'); /* IE9 Compat Modes */ |
||||
src: local('Lora Bold'), local('Lora-Bold'), |
||||
url('/fonts/lora-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('/fonts/lora-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ |
||||
url('/fonts/lora-v9-latin-700.woff') format('woff'), /* Modern Browsers */ |
||||
url('/fonts/lora-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ |
||||
url('/fonts/lora-v9-latin-700.svg#Lora') format('svg'); /* Legacy iOS */ |
||||
} |
||||
@font-face { |
||||
font-family: 'Lora'; |
||||
font-style: italic; |
||||
font-weight: 400; |
||||
src: url('/fonts/lora-v10-latin_latin-ext-italic.eot'); /* IE9 Compat Modes */ |
||||
src: local('Lora Italic'), local('Lora-Italic'), |
||||
url('/fonts/lora-v10-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('/fonts/lora-v10-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ |
||||
url('/fonts/lora-v10-latin-italic.woff') format('woff'), /* Modern Browsers */ |
||||
url('/fonts/lora-v10-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ |
||||
url('/fonts/lora-v10-latin-italic.svg#Lora') format('svg'); /* Legacy iOS */ |
||||
} |
||||
@ -0,0 +1,38 @@ |
||||
@font-face { |
||||
font-family: 'Material Icons'; |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */ |
||||
src: local('Material Icons'), |
||||
local('MaterialIcons-Regular'), |
||||
url(/fonts/MaterialIcons-Regular.woff2) format('woff2'), |
||||
url(/fonts/MaterialIcons-Regular.woff) format('woff'), |
||||
url(/fonts/MaterialIcons-Regular.ttf) format('truetype'); |
||||
} |
||||
|
||||
.material-icons { |
||||
font-family: 'Material Icons'; |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
font-size: 24px; /* Preferred icon size */ |
||||
display: inline-block; |
||||
width: 1em; |
||||
height: 1em; |
||||
line-height: 1; |
||||
text-transform: none; |
||||
letter-spacing: normal; |
||||
word-wrap: normal; |
||||
white-space: nowrap; |
||||
direction: ltr; |
||||
|
||||
/* Support for all WebKit browsers. */ |
||||
-webkit-font-smoothing: antialiased; |
||||
/* Support for Safari and Chrome. */ |
||||
text-rendering: optimizeLegibility; |
||||
|
||||
/* Support for Firefox. */ |
||||
-moz-osx-font-smoothing: grayscale; |
||||
|
||||
/* Support for IE. */ |
||||
font-feature-settings: 'liga'; |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
#!/bin/sh |
||||
|
||||
# Install Less via npm |
||||
if [ ! -e "$(which lessc)" ]; then |
||||
sudo npm install -g less |
||||
sudo npm install -g less-plugin-clean-css |
||||
else |
||||
echo LESS $(npm view less version 2>&1 | grep -v WARN) is installed |
||||
fi |
||||
@ -0,0 +1,156 @@ |
||||
/*--------------------------------------------------- |
||||
LESS Elements 0.9 |
||||
--------------------------------------------------- |
||||
A set of useful LESS mixins |
||||
More info at: http://lesselements.com |
||||
---------------------------------------------------*/ |
||||
|
||||
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { |
||||
background: @color; |
||||
background: -webkit-gradient(linear, |
||||
left bottom, |
||||
left top, |
||||
color-stop(0, @start), |
||||
color-stop(1, @stop)); |
||||
background: -ms-linear-gradient(bottom, |
||||
@start, |
||||
@stop); |
||||
background: -moz-linear-gradient(center bottom, |
||||
@start 0%, |
||||
@stop 100%); |
||||
background: -o-linear-gradient(@stop, |
||||
@start); |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); |
||||
} |
||||
.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { |
||||
background: @color; |
||||
background: -webkit-gradient(linear, |
||||
left bottom, |
||||
left top, |
||||
color-stop(0, rgb(@start,@start,@start)), |
||||
color-stop(1, rgb(@stop,@stop,@stop))); |
||||
background: -ms-linear-gradient(bottom, |
||||
rgb(@start,@start,@start) 0%, |
||||
rgb(@stop,@stop,@stop) 100%); |
||||
background: -moz-linear-gradient(center bottom, |
||||
rgb(@start,@start,@start) 0%, |
||||
rgb(@stop,@stop,@stop) 100%); |
||||
background: -o-linear-gradient(rgb(@stop,@stop,@stop), |
||||
rgb(@start,@start,@start)); |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); |
||||
} |
||||
.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { |
||||
border-top: solid 1px @top-color; |
||||
border-left: solid 1px @left-color; |
||||
border-right: solid 1px @right-color; |
||||
border-bottom: solid 1px @bottom-color; |
||||
} |
||||
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { |
||||
-webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); |
||||
-moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); |
||||
box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); |
||||
} |
||||
.rounded(@radius: 2px) { |
||||
-webkit-border-radius: @radius; |
||||
-moz-border-radius: @radius; |
||||
border-radius: @radius; |
||||
} |
||||
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { |
||||
-webkit-border-top-right-radius: @topright; |
||||
-webkit-border-bottom-right-radius: @bottomright; |
||||
-webkit-border-bottom-left-radius: @bottomleft; |
||||
-webkit-border-top-left-radius: @topleft; |
||||
-moz-border-radius-topright: @topright; |
||||
-moz-border-radius-bottomright: @bottomright; |
||||
-moz-border-radius-bottomleft: @bottomleft; |
||||
-moz-border-radius-topleft: @topleft; |
||||
border-top-right-radius: @topright; |
||||
border-bottom-right-radius: @bottomright; |
||||
border-bottom-left-radius: @bottomleft; |
||||
border-top-left-radius: @topleft; |
||||
.background-clip(padding-box); |
||||
} |
||||
.opacity(@opacity: 0.5) { |
||||
-moz-opacity: @opacity; |
||||
-khtml-opacity: @opacity; |
||||
-webkit-opacity: @opacity; |
||||
opacity: @opacity; |
||||
@opperc: @opacity * 100; |
||||
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; |
||||
filter: ~"alpha(opacity=@{opperc})"; |
||||
} |
||||
.transition-duration(@duration: 0.2s) { |
||||
-moz-transition-duration: @duration; |
||||
-webkit-transition-duration: @duration; |
||||
-o-transition-duration: @duration; |
||||
transition-duration: @duration; |
||||
} |
||||
.transform(...) { |
||||
-webkit-transform: @arguments; |
||||
-moz-transform: @arguments; |
||||
-o-transform: @arguments; |
||||
-ms-transform: @arguments; |
||||
transform: @arguments; |
||||
} |
||||
.rotation(@deg:5deg){ |
||||
.transform(rotate(@deg)); |
||||
} |
||||
.scale(@ratio:1.5){ |
||||
.transform(scale(@ratio)); |
||||
} |
||||
.transition(@duration:0.2s, @ease:ease-out) { |
||||
-webkit-transition: all @duration @ease; |
||||
-moz-transition: all @duration @ease; |
||||
-o-transition: all @duration @ease; |
||||
transition: all @duration @ease; |
||||
} |
||||
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { |
||||
-webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); |
||||
-moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); |
||||
box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); |
||||
} |
||||
.box-shadow(@arguments) { |
||||
-webkit-box-shadow: @arguments; |
||||
-moz-box-shadow: @arguments; |
||||
box-shadow: @arguments; |
||||
} |
||||
.box-sizing(@sizing: border-box) { |
||||
-ms-box-sizing: @sizing; |
||||
-moz-box-sizing: @sizing; |
||||
-webkit-box-sizing: @sizing; |
||||
box-sizing: @sizing; |
||||
} |
||||
.user-select(@argument: none) { |
||||
-webkit-user-select: @argument; |
||||
-moz-user-select: @argument; |
||||
-ms-user-select: @argument; |
||||
user-select: @argument; |
||||
} |
||||
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { |
||||
-moz-column-width: @colwidth; |
||||
-moz-column-count: @colcount; |
||||
-moz-column-gap: @colgap; |
||||
-moz-column-rule-color: @columnRuleColor; |
||||
-moz-column-rule-style: @columnRuleStyle; |
||||
-moz-column-rule-width: @columnRuleWidth; |
||||
-webkit-column-width: @colwidth; |
||||
-webkit-column-count: @colcount; |
||||
-webkit-column-gap: @colgap; |
||||
-webkit-column-rule-color: @columnRuleColor; |
||||
-webkit-column-rule-style: @columnRuleStyle; |
||||
-webkit-column-rule-width: @columnRuleWidth; |
||||
column-width: @colwidth; |
||||
column-count: @colcount; |
||||
column-gap: @colgap; |
||||
column-rule-color: @columnRuleColor; |
||||
column-rule-style: @columnRuleStyle; |
||||
column-rule-width: @columnRuleWidth; |
||||
} |
||||
.translate(@x:0, @y:0) { |
||||
.transform(translate(@x, @y)); |
||||
} |
||||
.background-clip(@argument: padding-box) { |
||||
-moz-background-clip: @argument; |
||||
-webkit-background-clip: @argument; |
||||
background-clip: @argument; |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
/* Rules for sizing the icon. */ |
||||
.material-icons { |
||||
&.md-18 { font-size: 18px; } |
||||
&.md-24 { font-size: 24px; } |
||||
&.md-36 { font-size: 36px; } |
||||
&.md-48 { font-size: 48px; } |
||||
|
||||
/* Rules for using icons as black on a light background. */ |
||||
&.md-dark { |
||||
color: rgba(0, 0, 0, 0.54); |
||||
&.md-inactive { color: rgba(0, 0, 0, 0.26); } |
||||
} |
||||
|
||||
/* Rules for using icons as white on a dark background. */ |
||||
&.md-light { |
||||
color: rgba(255, 255, 255, 1); |
||||
&.md-inactive { color: rgba(255, 255, 255, 0.3); } |
||||
} |
||||
} |
||||
@ -0,0 +1,258 @@ |
||||
@actionNavColor: #999; |
||||
|
||||
body { |
||||
margin: 0; |
||||
padding: 0; |
||||
font-size: 100%; |
||||
|
||||
footer { |
||||
text-align: center; |
||||
padding: 0 2em; |
||||
|
||||
nav { |
||||
margin: 3em 0 4em; |
||||
color: #444; |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
+ a { |
||||
margin-left: 0.8em; |
||||
} |
||||
&:link, &:visited { |
||||
color: #999; |
||||
} |
||||
&:hover { |
||||
color: #666; |
||||
} |
||||
&.home { |
||||
color: #333; |
||||
font-weight: bold; |
||||
&:hover { |
||||
color: #000; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
header { |
||||
margin: 1em; |
||||
|
||||
h1 { |
||||
display: inline; |
||||
} |
||||
nav { |
||||
display: inline; |
||||
margin: 0 1em; |
||||
line-height: 2.4em; |
||||
span, a { |
||||
margin: 0 0 0 1em; |
||||
} |
||||
a { |
||||
color: @actionNavColor; |
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
} |
||||
p { |
||||
&.description { |
||||
color: #666; |
||||
font-size: 1.1em; |
||||
margin-top: 0.5em; |
||||
line-height: 1.5; |
||||
} |
||||
&.meta-note { |
||||
color: #333; |
||||
font-style: italic; |
||||
margin-top: 2em; |
||||
span { |
||||
text-transform: uppercase; |
||||
font-variant: small-caps; |
||||
font-size: 0.9em; |
||||
color: #666; |
||||
font-style: normal; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
hr { |
||||
border: 0; |
||||
height: 1px; |
||||
background: #ccc; |
||||
max-width: 40em; |
||||
margin: 4em auto; |
||||
text-align: center; |
||||
} |
||||
textarea, textarea:focus { |
||||
border: 0; |
||||
} |
||||
textarea, textarea:focus, input { |
||||
outline: 0; |
||||
} |
||||
textarea { |
||||
width: 100%; |
||||
resize: none; |
||||
&#editor { |
||||
position: fixed; |
||||
top: 3em; |
||||
right: 0; |
||||
bottom: 2em; |
||||
left: 0; |
||||
padding: 2em 2em 0 2em; |
||||
font-size: 2em; |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
|
||||
#official-writing, #wrapper { |
||||
margin: 1em 2em; |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding: 0 0 0 1em; |
||||
line-height: 1.4; |
||||
|
||||
&.collections, &.posts, &.integrations { |
||||
list-style: none; |
||||
margin-left: 1em; |
||||
li + li { |
||||
margin-top: 0.4em; |
||||
} |
||||
} |
||||
|
||||
&.collections li { |
||||
&.collection { |
||||
a.title { |
||||
font-size: 1.3em; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.clearfix { |
||||
overflow: auto; |
||||
} |
||||
.half-col, .half, .third { |
||||
float: left; |
||||
+ .half-col { |
||||
margin-left: 4em; |
||||
} |
||||
} |
||||
.half { |
||||
width: 50%; |
||||
} |
||||
.third { |
||||
width: 33%; |
||||
} |
||||
|
||||
code, textarea#embed { |
||||
font-family: monospace, monospace; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
#wrapper { |
||||
max-width: 50em; |
||||
} |
||||
#official-writing, #wrapper { |
||||
h2 { |
||||
&.minor { |
||||
font-size: 1.3em; |
||||
} |
||||
&.bugfix { |
||||
font-size: 1.15em; |
||||
} |
||||
|
||||
+.android-version { |
||||
margin-top: 0; |
||||
font-size: 1.1em; |
||||
a { |
||||
&:hover { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
#beta, .content-container { |
||||
max-width: 50em; |
||||
margin: 0 auto 3em; |
||||
font-size: 1.2em; |
||||
|
||||
&.tight { |
||||
max-width: 30em; |
||||
} |
||||
&.snug { |
||||
max-width: 40em; |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
|
||||
#collection-options { |
||||
#title, #description { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
} |
||||
.option { |
||||
h2 { |
||||
margin-top: 2em; |
||||
margin-bottom: 0.5em; |
||||
} |
||||
label { |
||||
&.option-text.disabled { |
||||
color: #999; |
||||
|
||||
#domain-alias { |
||||
border-color: #ccc; |
||||
} |
||||
&+p { |
||||
color: #555; |
||||
} |
||||
} |
||||
} |
||||
label+p, p.describe { |
||||
font-size: 0.8em; |
||||
margin-top: 0.4em; |
||||
margin-left: 1.8em; |
||||
} |
||||
input.low-profile { |
||||
padding: 0.25rem 0.5rem; |
||||
margin-left: 0.25rem; |
||||
font-size: 0.8em; |
||||
} |
||||
.fedi-handle { |
||||
margin-left: 0.5em; |
||||
.transition-duration(0.25s); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,217 @@ |
||||
@lightBG: #ffffff; |
||||
@lightTextColor: #000; |
||||
@lightLinkColor: #444; |
||||
@lightNavBG: #fff; |
||||
@lightNavHoverBG: #f6f6f6; |
||||
@lightNavBorder: #ccc; |
||||
|
||||
@darkBG: #222222; |
||||
@darkTextColor: #ffffff; |
||||
@darkLinkColor: #ccc; |
||||
@darkNavBG: #393939; |
||||
@darkNavHoverBG: #555; |
||||
@darkNavBorder: #333; |
||||
|
||||
.pad-theme-transition { |
||||
-moz-transition-property: background-color, color; |
||||
-webkit-transition-property: background-color, color; |
||||
-o-transition-property: background-color, color; |
||||
transition-property: background-color, color; |
||||
.transition-duration(0.25s); |
||||
} |
||||
|
||||
body#pad-sub #posts, .atoms { |
||||
h3 { |
||||
a { |
||||
color: @lightTextColor; |
||||
&:hover { |
||||
color: darken(@lightTextColor, 10%); |
||||
} |
||||
} |
||||
} |
||||
h3, h4 { |
||||
a { |
||||
color: @lightTextColor; |
||||
&:hover { |
||||
color: darken(@lightTextColor, 10%); |
||||
} |
||||
} |
||||
} |
||||
date, .electron { |
||||
color: #999; |
||||
} |
||||
a.action, a { |
||||
color: @lightLinkColor; |
||||
&:hover { |
||||
color: darken(@lightLinkColor, 10%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
body#pad, body#pad-sub { |
||||
.pad-theme-transition; |
||||
|
||||
&.light { |
||||
background-color: @lightBG; |
||||
color: @lightTextColor; |
||||
#tools { |
||||
.pad-theme-transition; |
||||
background-color: transparent; |
||||
h1 { |
||||
a { |
||||
color: @headerTextColor; |
||||
} |
||||
} |
||||
#belt { |
||||
a { |
||||
color: #000; |
||||
} |
||||
} |
||||
.tool { |
||||
&#status { |
||||
color: #999; |
||||
} |
||||
} |
||||
.hidden { |
||||
&#wc { |
||||
color: #777; |
||||
} |
||||
} |
||||
a:hover, a:active { |
||||
background-color: transparent; |
||||
color: @lightLinkColor; |
||||
} |
||||
} |
||||
.modal { |
||||
border-color: @lightNavBorder; |
||||
background: @lightNavBG; |
||||
} |
||||
} |
||||
|
||||
&.dark { |
||||
background-color: @darkBG; |
||||
color: @darkTextColor; |
||||
#tools { |
||||
.pad-theme-transition; |
||||
background-color: #262626; |
||||
h1 { |
||||
a { |
||||
color: @darkTextColor; |
||||
} |
||||
} |
||||
#belt { |
||||
a { |
||||
color: white; |
||||
} |
||||
} |
||||
.tool { |
||||
&#status { |
||||
color: #666; |
||||
} |
||||
} |
||||
.hidden { |
||||
&#wc { |
||||
color: #ececec; |
||||
} |
||||
} |
||||
a:hover, a:active { |
||||
background-color: transparent; |
||||
color: @darkLinkColor; |
||||
} |
||||
nav { |
||||
&> ul > li a { |
||||
color: @darkTextColor; |
||||
} |
||||
ul { |
||||
ul { |
||||
background: @darkNavBG; |
||||
border-color: @darkNavBorder; |
||||
} |
||||
li { |
||||
&.current-user { |
||||
color: #fff; |
||||
} |
||||
&.selected { |
||||
a { |
||||
color: #777; |
||||
} |
||||
} |
||||
} |
||||
li:hover { |
||||
background: @darkNavHoverBG; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
#posts { |
||||
h3 { |
||||
a { |
||||
color: @darkTextColor; |
||||
&:hover { |
||||
color: darken(@darkTextColor, 10%); |
||||
} |
||||
} |
||||
} |
||||
h3, h4 { |
||||
a { |
||||
color: @darkTextColor; |
||||
&:hover { |
||||
color: darken(@darkTextColor, 10%); |
||||
} |
||||
} |
||||
} |
||||
a.action, a { |
||||
color: @darkLinkColor; |
||||
&:hover { |
||||
color: darken(@darkLinkColor, 10%); |
||||
} |
||||
} |
||||
} |
||||
.modal { |
||||
border-color: @darkNavBorder; |
||||
background: @darkNavBG; |
||||
input { |
||||
color: #fff; |
||||
} |
||||
|
||||
.form-hint { |
||||
color: #ccc; |
||||
} |
||||
|
||||
a:link, a:visited { |
||||
color: lighten(@primary, 8%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
body#pad { |
||||
.pad-theme-transition; |
||||
|
||||
textarea { |
||||
.pad-theme-transition; |
||||
} |
||||
|
||||
&.dark { |
||||
textarea { |
||||
background-color: @darkBG; |
||||
color: @darkTextColor; |
||||
} |
||||
} |
||||
&.light { |
||||
textarea { |
||||
background-color: @lightBG; |
||||
color: @lightTextColor; |
||||
} |
||||
} |
||||
} |
||||
|
||||
body { |
||||
&.dark { |
||||
nav#top-nav { |
||||
a { |
||||
color: @darkLinkColor; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,464 @@ |
||||
.dropdown-nav { |
||||
font-family: @sansFont; |
||||
line-height: 2em; |
||||
span { |
||||
margin: 0; |
||||
} |
||||
.material-icons { |
||||
vertical-align: sub; |
||||
} |
||||
>ul>li { |
||||
line-height: 1.8; |
||||
bottom: -0.35em; |
||||
} |
||||
ul { |
||||
display: inline; |
||||
list-style:none; |
||||
position:relative; |
||||
margin:0; |
||||
padding:0; |
||||
|
||||
ul { |
||||
display:none; |
||||
position:absolute; |
||||
top:100%; |
||||
left:0; |
||||
background:#fff; |
||||
padding:0; |
||||
max-height: 30em; |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
border: 1px solid @lightNavBorder; |
||||
.rounded(.25em); |
||||
li { |
||||
line-height: 1.8; |
||||
display: block; |
||||
min-width: 9em; |
||||
max-width: 16em; |
||||
} |
||||
} |
||||
a { |
||||
display: block; |
||||
color:#333; |
||||
text-decoration:none; |
||||
padding: 0 0.5em; |
||||
margin: 0; |
||||
overflow: hidden; |
||||
white-space: -moz-nowrap; /* Mozilla, since 1999 */ |
||||
white-space: -nowrap; /* Opera 4-6 */ |
||||
white-space: -o-nowrap; /* Opera 7 */ |
||||
white-space: nowrap; |
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
li { |
||||
display: inline-block; |
||||
position: relative; |
||||
margin: 0; |
||||
padding: 0; |
||||
&:hover { |
||||
background: @lightNavHoverBG; |
||||
} |
||||
&:hover > ul { |
||||
display: block; |
||||
} |
||||
&.selected { |
||||
a, a:hover { |
||||
color: #888; |
||||
} |
||||
} |
||||
&.current-user, &.menu-heading { |
||||
font-weight: bold; |
||||
padding: 0 .5em; |
||||
color: #000; |
||||
&:hover { |
||||
background-color: transparent !important; |
||||
} |
||||
} |
||||
&.menu-heading { |
||||
color: #666; |
||||
font-weight: normal; |
||||
font-size: 0.8em; |
||||
padding: 0.2em 0.8em; |
||||
cursor: default; |
||||
text-align: left; |
||||
} |
||||
hr { |
||||
margin: 0.5em 0.75em; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
nav#manage { |
||||
.dropdown-nav; |
||||
ul ul li { |
||||
min-width: 11em; |
||||
img.ic-18dp { |
||||
margin-top: -2px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
img.ic-18dp { |
||||
width: 18px; |
||||
height: 18px; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
img.ic-24dp { |
||||
width: 24px; |
||||
height: 24px; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
body#pad, body#pad-sub { |
||||
margin: 0; |
||||
padding: 0; |
||||
font-size: 100%; |
||||
font-family: Lora, serif; |
||||
|
||||
header { |
||||
height: 1.6em; |
||||
} |
||||
|
||||
#tools { |
||||
margin: 0 0 1em; |
||||
padding: 1em 2em; |
||||
-moz-transition-property: opacity; |
||||
-webkit-transition-property: opacity; |
||||
-o-transition-property: opacity; |
||||
transition-property: opacity; |
||||
.transition-duration(0.4s); |
||||
|
||||
&:hover { |
||||
.opacity(1); |
||||
|
||||
.hidden { |
||||
.opacity(1); |
||||
} |
||||
} |
||||
|
||||
.hidden { |
||||
&#wc { |
||||
position: relative; |
||||
top: -0.15em; |
||||
font-size: 0.9em; |
||||
margin-left: 0.75em; |
||||
} |
||||
} |
||||
|
||||
h1 { |
||||
display: inline-block; |
||||
font-family: Lora, serif; |
||||
margin: 0; |
||||
font-size: 1.5em; |
||||
|
||||
a { |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
nav { |
||||
.dropdown-nav; |
||||
} |
||||
|
||||
#clip { |
||||
display: inline-block; |
||||
margin-top: -0.35em; |
||||
} |
||||
|
||||
#belt { |
||||
float: right; |
||||
|
||||
a { |
||||
padding: 1em 1.2em; |
||||
vertical-align: middle; |
||||
.opacity(.75); |
||||
.transition-duration(0.2s); |
||||
-moz-transition-property: opacity; |
||||
-webkit-transition-property: opacity; |
||||
-o-transition-property: opacity; |
||||
transition-property: opacity; |
||||
|
||||
&:hover { |
||||
.opacity(1); |
||||
} |
||||
|
||||
&.disabled, &.disabled:hover { |
||||
.opacity(.3); |
||||
} |
||||
|
||||
img.ic-24dp { |
||||
vertical-align: bottom; |
||||
} |
||||
|
||||
.material-icons { |
||||
vertical-align: middle; |
||||
max-width: 24px; |
||||
overflow: hidden; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.material-icons, img.ic-24dp { |
||||
&+ span { |
||||
margin-left: .4em; |
||||
height: 24px; |
||||
vertical-align: bottom; |
||||
} |
||||
} |
||||
} |
||||
.tool:last-child a { |
||||
padding-right: 0; |
||||
} |
||||
} |
||||
|
||||
.tool { |
||||
display: inline-block; |
||||
margin: 0; |
||||
|
||||
&#status { |
||||
&.doing { |
||||
font-style: italic; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
body#pad-sub { |
||||
.content-container { |
||||
p { |
||||
a:hover { |
||||
text-decoration: underline; |
||||
} |
||||
&.status { |
||||
text-align: center; |
||||
font-size: 1.1em; |
||||
&:first-child { |
||||
margin-top: 1.5em; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
body#pad { |
||||
textarea, |
||||
textarea:focus { |
||||
border: 0; |
||||
outline: 0; |
||||
} |
||||
textarea { |
||||
position: fixed !important; |
||||
top: 3em; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: auto; |
||||
height: calc(~"100% - 3em - 1px"); |
||||
padding: 1em 2em 2em; |
||||
font-size: 1.2em; |
||||
letter-spacing: 0.6px; |
||||
box-sizing: border-box; |
||||
resize: none; |
||||
|
||||
&.classy { |
||||
font-family: Lora, serif; |
||||
letter-spacing: 0.7px; |
||||
} |
||||
&.mono, &.code { |
||||
padding-left: 1em; |
||||
padding-right: 1em; |
||||
white-space: -moz-pre; /* Mozilla, since 1999 */ |
||||
white-space: -pre; /* Opera 4-6 */ |
||||
white-space: -o-pre; /* Opera 7 */ |
||||
white-space: pre; |
||||
word-wrap: normal; |
||||
} |
||||
&.norm, &.sans, &.wrap { |
||||
line-height: 1.4; |
||||
} |
||||
} |
||||
|
||||
#tools { |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
margin: 0; |
||||
.opacity(.2); |
||||
|
||||
.mode-wp { |
||||
font-family: serif; |
||||
} |
||||
.mode-typewriter { |
||||
font-family: "Courier New", monospace; |
||||
font-size: 1em; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.modal { |
||||
display: none; |
||||
position: absolute; |
||||
z-index: 11; |
||||
top: 3em; |
||||
left: 50%; |
||||
width: 30em; |
||||
margin-left: -15em; |
||||
padding: 1.5em 2em; |
||||
.rounded(.25em); |
||||
background: @lightNavBG; |
||||
border: 1px solid @lightNavBorder; |
||||
|
||||
h2 { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
input[type=text], input[type=email], input[type=password] { |
||||
background: transparent; |
||||
border: 0; |
||||
border-bottom: 1px solid #ccc; |
||||
-moz-transition-property: opacity; |
||||
-webkit-transition-property: opacity; |
||||
-o-transition-property: opacity; |
||||
transition-property: opacity; |
||||
.transition-duration(0.2s); |
||||
.opacity(1); |
||||
|
||||
&:disabled { |
||||
.opacity(.4); |
||||
} |
||||
} |
||||
|
||||
.short { |
||||
text-align: center; |
||||
} |
||||
|
||||
.form-hint { |
||||
font-size: 0.78em; |
||||
color: #888; |
||||
} |
||||
} |
||||
|
||||
#overlay { |
||||
display: none; |
||||
position: fixed; |
||||
top: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
background: rgba(0, 0, 0, 0.4); |
||||
z-index: 10; |
||||
} |
||||
|
||||
@media all and (max-height: 500px) { |
||||
body#pad { |
||||
textarea { |
||||
top: 2.25em; |
||||
padding-top: 0.25em; |
||||
} |
||||
#tools { |
||||
padding-top: 0.5em; |
||||
padding-bottom: 0.5em; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media all and (min-width: 360px) { |
||||
body#pad #tools .if-room.room-1, body#pad-sub #tools .tool.if-room.room-1, .if-room.room-1 { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
@media all and (min-width: 425px) { |
||||
body#pad #tools .if-room.room-2, body#pad-sub #tools .tool.if-room.room-2, .if-room.room-2 { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
@media all and (min-width: 510px) { |
||||
body#pad #tools .if-room.room-3, body#pad-sub #tools .tool.if-room.room-3, .if-room.room-3 { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
@media all and (max-width: 650px) { |
||||
body#pad #tools .tool.if-room, body#pad-sub #tools .tool.if-room, .if-room { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
@media all and (max-width: 600px) { |
||||
.modal { |
||||
margin-left: 0; |
||||
width: auto; |
||||
left: 0; |
||||
right: 0; |
||||
} |
||||
#user-nav .tabs { |
||||
display: block; |
||||
text-align: center; |
||||
margin: 0.5em 0 -2em; |
||||
a:first-child { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
#target-name { |
||||
max-width: 98px; |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
@media all and (min-width: 50em) { |
||||
body#pad { |
||||
textarea { |
||||
padding-left: 10%; |
||||
padding-right: 10%; |
||||
} |
||||
} |
||||
} |
||||
@media all and (min-width: 60em) { |
||||
body#pad { |
||||
textarea { |
||||
padding-left: 15%; |
||||
padding-right: 15%; |
||||
} |
||||
} |
||||
} |
||||
@media all and (min-width: 70em) { |
||||
body#pad { |
||||
textarea { |
||||
padding-left: 20%; |
||||
padding-right: 20%; |
||||
} |
||||
} |
||||
} |
||||
@media all and (min-width: 85em) { |
||||
body#pad { |
||||
textarea { |
||||
padding-left: 25%; |
||||
padding-right: 25%; |
||||
} |
||||
} |
||||
} |
||||
@media all and (min-width: 105em) { |
||||
body#pad { |
||||
textarea { |
||||
padding-left: 30%; |
||||
padding-right: 30%; |
||||
} |
||||
} |
||||
} |
||||
@media (pointer: coarse) { |
||||
body#pad, body#pad-sub { |
||||
#tools { |
||||
.opacity(.8); |
||||
.hidden { |
||||
.opacity(.8); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
.error-page { |
||||
text-align: center; |
||||
max-width: 40em; |
||||
margin: 0 auto; |
||||
a:link, a:visited { |
||||
text-decoration: none; |
||||
} |
||||
a:hover { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
p { |
||||
line-height: 1.5; |
||||
&.msg { |
||||
font-size: 1.8em; |
||||
} |
||||
&.commentary { |
||||
font-size: 1.2em; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,68 @@ |
||||
body { |
||||
&#post, &#subpage { |
||||
header { |
||||
margin: 0 auto; |
||||
padding: 1em 2rem; |
||||
.opacity(0.4); |
||||
-moz-transition-property: opacity; |
||||
-webkit-transition-property: opacity; |
||||
-o-transition-property: opacity; |
||||
transition-property: opacity; |
||||
.transition-duration(.4s); |
||||
&:hover { |
||||
.opacity(1); |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 1.6em; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
article, pre, .hljs { |
||||
padding: 0.5em 2rem 1.5em; |
||||
} |
||||
body#post article, pre, .hljs { |
||||
font-size: 1.2em; |
||||
} |
||||
|
||||
/* Post mixins */ |
||||
.article-code() { |
||||
background-color: #f8f8f8; |
||||
border: 1px solid #ccc; |
||||
padding: 0.2em 0.4em; |
||||
font-size: 0.86em; |
||||
.rounded(.25em); |
||||
} |
||||
.article-blockquote() { |
||||
border-left: 4px solid #ddd; |
||||
padding: 0 1em; |
||||
margin: 0.5em; |
||||
color: #777; |
||||
display: inline-block; |
||||
|
||||
p { |
||||
display: block; |
||||
margin: 0.5em 0; |
||||
} |
||||
} |
||||
.article-p() { |
||||
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+ */ |
||||
} |
||||
.article-title() { |
||||
font-size: 1.5em; |
||||
display: block; |
||||
margin-top: 0; |
||||
margin-bottom: 1em; |
||||
} |
||||
|
||||
.hljs { |
||||
overflow-x: inherit; |
||||
background: transparent; |
||||
} |
||||
@ -0,0 +1 @@ |
||||
*.css |
||||
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 478 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue