summaryrefslogtreecommitdiff
path: root/assets/less/page.less
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--assets/less/page.less431
1 files changed, 431 insertions, 0 deletions
diff --git a/assets/less/page.less b/assets/less/page.less
new file mode 100644
index 0000000..ee50314
--- /dev/null
+++ b/assets/less/page.less
@@ -0,0 +1,431 @@
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ background-color: @white;
+ border-top: 5px solid @black;
+ @media @medium {
+ .font-rem(20);
+ }
+}
+
+// Top Navigation
+// --------------------------------------------------
+.navigation-wrapper {
+ text-align: center;
+ .clearfix();
+ ul {
+ display: inline-block;
+ vertical-align: top;
+ margin: 0 0 50px;
+ padding: 4px 20px;
+ background-color: @black;
+ .rounded(0 0 10px 10px);
+ .clearfix();
+ }
+ li {
+ display: block;
+ float: left;
+ list-style: none;
+ text-align: center;
+ .font-rem(14);
+ text-transform: uppercase;
+ color: @white;
+ }
+ a {
+ display: block;
+ padding: 6px 10px;
+ color: @white;
+ border: 1px solid @black;
+ .rounded(4px);
+ &:hover {
+ border: 1px solid @white;
+ border-bottom: 1px solid lighten(@black,50);
+ border: 1px solid fade(@white,50);
+ }
+ }
+}
+// Responsive nav toggle stuff
+#site-nav {
+ z-index: 9999;
+ display: none;
+ @media @medium {
+ -webkit-animation-duration: 1s;
+ -moz-animation-duration: 1s;
+ -o-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-delay: .05s;
+ -moz-animation-delay: .05s;
+ -o-animation-delay: .05s;
+ animation-delay: .05s;
+ }
+ &.closed {
+
+ @media @medium {
+ display: block;
+ }
+ }
+ &.opened {
+ display: block;
+ max-height: 100%;
+ li {
+ float: none;
+ }
+ }
+}
+.no-js #site-nav {
+ display: block;
+}
+#nav-toggle {
+ display: block;
+ vertical-align: top;
+ margin: 0;
+ padding: 4px 20px;
+ background-color: @black;
+ .rounded(0 0 4px 4px);
+ @media @medium {
+ display: none;
+ }
+}
+
+// Masthead
+// --------------------------------------------------
+.masthead {
+ margin-top: 40px;
+ .clearfix();
+ @media @medium {
+ margin-top: 0;
+ }
+ .wrap {
+ text-align: center;
+ max-width: 27.5em;
+ padding-right: 20px;
+ padding-left: 20px;
+ @media @medium {
+ max-width: 45.5em;
+ padding-right: 60px;
+ padding-left: 60px;
+ }
+ @media @large {
+ max-width: 60em;
+ }
+ }
+}
+.site-logo {
+ img {
+ width: 100px;
+ height: 100px;
+ -webkit-animation-duration: 1s;
+ -moz-animation-duration: 1s;
+ -o-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-delay: .05s;
+ -moz-animation-delay: .05s;
+ -o-animation-delay: .05s;
+ animation-delay: .05s;
+ .rounded(100px);
+ @media @medium {
+ width: 150px;
+ height: 150px;
+ .rounded(150px);
+ }
+ @media @large {
+ width: 200px;
+ height: 200px;
+ .rounded(200px);
+ }
+ }
+}
+.site-title {
+ margin-bottom: 0;
+ -webkit-animation-duration: 1s;
+ -moz-animation-duration: 1s;
+ -o-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-delay: .75s;
+ -moz-animation-delay: .75s;
+ -o-animation-delay: .75s;
+ animation-delay: .75s;
+ a { color: @black; }
+}
+.site-description {
+ margin-top: 0;
+ font-family: @alt-font;
+ .font-rem(16);
+ font-weight: 400;
+ font-style: italic;
+ -webkit-animation-duration: 1s;
+ -moz-animation-duration: 1s;
+ -o-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-delay: 1s;
+ -moz-animation-delay: 1s;
+ -o-animation-delay: 1s;
+ animation-delay: 1s;
+ @media @medium {
+ .font-rem(20);
+ }
+}
+
+// Main
+// --------------------------------------------------
+#main {
+ .clearfix();
+}
+.hentry {
+ .clearfix();
+ border-bottom: 1px solid lighten(@black,80);
+ border-bottom: 1px solid fade(@black,10);
+}
+.entry-feature-image {
+ margin: 40px 0;
+ width: 100%;
+}
+.entry-header {
+ max-width: 640px;
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ @media @large {
+ max-width: 100%;
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+.entry-tags {
+ display: block;
+ margin-top: 2em;
+ text-transform: uppercase;
+ .font-rem(16);
+ font-weight: 600;
+ a { color: @text-color; }
+}
+span + .entry-title {
+ margin-top: 0;
+}
+.entry-title {
+ font-family: @alt-font;
+ font-style: italic;
+ .font-rem(36);
+ font-weight: 700;
+ line-height: 1;
+ letter-spacing: -3px;
+ a { color: @black; }
+ @media @medium {
+ max-width: 600px;
+ .font-rem(52);
+ }
+ @media @large {
+ max-width: 800px;
+ .font-rem(68);
+ }
+}
+.entry-wrapper {
+ margin: 0 auto 3em;
+ max-width: 440px;
+ padding-right: 20px;
+ padding-left: 20px;
+ .clearfix();
+ @media @medium {
+ max-width: 760px;
+ padding-right: 60px;
+ padding-left: 60px;
+ }
+ @media @large {
+ max-width: 960px;
+ }
+}
+.entry-meta {
+ max-width: 640px;
+ width: 100%;
+ margin-right: auto;
+ margin-bottom: 30px;
+ margin-left: auto;
+ display: block;
+ text-transform: uppercase;
+ .font-rem(14);
+ a { color: @text-color; }
+ @media @large {
+ float: left;
+ width: 140px;
+ margin: 0 40px 40px 0;
+ padding: 0;
+ }
+ & > span {
+ padding: 0 20px 10px 0;
+ display: inline-block;
+ @media @large {
+ display: block;
+ padding: 8px 0;
+ border-bottom: 1px solid lighten(@black,80);
+ border-bottom: 1px solid fade(@black,10);
+ }
+ }
+}
+.author-photo {
+ display: none;
+ @media @large {
+ display: block;
+ width: 150px;
+ height: 150px;
+ margin-bottom: 10px;
+ .rounded(150px);
+ .clearfix();
+ }
+}
+.entry-content {
+ max-width: 640px;
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ p:first-child {
+ margin-top: 0;
+ }
+ @media @large {
+ float: left;
+ }
+ p > a,
+ li > a {
+ border-bottom: 1px dotted lighten(@link-color, 50);
+ &:hover {
+ border-bottom-style: solid;
+ }
+ }
+}
+.post-list {
+ li > a {
+ border-bottom-width: 0;
+ }
+}
+// Disqus Comments
+#disqus_thread {
+ margin-top: 2em;
+}
+// Pagination
+.pagination {
+ text-align: center;
+}
+// Page layout
+#home,
+#page {
+ .entry-title {
+ text-align: center;
+ max-width: 100%;
+ }
+ .entry-content {
+ @media @large {
+ float: none;
+ }
+ }
+}
+// Post index layout
+.post-list {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ li {
+ padding: 8px 0;
+ border-bottom: 1px solid lighten(@black,80);
+ border-bottom: 1px solid fade(@black,10);
+ .clearfix();
+ }
+ a > span {
+ float: right;
+ }
+ .entry-date {
+ .font-rem(14);
+ text-transform: uppercase;
+ display: none;
+ @media @medium {
+ display: inline;
+ }
+ }
+}
+// Tag index
+.tag-box {
+ list-style: none;
+ margin: 0;
+ padding: 4px 0;
+ overflow: hidden;
+ .clearfix();
+ &.inline li {
+ float: left;
+ .font-rem(14);
+ line-height: 2.5;
+ }
+ a {
+ padding: 4px 6px;
+ margin: 2px;
+ background-color: lighten(@black, 90);
+ .rounded(4px);
+ text-decoration: none;
+ span {
+ vertical-align: super;
+ .font-rem(10);
+ }
+ }
+}
+
+// Footer
+// --------------------------------------------------
+.footer-wrapper {
+ .clearfix();
+ margin: 2em auto;
+ text-align: center;
+ font-family: @alt-font;
+ .font-rem(14);
+ font-style: italic;
+ color: lighten(@text-color,20);
+ a {
+ color: lighten(@text-color,20);
+ }
+}
+
+// Social Icons
+// --------------------------------------------------
+.social-icons {
+ margin: 1em 0 2em;
+ a {
+ padding: 4px 8px;
+ &:hover { color:@black; }
+ }
+}
+
+// Chrome Frame
+// --------------------------------------------------
+.upgrade {
+ padding: 10px;
+ text-align: center;
+}
+
+// Google Search
+// --------------------------------------------------
+#goog-fixurl {
+ ul {
+ list-style: none;
+ margin-left: 0;
+ padding-left: 0;
+ li {
+ list-style-type: none;
+ }
+ }
+}
+#goog-wm-qt {
+ width: auto;
+ margin-right: 10px;
+}
+#goog-wm-sb {
+ display: inline-block;
+ padding: 8px 20px;
+ background-color: @black;
+ color: @white;
+ border: 2px solid @black !important;
+ .rounded(20px);
+ &:visited {
+ color: @white;
+ }
+ &:hover {
+ background-color: @white;
+ color: @black;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 13:16:41 +0000