diff --git a/assets/sass/_about.scss b/assets/sass/_about.scss deleted file mode 100644 index 1023620..0000000 --- a/assets/sass/_about.scss +++ /dev/null @@ -1,30 +0,0 @@ -.about { - width: 100%; - background-color: $smoke; - text-align: justify; - - p { - @include size(h3); - margin-top: $vertical-rhythm; - } - - a { - background-image: linear-gradient($accent, $accent); - background-repeat: repeat-x; - background-position: 0 95%; - background-size: 2px 3px; - text-decoration: none; - text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white, - .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white, - .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white, - .03em .075em $white, -.03em .075em $white, .06em .075em $white, - -.06em .075em $white, .09em .075em $white, -.09em .075em $white, - .12em .075em $white, -.12em .075em $white, .15em .075em $white, - -.15em .075em $white; - - &:hover { - color: $accent; - } - } - } - \ No newline at end of file diff --git a/assets/sass/_gallery.scss b/assets/sass/_gallery.scss deleted file mode 100644 index 21d354b..0000000 --- a/assets/sass/_gallery.scss +++ /dev/null @@ -1,74 +0,0 @@ -.gallery { - .gallery-item { - position: relative; - width: 50%; - padding: 0; - - &::after { - content: ""; - display: block; - padding-bottom: 100%; - } - - &:hover { - .overlay { - visibility: visible; - opacity: 1; - } - } - } - - .overlay { - visibility: hidden; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - transition: .2s ease-out; - opacity: 0; - background-color: $black; - cursor: pointer; - - a { - color: $white; - - &:hover { - color: $accent; - } - } - - h2 { - margin: $vertical-rhythm; - color: $white; - } - } - - .gallery-img-container { - display: flex; - position: absolute; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - overflow: hidden; - } - - img { - padding: $vertical-rhythm * 3; - /*TODO: This is an ugly hack. Either fix or ensure images to have a good dimension*/ - width: 640px; - height: auto; - } - - .gallery-modal-link { - display: flex; - position: absolute; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - } -} diff --git a/assets/sass/main.scss b/assets/sass/main.scss deleted file mode 100644 index 9831d10..0000000 --- a/assets/sass/main.scss +++ /dev/null @@ -1,274 +0,0 @@ -@import url("https://fonts.googleapis.com/css?family=Rubik|Bitter"); -@import "flexboxgrid"; -@import "colors"; -@import "typography"; -@import "animation"; -@import "layout"; -@import "base"; -@import "modal"; -@import "about"; -@import "gallery"; -@import "members"; - -@media (max-width: 47.99em) { - body .container { - padding: $vertical-rhythm * 4 $vertical-rhythm; - } - - nav { - // Hide menu links between logo and hamburger menu - div:not(:first-child):not(:last-child) { - display: none; - } - - div.nav-toggle a { - display: inline-block; - } - } -} - -@media (max-width: 25em) { - body .container { - padding: $vertical-rhythm * 4 $vertical-rhythm; - } - - nav { - div.logo, - div.nav-toggle { - max-width: 50% !important; - } - } -} - -nav { - position: absolute; - z-index: 100; - bottom: 0; - width: 100%; - height: $vertical-rhythm * 2; - background-color: $white; - box-shadow: 0 2px 2px rgba(0, 0, 0, .4); - text-align: center; - - h3 { - margin: 0; - font-family: $font-body; - font-weight: 600; - letter-spacing: 2px; - text-transform: uppercase; - } - - img { - display: inline-block; - max-width: 10em; - max-height: 2.5em; - vertical-align: middle; - } - - .logo, - .nav-toggle { - visibility: hidden; - } - - .nav-toggle a { - display: none; - } -} - -.nav-fixed { - position: fixed; - top: 0; - bottom: auto; -} - -.nav-full { - position: fixed; - top: 0; - right: -100vw; - bottom: 0; - width: 100vw; - height: 100%; - transform: translate(0, 0); - transition: .25s ease-out; - background-color: $black; - - a { - color: $white; - - &:hover { - color: $accent; - } - } -} - -.nav-full.active { - transform: translate(-100vw, 0); -} - -main { - transition: .25s ease-in; - background-color: $white; - - &.active { - transform: translate(-100vw, 0); - } -} - -.container { - max-width: 43.75rem; // 700px - margin: auto; - padding: $vertical-rhythm * 4 0 $vertical-rhythm * 4; -} - -p { - margin-bottom: $vertical-rhythm; - - code { - font-family: $font-code; - } -} - -h1, -h2, -h3 { - margin-bottom: $vertical-rhythm; - font-family: $font-header; - letter-spacing: 2px; - line-height: 1.45; - - a { - text-decoration: none; - } -} - -.home-logo { - margin-bottom: $vertical-rhythm; -} - -.posts-list { - margin: 0 0 $vertical-rhythm; -} - -.sub-header, -time { - @include size(p); - margin-bottom: $vertical-rhythm; - color: $storm; -} - -.content { - width: 100%; - text-align: left; - - time { - margin-left: 3px; - } - - a { - background-image: linear-gradient($accent, $accent); - background-repeat: repeat-x; - background-position: 0 95%; - background-size: 1px 2px; - text-decoration: none; - text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white, - .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white, - .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white, - .03em .075em $white, -.03em .075em $white, .06em .075em $white, - -.06em .075em $white, .09em .075em $white, -.09em .075em $white, - .12em .075em $white, -.12em .075em $white, .15em .075em $white, - -.15em .075em $white; - - &:hover { - color: $accent; - } - } -} - -.highlight { - margin: 10px 0; -} - -.pagination { - margin: 50px 0 0; - - &:nth-child(2) { - float: right; - } -} - -.full { - top: 0; - bottom: 0; - height: 100vh; -} - -.blog { - display: flex; - min-height: 100vh; - - h2 { - margin-bottom: 0; - } - - h3 { - margin: 0 0 $vertical-rhythm * 2; - font-family: $font-body; - } -} - -.contact { - width: 100%; - padding-bottom: $vertical-rhythm * 2; - background-color: $smoke; - - form { - margin-top: $vertical-rhythm; - } - - .contact-submit { - position: relative; - } - - #form-submit { - display: block; - width: 50%; - margin: 0 auto; - } - - #form-thankyou { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } -} - -input { - width: 100%; - margin: 8px 0; - padding: 10px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: $smoke; - background-color: $white; - color: $black; - - &[type="submit"] { - transition: .2s ease-out; - background-color: $storm; - color: $white; - - &:hover { - background-color: $accent; - color: $white; - cursor: pointer; - } - } -} - -textarea { - @extend input; - min-height: $vertical-rhythm * 4; - overflow: auto; -} diff --git a/themes/distorsion/assets/sass/_about.scss b/themes/distorsion/assets/sass/_about.scss index faf4d67..1023620 100644 --- a/themes/distorsion/assets/sass/_about.scss +++ b/themes/distorsion/assets/sass/_about.scss @@ -1,28 +1,30 @@ .about { - width: 100%; - background-color: $smoke; - - p { - @include size(h3); - margin-top: $vertical-rhythm; - } - - a { - background-image: linear-gradient($accent, $accent); - background-repeat: repeat-x; - background-position: 0 95%; - background-size: 2px 3px; - text-decoration: none; - text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white, - .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white, - .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white, - .03em .075em $white, -.03em .075em $white, .06em .075em $white, - -.06em .075em $white, .09em .075em $white, -.09em .075em $white, - .12em .075em $white, -.12em .075em $white, .15em .075em $white, - -.15em .075em $white; - - &:hover { - color: $accent; + width: 100%; + background-color: $smoke; + text-align: justify; + + p { + @include size(h3); + margin-top: $vertical-rhythm; + } + + a { + background-image: linear-gradient($accent, $accent); + background-repeat: repeat-x; + background-position: 0 95%; + background-size: 2px 3px; + text-decoration: none; + text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white, + .06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white, + .12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white, + .03em .075em $white, -.03em .075em $white, .06em .075em $white, + -.06em .075em $white, .09em .075em $white, -.09em .075em $white, + .12em .075em $white, -.12em .075em $white, .15em .075em $white, + -.15em .075em $white; + + &:hover { + color: $accent; + } } } -} + \ No newline at end of file diff --git a/themes/distorsion/assets/sass/_gallery.scss b/themes/distorsion/assets/sass/_gallery.scss index 29a00a4..21d354b 100644 --- a/themes/distorsion/assets/sass/_gallery.scss +++ b/themes/distorsion/assets/sass/_gallery.scss @@ -53,10 +53,14 @@ justify-content: center; width: 100%; height: 100%; + overflow: hidden; } img { padding: $vertical-rhythm * 3; + /*TODO: This is an ugly hack. Either fix or ensure images to have a good dimension*/ + width: 640px; + height: auto; } .gallery-modal-link { diff --git a/assets/sass/_members.scss b/themes/distorsion/assets/sass/_members.scss similarity index 100% rename from assets/sass/_members.scss rename to themes/distorsion/assets/sass/_members.scss diff --git a/themes/distorsion/assets/sass/main.scss b/themes/distorsion/assets/sass/main.scss index 209413e..9831d10 100644 --- a/themes/distorsion/assets/sass/main.scss +++ b/themes/distorsion/assets/sass/main.scss @@ -8,6 +8,7 @@ @import "modal"; @import "about"; @import "gallery"; +@import "members"; @media (max-width: 47.99em) { body .container {