added to mainstyle

y-sands · Aug 8, 2024 · 005ee49 · 005ee49
1 parent a6a9a76
commit 005ee49
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -1,7 +1,48 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+    <head>
+        <title>Yeva Sands</title>
+        <link href="/y-sands.github.io/styles/mainstyle.css" rel="stylesheet" type="text/css" media="all">
+
+    </head>
+
 <body>
-<h1>Y Sands</h1>
-<p>...is writing a website. Please visit again soon.</p>
+
+<div class="container">
+<div class="sub-container">
+    <header>
+        <h1>Yeva Sands</h1>
+    </header>
+
+    <nav>
+        <ul>
+            <li><a href="/y-sands.github.io">About</a></li>
+            <li><a href="/y-sands.github.io/gallery/">Gallery</a></li>
+            <li><a href="/y-sands.github.io/academic-work/">Academic work</a></li>
+            <li><a href="/y-sands.github.io/volunteering/">Volunteering</a></li>
+        </ul>
+    </nav>
+
+    <div class="content">
+    <main>
+        <p>...is writing a website. Please visit again soon.</p>
+    </main>
+
+    <aside>
+        <p>Contact me at
+            <div class="email">
+                <a href="mailto:yeva.sands@gmail.com.">yeva.sands@gmail.com.</a>
+            </div>
+        </p>
+    </aside>
+    </div>
+
+    <footer>
+        <div class="long">
+            coded by Y. Sands | updated 26-07-2024
+        </div>
+    </footer>
+</div>
+</div>
 </body>
 </html>
diff --git a/gallery.css → styles/gallery.css b/gallery.css → styles/gallery.css
diff --git a/styles/mainstyle.css b/styles/mainstyle.css
@@ -0,0 +1,196 @@
+/*overall grid styling*/
+
+body {
+    margin: 0;
+}
+
+.container { 
+    width: 100vw;
+    height: 100vh;
+
+    display: grid;
+    justify-content: center;
+
+    grid-template: repeat(5, auto) /repeat(5, auto);
+    grid-template-areas: 
+        ". subcont subcont subcont ."
+        ". subcont subcont subcont ."
+        ". subcont subcont subcont ."
+        ". subcont subcont subcont ."
+        ". subcont subcont subcont .";
+
+    background-color: bisque;
+}
+
+.sub-container {
+    display: grid;
+    max-width: 815px;
+
+    grid-template: 70px 39px 1fr 1fr 40px /repeat(3, auto);
+    grid-template-areas: 
+        "header header header"
+        "nav nav nav"
+        "content content content"
+        "content content content"
+        "footer footer footer"; 
+
+    gap: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: bold;
+    font-size: 15px;
+
+    grid-area: subcont;
+
+}
+header {
+    grid-row: 1 / span 1;
+    grid-column: 2 / span 3;
+
+    background-color: rgb(89, 169, 62);
+
+    grid-area: header;
+}
+
+nav {
+    grid-row: 2 / span 1;
+    grid-column: 2 / span 3;
+
+    background-color: rgb(39, 109, 201);
+
+    grid-area: nav;
+}
+
+.content {
+    grid-row: 3 / span 2;
+    grid-column: 2 / span 3;
+
+    display: grid;
+    grid-template: 1fr / 1fr 1fr 1fr;
+    grid-template-areas: 
+    "main main aside"; 
+
+    gap: 10px;
+    box-sizing: border-box;
+
+    grid-area: content;
+}
+
+main {
+    grid-row: 3 / span 1;
+    grid-column: 2 / span 2; 
+
+    background-color: rgb(228, 255, 178);
+
+    grid-area: main;
+}
+
+aside {
+    grid-row: 3 / span 1;
+    grid-column: 3 / span 1; 
+
+    background-color: rgb(163, 246, 202);
+
+    grid-area: aside; 
+}
+
+footer {
+    grid-row: 5 / span 1;
+    grid-column: 2 / span 3;
+
+    background-color: rgb(113, 192, 53);
+
+    grid-area: footer;
+}
+
+@media only screen and (max-width: 550px) {
+    .container {
+        grid-template-columns: 1fr;
+        grid-template-rows: 70px 39px 1fr 0.5fr 40px;
+        grid-template-areas: 
+        "subcont";
+    }
+
+    .sub-container {
+        grid-template-columns: 1fr;
+        grid-template-rows: 70px 39px 57vh 11vh 40px;
+        grid-template-areas: 
+        "header"
+        "nav"
+        "main"
+        "aside"
+        "footer";
+    }
+
+    .content {
+        display: contents;
+    }
+}
+
+/* smaller-scale styling */
+/*link formatting*/
+a {
+    color:black;
+    text-decoration: none;
+}
+
+a:hover {
+    color: rgb(130, 173, 44)
+}
+
+/*border decoration and padding*/
+header, nav, main, aside, footer{  
+    padding-left:10px;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    outline-color: #dbe24575;
+    outline-style: ridge;
+    outline-width: 4px;
+    outline-offset: 0;
+}
+
+footer{
+    text-align: center;
+    padding-top: 13px;  
+}
+
+/*text alignment and word breaks*/
+h1{
+    text-align: center;
+}
+
+.email{
+    word-break: break-all;
+}
+
+.long{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+/*navbar*/
+nav ul{
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+    overflow: hidden;
+}
+
+nav a{
+    color: rgb(191, 214, 246);
+    padding: 10px;
+    display: block;
+    text-align: center;
+}
+
+nav a:hover{
+    color: rgb(191, 214, 246);
+    background-color:  rgb(19, 55, 101);
+}
+
+nav li{
+    float: left;
+}
diff --git a/bananastyle.css → volunteering/index.html b/bananastyle.css → volunteering/index.html