aboutsummaryrefslogtreecommitdiffstats
path: root/_sass
diff options
context:
space:
mode:
Diffstat (limited to '_sass')
-rw-r--r--_sass/_base.scss209
-rw-r--r--_sass/_gt-theme.scss253
-rw-r--r--_sass/_layout.scss232
-rw-r--r--_sass/_special.scss107
-rw-r--r--_sass/_syntax-highlighting.scss71
5 files changed, 872 insertions, 0 deletions
diff --git a/_sass/_base.scss b/_sass/_base.scss
new file mode 100644
index 0000000..8a19ae3
--- /dev/null
+++ b/_sass/_base.scss
@@ -0,0 +1,209 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+ margin: 0;
+ padding: 0;
+}
+
+
+
+/**
+ * Proper box-sizing
+ */
+html {
+ box-sizing: border-box;
+}
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+ color: $text-color;
+ background-color: $background-color;
+ -webkit-text-size-adjust: 100%;
+ -webkit-font-feature-settings: "kern" 1;
+ -moz-font-feature-settings: "kern" 1;
+ -o-font-feature-settings: "kern" 1;
+ font-feature-settings: "kern" 1;
+ font-kerning: normal;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+ margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * Images
+ */
+img {
+ max-width: 100%;
+ vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+ display: block;
+}
+
+figcaption {
+ font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+ margin-left: $spacing-unit;
+}
+
+li {
+ > ul,
+ > ol {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: $base-font-weight;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+ color: $brand-color;
+ text-decoration: none;
+
+ &:visited {
+ color: darken($brand-color, 15%);
+ }
+
+ &:hover {
+ color: $text-color;
+ text-decoration: underline;
+ }
+}
+
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+ color: $grey-color;
+ border-left: 4px solid $grey-color-light;
+ padding-left: $spacing-unit / 2;
+ font-size: 18px;
+ letter-spacing: -1px;
+ font-style: italic;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+ font-size: 15px;
+ border: 1px solid $grey-color-light;
+ border-radius: 3px;
+ background-color: #eef;
+}
+
+code {
+ padding: 1px 5px;
+}
+
+pre {
+ padding: 8px 12px;
+ overflow-x: auto;
+
+ > code {
+ border: 0;
+ padding-right: 0;
+ padding-left: 0;
+ }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+ max-width: $content-width;
+ margin-right: auto;
+ margin-left: auto;
+ overflow: hidden;
+ @extend %clearfix;
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix {
+
+ &:after {
+ content: "";
+ display: table;
+ clear: both;
+ }
+}
+
+
+
+/**
+ * Icons
+ */
+.icon {
+
+ > svg {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ vertical-align: middle;
+
+ path {
+ fill: $grey-color;
+ }
+ }
+}
diff --git a/_sass/_gt-theme.scss b/_sass/_gt-theme.scss
new file mode 100644
index 0000000..4a2b383
--- /dev/null
+++ b/_sass/_gt-theme.scss
@@ -0,0 +1,253 @@
+body {
+ font-family: $font-sans;
+ background-color: $grey-color-light;
+}
+
+.teaser {
+ &:not(:first-of-type) {
+ margin: ($spacing-unit / 2) 0;
+ }
+ background-color: $white-color;
+ @at-root {
+ .teaser__image {
+ display: inline-block;
+ @include breakpoint(tablet) {
+ max-width: 200px;
+ }
+ }
+ .teaser__text {
+ display: inline-block;
+ vertical-align: middle;
+ padding: ($spacing-unit / 2);
+ }
+ }
+}
+.teaser--with-image .teaser__text {
+ @include breakpoint(tablet) {
+ max-width: 60%;
+ }
+ @include breakpoint(desktop) {
+ max-width: 70%;
+ }
+}
+
+.header__title {
+ background-color: $white-color;
+}
+
+.site-footer {
+ background: $grey-color-dark;
+ border-top: 5px solid $brand-color;
+ padding: $spacing-unit;
+ color: $background-color;
+ .footer-col {
+ color: $background-color;
+ }
+ h2 {
+ font-family: 'Fjalla One';
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-size: 1.3em;
+ }
+}
+
+.header__navigation {
+ border-top: 3px solid $brand-color;
+ margin-top: $spacing-unit / 4;
+ overflow: hidden;
+ ul {
+ overflow: hidden;
+ background: $white-color;
+ margin: 0;
+ padding: $spacing-unit /2 0;
+ }
+ text-align: center;
+ .navigation__item {
+ display: inline-block;
+ padding: 0 20px;
+ @include breakpoint(tablet) {
+ padding: 0;
+ display: block;
+ float: left;
+ width: 20%;
+ }
+ font-size: 1.2em;
+ }
+ a, a:visited, a:hover {
+ color: $text-color;
+ }
+}
+
+.header__title {
+ padding-top: $spacing-unit;
+ padding-bottom: $spacing-unit;
+ h1 {
+ margin: 0 auto;
+ max-width: 200px;
+ text-align: center;
+ //border-bottom: 1px solid;
+ //border-top: 1px solid;
+
+ }
+}
+
+.site-title {
+ font-family: 'Fjalla One';
+ letter-spacing: 1px;
+ font-size: 1.5em;
+ text-transform: uppercase;
+}
+
+.header__logo {
+ display: block;
+ margin: auto;
+}
+
+.post-content {
+ font-family: $font-serif;
+}
+
+.post__ingress {
+ font-size: 1.15em;
+ font-family: $font-serif;
+ @include breakpoint(desktop) {
+ width: 95%;
+ }
+}
+
+.post__category {
+ color: $brand-color;
+ text-transform: uppercase;
+ font-weight: 600;
+ margin-right: 5px;
+}
+
+.post {
+ overflow: auto;
+ padding: $spacing-unit / 2;
+ @include breakpoint(mobile) {
+ padding: $spacing-unit;
+ }
+ background-color: $white-color;
+}
+
+h2 a,
+h3 a,
+h4 a {
+ &, &:visited {
+ color: $text-color;
+ }
+}
+
+.section-main {
+ @include breakpoint(mobile) {
+ float: left;
+ width: 68%;
+ &.article-list {
+ width: 73%;
+ }
+ }
+}
+
+.sidebar {
+ @include breakpoint(mobile) {
+ float: right;
+ width: 25%;
+ }
+}
+
+.teaser--magazine {
+ margin: 0;
+ padding: 10px 20px;
+}
+
+.magazine__number {
+ text-align: center;
+ margin: 5px;
+}
+
+.fourfold {
+ @extend %clearfix;
+}
+
+.fourfold__row {
+ @extend %clearfix;
+ @include breakpoint(0, tablet) {
+ border-top: 1px solid #ddd;
+ }
+}
+
+.fourfold__cell {
+ width: 33%;
+ float: left;
+ min-height: 100px;
+ border-top: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+ padding: 10px;
+ box-sizing: border-box;
+ word-wrap: break-word;
+ @include breakpoint(0, tablet) {
+ border: none;
+ }
+}
+
+.author {
+ margin: $spacing-unit;
+ @at-root {
+ .author__image {
+ object-fit: cover;
+ width: 150px;
+ height: 150px;
+ padding: 10px;
+ display: inline-block;
+ }
+ .author__text {
+ display: inline-block;
+ }
+ .author__job {
+ font-weight: bold;
+ }
+ }
+}
+.authors {
+ width: 50%;
+ float: left;
+}
+
+
+.page--magazine {
+ .teaser--magazine {
+ @include breakpoint(mobile) {
+ float: left;
+ width: 30%;
+ }
+ }
+}
+.article-list--magazine {
+ @include breakpoint(mobile) {
+ width: 68%;
+ float: right;
+ .teaser:first-of-type {
+ margin-top: 0;
+ }
+ }
+ .teaser {
+ margin-top: $spacing-unit / 2;
+ }
+ h2 {
+ margin: 0;
+ }
+ .post-link {
+ font-size: 0.8em;
+ }
+}
+
+.sidebar__related {
+ padding-top: $spacing-unit;
+ margin-top: $spacing-unit;
+ border-top: 1px solid $border-color;
+}
+
+.teaser--heading {
+ padding: $spacing-unit / 2 $spacing-unit / 4 0;
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
new file mode 100644
index 0000000..590495d
--- /dev/null
+++ b/_sass/_layout.scss
@@ -0,0 +1,232 @@
+/**
+ * Site header
+ */
+
+.site-title {
+ font-size: 26px;
+ font-weight: 300;
+ line-height: 56px;
+ margin: 0;
+ &,
+ &:visited,
+ &:hover {
+ color: $text-color;
+ text-decoration: none;
+ }
+}
+
+.site-nav {
+ line-height: 56px;
+
+ .menu-icon {
+ display: none;
+ }
+
+ .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 breakpoint(mobile) {
+ position: absolute;
+ top: 9px;
+ right: $spacing-unit / 2;
+ background-color: $background-color;
+ border: 1px solid $grey-color-light;
+ border-radius: 5px;
+ text-align: right;
+
+ .menu-icon {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 26px;
+ line-height: 0;
+ padding-top: 10px;
+ text-align: center;
+
+ > svg {
+ width: 18px;
+ height: 15px;
+
+ path {
+ fill: $grey-color-dark;
+ }
+ }
+ }
+
+ .trigger {
+ clear: both;
+ display: none;
+ }
+
+ &:hover .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;
+}
+
+.footer-heading {
+ font-size: 18px;
+ margin-bottom: $spacing-unit / 2;
+}
+
+.contact-list,
+.social-media-list {
+ list-style: none;
+ margin-left: 0;
+}
+
+.footer-col-wrapper {
+ font-size: 15px;
+ 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 breakpoint(desktop) {
+ .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 breakpoint(mobile) {
+ .footer-col {
+ float: none;
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+ width: calc(100% - (#{$spacing-unit} / 2));
+ }
+}
+
+
+
+/**
+ * Page content
+ */
+.page-content {
+ padding: $spacing-unit / 2 0;
+}
+
+.page-heading {
+ font-size: 20px;
+}
+
+.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;
+ font-size: 24px;
+}
+
+
+
+/**
+ * Posts
+ */
+.post-header {
+ margin-bottom: $spacing-unit;
+}
+
+.post-title {
+ font-size: 42px;
+ letter-spacing: -1px;
+ line-height: 1;
+
+ @include breakpoint(desktop) {
+ font-size: 36px;
+ }
+}
+
+.post-content {
+ margin-bottom: $spacing-unit;
+
+ h2 {
+ font-size: 32px;
+
+ @include breakpoint(desktop) {
+ font-size: 28px;
+ }
+ }
+
+ h3 {
+ font-size: 26px;
+
+ @include breakpoint(desktop) {
+ font-size: 22px;
+ }
+ }
+
+ h4 {
+ font-size: 20px;
+
+ @include breakpoint(desktop) {
+ font-size: 18px;
+ }
+ }
+}
diff --git a/_sass/_special.scss b/_sass/_special.scss
new file mode 100644
index 0000000..c64627d
--- /dev/null
+++ b/_sass/_special.scss
@@ -0,0 +1,107 @@
+.page--calendar.page--calendar {
+ width: 100%;
+ padding-top: 10px;
+ margin-left: 10px;
+}
+.calendar-item {
+ @include breakpoint(0, tablet) {
+ width: 46%;
+ float: left;
+ h2 {
+ font-size: 1.1em;
+ }
+ }
+ height: 120px;
+ background-color: rgba(250, 250, 250, 0.9);
+ margin: 5px;
+ text-align: center;
+ .calendar-item__cover {
+ padding-top: 40px;
+ }
+ .calendar-item__inside {
+ padding-top: 40px;
+ display: none;
+ }
+}
+
+a.released {
+ &:nth-of-type(3n) {
+ .calendar-item {
+ background-color: #CAFFD0;
+ }
+ }
+ &:nth-of-type(3n+1) {
+ .calendar-item {
+ background-color: #FFF07C;
+ }
+ }
+ &:nth-of-type(3n+2) {
+ .calendar-item {
+ background-color: #48A9A6;
+ color: $white-color;
+ }
+ }
+ .calendar-item {
+ &:hover {
+ border: 2px solid $brand-color;
+ .calendar-item__cover {
+ display: none;
+ }
+ .calendar-item__inside {
+ display: block;
+ }
+ }
+ }
+}
+
+.teaser--wappu {
+ background: url($baseurl + '/static/2017-wappu/korkkihommia.png') repeat-x;
+ background-color: $white-color;
+ text-align: center;
+ padding-top: 180px;
+ margin-bottom: $spacing-unit / 2;
+ border-top: 5px solid;
+ border-bottom: 5px solid;
+ animation: border-color 5s infinite;
+ -webkit-animation: border-color 5s infinite;
+}
+
+.wappu-link {
+ @extend %no-link-style;
+}
+
+@keyframes bg-color
+{
+ 0% {background-color: red;}
+ 25% {background-color: yellow;}
+ 50% {background-color: blue;}
+ 75% {background-color: green;}
+ 100% {background-color: red;}
+}
+
+@-webkit-keyframes bg-color
+{
+ 0% {background-color: red;}
+ 25% {background-color: yellow;}
+ 50% {background-color: blue;}
+ 75% {background-color: green;}
+ 100% {background-color: red;}
+}
+
+@keyframes border-color
+{
+ 0% {border-color: red;}
+ 25% {border-color: yellow;}
+ 50% {border-color: blue;}
+ 75% {border-color: green;}
+ 100% {border-color: red;}
+}
+
+@-webkit-keyframes border-color
+{
+ 0% {border-color: red;}
+ 25% {border-color: yellow;}
+ 50% {border-color: blue;}
+ 75% {border-color: green;}
+ 100% {border-color: red;}
+}
diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss
new file mode 100644
index 0000000..8fac597
--- /dev/null
+++ b/_sass/_syntax-highlighting.scss
@@ -0,0 +1,71 @@
+/**
+ * Syntax highlighting styles
+ */
+.highlight {
+ background: #fff;
+ @extend %vertical-rhythm;
+
+ .highlighter-rouge & {
+ background: #eef;
+ }
+
+ .c { color: #998; font-style: italic } // Comment
+ .err { color: #a61717; background-color: #e3d2d2 } // Error
+ .k { font-weight: bold } // Keyword
+ .o { font-weight: bold } // Operator
+ .cm { color: #998; font-style: italic } // Comment.Multiline
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
+ .c1 { color: #998; font-style: italic } // Comment.Single
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+ .ge { font-style: italic } // Generic.Emph
+ .gr { color: #a00 } // Generic.Error
+ .gh { color: #999 } // Generic.Heading
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+ .go { color: #888 } // Generic.Output
+ .gp { color: #555 } // Generic.Prompt
+ .gs { font-weight: bold } // Generic.Strong
+ .gu { color: #aaa } // Generic.Subheading
+ .gt { color: #a00 } // Generic.Traceback
+ .kc { font-weight: bold } // Keyword.Constant
+ .kd { font-weight: bold } // Keyword.Declaration
+ .kp { font-weight: bold } // Keyword.Pseudo
+ .kr { font-weight: bold } // Keyword.Reserved
+ .kt { color: #458; font-weight: bold } // Keyword.Type
+ .m { color: #099 } // Literal.Number
+ .s { color: #d14 } // Literal.String
+ .na { color: #008080 } // Name.Attribute
+ .nb { color: #0086B3 } // Name.Builtin
+ .nc { color: #458; font-weight: bold } // Name.Class
+ .no { color: #008080 } // Name.Constant
+ .ni { color: #800080 } // Name.Entity
+ .ne { color: #900; font-weight: bold } // Name.Exception
+ .nf { color: #900; font-weight: bold } // Name.Function
+ .nn { color: #555 } // Name.Namespace
+ .nt { color: #000080 } // Name.Tag
+ .nv { color: #008080 } // Name.Variable
+ .ow { font-weight: bold } // Operator.Word
+ .w { color: #bbb } // Text.Whitespace
+ .mf { color: #099 } // Literal.Number.Float
+ .mh { color: #099 } // Literal.Number.Hex
+ .mi { color: #099 } // Literal.Number.Integer
+ .mo { color: #099 } // Literal.Number.Oct
+ .sb { color: #d14 } // Literal.String.Backtick
+ .sc { color: #d14 } // Literal.String.Char
+ .sd { color: #d14 } // Literal.String.Doc
+ .s2 { color: #d14 } // Literal.String.Double
+ .se { color: #d14 } // Literal.String.Escape
+ .sh { color: #d14 } // Literal.String.Heredoc
+ .si { color: #d14 } // Literal.String.Interpol
+ .sx { color: #d14 } // Literal.String.Other
+ .sr { color: #009926 } // Literal.String.Regex
+ .s1 { color: #d14 } // Literal.String.Single
+ .ss { color: #990073 } // Literal.String.Symbol
+ .bp { color: #999 } // Name.Builtin.Pseudo
+ .vc { color: #008080 } // Name.Variable.Class
+ .vg { color: #008080 } // Name.Variable.Global
+ .vi { color: #008080 } // Name.Variable.Instance
+ .il { color: #099 } // Literal.Number.Integer.Long
+}

Want to contribute? Host your changes somewhere and send me the link: jan (at) sydanviita.fi. Also, check out my website.


forge.jan.systems — powered by cgit