start work on new website

2024-12-04 16:17:16 +11:00
parent 1cb1a56205
commit 12b9db6212
14 changed files with 202 additions and 0 deletions
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -0,0 +1,123 @@
+:root {
+  /* COLORS */
+  --rich-black: #030303; /*for body background colour*/
+  --eerie-black: #171717; /* for article background colour*/
+  --charleston-green: #2c2c2c; /*for article background rollover*/
+  --dark-medium-gray: #aaa; /* for main body text throughout website*/
+  --platinum: #e9e9e9; /* for titles*/
+  --middle-green: #52aa5e; /* for the main heading and links*/
+  --turquoise-green: #a0d0a7; /* for links in their hover state*/
+  --amaranth: #ef2d56; /* just for the support heart in its hoverstate */
+
+  /* THEME */
+    /* COLOURS */
+  --page-title-color: var(--middle-green);
+  --link-color: var(--middle-green);
+  --link-hover-color: var(--turquise-green)
+  --body-background-color: var(--rich-black);
+  --article-background-color: var(--eerie-black);
+  --text-color: var(--dark-medium-gray);
+  --nav-link-color: var(--text-color);
+  --nav-link-color-hover: var(--platinum);
+    /* FONT SIZES */
+  --font-size: 1.7rem;
+  --page-title-font-size: 3.6rem;
+  --card-background-hover: var(--charleston-green)
+}
+
+
+
+ 
+
+
+
+html {
+    font-size: 10px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+}
+
+body {
+  background-color: #000;
+  color: var(--text-color);
+  font-family: "Ubuntu";
+  font-size: var(--font-size);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  padding: 2rem;
+  width: 100%;
+}
+
+.page-title {
+  font-weight: 300;
+  font-size: var(--page-title-font-size);
+}
+
+.page-title a {
+  color: var(--page-title-color);
+  text-decoration: none;
+}
+
+.page-title a:hover {
+  color: var(--link-hover-color);
+}
+
+.site-header {
+  margin-bottom: 2rem;
+  display: flex;
+  flex-flow: row nowrap;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.site-navigation ul {
+  display: flex;
+  gap: 3rem;
+  list-style: none;
+  font-size: 1.4rem;
+}
+.site-navigation a{
+  text-decoration: none;
+  color: var(--nav-link-color);
+}
+.site-navigation a:hover{
+  text-decoration: none;
+  color: var(--nav-link-color-hover);
+}
+
+.main {
+  width:100%;
+  text-align:center;
+}
+
+.view-cards {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  gap:3rem;
+}
+
+.view-card {
+  background: var(--article-background-color);
+  padding: 3rem; /*replace this with a variable */
+  border-radius: 1rem;
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: 3rem;
+  font-weight: 300;
+  text-align: center;
+  width: 700px;
+}
+
+.view-card:hover {
+  color: var(--link-color-hover);
+  background-color: var(--card-background-hover)
+}
+