Styling
* custom font `quicksand` * font-awesome icons * random background and text colors * quote center alignment and author name right * layout etc. like horizontally and vertically center in a cardmaster
parent
39de62a7cc
commit
1813e6ae02
@ -1 +1,66 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "quicksand";
|
||||||
|
/* license: url("https://radii.page/fonts/Quicksand-Regular.txt"); */
|
||||||
|
src: local("quicksand") url("./quicksand.ttf") format("tff");
|
||||||
|
}
|
||||||
|
|
||||||
|
$font-family-base: quicksand, roboto !default;
|
||||||
|
|
||||||
@import "~bootstrap/scss/bootstrap";
|
@import "~bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
|
$colors: #73a857, #3f2e7a, #bdbb99, #77b1a9, #fb6964, #9b59b6, #2c3e50, #27ae60,
|
||||||
|
#f39c12, #16a085;
|
||||||
|
|
||||||
|
@for $i from 1 through length($colors) {
|
||||||
|
$color: nth($colors, $i);
|
||||||
|
.color-#{$i} {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
.bg-color-#{$i} {
|
||||||
|
background-color: $color;
|
||||||
|
color: white;
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($color, 10%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
background-color: $color;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&:focus:hover {
|
||||||
|
background-color: darken($color, 10%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-color-twitter {
|
||||||
|
$twitter-color: #1d9bf0;
|
||||||
|
background-color: $twitter-color;
|
||||||
|
color: white;
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($twitter-color, 10%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
background-color: $twitter-color;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&:focus:hover {
|
||||||
|
background-color: darken($twitter-color, 10%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
Binary file not shown.
Loading…
Reference in New Issue