From db725447b9f4febf087da2a6db606a30efa5c3e2 Mon Sep 17 00:00:00 2001 From: aj Date: Fri, 5 Apr 2019 11:04:53 +0100 Subject: [PATCH] migrating to scss --- css/style.scss | 239 +++++++++++++++++++++++++++ static/style.css | 372 +++++++++++++++++++++++++------------------ static/style.css.map | 1 + 3 files changed, 458 insertions(+), 154 deletions(-) create mode 100644 css/style.scss create mode 100644 static/style.css.map diff --git a/css/style.scss b/css/style.scss new file mode 100644 index 0000000..7318b43 --- /dev/null +++ b/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; +} diff --git a/static/style.css b/static/style.css index 7e21200..f0f0b47 100644 --- a/static/style.css +++ b/static/style.css @@ -1,230 +1,294 @@ * { - box-sizing: border-box; + box-sizing: border-box; } html { - font-family: 'Lato', arial; + font-family: "Lato", arial; } body { - background-color: #202124; + background-color: #202124; } a { - color: white; - font-size: 20px; - /*text-shadow: 1px 1px 1px #aaa;*/ + color: white; + font-size: 20px; + /*text-shadow: 1px 1px 1px #aaa;*/ } p { - color: white; - font-size: 20px; - padding: 10px; + color: white; + 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;*/ + 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;*/ } - .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; + margin: 30px; } +.gallerystrip { + width: 100%; + margin: auto; + margin-top: 15px; +} .gallerystrip img { - height: auto; - border: 10px solid #313439; - margin: 10px; - box-shadow: 4px 4px 7px #070707; + height: auto; + border: 10px solid #313439; + margin: 10px; + box-shadow: 4px 4px 7px #070707; } -div.gallerystrip { - width: 100%; - margin: auto; - margin-top: 15px; +.profile { + background-color: #131313; + height: auto; + margin-top: 10px; + /*border: 8px solid #313439;*/ + border-radius: 0px; + box-shadow: 7px 7px 8px black; } - -div.profile { - background-color: #131313; - height: auto; - margin-top: 10px; - /*border: 8px solid #313439;*/ - border-radius: 0px; - box-shadow: 7px 7px 8px black; -} - -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; +.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 { - 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; - + 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; } -div.card { - /*background-color: grey;*/ - background-color: #131313; - box-shadow: 4px 4px 8px black; - padding: 10px; - margin: 10px; - /*border-radius: 3px;*/ +.card { + /*background-color: grey;*/ + background-color: #131313; + box-shadow: 4px 4px 8px black; + padding: 10px; + margin: 10px; + /*border-radius: 3px;*/ } - -div.card h1 { - text-align: center; - color: white; - text-shadow: 1px 1px 2px #4f4f4f; +.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;} - + width: 100%; + border-radius: 3px; + margin-bottom: 8px; + box-shadow: 2px 2px 2px black; + margin-left: auto; + margin-right: auto; +} .card p { - margin-top: 20px; + margin-top: 20px; } h1.sectiontitle { - text-align:center; - color: white; - font-family: 'Megrim', sans-serif; + 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: #131313; + list-style-type: none; + border-radius: 5px 5px; + /*box-shadow: 3px 3px 1px grey;*/ + margin: 10px; + padding: 0; + overflow: hidden; + background-color: #131313; } ul.navbar li { - float: left; - position: -webkit-sticky; - position: sticky; - top: 0; + 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; + 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; + background-color: #080808; } -ul.navbar li.right {float: right;} +ul.navbar li.right { + float: right; +} footer p { - text-align: right; - font-size: 12px; + text-align: right; + font-size: 12px; } footer a { - margin-top: 10px; - margin-bottom: 10px; - text-align: right; - display: block; - color: grey; - font-size: 12px; + 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;} +ul.navbar li { + float: none; + } +} +[class*=col-] { + float: left; + width: 100%; } -[class*="col-"] { - float: left; - width: 100%; -} - -[class*="pad-"] { - float: left; - width: calc(100% - 20px); +[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%;} + .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);} -} + .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; } + +/*# sourceMappingURL=style.css.map */ diff --git a/static/style.css.map b/static/style.css.map new file mode 100644 index 0000000..6dfd05e --- /dev/null +++ b/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"} \ No newline at end of file