put all css files into themes/distorsion/assets/ since we have our custom theme anyway
This commit is contained in:
parent
a6ac0954e5
commit
ae25e152ce
7 changed files with 32 additions and 403 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
@import "modal";
|
||||
@import "about";
|
||||
@import "gallery";
|
||||
@import "members";
|
||||
|
||||
@media (max-width: 47.99em) {
|
||||
body .container {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue