diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..9ccb54d Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..49fd077 Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..a4e9bd6 Binary files /dev/null and b/favicon.ico differ diff --git a/img/logo_light.png b/img/logo_light.png new file mode 100644 index 0000000..a5e9ee6 Binary files /dev/null and b/img/logo_light.png differ diff --git a/img/logo_rect.png b/img/logo_rect.png new file mode 100644 index 0000000..12b66b0 Binary files /dev/null and b/img/logo_rect.png differ diff --git a/index.html b/index.html index fc9e547..da2e6b3 100644 --- a/index.html +++ b/index.html @@ -3,104 +3,67 @@ - NCLAZZ - Software + nclazz : : coding - + + + + + + + + + - - - - -
- { - nclazz - } -
- + +
+ nclazz logo +
+ +
+
+

About me

+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+
+

About me

+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+
+ \ No newline at end of file diff --git a/site.webmanifest b/site.webmanifest new file mode 100644 index 0000000..30ca592 --- /dev/null +++ b/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#00000","background_color":"#20242c","display":"standalone"} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..65637ea --- /dev/null +++ b/styles/main.css @@ -0,0 +1,179 @@ +:root { + font-size: 15px; + font-family: 'Poppins', sans-serif; + color: var(--color-fg); +} + +* { + margin: 0; + padding: 0; +} + +html { + height: 100vh; + width: 100vw; + background: rgb(32,36,44); + background: -moz-linear-gradient(0deg, rgba(32,36,44,1) 43%, rgba(0,0,0,1) 100%); + background: -webkit-linear-gradient(0deg, rgba(32,36,44,1) 43%, rgba(0,0,0,1) 100%); + background: linear-gradient(0deg, rgba(32,36,44,1) 43%, rgba(0,0,0,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#20242c",endColorstr="#000000",GradientType=1); + background-repeat: no-repeat; + background-color: var(--color-bg); + +} + + + +body { + flex: 1; + /* background-color: var(--color-bg); */ + + /* padding: 4em 8em; */ + flex-direction: column; + justify-content: stretch; + align-items: stretch; + overflow-x: hidden; +} + +body > * { + padding: 2em 8em; +} + +header { + grid-column-end: span 2; + padding: 4em 8em; +} + +header img { + width: 24em; +} + +nav { + font-family: 'Overpass Mono', monospace; + color: var(--color-nav-fg); + line-height: 1.5em; + cursor: pointer; + font-size: 1em; + padding: 1em 8em; +} + +nav ul { + list-style: none; +} + +nav li { + padding-left: 2em; +} + +nav li a { + color: inherit; + text-decoration: none; +} + +nav li b { + display: none; + color: var(--color-nav-fg-attr); + font-weight: normal; + font-style: normal; +} + +nav li b i { + color: var(--color-nav-fg-value); + font-weight: normal; + font-style: normal; +} + +nav li:hover { + color: var(--color-nav-fg-hover); + font-weight: bold; + font-size: 1.2em; +} + +nav li:hover b { + display: inline; +} + + +nav li.entry::before { + content: '<'; +} + +nav li.entry::after { + content: '/>'; +} + +nav::before { + content: '' +} + +nav::after { + content: '' +} + + +main { + display: flex; + align-content: stretch; + justify-content: stretch; + align-content: stretch; + flex-wrap: wrap; + padding: 1em 8em; +} + +main > * { + flex: 1; + min-width: 40vw; + padding: 2em 2em 0 0; +} + +main h1 { + color: var(--color-primary-2); + padding: 0 0 1em; +} + + +section h1::before { + content: ':: '; + font-family: sans-serif; + font-size: 1.3em; + font-weight: 900; +} + +article { + text-align: justify; + hyphens: auto; +} + +footer { + position: fixed; + left: 0; + bottom: 0; + background-color: var(--color-bg); + padding: 0; + width: 100%; + font-size: 0.8em; +} + +footer ul { + list-style-type: none; + display: flex; + align-items: flex-end; + justify-content: flex-end; + padding: 0.5em 8em; +} + +footer li { + /* flex: 1; */ + padding-left: 8em; + padding-right: 4em; +} + +footer li a { + color: var(--color-nav-fg); + text-decoration: none; + text-align: right; +} + +footer li a:hover { + color: var(--color-nav-fg-hover); +} \ No newline at end of file diff --git a/styles/theme.css b/styles/theme.css new file mode 100644 index 0000000..7fc1ac5 --- /dev/null +++ b/styles/theme.css @@ -0,0 +1,13 @@ +:root { + --color-primary-1: #3EA2EA; + --color-primary-2: #F1C041; + --color-primary-3: #51D998; + + --color-bg: #20242c; + --color-fg: #cdd9e6; + + --color-nav-fg: #526572; + --color-nav-fg-attr: #F1C041; + --color-nav-fg-value: #51D998; + --color-nav-fg-hover: #5E9BE2; +} \ No newline at end of file