aboutsummaryrefslogtreecommitdiff
path: root/stylesheets/partials/minima/_layout.scss
diff options
context:
space:
mode:
authorMiquel Sabaté Solà <msabate@suse.com>2018-02-18 22:51:57 +0100
committerMiquel Sabaté Solà <msabate@suse.com>2018-02-18 22:51:57 +0100
commit3c62a936378e490e99c2ac8955797464216b1691 (patch)
tree23145a905ae399414399ebe5862d804226c8e849 /stylesheets/partials/minima/_layout.scss
downloadjo.mssola.com-3c62a936378e490e99c2ac8955797464216b1691.tar.gz
jo.mssola.com-3c62a936378e490e99c2ac8955797464216b1691.zip
Initial commit
Signed-off-by: Miquel Sabaté Solà <msabate@suse.com>
Diffstat (limited to 'stylesheets/partials/minima/_layout.scss')
-rw-r--r--stylesheets/partials/minima/_layout.scss332
1 files changed, 332 insertions, 0 deletions
diff --git a/stylesheets/partials/minima/_layout.scss b/stylesheets/partials/minima/_layout.scss
new file mode 100644
index 0000000..e07a669
--- /dev/null
+++ b/stylesheets/partials/minima/_layout.scss
@@ -0,0 +1,332 @@
+/**
+ * Site header
+ */
+.site-header {
+ border-top: 5px solid $grey-color-dark;
+ border-bottom: 1px solid $grey-color-light;
+ min-height: $spacing-unit * 1.865;
+
+ // Positioning context for the mobile navigation icon
+ position: relative;
+}
+
+.site-title {
+ @include relative-font-size(1.625);
+ font-weight: 300;
+ line-height: $base-line-height * $base-font-size * 2.25;
+ letter-spacing: -1px;
+ margin-bottom: 0;
+ float: left;
+
+ &,
+ &:visited {
+ color: $grey-color-dark;
+ }
+}
+
+.site-nav {
+ float: right;
+ line-height: $base-line-height * $base-font-size * 2.25;
+
+ .nav-trigger {
+ display: none;
+ }
+
+ .menu-icon {
+ display: none;
+ }
+
+ a {
+ margin-left: 20px;
+ }
+
+ .page-link {
+ color: $text-color;
+ line-height: $base-line-height;
+
+ // Gaps between nav items, but not on the last one
+ &:not(:last-child) {
+ margin-right: 20px;
+ }
+ }
+
+ @include media-query($on-palm) {
+ position: absolute;
+ top: 9px;
+ right: $spacing-unit / 2;
+ background-color: $background-color;
+ border: 1px solid $grey-color-light;
+ border-radius: 5px;
+ text-align: right;
+
+ label[for="nav-trigger"] {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 36px;
+ z-index: 2;
+ cursor: pointer;
+ }
+
+ .menu-icon {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 26px;
+ line-height: 0;
+ padding-top: 10px;
+ text-align: center;
+
+ > svg path {
+ fill: $grey-color-dark;
+ }
+ }
+
+ input ~ .trigger {
+ clear: both;
+ display: none;
+ }
+
+ input:checked ~ .trigger {
+ display: block;
+ padding-bottom: 5px;
+ }
+
+ .page-link {
+ display: block;
+ padding: 5px 10px;
+
+ &:not(:last-child) {
+ margin-right: 0;
+ }
+ margin-left: 20px;
+ }
+ }
+}
+
+
+
+/**
+ * Site footer
+ */
+.site-footer {
+ border-top: 1px solid $grey-color-light;
+ padding: $spacing-unit 0;
+ text-align: center;
+ font-size: 14px;
+}
+
+.footer-heading {
+ @include relative-font-size(1.125);
+ margin-bottom: $spacing-unit / 2;
+}
+
+.contact-list,
+.social-media-list {
+ list-style: none;
+ margin-left: 0;
+}
+
+.footer-col-wrapper {
+ @include relative-font-size(0.9375);
+ color: $grey-color;
+ margin-left: -$spacing-unit / 2;
+ @extend %clearfix;
+}
+
+.footer-col {
+ float: left;
+ margin-bottom: $spacing-unit / 2;
+ padding-left: $spacing-unit / 2;
+}
+
+.footer-col-1 {
+ width: -webkit-calc(35% - (#{$spacing-unit} / 2));
+ width: calc(35% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-2 {
+ width: -webkit-calc(20% - (#{$spacing-unit} / 2));
+ width: calc(20% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+ width: -webkit-calc(45% - (#{$spacing-unit} / 2));
+ width: calc(45% - (#{$spacing-unit} / 2));
+}
+
+@include media-query($on-laptop) {
+ .footer-col-1,
+ .footer-col-2 {
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
+ width: calc(50% - (#{$spacing-unit} / 2));
+ }
+
+ .footer-col-3 {
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+ width: calc(100% - (#{$spacing-unit} / 2));
+ }
+}
+
+@include media-query($on-palm) {
+ .footer-col {
+ float: none;
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+ width: calc(100% - (#{$spacing-unit} / 2));
+ }
+}
+
+
+
+/**
+ * Page content
+ */
+.page-content {
+ padding: $spacing-unit 0;
+ text-align: justify;
+}
+
+.page-heading {
+ @include relative-font-size(2);
+}
+
+.post-list-heading {
+ @include relative-font-size(1.75);
+}
+
+.post-list {
+ margin-left: 0;
+ list-style: none;
+
+ > li {
+ margin-bottom: $spacing-unit;
+ }
+}
+
+.post-meta {
+ font-size: $small-font-size;
+ color: $grey-color;
+}
+
+.post-link {
+ display: block;
+ @include relative-font-size(1.5);
+}
+
+img#image-profile {
+ display: block;
+ padding: 15px;
+ float: right;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ -o-border-radius: 50%;
+ border-radius: 50%;
+ margin-left: 20px;
+}
+
+
+
+/**
+ * Posts
+ */
+#blog-intro {
+ h2 small {
+ font-size: 12px;
+ margin-left: 10px;
+ }
+
+ border-bottom: 1px solid $grey-color-light;
+ min-height: $spacing-unit * 1.865;
+ margin-bottom: 20px;
+}
+
+.post-header {
+ margin-bottom: $spacing-unit;
+}
+
+.post-title {
+ @include relative-font-size(2.625);
+ letter-spacing: -1px;
+ line-height: 1;
+ margin-bottom: 10px;
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(2.25);
+ }
+}
+
+.post-title-smaller {
+ @include relative-font-size(2.25);
+ letter-spacing: -1px;
+ line-height: 1;
+ margin-bottom: 10px;
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.75);
+ }
+}
+
+.post-preview {
+ margin-bottom: $spacing-unit;
+
+ h2 {
+ @include relative-font-size(1.50);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.0);
+ }
+ }
+
+ h3 {
+ @include relative-font-size(1.25);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(0.75);
+ }
+ }
+}
+
+.post-content {
+ margin-bottom: $spacing-unit;
+
+ h2 {
+ @include relative-font-size(2);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.75);
+ }
+ }
+
+ h3 {
+ @include relative-font-size(1.625);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.375);
+ }
+ }
+
+ h4 {
+ @include relative-font-size(1.25);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.125);
+ }
+ }
+}
+
+.post-notice {
+ margin-top: 30px;
+ font-size: 12px;
+}
+
+/*
+ * Code blocks
+ */
+.org-src-container pre {
+ border-left: 2px solid #69c;
+ font-size: 12px !important;
+ background: #f5f7f9;
+ border-bottom: 1px solid #d8dee9;
+ font-family: monospace,monospace;
+ color: #566b78;
+}