migrating to scss

css/style.scss

@@ -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;
+}

static/style.css

@@ -3,7 +3,7 @@
 }
 
 html {
-	font-family: 'Lato', arial;
+  font-family: "Lato", arial;
 }
 
 body {
@@ -36,15 +36,19 @@ p {
   /*-webkit-transition-duration: 0.4s;
    	transition-duration: 0.4s;*/
 }
-
 .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 {
   margin: 30px;
 }
 
+.gallerystrip {
+  width: 100%;
+  margin: auto;
+  margin-top: 15px;
+}
 .gallerystrip img {
   height: auto;
   border: 10px solid #313439;
@@ -52,13 +56,7 @@ p {
   box-shadow: 4px 4px 7px #070707;
 }
 
-div.gallerystrip {
+.profile {
-	width: 100%;
-	margin: auto;
-	margin-top: 15px;
-}
-
-div.profile {
   background-color: #131313;
   height: auto;
   margin-top: 10px;
@@ -66,8 +64,7 @@ div.profile {
   border-radius: 0px;
   box-shadow: 7px 7px 8px black;
 }
-
+.profile img {
-div.profile img {
   border-radius: 50%;
   display: block;
   margin-top: 10px;
@@ -81,9 +78,8 @@ div.profile img {
 h1.title {
   color: white;
   font-size: 6em;
-	font-family: 'Megrim', arial;
+  font-family: "Megrim", arial;
   text-shadow: 2px 2px 2px #aaa;
-
   font-weight: bold;
   display: block;
   text-decoration: none;
@@ -95,10 +91,9 @@ h1.title {
   text-align: center;
   margin: auto;
   box-shadow: 4px 4px 8px #000000;
-
 }
 
-div.card {
+.card {
   /*background-color: grey;*/
   background-color: #131313;
   box-shadow: 4px 4px 8px black;
@@ -106,29 +101,27 @@ div.card {
   margin: 10px;
   /*border-radius: 3px;*/
 }
-
+.card h1 {
-div.card h1 {
   text-align: center;
   color: white;
   text-shadow: 1px 1px 2px #4f4f4f;
 }
-
 .card img {
   width: 100%;
   border-radius: 3px;
   margin-bottom: 8px;
   box-shadow: 2px 2px 2px black;
   margin-left: auto;
-    	margin-right: auto;}
+  margin-right: auto;
-
+}
 .card p {
   margin-top: 20px;
 }
 
 h1.sectiontitle {
-	text-align:center;
+  text-align: center;
   color: white;
-	font-family: 'Megrim', sans-serif;
+  font-family: "Megrim", sans-serif;
 }
 
 ul.navbar {
@@ -163,7 +156,9 @@ ul.navbar a:hover {
   background-color: #080808;
 }
 
-ul.navbar li.right {float: right;}
+ul.navbar li.right {
+  float: right;
+}
 
 footer p {
   text-align: right;
@@ -181,50 +176,119 @@ footer a {
 
 @media only screen and (max-width: 600px) {
   ul.navbar li.right,
-  ul.navbar li {float: none;}
+ul.navbar li {
+    float: none;
+  }
 }
-
+[class*=col-] {
-[class*="col-"] {
   float: left;
   width: 100%;
 }
 
-[class*="pad-"] {
+[class*=pad-] {
   float: left;
   width: calc(100% - 20px);
 }
 
 @media only screen and (min-width: 768px) {
   /* 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: */
-  .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 {
   content: "";
   clear: both;
   display: table;
 }
+
+/*# sourceMappingURL=style.css.map */

static/style.css.map

@@ -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"}