Resume/theme/style.scss
2023-07-25 16:16:36 -04:00

232 lines
4.0 KiB
SCSS

:root {
font-family: "Noto Sans", sans-serif;
--primary: #006494;
--on-primary: #ffffff;
--primary-container: #c8e6ff;
--on-primary-container: #001e31;
--secondary: #50606e;
--on-secondary: #ffffff;
--secondary-container: #d3e4f5;
--on-secondary-container: #0c1d29;
--tertiary: #65597b;
--on-tertiary: #ffffff;
--tertiary-container: #ecdcff;
--on-tertiary-container: #201634;
--error: #ba1b1b;
--error-container: #ffdad4;
--on-error: #ffffff;
--on-error-container: #410001;
--background: #fcfcff;
--on-background: #1a1c1e;
--surface: #fcfcff;
--on-surface: #1a1c1e;
--surface-variant: #dee3ea;
--on-surface-variant: #41474d;
--outline: #72787e;
--inverse-on-surface: #f0f0f3;
--inverse-surface: #2f3032;
--inverse-primary: #8bceff;
--error-container-alt: #ffd3cc;
}
body {
width: 8.5in;
height: 11in;
margin: 0;
padding: 0;
}
p {
margin: 0;
}
.page {
page-break-after: always;
position: relative;
width: 8.5in;
height: 11in;
}
.page-content {
position: absolute;
width: 8.125in;
height: 10.625in;
left: 0.1875in;
top: 0.1875in;
color: var(--on-background);
background-color: var(--background);
}
.resumehead {
width: 100%;
padding: 16px;
h1 {
font-weight: 500;
text-transform: uppercase;
margin: 0;
font-size: 2.5rem;
line-height: 2.5rem;
}
h5 {
font-weight: 300;
text-transform: uppercase;
margin: 0;
}
.divider {
display: flex;
background-color: var(--on-background);
width: 100%;
height: 1px;
}
.resumehead-name {
float: right;
text-align: right;
}
.resumehead-contactinfo {
float: right;
text-align: right;
display: flex;
padding-top: 4px;
font-size: 13px;
.material-symbols-outlined {
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
font-size: 16px;
}
:last-child {
margin-right: 0;
}
}
// Weird values but the picture midline is the divider line
.profile-image {
width: 17%;
border-radius: 50%;
position: absolute;
transform: translate(0, -5.75%);
margin-left: 2em;
border: 8px solid var(--background);
}
}
.contactinfo {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
margin-right: 16px;
p {
font-weight: 300;
}
}
.resumebody {
margin-top: 3rem;
width: 100%;
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: 30% 1fr;
grid-template-rows: 1fr;
gap: 0px 2em;
grid-template-areas: ". .";
h1,h2,h3,h4,h5,h6{
margin: 0;
margin-bottom: .5em;
}
p{
font-size: 12px;
}
.l{
margin-left: 16px;
}
.r{
margin-right: 16px;
}
}
.space{
height: 1em;
&-small{
height: .25em;
}
}
.timelineitem{
border-bottom: 1px solid var(--on-background);
border-left: 1px solid var(--on-background);
margin-bottom: .75rem;
margin-left: .25rem;
padding-left: 1rem;
padding-bottom: .25rem;
position: relative;
h1,h2,h3,h4,h5,h6{
margin: 0;
}
.date{
background-color: var(--background);
position: absolute;
padding-right: 5px;
padding-left: 2px;
top: 0;
left: 0;
transform-origin: 0 0;
transform: rotate(-90deg) translate(-99%, -55%);
}
}
.skill-container{
margin-bottom: .75rem;
border-bottom: 1px solid var(--on-background);
border-left: 1px solid var(--on-background);
padding-left: .5rem;
padding-bottom: .5rem;
}
.chip{
color: var(--background);
background-color: var(--on-background);
display: inline-flex;
flex-direction: row;
border: none;
outline: none;
padding: 0;
white-space: nowrap;
align-items: center;
border-radius: 16px;
vertical-align: middle;
text-decoration: none;
justify-content: center;
font-size: .75em;
}
.chip-content{
display: flex;
align-items: center;
user-select: none;
white-space: nowrap;
padding-left: .5rem;
padding-right: .5rem;
}
@media print {
body {
background: unset;
background-color: var(--background);
}
}