SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: tweak header styling

Browse source
This commit is contained in:
Sebin Nyshkim 2020-03-28 18:04:10 +01:00
parent 55f41ada00
commit d77c8df750
2 changed files with 45 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/App.vue
View file

@ -8,9 +8,10 @@
</div> </div>
<div>😈</div> <div>😈</div>
</label> </label>
<header> <header>
<img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" /> <div>
<img src="/img/sebin-smug-icon.png" alt="Sebin Avatar" />
</div>
<div> <div>
<h1>{{ appName }}</h1> <h1>{{ appName }}</h1>
<h2>{{ appSubtitle }}</h2> <h2>{{ appSubtitle }}</h2>
@ -341,10 +342,10 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap"); @import url("https://fonts.googleapis.com/css?family=Exo:300,300i,900,900i|Fira+Sans+Extra+Condensed:300,700&display=swap");
:root { :root {
font-family: "Open Sans", sans-serif; font-family: "Fira Sans Extra Condensed", sans-serif;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
} }
@ -463,24 +464,55 @@ export default {
header { header {
display: flex; display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
img { @media (min-width: 35em) {
flex: 0 1 20%; flex-flow: row nowrap;
justify-content: flex-start;
} }
div { div {
flex: 0 1 80%; flex: 0 1 100%;
padding-left: 1em;
&:first-child {
flex: 0 1 50%;
@media (min-width: 35em) {
flex: 0 1 30%;
}
}
img {
width: 100%;
border-radius: 5em;
border: 0.375em solid #fff;
box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
}
}
h1,
h2 {
font-family: "Exo", sans-serif;
margin: 0;
text-align: center;
} }
h1 { h1 {
font-size: 2.2em; font-size: 2.125em;
line-height: 1; font-weight: 900;
font-style: italic;
@media (min-width: 35em) {
font-size: 2.75em;
}
} }
h2 { h2 {
font-size: 1em; font-size: 1em;
font-weight: normal; font-weight: 300;
font-style: italic;
} }
} }

4
src/mixins/Sebin.js
View file

@ -100,7 +100,7 @@ export default {
}; };
const colors = { const colors = {
headers: ["Body Part", "Color Value (hex)", "Color"], headers: ["Body Part", "Color (hex)", "Color"],
data: [ data: [
["Primary Scale Color", this.colors.scalesPrimary], ["Primary Scale Color", this.colors.scalesPrimary],
["Secondary Scale Color", this.colors.scalesSecondary], ["Secondary Scale Color", this.colors.scalesSecondary],
@ -108,7 +108,7 @@ export default {
["Secondary Hair Color", this.colors.hairSecondary], ["Secondary Hair Color", this.colors.hairSecondary],
["Eyes", this.colors.eyes], ["Eyes", this.colors.eyes],
["Facial Spikes", this.colors.eyebrows], ["Facial Spikes", this.colors.eyebrows],
["Horns / Claws / Nipples", this.colors.horns], ["Horns/Claws/Nipples", this.colors.horns],
["Tail Spikes", this.colors.tailspikes] ["Tail Spikes", this.colors.tailspikes]
] ]
}; };