From aca7ddec4ceb01ee8ce1445625bffec07d28cf97 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Sat, 24 Jul 2021 00:54:54 +0200 Subject: [PATCH] Seconda sessione sito con Susanna e Baldo --- {docs => _docs}/design.jpg | Bin {docs => _docs}/palette.jpg | Bin appunti/index.html | 59 +++++++++++++++++ cv/index.html | 49 ++++++++++++++ galleria/index.html | 49 ++++++++++++++ index.html | 45 ++++++++++--- spasticate/index.html | 49 ++++++++++++++ style.css | 128 +++++++++++++++++++++++++++++++++--- 8 files changed, 361 insertions(+), 18 deletions(-) rename {docs => _docs}/design.jpg (100%) rename {docs => _docs}/palette.jpg (100%) create mode 100644 appunti/index.html create mode 100644 cv/index.html create mode 100644 galleria/index.html create mode 100644 spasticate/index.html 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

+
    +
  • Notizia 1
    • +
  • Notizia 2
    • +
  • Notizia 3
    • +
  • Notizia 4
    • +
  • Notizia 5
    • +
  • Notizia 6
    • +
  • Notizia 7
    • +
  • Notizia 8
    • +
  • Notizia 9
    • +
  • Notizia 10
    • +
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, omnis.
    • +
+

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