- sidebar
+
+
\ No newline at end of file
diff --git a/src/css/reset.css b/src/css/reset.css
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/src/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
\ No newline at end of file
diff --git a/src/css/styles.css b/src/css/styles.css
index 8777015..2bdec0e 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -4,54 +4,9 @@
// Bootstrap
// @import './vendor/bootstrap'; */
-/* http://meyerweb.com/eric/tools/css/reset/
- v2.0 | 20110126
- License: none (public domain)
-*/
+@import './reset.css';
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-body {
- line-height: 1;
-}
-ol, ul {
- list-style: none;
-}
-blockquote, q {
- quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
+/* / */
/* Global variables. */
:root {
@@ -60,54 +15,69 @@ table {
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-
+
/* Default (light) theme */
- --bg: #fff;
- --accent-bg: #f5f7ff;
+ --bg: #FFEF82;
+ --accent-bg: #EFD345;
--text: #82945b;
- --text-light: #585858;
- --border: #d8dae1;
- --accent: #0d47a1;
+ /* --text-light: #585858; */
+ --border: #82954B;
+ --accent: #1976D2;
}
-/* Dark theme */
-/*// @media (prefers-color-scheme: dark) {
-// :root {
-// --bg: #212121;
-// --accent-bg: #2b2b2b;
-// --text: #dcdcdc;
-// --text-light: #ababab;
-// --border: #666;
-// --accent: #ffb300;
-// }
-// }
-
-// * {
-// box-sizing: border-box;
-// } */
-
html {
/* Set the font globally */
font-family: var(--sans-font);
scroll-behavior: smooth;
}
-/* Make the body a nice central block */
+
+/* Format headers */
+
+h1 {
+ font-size: 2.5rem;
+}
+
+h2 {
+ font-size: 2rem;
+ margin-top: 3rem;
+}
+
+/* Format links */
+a,
+a:visited {
+ color: var(--accent);
+}
+
+a:hover {
+ text-decoration: none;
+}
+
body {
color: var(--text);
background: var(--bg);
- font-size: 1.15rem;
- line-height: 1.5;
- /* padding: 0 1em; */
+ background-image: url("/img/l_ash02_big.jpg");
+ background-size: cover;
+ line-height: 1.3;
display: flex;
justify-content: center;
flex-wrap: wrap;
+ gap: 20px;
+ margin: 20px;
+ /* padding: 0 1em; */
+ /* font-size: 1.15rem; */
/* align-items: flex-start; */
}
main {
/* // margin: 0 auto; */
+ background: var(--bg);
width: 750px;
+ padding: 15px;
+ height: min-content;
+ /* border: 2px solid var(--border); */
+ border-radius: 15px;
+ box-sizing: border-box;
}
@media all and (max-width: 1000px) {
@@ -116,6 +86,46 @@ main {
}
}
+aside {
+ position: sticky;
+ height: min-content;
+ top: 20px;
+ width: 200px;
+ margin-top: 30px;
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+ /* border: 2px solid var(--border); */
+}
+
+.profile-img {
+ width: 100px;
+ border-radius: 50px;
+ /* top: -70px; */
+ z-index: 1;
+ position: relative;
+}
+
+.sidebar-contents {
+ padding: 65px 15px 15px 15px;
+ border-radius: 15px;
+ background: var(--bg);
+ box-sizing: border-box;
+ height: min-content;
+ width: 100%;
+ top: -50px;
+ position: relative;
+}
+
+/* body > footer {
+ margin-top: 4rem;
+ padding: 2rem 1rem 1.5rem 1rem;
+ color: var(--text-light);
+ font-size: 0.9rem;
+ text-align: center;
+ border-top: 1px solid var(--border);
+} */
+
/* // body > header {
// text-align: center;
// padding: 0 0.5rem 2rem 0.5rem;
@@ -170,33 +180,6 @@ main {
// padding-top: 1.5rem;
// } */
-body > footer {
- margin-top: 4rem;
- padding: 2rem 1rem 1.5rem 1rem;
- color: var(--text-light);
- font-size: 0.9rem;
- text-align: center;
- border-top: 1px solid var(--border);
-}
-
-/* Format headers */
-
-h1 {
- font-size: 3rem;
-}
-
-h2 {
- font-size: 2.6rem;
- margin-top: 3rem;
-}
-
-.aside {
- position: sticky;
- height: min-content;
- top: 20px;
- width: 200px;
-}
-
/* Reduce header size on mobile */
/* // @media only screen and (max-width: 720px) {
// h1 {
@@ -207,13 +190,3 @@ h2 {
// font-size: 2.1rem;
// }
// } */
-
-/* Format links */
-a,
-a:visited {
- color: var(--accent);
-}
-
-a:hover {
- text-decoration: none;
-}
\ No newline at end of file
diff --git a/src/img/cropped.png b/src/img/cropped.png
new file mode 100644
index 0000000..e5468ed
Binary files /dev/null and b/src/img/cropped.png differ
diff --git a/src/img/l_ash02_big.jpg b/src/img/l_ash02_big.jpg
new file mode 100644
index 0000000..1f1aa7c
Binary files /dev/null and b/src/img/l_ash02_big.jpg differ