diff --git a/docs/design.jpg b/_docs/design.jpg similarity index 100% rename from docs/design.jpg rename to _docs/design.jpg diff --git a/docs/palette.jpg b/_docs/palette.jpg similarity index 100% rename from docs/palette.jpg rename to _docs/palette.jpg diff --git a/appunti/index.html b/appunti/index.html new file mode 100644 index 0000000..bb225c6 --- /dev/null +++ b/appunti/index.html @@ -0,0 +1,59 @@ + + + + + + + + Sito Susanna + + + + + + wallpaper +
+ +

Appunti di Susanna Terron

+
+
+

Appunti

+

Materia 1

+

Materia 2

+

Uao che bella questa materia

+ +

Materia 3

+

Materia 4

+
+ + + + \ No newline at end of file diff --git a/cv/index.html b/cv/index.html new file mode 100644 index 0000000..c57599e --- /dev/null +++ b/cv/index.html @@ -0,0 +1,49 @@ + + + + + + + + Sito Susanna + + + + + + wallpaper +
+ +

C.V. di Susanna Terron

+
+
+

Curriculum Vitae

+
+ + + + \ No newline at end of file diff --git a/galleria/index.html b/galleria/index.html new file mode 100644 index 0000000..6a7e42d --- /dev/null +++ b/galleria/index.html @@ -0,0 +1,49 @@ + + + + + + + + Sito Susanna + + + + + + wallpaper +
+ +

Galleria di Susanna Terron

+
+
+

Galleria

+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index ab04367..856982c 100644 --- a/index.html +++ b/index.html @@ -14,16 +14,44 @@ wallpaper
-

Homepage di Susanna

-
+

Homepage di Susanna Terron

+
+

Notizie

+ +

Titolo di esempio

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat magnam qui beatae reiciendis dicta? Reiciendis at quaerat voluptate cum nulla excepturi dicta ipsum repudiandae quia tempora pariatur nihil @@ -102,7 +130,8 @@

diff --git a/spasticate/index.html b/spasticate/index.html new file mode 100644 index 0000000..fc99c7b --- /dev/null +++ b/spasticate/index.html @@ -0,0 +1,49 @@ + + + + + + + + Sito Susanna + + + + + + wallpaper +
+ +

Spasticate di Susanna & Co.

+
+
+

Spasticate

+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css index 4b59bc8..b5b7003 100644 --- a/style.css +++ b/style.css @@ -10,6 +10,8 @@ --color-4: #c10001; --color-5: #710002; + + --fg-light: #f7d9da; } * { @@ -18,20 +20,24 @@ html, body { margin: 0; - /* height: 100%; */ + height: 100%; } body { - position: relative; - background: var(--color-2-1); - + color: var(--color-1); + display: flex; flex-direction: column; + + position: relative; + + overflow-y: scroll; } main { - max-width: calc(80ch + 4rem); + max-width: 100%; + width: calc(80ch + 4rem); margin: 0 auto; padding: 2rem; @@ -39,18 +45,23 @@ main { background: var(--color-3); - /* flex-grow: 1; */ + /* height: 100%; */ + + flex-grow: 1; + flex-basis: 100%; } #wallpaper { z-index: -1; - position: absolute; + position: fixed; top: 0; left: 0; width: 100%; + height: auto; } header { + max-width: 100%; width: calc(80ch + 4rem); margin: 0 auto; @@ -61,7 +72,7 @@ header { height: 15rem; - padding: 0 2rem; + padding: 0 1rem 0 2rem; justify-content: space-between; @@ -72,6 +83,8 @@ header h1 { color: var(--color-1); font-size: 2.5rem; font-weight: 600; + + padding-bottom: 1rem; } nav { @@ -79,9 +92,60 @@ nav { display: flex; flex-direction: row; + align-items: start; justify-content: flex-end; } +nav .nav-item { + border-bottom-left-radius: 12px; + border-bottom-right-radius: 12px; + padding: 1rem; + + display: flex; + align-items: start; + justify-content: center; + + /* background: linear-gradient(to right, var(--color-4), var(--color-5)); */ + background: var(--color-4); + color: var(--fg-light); + + box-sizing: content-box; + + transition: padding-bottom 150ms ease-in-out; +} + +nav .nav-item:not(:first-child) { + border-left: 1px solid var(--color-5); +} + +nav .nav-item.current { + padding-bottom: 2rem; +} + +nav .nav-item a, nav .nav-item a:visited { + color: var(--fg-light); + text-decoration: none; +} + +nav .nav-item:hover { + padding-bottom: 2rem; +} + +.news { + float: right; + max-width: 30ch; + padding: 0 1rem; + margin: 0 1rem 1rem; + + /* border-left: 2px solid var(--color-5); + border-bottom: 2px solid var(--color-5); */ + + background: #ffd772; + border-radius: 3px; + box-shadow: 0 0 8px #00000066; + transform: rotate(3deg); +} + footer { height: 5rem; width: 100%; @@ -89,9 +153,24 @@ footer { background: var(--color-2); color: var(--color-1); + padding: 0 1rem; + display: flex; align-items: center; justify-content: center; + + flex-shrink: 0; +} + +/* Block Elements */ + +a, a:visited { + color: var(--color-5); + text-decoration: none; +} + +a:hover, a:focus { + text-decoration: underline; } /* Typography */ @@ -108,11 +187,40 @@ b, strong { p { margin: 1rem 0 0; - - color: var(--color-1); } h1, h2, h3, h4 { color: var(--color-5); font-weight: 400; +} + +/* Mobile */ + +@media screen and (max-width: 512px) { + header { + padding: 0; + height: unset; + } + + nav { + display: flex; + flex-direction: column; + + position: absolute; + top: 0; + + z-index: 1; + } + + nav .nav-item, nav .nav-item.current { + padding: 1rem !important; + border-radius: 0; + width: 100%; + + box-sizing: border-box; + } + + #mobile-nav-menu { + display: flex; + } } \ No newline at end of file