-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
about edited
- Loading branch information
Showing
5 changed files
with
230 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| To do: | ||
| > Make the footer text a js object so the update date can synchronise between pages. | ||
| > have got rid of "gallery" link for now as i'm unsure what I'll put in it and I want to | ||
| focus on making the website functional first. | ||
|
|
||
| Volunteering | ||
| > logos of orgs I've volunteered for | ||
| > description of diff volunteering things ive done | ||
| > piccies of volunteering things | ||
|
|
||
| About Me | ||
| > have linkedin link and other contact deets etc. | ||
| > describe what im interested in and what work experience, acaedmic history and interests | ||
| I have | ||
| > have a nice selfie | ||
|
|
||
| Academic work | ||
| > dissertation description and then either a link to it or say "email me if u want a full copy" | ||
|
|
||
| Blog ideas | ||
| > coppicing! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,197 @@ | ||
| /*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; | ||
| background-size: 100%; | ||
| } | ||
|
|
||
| .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-left main-left aside"; | ||
|
|
||
| gap: 10px; | ||
| box-sizing: border-box; | ||
|
|
||
| grid-area: content; | ||
| } | ||
|
|
||
| main-left { | ||
| grid-row: 3 / span 1; | ||
| grid-column: 2 / span 2; | ||
|
|
||
| background-color: rgb(228, 255, 178); | ||
|
|
||
| grid-area: main-left; | ||
| } | ||
|
|
||
| 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 all and (max-width: 550px) { | ||
| .container { | ||
| width: 100vw; | ||
| grid-template-areas: | ||
| "subcont"; | ||
| } | ||
|
|
||
| .sub-container { | ||
| width: 100vw; | ||
| grid-template-columns: 1fr; | ||
| grid-template-rows: 70px 39px 58vh 11vh 40px; | ||
| grid-template-areas: | ||
| "header" | ||
| "nav" | ||
| "main-left" | ||
| "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-left, 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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters