diff --git a/src/acknowledgements.html b/src/acknowledgements.html index 7a5a1c1..d475fba 100644 --- a/src/acknowledgements.html +++ b/src/acknowledgements.html @@ -1,75 +1,12 @@ + - - Acknowledgements | Cutieguwu - - - - - - - + - +

There are currently no acknowledgements

In terms of security, hopefully that means I'm doing a good-ish job.

@@ -78,10 +15,6 @@ getting the basics handled.

- - + diff --git a/src/includes/meta.html b/src/includes/meta.html new file mode 100644 index 0000000..21ee937 --- /dev/null +++ b/src/includes/meta.html @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/src/includes/nav_logo.html b/src/includes/nav_logo.html new file mode 100644 index 0000000..7a5399b --- /dev/null +++ b/src/includes/nav_logo.html @@ -0,0 +1 @@ + diff --git a/src/includes/nav_menu.html b/src/includes/nav_menu.html new file mode 100644 index 0000000..7a20d66 --- /dev/null +++ b/src/includes/nav_menu.html @@ -0,0 +1,78 @@ + diff --git a/src/includes/nav_quick_links.html b/src/includes/nav_quick_links.html new file mode 100644 index 0000000..389e292 --- /dev/null +++ b/src/includes/nav_quick_links.html @@ -0,0 +1,17 @@ +
+ + + + + + + +
diff --git a/src/includes/scripts.html b/src/includes/scripts.html new file mode 100644 index 0000000..6de12c5 --- /dev/null +++ b/src/includes/scripts.html @@ -0,0 +1,2 @@ + + diff --git a/src/index.html b/src/index.html index d623e3a..facb504 100644 --- a/src/index.html +++ b/src/index.html @@ -1,26 +1,28 @@ + - Home | Cutieguwu - - - - - + - -
-

lorem ipsum etc idk what else there is in this latin phrase

+ +
+

Home

+

lorem ipsum idk what else there is in this latin phrase

- - +
+

#AD

+

#AD

+
+ diff --git a/src/nav.html b/src/nav.html deleted file mode 100644 index b9557cd..0000000 --- a/src/nav.html +++ /dev/null @@ -1,63 +0,0 @@ - diff --git a/src/partials/_nav_location.scss b/src/partials/_nav_location.scss new file mode 100644 index 0000000..f3ad433 --- /dev/null +++ b/src/partials/_nav_location.scss @@ -0,0 +1,18 @@ +.location { + margin: 0; + padding: var(--spacing-horizontal); + background-color: var(--background-2); + border-radius: var(--border-radius-small) + var(--border-radius-large); + text-align: center; + + .location_header { + font-weight: bold; + margin: 0 0 0.5rem; + } + + .location_page { + margin: 0; + padding: 0; + } +} diff --git a/src/partials/_nav_logo.scss b/src/partials/_nav_logo.scss new file mode 100644 index 0000000..bc180e2 --- /dev/null +++ b/src/partials/_nav_logo.scss @@ -0,0 +1,5 @@ +.nav_logo { + font-family: var(--font-family-generic); + text-align: center; + margin: 0; +} diff --git a/src/partials/_nav_menu.scss b/src/partials/_nav_menu.scss new file mode 100644 index 0000000..28c3a43 --- /dev/null +++ b/src/partials/_nav_menu.scss @@ -0,0 +1,99 @@ +.nav_menu { + /* + Remove default padding and style applied to ul for bullets. + */ + padding: 0; + list-style: none; + + display: grid; + grid-auto-flow: row; + gap: var(--spacing-menu-gap); + align-self: center; + margin: 0; + + hr { + border-color: var(--accent-pink); + margin: 0 var(--spacing-horizontal); + } + + .nav_body { + background-color: var(--background-2); + border-radius: var(--border-radius-small); + transition: var(--transition-fade); + } + + .dropdown:hover .nav_body, + .dropdown .nav_body:hover, + .nav_body:hover { + transform: var(--transform-scale-x); + transition: var(--transition-cut); + + .nav_title, + ion-icon { + color: var(--highlight-hover); + transition: var(--transition-cut); + } + } + + .dropdown { + .dropdown_header { + display: grid; + grid-template-columns: 1fr min-content; + align-items: center; + + ion-icon { + /* + This one aligns visually odd if trying to use the same margins as it's neighbouring nav_title class. + */ + margin-right: 0.5rem; + + align-self: center; + transition-duration: 0.25s; + } + } + + .dropdown_body { + display: none; + border-bottom-left-radius: var(--border-radius-small); + border-bottom-right-radius: var(--border-radius-small); + background-color: var(--background-1); + } + } + + .dropdown:hover { + .dropdown_header { + transform: var(--transform-scale-x); + + ion-icon { + rotate: 90deg; + transition-duration: 0.25s; + } + } + + .dropdown_body { + display: grid; + } + } + + .nav_body, + .dropdown .nav_body, + .dropdown .dropdown_body { + .nav_title { + /* Need to force inheritence, otherwise would require overrides for all color states from base styling for element. */ + color: inherit; + + text-decoration: none; + font-family: var(--font-family-generic); + font-weight: bold; + white-space: nowrap; + margin: 0 var(--spacing-horizontal); + transition: var(--transition-fade); + text-transform: uppercase; + } + + .nav_title:hover { + color: var(--highlight-hover); + transition: var(--transition-cut); + } + } +} diff --git a/src/partials/_nav_quick_links.scss b/src/partials/_nav_quick_links.scss new file mode 100644 index 0000000..afeb0ae --- /dev/null +++ b/src/partials/_nav_quick_links.scss @@ -0,0 +1,54 @@ +.nav_quick_links { + --cols: 5; + --item-padding: 0.35rem; + --item-edge-length: 1.25rem; + --item-size: calc( + var(--item-edge-length) + calc(var(--item-padding) * 2) + ); + + /* + display: flex; + flex-flow: row wrap; + align-items: center; + margin-right: auto; + */ + + display: grid; + grid-template-columns: + var(--item-size) var(--item-size) var(--item-size) + var(--item-size) var(--item-size); + align-items: center; + + gap: var(--spacing-menu-gap) + calc( + calc(100% - calc(var(--item-size) * var(--cols))) / + calc(var(--cols) - 1) + ); + + a { + width: var(--item-size); + height: var(--item-size); + + * { + width: var(--item-edge-length); + height: var(--item-edge-length); + padding: var(--item-padding); + + background-color: var(--background-2); + border-radius: var(--border-radius-small) + var(--border-radius-large); + } + + .icon_gitea { + color: var(--accent-green); + } + + .icon_github { + color: var(--accent-blue); + } + + .icon_license { + color: var(--accent-purple); + } + } +} diff --git a/src/partials/_pane_error.scss b/src/partials/_pane_error.scss new file mode 100644 index 0000000..849924c --- /dev/null +++ b/src/partials/_pane_error.scss @@ -0,0 +1,6 @@ +.pane_error { + width: max-content; + margin: auto; /* center object */ + text-align: center; + background-color: var(--background-2); +} diff --git a/src/partials/_pane_main.scss b/src/partials/_pane_main.scss new file mode 100644 index 0000000..5e8090e --- /dev/null +++ b/src/partials/_pane_main.scss @@ -0,0 +1,10 @@ +.pane_main { + flex: 1; + text-align: center; + background-color: var(--background-2); + margin: var(--margin-pane); + padding: 0; + + border-radius: var(--border-radius-small) + var(--border-radius-large); +} diff --git a/src/partials/_pane_nav.scss b/src/partials/_pane_nav.scss new file mode 100644 index 0000000..78f19a2 --- /dev/null +++ b/src/partials/_pane_nav.scss @@ -0,0 +1,17 @@ +@use "nav_logo"; +@use "nav_menu"; +@use "nav_location"; +@use "nav_quick_links"; + +.pane_nav { + --spacing-horizontal: 0.75rem; + --transform-scale-x: scaleX(1.15); + + margin: var(--margin-pane); + padding: 0; + gap: var(--spacing-menu-gap); + width: min-content; + align-content: start; + display: grid; + color: var(--accent-pink); +} diff --git a/src/partials/_pane_spacer.scss b/src/partials/_pane_spacer.scss new file mode 100644 index 0000000..cbdcd82 --- /dev/null +++ b/src/partials/_pane_spacer.scss @@ -0,0 +1,31 @@ +.pane_spacer { + margin: var(--margin-pane); + padding: 0; + width: 10vw; + display: grid; + grid-auto-flow: row; + gap: var(--spacing-menu-gap); + + .spacer_container { + margin: 0; + background-color: var(--background-2); + height: calc( + 50vh - var(--margin-pane) - calc( + var(--spacing-menu-gap) / 2 + ) + ); + flex: 1; + border-radius: var(--border-radius-small) + var(--border-radius-large); + + /* Vertical Text Align */ + display: flex; + align-items: center; + justify-content: center; + + p { + margin: 0; + text-align: center; + } + } +} diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 0000000..c243a72 --- /dev/null +++ b/src/style.scss @@ -0,0 +1,83 @@ +@use "partials/pane_main"; +@use "partials/pane_nav"; +@use "partials/pane_spacer"; + +@use "partials/pane_error"; + +:root { + /* + 0: Base of an element. Example: the viewport class. + + The higher the integer, the lighter the colour, the higher it should be visually, meaning more nested in the cascade. + + Odd numbers should be used as intermediate colours between the fore and back elements. Excepting white--white's special. + Eg. Current dropdown menu. + + */ + font-size: var(--font-size-generic); + + --accent-green: #cfeb9eff; + --accent-pink: #ff9f9fff; + --accent-blue: #868ab7ff; + --accent-purple: #aa7ab7ff; + + --background-0: #130b21ff; + --background-1: #170d28ff; + --background-2: #231833ff; + --background-3: #211635ff; + --background-4: #2a223eff; + + --block-0: #0d0d0dff; + --block-1: #1a1a1aff; + --block-2: #272727ff; + + --highlight-hover: #944db6ff; + + --white-0: #bfbfbfff; + --white-1: #d9d9d9ff; + --white-2: #e5e5e5ff; + --white-3: #f5f5f5ff; + + --font-size-generic: 1.65vh; + --font-family-generic: Arial, Sans-Serif, Helvetica; + + --transition-fade: 0.4s ease-out; + --transition-cut: none; + + --border-radius-large: 1rem; + --border-radius-small: calc(var(--border-radius-large) / 2); + + --margin-pane: 1.5rem; + + --spacing-menu-gap: 1rem; +} + +/* +* { + outline: 1px solid red; +} +*/ + +h1 { + font-size: 3.3vh; +} + +h2 { + font-size: 2.5vh; +} + +ion-icon { + width: 1rem; + height: 1rem; +} + +.viewport { + /* Adds a margin otherwise for some reason. */ + margin: 0; + + background-color: var(--background-0); + color: var(--white-3); + display: flex; + flex-flow: row wrap; + align-items: flex-start; +}