migrating to scss

This commit is contained in:
aj 2019-04-05 11:04:53 +01:00
parent 366a658e70
commit db725447b9
3 changed files with 458 additions and 154 deletions

239
css/style.scss Normal file
View File

@ -0,0 +1,239 @@
$font-stack: 'Lato', arial;
$background-colour: #202124;
$ui-colour: #131313;
$text-colour: white;
* {
box-sizing: border-box;
}
html {
font-family: $font-stack;
}
body {
background-color: $background-colour;
}
a {
color: $text-colour;
font-size: 20px;
/*text-shadow: 1px 1px 1px #aaa;*/
}
p {
color: $text-colour;
font-size: 20px;
padding: 10px;
}
.button {
background-color: #505050;
color: black;
border-radius: 10px;
display: inline-block;
margin: 4px auto;
cursor: pointer;
text-align: center;
padding: 15px;
text-decoration: none;
box-shadow: 2px 2px 4px black;
/*-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;*/
&:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
}
.row {
margin: 30px;
}
.gallerystrip{
width: 100%;
margin: auto;
margin-top: 15px;
img {
height: auto;
border: 10px solid #313439;
margin: 10px;
box-shadow: 4px 4px 7px #070707;
}
}
.profile {
background-color: #131313;
height: auto;
margin-top: 10px;
/*border: 8px solid #313439;*/
border-radius: 0px;
box-shadow: 7px 7px 8px black;
img {
border-radius: 50%;
display: block;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border: 8px solid #212121;
box-shadow: 4px 4px 3px #0c0c0c;
}
}
h1.title {
color: white;
font-size: 6em;
font-family: 'Megrim', arial;
text-shadow: 2px 2px 2px #aaa;
font-weight: bold;
display: block;
text-decoration: none;
background-color: #131313;
padding: 0px;
/*font-size: 16em;*/
width: 3em;
height: 1.3em;
text-align: center;
margin: auto;
box-shadow: 4px 4px 8px #000000;
}
.card {
/*background-color: grey;*/
background-color: $ui-colour;
box-shadow: 4px 4px 8px black;
padding: 10px;
margin: 10px;
/*border-radius: 3px;*/
h1 {
text-align: center;
color: white;
text-shadow: 1px 1px 2px #4f4f4f;
}
img {
width: 100%;
border-radius: 3px;
margin-bottom: 8px;
box-shadow: 2px 2px 2px black;
margin-left: auto;
margin-right: auto;
}
p {
margin-top: 20px;
}
}
h1.sectiontitle {
text-align:center;
color: white;
font-family: 'Megrim', sans-serif;
}
ul.navbar {
list-style-type: none;
border-radius: 5px 5px;
/*box-shadow: 3px 3px 1px grey;*/
margin: 10px;
padding: 0;
overflow: hidden;
background-color: $ui-colour;
}
ul.navbar li {
float: left;
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-shadow: 1px 1px 2px black;
-webkit-transition: background-color 0.4s;
transition: background-color 0.4s;
}
ul.navbar a:hover {
background-color: #080808;
}
ul.navbar li.right {float: right;}
footer p {
text-align: right;
font-size: 12px;
}
footer a {
margin-top: 10px;
margin-bottom: 10px;
text-align: right;
display: block;
color: grey;
font-size: 12px;
}
@media only screen and (max-width: 600px) {
ul.navbar li.right,
ul.navbar li {float: none;}
}
[class*="col-"] {
float: left;
width: 100%;
}
[class*="pad-"] {
float: left;
width: calc(100% - 20px);
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* For desktop: */
.pad-2 {width: calc(16.66% - 20px);}
.pad-3 {width: calc(25% - 20px);}
.pad-4 {width: calc(33.33% - 20px);}
.pad-5 {width: calc(41.66% - 20px);}
.pad-6 {width: calc(50% - 20px);}
.pad-7 {width: calc(58.33% - 20px);}
.pad-8 {width: calc(66.66% - 20px);}
.pad-9 {width: calc(75% - 20px);}
.pad-10 {width: calc(83.33% - 20px);}
.pad-11 {width: calc(91.66% - 20px);}
.pad-12 {width: calc(100% - 20px);}
}
.row::after {
content: "";
clear: both;
display: table;
}

View File

@ -1,230 +1,294 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
font-family: 'Lato', arial; font-family: "Lato", arial;
} }
body { body {
background-color: #202124; background-color: #202124;
} }
a { a {
color: white; color: white;
font-size: 20px; font-size: 20px;
/*text-shadow: 1px 1px 1px #aaa;*/ /*text-shadow: 1px 1px 1px #aaa;*/
} }
p { p {
color: white; color: white;
font-size: 20px; font-size: 20px;
padding: 10px; padding: 10px;
} }
.button { .button {
background-color: #505050; background-color: #505050;
color: black; color: black;
border-radius: 10px; border-radius: 10px;
display: inline-block; display: inline-block;
margin: 4px auto; margin: 4px auto;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
box-shadow: 2px 2px 4px black; box-shadow: 2px 2px 4px black;
/*-webkit-transition-duration: 0.4s; /*-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;*/ transition-duration: 0.4s;*/
} }
.button:hover { .button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
} }
.row { .row {
margin: 30px; margin: 30px;
} }
.gallerystrip {
width: 100%;
margin: auto;
margin-top: 15px;
}
.gallerystrip img { .gallerystrip img {
height: auto; height: auto;
border: 10px solid #313439; border: 10px solid #313439;
margin: 10px; margin: 10px;
box-shadow: 4px 4px 7px #070707; box-shadow: 4px 4px 7px #070707;
} }
div.gallerystrip { .profile {
width: 100%; background-color: #131313;
margin: auto; height: auto;
margin-top: 15px; margin-top: 10px;
/*border: 8px solid #313439;*/
border-radius: 0px;
box-shadow: 7px 7px 8px black;
} }
.profile img {
div.profile { border-radius: 50%;
background-color: #131313; display: block;
height: auto; margin-top: 10px;
margin-top: 10px; margin-left: auto;
/*border: 8px solid #313439;*/ margin-right: auto;
border-radius: 0px; margin-bottom: 10px;
box-shadow: 7px 7px 8px black; border: 8px solid #212121;
} box-shadow: 4px 4px 3px #0c0c0c;
div.profile img {
border-radius: 50%;
display: block;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border: 8px solid #212121;
box-shadow: 4px 4px 3px #0c0c0c;
} }
h1.title { h1.title {
color: white; color: white;
font-size: 6em; font-size: 6em;
font-family: 'Megrim', arial; font-family: "Megrim", arial;
text-shadow: 2px 2px 2px #aaa; text-shadow: 2px 2px 2px #aaa;
font-weight: bold;
font-weight: bold; display: block;
display: block; text-decoration: none;
text-decoration: none; background-color: #131313;
background-color: #131313; padding: 0px;
padding: 0px; /*font-size: 16em;*/
/*font-size: 16em;*/ width: 3em;
width: 3em; height: 1.3em;
height: 1.3em; text-align: center;
text-align: center; margin: auto;
margin: auto; box-shadow: 4px 4px 8px #000000;
box-shadow: 4px 4px 8px #000000;
} }
div.card { .card {
/*background-color: grey;*/ /*background-color: grey;*/
background-color: #131313; background-color: #131313;
box-shadow: 4px 4px 8px black; box-shadow: 4px 4px 8px black;
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
/*border-radius: 3px;*/ /*border-radius: 3px;*/
} }
.card h1 {
div.card h1 { text-align: center;
text-align: center; color: white;
color: white; text-shadow: 1px 1px 2px #4f4f4f;
text-shadow: 1px 1px 2px #4f4f4f;
} }
.card img { .card img {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
margin-bottom: 8px; margin-bottom: 8px;
box-shadow: 2px 2px 2px black; box-shadow: 2px 2px 2px black;
margin-left: auto; margin-left: auto;
margin-right: auto;} margin-right: auto;
}
.card p { .card p {
margin-top: 20px; margin-top: 20px;
} }
h1.sectiontitle { h1.sectiontitle {
text-align:center; text-align: center;
color: white; color: white;
font-family: 'Megrim', sans-serif; font-family: "Megrim", sans-serif;
} }
ul.navbar { ul.navbar {
list-style-type: none; list-style-type: none;
border-radius: 5px 5px; border-radius: 5px 5px;
/*box-shadow: 3px 3px 1px grey;*/ /*box-shadow: 3px 3px 1px grey;*/
margin: 10px; margin: 10px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: #131313; background-color: #131313;
} }
ul.navbar li { ul.navbar li {
float: left; float: left;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
} }
ul.navbar li a { ul.navbar li a {
display: block; display: block;
color: white; color: white;
text-align: center; text-align: center;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
text-shadow: 1px 1px 2px black; text-shadow: 1px 1px 2px black;
-webkit-transition: background-color 0.4s; -webkit-transition: background-color 0.4s;
transition: background-color 0.4s; transition: background-color 0.4s;
} }
ul.navbar a:hover { ul.navbar a:hover {
background-color: #080808; background-color: #080808;
} }
ul.navbar li.right {float: right;} ul.navbar li.right {
float: right;
}
footer p { footer p {
text-align: right; text-align: right;
font-size: 12px; font-size: 12px;
} }
footer a { footer a {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
text-align: right; text-align: right;
display: block; display: block;
color: grey; color: grey;
font-size: 12px; font-size: 12px;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
ul.navbar li.right, ul.navbar li.right,
ul.navbar li {float: none;} ul.navbar li {
float: none;
}
}
[class*=col-] {
float: left;
width: 100%;
} }
[class*="col-"] { [class*=pad-] {
float: left; float: left;
width: 100%; width: calc(100% - 20px);
}
[class*="pad-"] {
float: left;
width: calc(100% - 20px);
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
/* For desktop: */ /* For desktop: */
.col-1 {width: 8.33%;} .col-1 {
.col-2 {width: 16.66%;} width: 8.33%;
.col-3 {width: 25%;} }
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;} .col-2 {
.col-6 {width: 50%;} width: 16.66%;
.col-7 {width: 58.33%;} }
.col-8 {width: 66.66%;}
.col-9 {width: 75%;} .col-3 {
.col-10 {width: 83.33%;} width: 25%;
.col-11 {width: 91.66%;} }
.col-12 {width: 100%;}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
/* For desktop: */ /* For desktop: */
.pad-2 {width: calc(16.66% - 20px);} .pad-2 {
.pad-3 {width: calc(25% - 20px);} width: calc(16.66% - 20px);
.pad-4 {width: calc(33.33% - 20px);} }
.pad-5 {width: calc(41.66% - 20px);}
.pad-6 {width: calc(50% - 20px);}
.pad-7 {width: calc(58.33% - 20px);}
.pad-8 {width: calc(66.66% - 20px);}
.pad-9 {width: calc(75% - 20px);}
.pad-10 {width: calc(83.33% - 20px);}
.pad-11 {width: calc(91.66% - 20px);}
.pad-12 {width: calc(100% - 20px);}
}
.pad-3 {
width: calc(25% - 20px);
}
.pad-4 {
width: calc(33.33% - 20px);
}
.pad-5 {
width: calc(41.66% - 20px);
}
.pad-6 {
width: calc(50% - 20px);
}
.pad-7 {
width: calc(58.33% - 20px);
}
.pad-8 {
width: calc(66.66% - 20px);
}
.pad-9 {
width: calc(75% - 20px);
}
.pad-10 {
width: calc(83.33% - 20px);
}
.pad-11 {
width: calc(91.66% - 20px);
}
.pad-12 {
width: calc(100% - 20px);
}
}
.row::after { .row::after {
content: ""; content: "";
clear: both; clear: both;
display: table; display: table;
} }
/*# sourceMappingURL=style.css.map */

1
static/style.css.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../css/style.scss"],"names":[],"mappings":"AAKA;EACC;;;AAGD;EACC,aAVY;;;AAab;EACC,kBAbmB;;;AAgBpB;EACC,OAfa;EAgBb;AACA;;;AAGD;EACQ,OArBM;EAsBN;EACP;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;;AAGA;EACC;;;AAIF;EACC;;;AAGD;EAEC;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;AACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;;;AAID;AACC;EACA,kBA5GW;EA6GX;EACA;EACA;AACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACI;;AAGL;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA,kBAnJW;;;AAsJZ;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACE;;;AAGH;EACC;;;AAGD;EAAoB;;;AAEpB;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACE;AAAA;IACc;;;AAGhB;EACG;EACF;;;AAGD;EACG;EACF;;;AAGD;AACE;EACA;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAS;;;EACT;IAAS;;;EACT;IAAS;;;AAET;EACA;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAQ;;;EACR;IAAS;;;EACT;IAAS;;;EACT;IAAS;;;AAGX;EACE;EACA;EACA","file":"style.css"}