makin look nice
This commit is contained in:
@@ -1,278 +0,0 @@
|
||||
/* Fonts */
|
||||
/*@font-face {
|
||||
font-family: "AldoTheApache";
|
||||
src: url("/fonts/AldotheApache.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "RobotFont";
|
||||
src: url("/fonts/Robot_Font.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "m12";
|
||||
src: url("/fonts/m12.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}*/
|
||||
|
||||
@font-face {
|
||||
font-family: "big_noodle_titling";
|
||||
src: url("/fonts/big_noodle_titling.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CreatoDisplay";
|
||||
src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
* {
|
||||
/* Blue - Beige */
|
||||
/* --primary: #153448;
|
||||
--secondary: #3C5B6F;
|
||||
--tertiary: #948979;
|
||||
--quaternary: #f5bb78;
|
||||
--background: #DFD0B8; */
|
||||
|
||||
/* Blue - Turqouise */
|
||||
/* --primary: #161D6F;
|
||||
--secondary: #0B2F9F;
|
||||
--tertiary: #98DED9;
|
||||
--quaternary: #C7FFD8;
|
||||
--background: #C2EFD1; */
|
||||
|
||||
/* Red - Blue */
|
||||
/* --primary: #ff204e; */
|
||||
/* --secondary: #a0153e; */
|
||||
/* --tertiary: #5d0341; */
|
||||
/* --quaternary: #3a0e41; */
|
||||
/* --background: #00224d; */
|
||||
|
||||
/* Blue - Brown */
|
||||
/* --primary: #35374B; */
|
||||
/* --secondary: #344955; */
|
||||
/* --tertiary: #50727b; */
|
||||
/* --quaternary: #78a083; */
|
||||
/* --background: #c7b077; */
|
||||
|
||||
/* Black - White */
|
||||
--primary: black;
|
||||
--secondary: black;
|
||||
--tertiary: black;
|
||||
--quaternary: #cccccc;
|
||||
--background: white;
|
||||
|
||||
/* Blue - White */
|
||||
/* --primary: #201e43; */
|
||||
/* --secondary: #134b70; */
|
||||
/* --tertiary: #508c9b; */
|
||||
/* --quaternary: #cceeee; */
|
||||
/* --background: #eeeeee; */
|
||||
|
||||
--font-heading: big_noodle_titling;
|
||||
--font-text: CreatoDisplay;
|
||||
--font-size-text: 90%;
|
||||
--font-size-heading: 2.5em;
|
||||
--font-size-tableheading: 1.2em;
|
||||
}
|
||||
|
||||
/* A5 Page */
|
||||
.a5page {
|
||||
/* overflow: scroll; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-text);
|
||||
height: 148mm;
|
||||
width: 210mm;
|
||||
padding: 5mm;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--background);
|
||||
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
|
||||
border: solid 2px var(--primary);
|
||||
}
|
||||
|
||||
/* A4 Page */
|
||||
.a4page {
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-text);
|
||||
width: 210mm;
|
||||
/* Standard A4 width */
|
||||
height: 297mm;
|
||||
/* Standard A4 height */
|
||||
padding: 10mm;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--background);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--primary);
|
||||
overflow: auto;
|
||||
/* Enables scrolling when content exceeds height */
|
||||
margin: 0 auto;
|
||||
/* Centers the page horizontally */
|
||||
}
|
||||
|
||||
/* Component Styling */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*div {
|
||||
all: unset;
|
||||
}*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: var(--primary);
|
||||
font-family: var(--font-heading);
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-heading);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0px;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--secondary);
|
||||
font-size: var(--font-size-text);
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
color: var(--secondary);
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
/* border: 2px solid var(--tertiary); */
|
||||
border-top: 1px solid var(--tertiary);
|
||||
padding: 1px 0px 1px 10px;
|
||||
font-size: var(--font-size-text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
border: 2px solid var(--tertiary);
|
||||
padding: 1px 0px 1px 7px;
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--font-size-tableheading);
|
||||
background-color: var(--quaternary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
/* Cover Navigation (for ease of use) */
|
||||
.cover-nav {
|
||||
position: fixed;
|
||||
top: 0.5vh;
|
||||
/* Position the element at the top of the screen */
|
||||
left: 80vw;
|
||||
/* Position the element at the left of the screen */
|
||||
border: 2px solid var(--tertiary);
|
||||
width: 19.5vw;
|
||||
/* Make the element span the width of the screen (optional) */
|
||||
background-color: var(--background);
|
||||
/* Set a background color to avoid overlap issues */
|
||||
z-index: 1000;
|
||||
/* Ensures the element is above other content */
|
||||
}
|
||||
|
||||
.cover-nav td,
|
||||
tr {
|
||||
font-family: var(--font-text);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cover-nav th {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--tertiary);
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cover letter styling */
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: 0px solid var(--primary);
|
||||
resize: none;
|
||||
font-family: var(--font-text);
|
||||
}
|
||||
|
||||
/* Contact At Top of Page */
|
||||
.contact {
|
||||
all: unset;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
all: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.contact-details p {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* Interests and Skills at bottom of page */
|
||||
.interests {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-top: solid 2px var(--primary);
|
||||
}
|
||||
|
||||
.interests td,
|
||||
tr,
|
||||
th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.row-leftalign {
|
||||
/* background-image: url("https://www.fridakahlo.org/assets/img/paintings/without-hope.jpg"); */
|
||||
text-align: left;
|
||||
}
|
||||
@@ -37,14 +37,14 @@
|
||||
--portal_light_blue: #00a2ff;
|
||||
|
||||
/* MAIN COLORS */
|
||||
--primary: white;
|
||||
--secondary: beige;
|
||||
--primary: #000;
|
||||
--secondary: #000;
|
||||
--tertiary: #5a6952;
|
||||
--quaternary: #424542;
|
||||
|
||||
/* BACKGROUND COLORS */
|
||||
--bg-body: #000000;
|
||||
--bg_primary: #222;
|
||||
--bg-body: #111;
|
||||
--bg_primary: #244;
|
||||
--bg_secondary: #444;
|
||||
--bg_tertiary: #666;
|
||||
--bg_quaternary: #888;
|
||||
@@ -61,7 +61,13 @@ body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
font-family: var(--font-text);
|
||||
background-color: var(--bg-body);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background-color: var(--bg_secondary);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -152,19 +158,19 @@ button {
|
||||
}
|
||||
|
||||
.bdr-primary {
|
||||
border: 2px solid var(--primary);
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.bdr-secondary {
|
||||
border: 2px solid var(--secondary);
|
||||
border: 1px solid var(--secondary);
|
||||
}
|
||||
|
||||
.bdr-tertiary {
|
||||
border: 2px solid var(--tertiary);
|
||||
border: 1px solid var(--tertiary);
|
||||
}
|
||||
|
||||
.bdr-quaternary {
|
||||
border: 2px solid var(--quaternary);
|
||||
border: 1px solid var(--quaternary);
|
||||
}
|
||||
|
||||
/* SHADOWS */
|
||||
@@ -230,16 +236,14 @@ button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.floating {
|
||||
|
||||
@@ -5,7 +5,7 @@ import Footer from "@/components/Footer.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Navbar style="height: 5vh" class="no-print" />
|
||||
<Navbar class="no-print" />
|
||||
|
||||
<RouterView />
|
||||
|
||||
|
||||
@@ -1,15 +1,6 @@
|
||||
<template>
|
||||
<nav class="no-print flex-row">
|
||||
<RouterLink to="/"><p>HOME</p></RouterLink>
|
||||
<nav class="flex-row">
|
||||
<RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
|
||||
<!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> -->
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
nav {
|
||||
height: 10vh;
|
||||
}
|
||||
h1 {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
38
nginx/vue/src/components/backgrounds/Halftone.vue
Normal file
38
nginx/vue/src/components/backgrounds/Halftone.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="halftone" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.halftone {
|
||||
--dot_size: 1px;
|
||||
--bg_size: 5px;
|
||||
--bg_pos: calc(var(--bg_size) / 2);
|
||||
--blur: 0%;
|
||||
--dot_color: #044;
|
||||
--bg_color: #114;
|
||||
|
||||
background-color: var(--bg_color);
|
||||
background-image: radial-gradient(
|
||||
circle at center,
|
||||
var(--dot_color) var(--dot_size),
|
||||
transparent var(--blur)
|
||||
);
|
||||
background-size: var(--bg_size) var(--bg_size);
|
||||
background-position: 0 0;
|
||||
|
||||
mask-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(1, 1, 1, 1) 0%,
|
||||
rgba(1, 1, 1, 0.85) 100%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<img src="/img/epic.jpeg" />
|
||||
<div class="flex-row">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Color</td>
|
||||
<td>Aqua</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pet</td>
|
||||
<td>Cat</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Color</td>
|
||||
<td>Blue</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -57,6 +57,9 @@ onMounted(() => {
|
||||
<button v-if="!leftCap" @click="prevPost">Prev</button>
|
||||
<button v-if="!rightCap" @click="nextPost">Next</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h2>Can't fetch from the db yo</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,34 +1,11 @@
|
||||
<template>
|
||||
<div class="fill flex-row">
|
||||
<img src="/img/epic.jpeg" class="img" />
|
||||
<div class="fill flex-col">
|
||||
<div class="div">
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<h1>Welcome</h1>
|
||||
<p>This is my website, currently under construction.</p>
|
||||
<p>THANKS FOR VISITING ^_^</p>
|
||||
<p>THANKS FOR VISITING ^_^</p>
|
||||
<p>THANKS FOR VISITING ^_^</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.div {
|
||||
flex: 7;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<RouterLink to="/cv">
|
||||
<div class="flex-col">
|
||||
<RouterLink class="bdr-2" to="/cv">
|
||||
<h1>CV</h1>
|
||||
</RouterLink>
|
||||
<RouterLink to="/admin">
|
||||
<RouterLink class="bdr-2" to="/admin">
|
||||
<h1>ADMIN</h1>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 2px;
|
||||
}
|
||||
p {
|
||||
background: var(--bg_primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
<template>
|
||||
<main>
|
||||
<div
|
||||
class="no-print"
|
||||
style="width: 100%; text-align: center; margin: 20px 0"
|
||||
>
|
||||
<h1>Page 1</h1>
|
||||
</div>
|
||||
|
||||
<div class="a4page">
|
||||
<div class="contact">
|
||||
<h1>Adam French</h1>
|
||||
@@ -147,12 +140,7 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="no-print"
|
||||
style="width: 100%; text-align: center; margin: 20px 0"
|
||||
>
|
||||
<h1>Page 2</h1>
|
||||
</div>
|
||||
<span class="no-print"></span>
|
||||
|
||||
<div class="a4page">
|
||||
<h2>Personal Projects</h2>
|
||||
@@ -336,20 +324,283 @@
|
||||
<!-- </table> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="no-print"
|
||||
style="width: 100%; text-align: center; margin: 20px 0"
|
||||
>
|
||||
<h1>END</h1>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import url("/css/cv_styles.css");
|
||||
/* Fonts */
|
||||
/*@font-face {
|
||||
font-family: "AldoTheApache";
|
||||
src: url("/fonts/AldotheApache.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "RobotFont";
|
||||
src: url("/fonts/Robot_Font.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "m12";
|
||||
src: url("/fonts/m12.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}*/
|
||||
|
||||
@font-face {
|
||||
font-family: "big_noodle_titling";
|
||||
src: url("/fonts/big_noodle_titling.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "CreatoDisplay";
|
||||
src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
* {
|
||||
/* Blue - Beige */
|
||||
/* --primary: #153448;
|
||||
--secondary: #3C5B6F;
|
||||
--tertiary: #948979;
|
||||
--quaternary: #f5bb78;
|
||||
--background: #DFD0B8; */
|
||||
|
||||
/* Blue - Turqouise */
|
||||
/* --primary: #161D6F;
|
||||
--secondary: #0B2F9F;
|
||||
--tertiary: #98DED9;
|
||||
--quaternary: #C7FFD8;
|
||||
--background: #C2EFD1; */
|
||||
|
||||
/* Red - Blue */
|
||||
/* --primary: #ff204e; */
|
||||
/* --secondary: #a0153e; */
|
||||
/* --tertiary: #5d0341; */
|
||||
/* --quaternary: #3a0e41; */
|
||||
/* --background: #00224d; */
|
||||
|
||||
/* Blue - Brown */
|
||||
/* --primary: #35374B; */
|
||||
/* --secondary: #344955; */
|
||||
/* --tertiary: #50727b; */
|
||||
/* --quaternary: #78a083; */
|
||||
/* --background: #c7b077; */
|
||||
|
||||
/* Black - White */
|
||||
--primary: black;
|
||||
--secondary: black;
|
||||
--tertiary: black;
|
||||
--quaternary: #cccccc;
|
||||
--background: white;
|
||||
|
||||
/* Blue - White */
|
||||
/* --primary: #201e43; */
|
||||
/* --secondary: #134b70; */
|
||||
/* --tertiary: #508c9b; */
|
||||
/* --quaternary: #cceeee; */
|
||||
/* --background: #eeeeee; */
|
||||
|
||||
--font-heading: big_noodle_titling;
|
||||
--font-text: CreatoDisplay;
|
||||
--font-size-text: 90%;
|
||||
--font-size-heading: 2.5em;
|
||||
--font-size-tableheading: 1.2em;
|
||||
}
|
||||
|
||||
/* A5 Page */
|
||||
.a5page {
|
||||
/* overflow: scroll; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-text);
|
||||
height: 148mm;
|
||||
width: 210mm;
|
||||
padding: 5mm;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--background);
|
||||
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
|
||||
border: solid 2px var(--primary);
|
||||
}
|
||||
|
||||
/* A4 Page */
|
||||
.a4page {
|
||||
line-height: 1.6;
|
||||
font-family: var(--font-text);
|
||||
width: 210mm;
|
||||
/* Standard A4 width */
|
||||
height: 297mm;
|
||||
/* Standard A4 height */
|
||||
padding: 10mm;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--background);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--primary);
|
||||
overflow: auto;
|
||||
/* Enables scrolling when content exceeds height */
|
||||
margin: 0 auto;
|
||||
/* Centers the page horizontally */
|
||||
}
|
||||
|
||||
/* Component Styling */
|
||||
main {
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
span {
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: var(--primary);
|
||||
font-family: var(--font-heading);
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-heading);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0px;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--secondary);
|
||||
font-size: var(--font-size-text);
|
||||
margin-top: 0.3em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table {
|
||||
color: var(--secondary);
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td {
|
||||
/* border: 2px solid var(--tertiary); */
|
||||
border-top: 1px solid var(--tertiary);
|
||||
padding: 1px 0px 1px 10px;
|
||||
font-size: var(--font-size-text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
border: 2px solid var(--tertiary);
|
||||
padding: 1px 0px 1px 7px;
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--font-size-tableheading);
|
||||
background-color: var(--quaternary);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
/* Cover Navigation (for ease of use) */
|
||||
.cover-nav {
|
||||
position: fixed;
|
||||
top: 0.5vh;
|
||||
/* Position the element at the top of the screen */
|
||||
left: 80vw;
|
||||
/* Position the element at the left of the screen */
|
||||
border: 2px solid var(--tertiary);
|
||||
width: 19.5vw;
|
||||
/* Make the element span the width of the screen (optional) */
|
||||
background-color: var(--background);
|
||||
/* Set a background color to avoid overlap issues */
|
||||
z-index: 1000;
|
||||
/* Ensures the element is above other content */
|
||||
}
|
||||
|
||||
.cover-nav td,
|
||||
tr {
|
||||
font-family: var(--font-text);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.cover-nav th {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--tertiary);
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cover letter styling */
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: 0px solid var(--primary);
|
||||
resize: none;
|
||||
font-family: var(--font-text);
|
||||
}
|
||||
|
||||
/* Contact At Top of Page */
|
||||
.contact {
|
||||
all: unset;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
all: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.contact-details p {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* Interests and Skills at bottom of page */
|
||||
.interests {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
border-top: solid 2px var(--primary);
|
||||
}
|
||||
|
||||
.interests td,
|
||||
tr,
|
||||
th {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.row-leftalign {
|
||||
/* background-image: url("https://www.fridakahlo.org/assets/img/paintings/without-hope.jpg"); */
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,10 +8,13 @@ import Collage from "@/components/home/Collage.vue";
|
||||
import Favorites from "@/components/home/Favorites.vue";
|
||||
import Gym from "@/components/home/Gym.vue";
|
||||
import Watching from "@/components/home/Watching.vue";
|
||||
|
||||
import Halftone from "@/components/backgrounds/Halftone.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="center-content flex-col bg-tile">
|
||||
<main class="center-content flex-col">
|
||||
<Halftone />
|
||||
<div class="a4page-portrait bdr-1 grid">
|
||||
<Intro class="intro bdr-primary bg-primary" />
|
||||
<Listening class="listening bdr-primary bg-primary" />
|
||||
|
||||
Reference in New Issue
Block a user