181 lines
2.8 KiB
SCSS
181 lines
2.8 KiB
SCSS
/* Fonts */
|
|
@import "fonts";
|
|
|
|
/* Load Bootstrap v5 and customizations */
|
|
@import "bs-load";
|
|
|
|
/*SVG ICON SYSTEM*/
|
|
@import "svg-icons";
|
|
|
|
/* LiveView specific CSS */
|
|
@import "phx-liveview";
|
|
|
|
/* Navbar toggler icon override */
|
|
@import "nav-burger";
|
|
|
|
/* Navbar custom styling */
|
|
@import "nav-bar-help";
|
|
|
|
/* main */
|
|
html,
|
|
body {
|
|
color: $gray-100;
|
|
background-color: $gray-800;
|
|
height: 100%;
|
|
}
|
|
a {
|
|
color: $primary;
|
|
&:visited {
|
|
color: $info;
|
|
}
|
|
&:hover {
|
|
color: $secondary;
|
|
}
|
|
}
|
|
.border-gray-900 {
|
|
border-color: $gray-900 !important;
|
|
}
|
|
.text-gray-200 {
|
|
color: $gray-200;
|
|
}
|
|
.text-gray-300 {
|
|
color: $gray-300;
|
|
}
|
|
.text-gray-400 {
|
|
color: $gray-400;
|
|
}
|
|
.text-gray-500 {
|
|
color: $gray-500;
|
|
}
|
|
.border-10 {
|
|
border-width: 10px !important;
|
|
}
|
|
.border-20 {
|
|
border-width: 20px !important;
|
|
}
|
|
.fw-500 {
|
|
font-weight: 500;
|
|
}
|
|
.fw-600 {
|
|
font-weight: 600;
|
|
}
|
|
.font-sans-serif {
|
|
font-family: $font-family-sans-serif;
|
|
}
|
|
.font-brand {
|
|
font-family: $font-family-brand;
|
|
}
|
|
.font-code {
|
|
font-family: $font-family-code;
|
|
}
|
|
.fs-larger {
|
|
font-size: larger;
|
|
}
|
|
.fs-smaller {
|
|
font-size: smaller;
|
|
}
|
|
|
|
/* social icons */
|
|
#social-icons .link-light {
|
|
color: $gray-100;
|
|
&:hover {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
/* resume separators */
|
|
.separator {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: $gray-500;
|
|
font-family: $font-family-monospace;
|
|
font-size: smaller;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
flex: 1;
|
|
border-bottom: 1px solid $secondary;
|
|
}
|
|
&:not(:empty)::before {
|
|
margin-right: 0.5em;
|
|
}
|
|
&:not(:empty)::after {
|
|
margin-left: 0.33em;
|
|
}
|
|
}
|
|
|
|
/* blog */
|
|
.post-title a {
|
|
color: $gray-100;
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: $primary;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
.post-lede,
|
|
.post-body {
|
|
color: $gray-200;
|
|
h2, h3, h4, h5, h6 {
|
|
color: $gray-300;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
.post-lede.lead {
|
|
font-size: 1.25rem;
|
|
font-weight: 300;
|
|
color: $gray-300;
|
|
}
|
|
|
|
/* extra */
|
|
.was-validated .no-valid-style .form-check-input:valid,
|
|
.form-check-input.is-valid {
|
|
border-color: inherit !important;
|
|
}
|
|
.was-validated .no-valid-style .form-check-input:valid ~ .form-check-label,
|
|
.no-valid-style .form-check-input.is-valid ~ .form-check-label {
|
|
color: inherit !important;
|
|
}
|
|
.table-nonfluid {
|
|
width: auto !important;
|
|
}
|
|
.cursor-pointer {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
/*
|
|
icons in input fields
|
|
*/
|
|
/* enable absolute positioning */
|
|
.inner-addon {
|
|
position: relative;
|
|
}
|
|
|
|
/* style icon */
|
|
.inner-addon > .icon {
|
|
position: absolute;
|
|
padding: 0.5625rem 0.5rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* align icon */
|
|
.inner-addon > .icon.is-left {
|
|
left: 0px;
|
|
}
|
|
.inner-addon > .icon.is-right {
|
|
right: 0px;
|
|
}
|
|
|
|
/* add padding */
|
|
.left-addon input,
|
|
.left-addon select {
|
|
padding-left: 2rem;
|
|
}
|
|
.right-addon input,
|
|
.right-addon select {
|
|
padding-right: 2rem;
|
|
}
|