summaryrefslogtreecommitdiff
path: root/root/static/less
diff options
context:
space:
mode:
Diffstat (limited to 'root/static/less')
-rw-r--r--root/static/less/clean-blog.less458
-rw-r--r--root/static/less/mixins.less22
-rw-r--r--root/static/less/variables.less7
3 files changed, 487 insertions, 0 deletions
diff --git a/root/static/less/clean-blog.less b/root/static/less/clean-blog.less
new file mode 100644
index 0000000..095008e
--- /dev/null
+++ b/root/static/less/clean-blog.less
@@ -0,0 +1,458 @@
+@import "variables.less";
+@import "mixins.less";
+
+// Global Components
+
+body {
+ .serif;
+ font-size: 20px;
+ color: @gray-dark;
+}
+
+// -- Typography
+
+p {
+ line-height: 1.5;
+ margin: 30px 0;
+ a {
+ text-decoration: underline;
+ }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ .sans-serif;
+ font-weight: 800;
+}
+
+a {
+ color: @gray-dark;
+ &:hover,
+ &:focus {
+ color: @brand-primary;
+ }
+}
+
+a img {
+ &:hover,
+ &:focus {
+ cursor: zoom-in;
+ }
+}
+
+blockquote {
+ color: @gray;
+ font-style: italic;
+}
+
+hr.small {
+ max-width: 100px;
+ margin: 15px auto;
+ border-width: 4px;
+ border-color: white;
+}
+
+// Navigation
+
+.navbar-custom {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 3;
+ .sans-serif;
+ .navbar-brand {
+ font-weight: 800;
+ }
+ .nav {
+ li {
+ a {
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: 800;
+ letter-spacing: 1px;
+ }
+ }
+ }
+ @media only screen and (min-width: 768px) {
+ background: transparent;
+ border-bottom: 1px solid transparent;
+ .navbar-brand {
+ color: white;
+ padding: 20px;
+ &:hover,
+ &:focus {
+ color: @white-faded;
+ }
+ }
+ .nav {
+ li {
+ a {
+ color: white;
+ padding: 20px;
+ &:hover,
+ &:focus {
+ color: @white-faded;
+ }
+ }
+ }
+ }
+ }
+ @media only screen and (min-width: 1170px) {
+ -webkit-transition: background-color 0.3s;
+ -moz-transition: background-color 0.3s;
+ transition: background-color 0.3s;
+ /* Force Hardware Acceleration in WebKit */
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ &.is-fixed {
+ /* when the user scrolls down, we hide the header right above the viewport */
+ position: fixed;
+ top: -61px;
+ background-color: fade(white, 90%);
+ border-bottom: 1px solid darken(white, 5%);
+ -webkit-transition: -webkit-transform 0.3s;
+ -moz-transition: -moz-transform 0.3s;
+ transition: transform 0.3s;
+ .navbar-brand {
+ color: @gray-dark;
+ &:hover,
+ &:focus {
+ color: @brand-primary;
+ }
+ }
+ .nav {
+ li {
+ a {
+ color: @gray-dark;
+ &:hover,
+ &:focus {
+ color: @brand-primary;
+ }
+ }
+ }
+ }
+ }
+ &.is-visible {
+ /* if the user changes the scrolling direction, we show the header */
+ -webkit-transform: translate3d(0, 100%, 0);
+ -moz-transform: translate3d(0, 100%, 0);
+ -ms-transform: translate3d(0, 100%, 0);
+ -o-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+ }
+}
+
+// Header
+
+.intro-header {
+ background-color: @gray;
+ background: no-repeat center center;
+ background-attachment: scroll;
+ .background-cover;
+ // NOTE: Background images are set within the HTML using inline CSS!
+ margin-bottom: 50px;
+ .site-heading,
+ .post-heading,
+ .page-heading {
+ padding: 100px 0 50px;
+ color: white;
+ @media only screen and (min-width: 768px) {
+ padding: 150px 0;
+ }
+ }
+ .site-heading,
+ .page-heading {
+ text-align: center;
+ h1 {
+ margin-top: 0;
+ font-size: 50px;
+ }
+ .subheading {
+ font-size: 24px;
+ line-height: 1.1;
+ display: block;
+ .sans-serif;
+ font-weight: 300;
+ margin: 10px 0 0;
+ }
+ @media only screen and (min-width: 768px) {
+ h1 {
+ font-size: 80px;
+ }
+ }
+ }
+ .post-heading {
+ h1 {
+ font-size: 35px;
+ }
+ .subheading,
+ .meta {
+ line-height: 1.1;
+ display: block;
+ }
+ .subheading {
+ .sans-serif;
+ font-size: 24px;
+ margin: 10px 0 30px;
+ font-weight: 600;
+ }
+ .meta {
+ .serif;
+ font-style: italic;
+ font-weight: 300;
+ font-size: 20px;
+ a {
+ color: white;
+ }
+ }
+ @media only screen and (min-width: 768px) {
+ h1 {
+ font-size: 55px;
+ }
+ .subheading {
+ font-size: 30px;
+ }
+ }
+ }
+}
+
+// Post Preview Pages
+
+.post-preview {
+ > a {
+ color: @gray-dark;
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ color: @brand-primary;
+ }
+ > .post-title {
+ font-size: 30px;
+ margin-top: 30px;
+ margin-bottom: 10px;
+ }
+ > .post-subtitle {
+ margin: 0;
+ font-weight: 300;
+ margin-bottom: 10px;
+ }
+ }
+ > .post-meta {
+ color: @gray;
+ font-size: 18px;
+ font-style: italic;
+ margin-top: 0;
+ > a {
+ text-decoration: none;
+ color: @gray-dark;
+ &:hover,
+ &:focus {
+ color: @brand-primary;
+ text-decoration: underline;
+ }
+ }
+ }
+ @media only screen and (min-width: 768px) {
+ > a {
+ > .post-title {
+ font-size: 36px;
+ }
+ }
+ }
+}
+
+// Sections
+
+.section-heading {
+ font-size: 36px;
+ margin-top: 60px;
+ font-weight: 700;
+}
+
+.caption {
+ text-align: center;
+ font-size: 14px;
+ padding: 10px;
+ font-style: italic;
+ margin: 0;
+ display: block;
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+}
+
+footer {
+ padding: 50px 0 65px;
+ .list-inline {
+ margin: 0;
+ padding: 0;
+ }
+ .copyright {
+ font-size: 14px;
+ text-align: center;
+ margin-bottom: 0;
+ }
+}
+
+// Contact Form Styles
+
+.floating-label-form-group {
+ font-size: 14px;
+ position: relative;
+ margin-bottom: 0;
+ padding-bottom: 0.5em;
+ border-bottom: 1px solid @gray-light;
+ input,
+ textarea {
+ z-index: 1;
+ position: relative;
+ padding-right: 0;
+ padding-left: 0;
+ border: none;
+ border-radius: 0;
+ font-size: 1.5em;
+ background: none;
+ box-shadow: none !important;
+ resize: none;
+ }
+ label {
+ display: block;
+ z-index: 0;
+ position: relative;
+ top: 2em;
+ margin: 0;
+ font-size: 0.85em;
+ line-height: 1.764705882em;
+ vertical-align: middle;
+ vertical-align: baseline;
+ opacity: 0;
+ -webkit-transition: top 0.3s ease,opacity 0.3s ease;
+ -moz-transition: top 0.3s ease,opacity 0.3s ease;
+ -ms-transition: top 0.3s ease,opacity 0.3s ease;
+ transition: top 0.3s ease,opacity 0.3s ease;
+ }
+ &::not(:first-child) {
+ padding-left: 14px;
+ border-left: 1px solid @gray-light;
+ }
+}
+
+.floating-label-form-group-with-value {
+ label {
+ top: 0;
+ opacity: 1;
+ }
+}
+
+.floating-label-form-group-with-focus {
+ label {
+ color: @brand-primary;
+ }
+}
+
+form .row:first-child .floating-label-form-group {
+ border-top: 1px solid @gray-light;
+}
+
+// Button Styles
+
+.btn {
+ .sans-serif;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 800;
+ letter-spacing: 1px;
+ border-radius: 0;
+ padding: 15px 25px;
+}
+
+.btn-lg {
+ font-size: 16px;
+ padding: 25px 35px;
+}
+
+.btn-default {
+ &:hover,
+ &:focus {
+ background-color: @brand-primary;
+ border: 1px solid @brand-primary;
+ color: white;
+ }
+}
+
+// Pager Styling
+
+.pager {
+
+ margin: 20px 0 0;
+
+ li {
+ > a,
+ > span {
+ .sans-serif;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 800;
+ letter-spacing: 1px;
+ padding: 15px 25px;
+ background-color: white;
+ border-radius: 0;
+ }
+
+ > a:hover,
+ > a:focus {
+ color: white;
+ background-color: @brand-primary;
+ border: 1px solid @brand-primary;
+ }
+ }
+
+ .disabled {
+ > a,
+ > a:hover,
+ > a:focus,
+ > span {
+ color: @gray;
+ background-color: @gray-dark;
+ cursor: not-allowed;
+ }
+ }
+}
+
+// -- Highlight Color Customization
+
+::-moz-selection {
+ color: white;
+ text-shadow: none;
+ background: @brand-primary;
+}
+
+::selection {
+ color: white;
+ text-shadow: none;
+ background: @brand-primary;
+}
+
+img::selection {
+ color: white;
+ background: transparent;
+}
+
+img::-moz-selection {
+ color: white;
+ background: transparent;
+}
+
+body {
+ webkit-tap-highlight-color: @brand-primary;
+} \ No newline at end of file
diff --git a/root/static/less/mixins.less b/root/static/less/mixins.less
new file mode 100644
index 0000000..c3b74c8
--- /dev/null
+++ b/root/static/less/mixins.less
@@ -0,0 +1,22 @@
+// Mixins
+
+.transition-all() {
+ -webkit-transition: all 0.5s;
+ -moz-transition: all 0.5s;
+ transition: all 0.5s;
+}
+
+.background-cover() {
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ background-size: cover;
+ -o-background-size: cover;
+}
+
+.serif() {
+ font-family: 'Lora', 'Times New Roman', serif;
+}
+
+.sans-serif () {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+} \ No newline at end of file
diff --git a/root/static/less/variables.less b/root/static/less/variables.less
new file mode 100644
index 0000000..062d2fc
--- /dev/null
+++ b/root/static/less/variables.less
@@ -0,0 +1,7 @@
+// Variables
+
+@brand-primary: #0085A1;
+@gray-dark: lighten(black, 25%);
+@gray: lighten(black, 50%);
+@white-faded: fade(white, 80%);
+@gray-light: #eee; \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-25 09:25:28 +0000