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