summaryrefslogtreecommitdiff
path: root/_assets/screen.scss
diff options
context:
space:
mode:
Diffstat (limited to '_assets/screen.scss')
-rw-r--r--_assets/screen.scss425
1 files changed, 425 insertions, 0 deletions
diff --git a/_assets/screen.scss b/_assets/screen.scss
new file mode 100644
index 0000000..844cc5f
--- /dev/null
+++ b/_assets/screen.scss
@@ -0,0 +1,425 @@
+@import url(http://fonts.googleapis.com/css?family=Cabin);
+
+$mq-mobile-portrait : 20em !default;
+$mq-mobile-landscape : 30em !default;
+$mq-tablet-portrait : 40em !default;
+$mq-tablet-landscape : 64em !default;
+$mq-desktop : 86.375em !default;
+
+// Both portrait and landscape
+@mixin mobile-only {
+ @media (max-width : $mq-mobile-landscape) {
+ @content;
+ }
+}
+
+// Everything up to and including the portrait width of the phone
+// Since it's the smallest query it doesn't need a min
+@mixin mobile-portrait-only {
+ @media (max-width : $mq-mobile-portrait) {
+ @content;
+ }
+}
+
+// Everything up to and including the mobile portrait
+@mixin mobile-portrait-and-below {
+ @media (max-width : $mq-mobile-portrait) {
+ @content;
+ }
+}
+
+// Everything above and including the mobile portrait
+@mixin mobile-portrait-and-up {
+ @media (min-width : $mq-mobile-portrait) {
+ @content;
+ }
+}
+
+// Everthing larger than a portrait mobile up until mobile landscape
+@mixin mobile-landscape-only {
+ @media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) {
+ @content;
+ }
+}
+
+// Everything up to and including the mobile landscape width
+@mixin mobile-landscape-and-below {
+ @media only screen and (max-width : $mq-mobile-landscape) {
+ @content;
+ }
+}
+
+// Everything above and including the mobile landscape width
+@mixin mobile-landscape-and-up {
+ @media only screen and (min-width : $mq-mobile-portrait + .001) {
+ @content;
+ }
+}
+
+// Both the portrait and landscape width of the tablet
+// Larger than a landscape mobile but less than or equal to a landscape tablet
+@mixin tablet-only {
+ @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-landscape) {
+ @content;
+ }
+}
+
+// Everything larger than mobile landscape up until the portrait width of the tablet
+@mixin tablet-portrait-only {
+ @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) {
+ @content;
+ }
+}
+
+// Everything below and including the portrait width of the tablet
+@mixin tablet-portrait-and-below {
+ @media only screen and (max-width : $mq-tablet-portrait) {
+ @content;
+ }
+}
+
+// Everything above and including the portrait width of the tablet
+@mixin tablet-portrait-and-up {
+ // @media only screen and (min-width : $mq-mobile-landscape + 1) {
+ @media only screen and (min-width : $mq-tablet-portrait + .001) {
+ @content;
+ }
+}
+
+// Larger than portrait but less than or equal to the landscape width
+@mixin tablet-landscape-only {
+ @media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) {
+ @content;
+ }
+}
+
+// Up to and including the tablet landscape
+@mixin tablet-landscape-and-below {
+ @media only screen and (max-width : $mq-tablet-landscape) {
+ @content;
+ }
+}
+
+// Everything larger than portrait tablet
+@mixin tablet-landscape-and-up {
+ @media only screen and (min-width : $mq-tablet-portrait + .001) {
+ @content;
+ }
+}
+
+// Everything larger than a landscape tablet
+@mixin desktop-and-up {
+ @media only screen and (min-width : $mq-tablet-landscape + .001) {
+ @content;
+ }
+}
+
+// Everything below and including the desktop
+@mixin desktop-and-below {
+ @media only screen and (max-width : $mq-desktop) {
+ @content;
+ }
+}
+
+// Everything larger than a landscape tablet but less than or equal to the desktop
+@mixin desktop-only {
+ @media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) {
+ @content;
+ }
+}
+
+@mixin retina {
+ @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
+ @content;
+ }
+}
+
+@mixin image-2x($image, $width: auto, $height: $width) {
+ @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
+ only screen and (-o-min-device-pixel-ratio: 13/10),
+ only screen and (min-resolution: 120dpi) {
+ background-image: url($image);
+ @if $width != auto {
+ background-size: $width $height;
+ }
+ }
+}
+
+html {
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+body {
+ font-family: 'Cabin', sans-serif;
+ background-color: #fff;
+ font-weight:400;
+ text-align:left;
+ color:#222;
+
+ margin: auto;
+ font-size: 16px;
+
+ @include tablet-portrait-and-below {
+ font-size: 0.8em;
+ }
+}
+
+em {
+ font-style: italic;
+}
+
+a {
+ color:#4c6296;
+ text-decoration:none;
+ outline:0
+}
+
+a:hover{
+ color:#173061;
+ text-decoration:none
+}
+
+a:visited{
+ color:#6a4c96
+}
+
+a:visited:hover{
+ color:#463263
+}
+
+a img{
+ border:0
+}
+
+#cover_wrap {
+ width: 623px;
+ margin: auto;
+ line-height: 1;
+ border-bottom: 1px solid #e8ebf2;
+}
+
+#masthead {
+
+ width: 620px;
+
+ @include tablet-portrait-and-below {
+ width: 90%;
+ }
+
+ header {
+ display: block;
+ }
+
+ margin: 0 auto;
+ color: #57626b;
+
+ .intro {
+ line-height: 0.8;
+ float: left;
+ h1 {
+ line-height: 1;
+ }
+ }
+
+ h1 {
+ font-weight: 700;
+ font-size: 1.1em;
+ }
+
+ #home {
+ font-size: 1.2em;
+ font-weight: 700;
+ color: #57626b;
+ }
+
+ a {
+ text-decoration: none;
+ font-size: 0.8em;
+ font-weight: 500;
+ color: #669ecc;
+ }
+
+ h2 {
+ font-weight: 500;
+ color: #999;
+ font-size: 1em;
+ }
+}
+
+.clearfix:after {
+ clear: both;
+ content: ".";
+ display: block;
+ height: 0;
+ visibility: hidden;
+ font-size: 0;
+}
+
+
+#footer {
+ width: 623px;
+ margin: auto;
+ @include tablet-portrait-and-below {
+ width: 90%;
+ }
+
+ border-top: 1px solid #e8ebf2;
+ box-shadow: inset 0 1px 0 #fff;
+ background: #fdfdfd;
+
+ display: block;
+
+ .center_mod {
+ margin: 0 auto;
+ }
+
+
+}
+
+.nav {
+ float: right;
+ padding: 0;
+ li {
+ line-height:1.3;
+ display: inline-block;
+ a {
+ margin-right: 16px;
+ font-weight: 700;
+ color: #9198ad;
+ font-size: 12px;
+ }
+ }
+}
+
+img {
+ width: 100%;
+ max-width: 1000px;
+ text-align: center;
+ vertical-align: baseline;
+ height: auto!important;
+}
+
+figure {
+margin: 4em 0;
+display: block;
+text-align: center;
+}
+
+#site{
+
+ section {
+ width: 623px;
+ margin: auto;
+ @include tablet-portrait-and-below {
+ width: 90%;
+ }
+ }
+
+ margin: auto;
+ text-align: left;
+ line-height: 1.65;
+ font-weight: 400;
+ font-size: 110%;
+
+ li {
+ line-height: 1.2em;
+ }
+
+ .post-listing {
+ width: 623px;
+ margin: auto;
+ padding-left: 0px;
+ display: block;
+ list-style-image: none;
+ list-style-position: outside;
+ margin-bottom: 1em;
+ }
+ .post-listing li {
+ list-style-type: none;
+ margin: 2.5em 0;
+ }
+ .post-listing li:first-child {
+ margin-top: 0;
+ }
+ .post-listing li h2 {
+ color: #2C251D;
+ }
+ .post-listing .oneliner {
+ color: #4A4235;
+ }
+
+ .post-listing .entry-title {
+ margin: 15px auto;
+ }
+
+ .post-listing .entry-title h2 {
+ font-size: 1.7em;
+ font-weight: 500;
+ margin-bottom: 5px;
+ color: #2c251d;
+ line-height: 1.1;
+ }
+
+ #entry {
+ padding: 0;
+ margin: 0 auto;
+
+ .entry-title {
+ width: 623px;
+ margin: 15px auto;
+ font-size: 100%;
+ h1 {
+ color: #2c251d;
+ font-size: 2.2em;
+ font-weight: 700;
+ line-height: 1.1;
+ }
+ }
+
+ section {
+ font-size: 100%;
+ }
+
+ a {
+ font-weight: 600;
+ text-decoration: underline;
+ color: #4c6296;
+ }
+
+ a:visited {
+ color: #6a4c96;
+ }
+
+ blockquote {
+ border-left: 4px solid #eee;
+ margin-left: 0;
+ margin-right: 18px;
+ margin-bottom: 18px;
+ padding-left: 10px;
+ color: #666;
+ }
+
+ pre{
+ font-size: 13px;
+ font-family: Consolas,"Andale Mono",Monaco,Courier,"Courier New",Verdana,sans-serif;
+ -webkit-font-smoothing:subpixel-antialiased;
+ font-smoothing:subpixel-antialiased;
+ background-color: #fff;
+ border: 1px solid #d1d8e3;
+ padding: .35em;
+ }
+
+ code {
+ font-size: 95%;
+ }
+
+ .highlight {
+ margin: 1.5em 0;
+ }
+
+ p {
+ margin: 0 0 1.5em;
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 05:01:43 +0000