wezm.net/content/screen.sass

593 lines
9.3 KiB
Sass
Raw Normal View History

2017-09-30 02:42:32 +00:00
$ans-serif: Carlito, Calibri, sans-serif
2018-08-18 23:18:26 +00:00
$header-colour: #242424
2011-05-04 21:24:05 +00:00
2010-06-15 21:52:54 +00:00
body
2015-08-28 09:18:55 +00:00
font-family: $ans-serif
2010-06-15 21:52:54 +00:00
font-size: 16px
background: #fff
2015-08-28 09:18:55 +00:00
color: #464646
2010-06-15 21:52:54 +00:00
// HTML5 expectations - should go in reset perhaps
2010-08-04 02:52:32 +00:00
header, footer, nav, article, figure, figcaption
display: block
2010-06-15 21:52:54 +00:00
p, li, blockquote
2015-08-28 09:18:55 +00:00
line-height: 1.3
2010-06-15 21:52:54 +00:00
p, pre
margin: 0 0 1em 0
ul, ol
margin: 1em 0 1em 1em
ul
list-style: disc
ol
list-style: decimal
li
margin-left: 1em
dl
dd
margin-left: 2em
h1, h2, h3, h4, h5, h6
2011-05-04 21:24:05 +00:00
font-family: $ans-serif
2010-06-15 21:52:54 +00:00
margin: 0.6em 0 0.5em 0
color: #111
2013-07-28 07:27:22 +00:00
font-weight: 500
2010-06-15 21:52:54 +00:00
h1
font-size: 36px
h2
font-size: 24px
h3
font-size: 21px
h4
font-size: 18px
h5
font-size: 16px
h6
font-size: 14px
a
text-decoration: underline
&:link, &:visited
color: #36454F
h1 a
text-decoration: none
2010-06-27 21:14:48 +00:00
&:link, &:visited
color: #111
2010-06-15 21:52:54 +00:00
sup
vertical-align: super
font-size: 0.8em
pre, code, tt
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Bitstream Vera Sans Mono", "Menlo", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace
2010-06-15 21:52:54 +00:00
2013-07-28 07:27:22 +00:00
code, tt
font-size: smaller
2010-06-15 21:52:54 +00:00
pre
overflow-x: auto
2013-07-28 07:27:22 +00:00
padding-bottom: 0.25em
2010-06-15 21:52:54 +00:00
blockquote
border-left: 2px solid #999
padding-left: 1em
margin: 0 0 1em 0
2010-08-04 02:52:32 +00:00
figure
2010-09-13 08:37:53 +00:00
margin: 1em auto
text-align: center
2010-08-04 02:52:32 +00:00
2013-07-28 07:27:22 +00:00
&.screenshot
img
max-width: 50%
2010-08-04 02:52:32 +00:00
figcaption
2013-07-28 07:27:22 +00:00
font-size: smaller
2010-08-04 02:52:32 +00:00
text-align: center
font-style: italic
2013-07-28 07:27:22 +00:00
img
max-width: 100%
2010-08-04 02:52:32 +00:00
2014-12-18 11:22:12 +00:00
img.cover-photo
display: block
margin: 0 auto
2010-06-15 21:52:54 +00:00
img.lobsters
position: relative
top: 2px
2018-01-21 09:48:04 +00:00
video
max-width: 100%
2010-06-24 08:37:48 +00:00
body > header
2011-05-04 21:24:05 +00:00
font-family: $ans-serif
2010-06-15 21:52:54 +00:00
font-size: 18px
color: white
padding: 0.5em
2018-08-18 23:18:26 +00:00
background-color: $header-colour
2010-06-15 21:52:54 +00:00
a
2010-06-27 21:53:27 +00:00
-webkit-transition: border-bottom-color 500ms ease-out
2015-08-28 09:18:55 +00:00
transition: border-bottom-color 500ms ease-out
border-bottom: 2px solid rgba(255, 255, 255, 0.0)
2010-06-15 21:52:54 +00:00
&:link, &:visited
text-decoration: none
color: white
&:hover
border-bottom-color: rgba(255, 255, 255, 1.0)
2010-06-15 21:52:54 +00:00
#menu
float: right
padding-right: 0.25em
li
2018-08-18 23:18:26 +00:00
font-size: 14px
font-weight: bold
text-transform: uppercase
letter-spacing: 0.5px
2010-06-15 21:52:54 +00:00
#content
2013-07-28 07:27:22 +00:00
margin: 0 auto
2010-06-15 21:52:54 +00:00
clear: both
2013-07-28 07:27:22 +00:00
max-width: 728px
font-size: 18px
2010-06-15 21:52:54 +00:00
footer
color: #999
border-top: 1px solid #999
2018-10-31 08:39:16 +00:00
margin: 3em 20px 2em
2010-06-15 21:52:54 +00:00
clear: both
.copyright
2011-05-04 21:24:05 +00:00
font-family: $ans-serif
2010-06-15 21:52:54 +00:00
font-size: 14px
2018-10-31 08:39:16 +00:00
margin-top: 1em
2010-06-15 21:52:54 +00:00
display: block
2015-08-28 09:18:55 +00:00
.align-top
vertical-align: top
2010-06-15 21:52:54 +00:00
.with-border
border: 1px solid #D8D8D8
2018-10-31 08:39:16 +00:00
.no-border
border: none
text-decoration: none
.socials
margin-top: 1em
float: right
.social-icon
margin: 0 0.5em
.social-icon-wide
margin: 0 0.6em
2010-06-15 21:52:54 +00:00
2018-03-16 23:48:48 +00:00
.home
h1 > a:first-child
-webkit-transition: border-bottom-color 500ms ease-out
transition: border-bottom-color 500ms ease-out
border-bottom: 2px solid rgba(17, 17, 17, 0.0)
&:hover
border-bottom-color: rgba(17, 17, 17, 1.0)
main
display: flex
margin: 0 20px
margin: 0 auto
padding: 0 20px
max-width: 1200px
min-height: 85vh
#posts
width: 100%
#projects
2018-03-17 00:00:09 +00:00
width: 300px
2018-03-16 23:48:48 +00:00
flex-shrink: 0
margin-left: 2em
ul.projects
list-style: none
margin: 0
padding-top: 1em
li
margin: 1em 0
2010-06-15 21:52:54 +00:00
2018-03-16 23:48:48 +00:00
img, svg
width: 32px
vertical-align: middle
margin-right: 0.5em
2010-06-15 21:52:54 +00:00
2018-03-16 23:48:48 +00:00
p
margin-left: calc(32px + 0.5em)
2010-06-15 21:52:54 +00:00
ul.articles
list-style: none
margin: 0
clear: left
li
margin: 0
padding-top: 1em
body.articles ul.articles li
height: auto
padding-top: 0
ul.articles
li:first-child
border-top: none
padding-top: 1em
abbr
display: block
font-size: 12px
2010-07-12 22:02:49 +00:00
color: #999
2010-06-15 21:52:54 +00:00
strong
2011-05-04 21:24:05 +00:00
font-family: $ans-serif
2010-06-15 21:52:54 +00:00
margin: 0
2015-08-28 09:18:55 +00:00
font-weight: normal
2010-06-15 21:52:54 +00:00
display: block
2015-08-28 09:18:55 +00:00
font-size: 21px
2010-06-15 21:52:54 +00:00
a
&.more
display: block
margin: 1em 0 0 0
&.active
font-weight: bold
&.affiliate
background: url(/images/dollar.gif) no-repeat top right
padding-right: 4px
.inline
list-style: none
margin: 0
li
display: inline
&:first-child
margin-left: 0
2010-06-30 07:56:37 +00:00
body.articles #content nav
2010-06-15 21:52:54 +00:00
padding-bottom: 1em
#search
margin: 0
padding: 0
display: none
float: left
margin-right: 20px
fieldset
margin: 0
padding: 0
border: 0
label
2010-06-30 07:56:37 +00:00
font-weight: normal
padding-right: 10px
2010-06-15 21:52:54 +00:00
input
width: 180px
#respond
2018-08-18 23:18:26 +00:00
margin: 3em 0
2010-06-15 21:52:54 +00:00
clear: both
h2
margin-top: 0
#content
.published
2011-05-04 21:24:05 +00:00
font-family: $ans-serif
2010-06-15 21:52:54 +00:00
color: #999
padding-bottom: 10px
font-size: 14px
.alignleft
float: left
margin: 5px 10px 5px 0
.keyboard-shortcut
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
font-size: 1.5ex
2010-06-15 21:52:54 +00:00
img.alignleft
float: left
margin: 5px 10px 5px 0
2018-03-16 23:48:48 +00:00
.feed-icon
2010-06-27 21:53:27 +00:00
-webkit-transition: opacity 500ms ease-out
2015-08-28 09:18:55 +00:00
transition: opacity 500ms ease-out
opacity: 1.0
2010-06-27 21:14:48 +00:00
&:hover
2015-08-28 09:18:55 +00:00
opacity: 0.75
2018-03-16 23:48:48 +00:00
.feed-icon-sup
vertical-align: super
2015-08-28 09:18:55 +00:00
img.comment
padding-top: 1px
2010-06-27 21:14:48 +00:00
2010-06-15 21:52:54 +00:00
#content .alignright, img.alignright
float: right
margin: 5px 0 5px 10px
#content .aligncenter, div.aligncenter, img.aligncenter
text-align: center
display: block
margin: 10px auto
#content
.clear
clear: both
hr
border: 0
border-top-width: 1px
border-style: solid
border-top-color: #999
width: 10em
margin: 0
.seperator
text-align: center
color: #EEE
margin-bottom: 1em
font-size: smaller
hr
width: 33%
height: 1px
display: inline-block
border: none
background-color: #eeeeee
margin: 5px 0.5em
&.right
background-image: -webkit-gradient(linear, left center, right center, from(rgb(238, 238, 238)), to(rgb(255, 255, 255)))
background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
background-image: -moz-linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
background-image: -o-linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
background-image: -ms-linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
background-image: linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#eeeeee', EndColorStr='#ffffff')
&.left
background-image: -webkit-gradient(linear, right center, left center, from(rgb(238, 238, 238)), to(rgb(255, 255, 255)))
background-image: -webkit-linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
background-image: -moz-linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
background-image: -o-linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
background-image: -ms-linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
background-image: linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#ffffff', EndColorStr='#eeeeee')
2010-06-15 21:52:54 +00:00
table
&.left_headers, &.top_headers
border: 1px solid #D8D8D8
border-collapse: collapse
margin: 1em 0
&.left_headers
td, th
border: 1px solid #D8D8D8
padding: 0.3em 0.7em 0.3em 0.7em
&.top_headers
td, th
border: 1px solid #D8D8D8
padding: 0.3em 0.7em 0.3em 0.7em
&.left_headers th
text-align: right
&.gallery
border-collapse: collapse
width: 100%
td
padding: 10px 0
text-align: center
vertical-align: middle
img a
border: none
2010-07-14 02:40:51 +00:00
.vcard .photo
margin: 0 1em 1em 0
.text-right
text-align: right
2010-09-20 22:03:10 +00:00
.heading-icon
height: 20px
margin-right: 0.25em
2010-09-20 22:03:10 +00:00
// Weather
body.weather
2013-07-28 07:27:22 +00:00
#content
max-width: 100%
margin: 0 20px
#current > .temperature
2013-07-28 07:27:22 +00:00
.temperature
2011-05-04 21:24:05 +00:00
font-family: $ans-serif
2013-07-28 07:27:22 +00:00
.current
font-size: 36px
time
font-size: smaller
figure.forecast
margin: 0 1em 1em 0
width: 48px
float: left
2010-09-20 22:03:10 +00:00
.chart
clear: both
2010-10-16 08:52:38 +00:00
width: 100%
height: 320px
2010-09-20 22:03:10 +00:00
section, section > .temperature
clear: both
2010-10-16 08:52:38 +00:00
margin-top: 2em
.extreme
float: left
margin: 0 2em 2em 0
time.day
display: block
text-align: center
div, time
margin: 0.5em 0
font-family: $ans-serif
small
display: block
font-size: smaller
margin-top: 1em
color: #999
2013-07-28 07:27:22 +00:00
@media screen and (max-width: 768px)
#content
margin: 0 20px
2015-08-28 09:18:55 +00:00
font-size: 20px
2013-07-28 07:27:22 +00:00
@media screen and (max-width: 680px)
nav.search
li
display: list-item
margin: 1em 0 0 0
font-size: large
#search
float: none
2018-03-16 23:48:48 +00:00
.home main
flex-direction: column
#projects
width: auto
margin-left: 0
margin-top: 2em
ul.projects
padding-top: 0
2013-07-28 07:27:22 +00:00
@media screen and (max-width: 515px)
2015-08-28 09:18:55 +00:00
body
font-size: 20px
2018-08-18 23:18:26 +00:00
body > header
text-align: center
2013-07-28 07:27:22 +00:00
#menu
float: none
padding: 0.5em 0 0 0
line-height: 2
li
margin: 0 1em 0 0
#content
min-width: 0
margin: 0 10px
h1
font-size: 30px
body.weather #content
margin: 0 10px
ul.articles li
margin: 0
padding-top: 0
height: auto
#flickr
header
margin-left: 1em
ul
height: auto
li, li:first-child
margin: 0 0 1em 1em
#respond
.short
2013-07-28 07:27:22 +00:00
margin: 0.5em 0 0 0
display: block
footer
margin: 20px 10px
figure.screenshot
img
max-width: 100%