From 3c28bd4b3fab3892ff12c797ab4354548df48c8b Mon Sep 17 00:00:00 2001 From: Lio Young Date: Tue, 19 Oct 2021 12:17:51 +0200 Subject: [PATCH] update css --- assets/css/index.css | 101 +++++++++++++++++++++++++-------------- assets/css/index.css.map | 1 + assets/sass/index.sass | 45 +++++++---------- 3 files changed, 83 insertions(+), 64 deletions(-) create mode 100644 assets/css/index.css.map diff --git a/assets/css/index.css b/assets/css/index.css index a7694c7..d261025 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,55 +1,64 @@ @import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap"); * { margin: 0; - padding: 0; } + padding: 0; +} /* Hide scrollbar for Chrome, Safari and Opera */ ::-webkit-scrollbar { - display: none; } + display: none; +} body { background: #000; color: #fff; - font-family: 'Orbitron', sans-serif; + font-family: "Orbitron", sans-serif; -ms-overflow-style: none; - /* IE and Edge */ scrollbar-width: none; - /* Firefox */ } +} .logo { width: 150px; text-align: center; margin: auto; justify-content: center; - display: flex; } + display: flex; +} a { color: white; font-size: 2vw; - text-decoration: none; } - a:hover { - color: grey; } + text-decoration: none; +} +a:hover { + color: grey; +} .twitch svg:hover { - fill: #9146FF; } + fill: #9146FF; +} .twitter svg:hover { - fill: #1DA1F2; } + fill: #1DA1F2; +} .instagram svg:hover { - fill: #E4405F; } + fill: #E4405F; +} svg { fill: white; padding: 0 10px; width: 50px; - height: 50px; } + height: 50px; +} .sub-nav { text-align: center; margin: auto; justify-content: center; - display: flex; } + display: flex; +} .bar { position: absolute; @@ -61,20 +70,25 @@ svg { font-size: 15px; margin: auto; display: flex; - padding-left: 1%; } - .bar a { - font-size: inherit; - color: black; } + padding-left: 1%; +} +.bar a { + font-size: inherit; + color: black; +} .top { - top: 50px; } + top: 50px; +} .bottom { - bottom: 50px; } + bottom: 50px; +} section { height: 100vh; - width: 100vw; } + width: 100vw; +} .music { display: flex; @@ -82,29 +96,42 @@ section { margin: auto; justify-content: space-between; padding-top: 5vh; - margin: 0 100px; } - .music .title { - font-size: 3vh; - display: flex; - text-align: left; - margin: auto; - justify-content: space-between; - padding-top: 2vh; } - .music img { - height: 30vh; } + margin: 0 100px; +} +.music .title { + font-size: 3vh; + display: flex; + text-align: left; + margin: auto; + justify-content: space-between; + padding-top: 2vh; +} +.music img { + height: 30vh; +} @media screen and (max-width: 1350px) { .music { display: table; - margin: auto; } + margin: auto; + } + .title { - padding-bottom: 20px; } + padding-bottom: 20px; + } + img { - height: 20vh; } + height: 20vh; + } + .top { - top: 60px; } + top: 60px; + } + .bottom { position: sticky; - bottom: 0; } } + bottom: 0; + } +} -/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiYXNzZXRzL3Nhc3MvaW5kZXguY3NzIiwKCSJzb3VyY2VzIjogWwoJCSJhc3NldHMvc2Fzcy9pbmRleC5zYXNzIgoJXSwKCSJuYW1lcyI6IFtdLAoJIm1hcHBpbmdzIjogIkFBTUEsT0FBTyxDQUFDLHFFQUFJO0FBQ1osQUFBQSxDQUFDLENBQUM7RUFDRSxNQUFNLEVBQUUsQ0FBQztFQUNULE9BQU8sRUFBRSxDQUFDLEdBQUc7O0FBRWpCLGlEQUFpRDtBQUNqRCxBQUFBLG1CQUFtQixDQUFDO0VBQ2hCLE9BQU8sRUFBRSxJQUFJLEdBQUc7O0FBS3BCLEFBQUEsSUFBSSxDQUFDO0VBQ0QsVUFBVSxFQUFFLElBQUk7RUFDaEIsS0FBSyxFQUFFLElBQUk7RUFDWCxXQUFXLEVBQUUsc0JBQXNCO0VBQ25DLGtCQUFrQixFQUFFLElBQUk7RUFBRyxpQkFBaUI7RUFDNUMsZUFBZSxFQUFFLElBQUk7RUFBRyxhQUFhLEVBQUc7O0FBRzVDLEFBQUEsS0FBSyxDQUFDO0VBQ0YsS0FBSyxFQUFFLEtBQUs7RUFDWixVQUFVLEVBQUUsTUFBTTtFQUNsQixNQUFNLEVBQUUsSUFBSTtFQUNaLGVBQWUsRUFBRSxNQUFNO0VBQ3ZCLE9BQU8sRUFBRSxJQUFJLEdBQUc7O0FBRXBCLEFBQUEsQ0FBQyxDQUFDO0VBQ0UsS0FBSyxFQUFFLEtBQUs7RUFDWixTQUFTLEVBQUUsR0FBRztFQUNkLGVBQWUsRUFBRSxJQUFJLEdBRUQ7RUFMeEIsQUFJSSxDQUpILEFBSUksTUFBTSxDQUFDO0lBQ0osS0FBSyxFQUFFLElBQUksR0FBRzs7QUFHdEIsQUFBQSxPQUFPLENBQUMsR0FBRyxBQUFBLE1BQU0sQ0FBQztFQUNkLElBQUksRUF0Q0MsT0FBTyxHQXNDSTs7QUFDcEIsQUFBQSxRQUFRLENBQUMsR0FBRyxBQUFBLE1BQU0sQ0FBQztFQUNmLElBQUksRUF6Q0UsT0FBTyxHQXlDSTs7QUFDckIsQUFBQSxVQUFVLENBQUMsR0FBRyxBQUFBLE1BQU0sQ0FBQztFQUNqQixJQUFJLEVBNUNJLE9BQU8sR0E0Q0k7O0FBQ3ZCLEFBQUEsR0FBRyxDQUFDO0VBQ0EsSUFBSSxFQUFFLEtBQUs7RUFDWCxPQUFPLEVBQUUsTUFBTTtFQUNmLEtBQUssRUFBRSxJQUFJO0VBQ1gsTUFBTSxFQUFFLElBQUksR0FBRzs7QUFHbkIsQUFBQSxRQUFRLENBQUM7RUFDTCxVQUFVLEVBQUUsTUFBTTtFQUNsQixNQUFNLEVBQUUsSUFBSTtFQUNaLGVBQWUsRUFBRSxNQUFNO0VBQ3ZCLE9BQU8sRUFBRSxJQUFJLEdBQUc7O0FBSXBCLEFBQUEsSUFBSSxDQUFDO0VBQ0QsUUFBUSxFQUFFLFFBQVE7RUFDbEIsS0FBSyxFQUFFLEdBQUc7RUFDVixNQUFNLEVBQUUsSUFBSTtFQUNaLGdCQUFnQixFQUFFLEtBQUs7RUFDdkIsY0FBYyxFQUFFLFVBQVU7RUFDMUIsS0FBSyxFQUFFLEtBQUs7RUFDWixTQUFTLEVBQUUsSUFBSTtFQUNmLE1BQU0sRUFBRSxJQUFJO0VBQ1osT0FBTyxFQUFFLElBQUk7RUFDYixZQUFZLEVBQUUsRUFBRSxHQUdLO0VBYnpCLEFBV0ksSUFYQSxDQVdBLENBQUMsQ0FBQztJQUNFLFNBQVMsRUFBRSxPQUFPO0lBQ2xCLEtBQUssRUFBRSxLQUFLLEdBQUc7O0FBRXZCLEFBQUEsSUFBSSxDQUFDO0VBQ0QsR0FBRyxFQUFFLElBQUksR0FBRzs7QUFFaEIsQUFBQSxPQUFPLENBQUM7RUFDSixNQUFNLEVBQUUsSUFBSSxHQUFHOztBQUVuQixBQUFBLE9BQU8sQ0FBQztFQUNKLE1BQU0sRUFBRSxLQUFLO0VBQ2IsS0FBSyxFQUFFLEtBQUssR0FBRzs7QUFFbkIsQUFBQSxNQUFNLENBQUM7RUFDSCxPQUFPLEVBQUUsSUFBSTtFQUNiLFVBQVUsRUFBRSxNQUFNO0VBQ2xCLE1BQU0sRUFBRSxJQUFJO0VBQ1osZUFBZSxFQUFFLGFBQWE7RUFDOUIsV0FBVyxFQUFFLEdBQUc7RUFDaEIsTUFBTSxFQUFFLE9BQU8sR0FTTTtFQWZ6QixBQU9JLE1BUEUsQ0FPRixNQUFNLENBQUM7SUFDSCxTQUFTLEVBQUUsR0FBRztJQUNkLE9BQU8sRUFBRSxJQUFJO0lBQ2IsVUFBVSxFQUFFLElBQUk7SUFDaEIsTUFBTSxFQUFFLElBQUk7SUFDWixlQUFlLEVBQUUsYUFBYTtJQUM5QixXQUFXLEVBQUUsR0FBRyxHQUFHO0VBYjNCLEFBY0ksTUFkRSxDQWNGLEdBQUcsQ0FBQztJQUNBLE1BQU0sRUFBRSxJQUFJLEdBQUc7O0FBR3ZCLE1BQU0sQ0FBQyxNQUFNLE1BQU0sU0FBUyxFQUFFLE1BQU07RUFDaEMsQUFBQSxNQUFNLENBQUM7SUFDSCxPQUFPLEVBQUUsS0FBSztJQUNkLE1BQU0sRUFBRSxJQUFJLEdBQUc7RUFDbkIsQUFBQSxNQUFNLENBQUM7SUFDSCxjQUFjLEVBQUUsSUFBSSxHQUFHO0VBQzNCLEFBQUEsR0FBRyxDQUFDO0lBQ0EsTUFBTSxFQUFFLElBQUksR0FBRztFQUNuQixBQUFBLElBQUksQ0FBQztJQUNELEdBQUcsRUFBRSxJQUFJLEdBQUc7RUFDaEIsQUFBQSxPQUFPLENBQUM7SUFDSixRQUFRLEVBQUUsTUFBTTtJQUNoQixNQUFNLEVBQUUsQ0FBQyxHQUFHIgp9 */ \ No newline at end of file +/*# sourceMappingURL=index.css.map */ diff --git a/assets/css/index.css.map b/assets/css/index.css.map new file mode 100644 index 0000000..d355bb7 --- /dev/null +++ b/assets/css/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/index.sass"],"names":[],"mappings":"AAMQ;AACR;EACI;EACA;;;AAEJ;AACA;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;AACA;EACI;;;AAER;EACI,MAnCK;;;AAoCT;EACI,MAtCM;;;AAuCV;EACI,MAzCQ;;;AA0CZ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;;AAER;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACJ;EACI;;;AAER;EACI;IACI;IACA;;;EACJ;IACI;;;EACJ;IACI;;;EACJ;IACI;;;EACJ;IACI;IACA","file":"index.css"} \ No newline at end of file diff --git a/assets/sass/index.sass b/assets/sass/index.sass index 83cee28..b0151e5 100644 --- a/assets/sass/index.sass +++ b/assets/sass/index.sass @@ -4,31 +4,29 @@ $instagram: #E4405F $twitter: #1DA1F2 $twitch: #9146FF -@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap') * margin: 0 padding: 0 /* Hide scrollbar for Chrome, Safari and Opera */ ::-webkit-scrollbar - display: none; - + display: none // MAKE SVGS FILL WITH THEIR COLOR ON HOVER body background: #000 color: #fff - font-family: 'Orbitron', sans-serif; - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - - + font-family: 'Orbitron', sans-serif + -ms-overflow-style: none /* IE and Edge */ + scrollbar-width: none /* Firefox */ + .logo width: 150px - text-align: center; - margin: auto; - justify-content: center; + text-align: center + margin: auto + justify-content: center display: flex a @@ -38,7 +36,6 @@ a &:hover color: grey - .twitch svg:hover fill: $twitch .twitter svg:hover @@ -51,24 +48,21 @@ svg width: 50px height: 50px - .sub-nav - text-align: center; - margin: auto; - justify-content: center; + text-align: center + margin: auto + justify-content: center display: flex - - .bar position: absolute width: 99% height: 20px background-color: white - mix-blend-mode: difference; + mix-blend-mode: difference color: black font-size: 15px - margin: auto; + margin: auto display: flex padding-left: 1% a @@ -87,22 +81,21 @@ section .music display: flex - text-align: center; - margin: auto; + text-align: center + margin: auto justify-content: space-between padding-top: 5vh margin: 0 100px .title font-size: 3vh display: flex - text-align: left; - margin: auto; + text-align: left + margin: auto justify-content: space-between padding-top: 2vh img height: 30vh - @media screen and ( max-width: 1350px ) .music display: table @@ -116,5 +109,3 @@ section .bottom position: sticky bottom: 0 - -