diff --git a/about.html b/about.html index d65c494a..7253a827 100644 --- a/about.html +++ b/about.html @@ -25,16 +25,18 @@
-

About Solid

+
+

About Solid

-

Solid is an open standard for structuring data, digital identities, and applications on the Web.

-

Solid aims to support the creation of the Web as Sir Tim Berners-Lee originally envisioned it when he +

Solid is an open standard for structuring data, digital identities, and applications on the Web.

+

Solid aims to support the creation of the Web as Sir Tim Berners-Lee originally envisioned it when he invented the Web at CERN in 1989. Tim sometimes refers to Solid as “the web - take 3" — or Web3.0 — because Solid integrates a new layer of standards into the Web we already have. The goal of Solid is for people to have more agency over their data.

+
-
+

Solid

@@ -105,17 +107,17 @@

Features

Organizations Deploying Solid

See organizations working to support the deployment of Solid technology across a range of sectors.

- See organizations + See organizations

  • Develop a Solid application

    Find tutorials, repositories, libraries, and vocabularies.

    - Develop an application + Develop an application

  • Example applications

    Find examples of applications built with Solid.

    - See example applications + See example applications
    • @@ -131,7 +133,7 @@

    Features

  • For Developers
  • For Organizations
  • Community
    • -
  • License
    • +
  • License
  • Code of Conduct
    • diff --git a/community.html b/community.html index c6fd7cd0..392df17e 100644 --- a/community.html +++ b/community.html @@ -25,9 +25,11 @@
    -

    Community

    +
    +

    Community

    -

    Discover ways to join and contribute to the Solid community.

    +

    Discover ways to join and contribute to the Solid community.

    +
    @@ -37,86 +39,89 @@

    Where to collaborate

  • Solid Project Forum

    Create and respond to comments, questions, and discussions happening in the community.

    - Go to Solid Forum + Go to Solid Forum

  • Solid Matrix Chat

    The Solid Matrix Chat is a live chat where community members can connect.

    - Go to Matrix + Go to Matrix

  • Solid Community Group

    Learn and work on Solid specifications.

    - Go to Community Group + Go to Community Group
    • -

    Events

    -

    Discover Solid events taking place virtually and/or in person around the world.

    +
    +

    Events

    +

    Discover Solid events taking place virtually and/or in person around the world.

    +
    +
    +
      +
    • +
      + 2023 Events +
        +
      • +
        +
        Title
        +
        MyData 2023 Conference
        +
        Organization
        +
        MyData
        +
        Date
        +
        –
        +
        Location
        +
        Helsinki
        +
        Description
        +
        There will be a dedicated workshop/panel session about the Solid project at this conference, alongside interesting people and presentations from many like-minded projects.
        +
        +
        • +
      • +
        +
        Title
        +
        Event Title
        +
        Organization
        +
        Organization Name
        +
        Date
        +
        –
        +
        Location
        +
        Location
        +
        Description
        +
        Description
        +
        +
        • +
      +
      +
      • -
        -
      • -
        - 2023 Events -
          -
        • -
          -
          Title
          -
          MyData 2023 Conference
          -
          Organization
          -
          MyData
          -
          Date
          -
          –
          -
          Location
          -
          Helsinki
          -
          Description
          -
          There will be a dedicated workshop/panel session about the Solid project at this conference, alongside interesting people and presentations from many like-minded projects.
          -
          -
          • -
        • -
          -
          Title
          -
          Event Title
          -
          Organization
          -
          Organization Name
          -
          Date
          -
          –
          -
          Location
          -
          Location
          -
          Description
          -
          Description
          -
          -
          • -
        -
        -
        • - -
      • -
        - 2022 Events - -
        -
        • -
      +
    • +
      + 2022 Events + +
      +
      • +
    +
    @@ -130,8 +135,8 @@

    Events

  • For Developers
  • For Organizations
  • Community
    • -
  • License
    • -
  • Code of Conduct
    • +
  • License
    • +
  • Code of Conduct
    • diff --git a/for-developers.html b/for-developers.html index 7310c42b..94752459 100644 --- a/for-developers.html +++ b/for-developers.html @@ -25,7 +25,9 @@
    -

    For Developers

    +
    +

    For Developers

    +
    @@ -215,8 +217,8 @@

    Available Solid Server implementations

  • For Developers
  • For Organizations
  • Community
    • -
  • License
    • -
  • Code of Conduct
    • +
  • License
    • +
  • Code of Conduct
    • diff --git a/for-organizations.html b/for-organizations.html index 27cfe763..10017b1c 100644 --- a/for-organizations.html +++ b/for-organizations.html @@ -25,10 +25,12 @@
    -

    Organizations using Solid

    +
    +

    Organizations using Solid

    -

    These organizations work in a range of capacities to support the deployment and research - of Solid technology.

    +

    These organizations work in a range of capacities to support the deployment and research + of Solid technology.

    +
    @@ -113,8 +115,8 @@

    Solutions using Solid technology

  • For Developers
  • For Organizations
  • Community
    • -
  • License
    • -
  • Code of Conduct
    • +
  • License
    • +
  • Code of Conduct
    • diff --git a/index.html b/index.html index d0961796..212f01bc 100644 --- a/index.html +++ b/index.html @@ -25,11 +25,13 @@
    - Solid Project logo +
    + Solid Project logo -

    Solid: Your data, your choice.

    +

    Solid: Your data, your choice.

    -

    Advancing the Web to empower people and communities.

    +

    Advancing the Web to empower people and communities.

    +
    @@ -42,7 +44,7 @@

    Read about Solid

    Solid is an evolution of the web by its creator Sir Tim Berners-Lee. Solid realizes Tim's original vision for the Web as a medium for the secure, decentralized exchange of public and private data.

    - About Solid + About Solid
  • @@ -50,7 +52,7 @@

    Read about Solid

    Develop an app with Solid

    Interested in developing an app with Solid? Find technical documents, resources, and repositories.

    - For Developers + For Developers
  • @@ -58,7 +60,7 @@

    Develop an app with Solid

    Learn about organizations working with Solid

    Several organizations work in a range of capacities to support the deployment and research of Solid technology.

    - See Organizations + See Organizations
  • @@ -81,8 +83,8 @@

    Explore the community

  • For Developers
  • For Organizations
  • Community
    • -
  • License
    • -
  • Code of Conduct
    • +
  • License
    • +
  • Code of Conduct
    • diff --git a/style/base.css b/style/base.css index 1e0d845c..a10a7a3c 100644 --- a/style/base.css +++ b/style/base.css @@ -1,8 +1,11 @@ :root { + --black: #000; --dark: #202542; + --grey: #979797; + --light-grey: #FEFEFE; --purple: #7B4DFF; --white: #FFF; - } +} @font-face { font-family: 'Lato Regular'; @@ -15,97 +18,338 @@ body { background-color: var(--dark); font-family: 'Lato Regular', sans-serif; margin: 0; - line-height: 32px; + line-height: 2rem; } -header a, -footer a { +body > header a, +body > footer a { color: var(--white); text-decoration: none; } -header { +body > footer { + margin-top: 2rem; +} + +body > header { display: flex; flex-direction: column; justify-content: space-between; padding: 2rem 4rem; } -header>address>a { +body > header > address > a { display: flex; align-items: center; font-size: 2rem; font-style: normal; } -header>address>a>img { +body > header > address > a > img { width: 35px; margin-right: 1rem; } +dl, +dd, +dt { + margin: 0; + padding: 0; +} + +figure { + margin: 0; +} -nav ul { - list-style: none; - margin-block-start: 0; - padding-inline-start: 0; +main img, +main video { + max-width: 100%; } -nav ul li { +nav ul { + list-style: none; + margin: 0; + margin-inline-start: 2rem; margin-left: 2rem; + padding: 0; + padding-inline-start: 0; } nav a { font-size: 1.25rem; - margin-left: 2rem; } -#homepage main>article { +/** + * "container" used to make sure that content is "contained" with a standardized margin and padding + */ +#about main header, +#about #features, +#community main header, +#events header, +#for-developers main header, +#for-organizations main header, +#homepage main header, +#solutions-using-solid-technology { + margin: 0 2rem; +} + +@media (min-width: 767px) { + #about main header, + #about #features, + #community main header, + #events header, + #for-developers main header, + #for-organizations main header, + #homepage main header, + #solutions-using-solid-technology { + margin: 2rem 6rem; + } +} + +/** + * "container--full" used to make sure that content is "contained", but background stretches to both ends + */ +#homepage #features, +#hosted-pod-services, +#solid-description, +#solid-and-servers-pods, +#solid-organizations, +#solid-server-implementations { + background-color: var(--white); + color: var(--black); + margin: 0; + padding: 2rem; +} + +@media (min-width: 767px) { + #homepage #features, + #hosted-pod-services, + #solid-description, + #solid-and-servers-pods, + #solid-organizations, + #solid-server-implementations { + padding: 2rem 6rem; + } +} + +/** + * "container--open-end" used to make sure that content is "contained", but background that stretches to one end + */ +#developer-tutorials, +#events article, +#where-to-collaborate { + background-color: var(--white); + color: var(--black); + margin: 0 0 0 0.5rem; + padding: 2rem 2rem 2rem 1.5rem; + border-radius: 30px 0 0 30px; +} + +@media (min-width: 767px) { + #developer-tutorials, + #events article, + #where-to-collaborate { + margin: 2rem 0 2rem 4rem; + padding-right: 6rem; + padding-inline-end: 6rem; + } +} + +/** + * Use "tiles" to make elements and their children be presented in a standardized grid + * + * There are a couple of variations, "tiles--distinct" and "tiles--very-distinct" that makes the children stand out + * a bit more. + */ +#about #features ul, +#events-list ul, +#hosted-pod-services ul, +#solid-organizations ul, +#solutions-using-solid-technology ul, +#where-to-collaborate ul { + display: grid; + font-size: 1rem; + gap: 1rem; + line-height: 1.5rem; + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; + word-break: break-word +} + +#about #features ul > *, +#events-list ul > *, +#hosted-pod-services ul > *, +#solid-organizations ul > *, +#solutions-using-solid-technology ul > *, +#where-to-collaborate ul > * { + color: var(--dark); +} + +#about #features ul > * > *:first-child, +#events-list ul > * > *:first-child, +#hosted-pod-services ul > * > *:first-child, +#solid-organizations ul > * > *:first-child, +#solutions-using-solid-technology ul > * > *:first-child, +#where-to-collaborate ul > * > *:first-child { + margin-top: 0; +} + +@media (min-width: 767px) { + #about #features ul, + #events-list ul, + #hosted-pod-services ul, + #solid-organizations ul, + #solutions-using-solid-technology ul, + #where-to-collaborate ul { + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + margin: 0; + padding: 0; + } +} + +@media (min-width: 1100px) { + #about #features ul, + #events-list ul, + #hosted-pod-services ul, + #solid-organizations ul, + #solutions-using-solid-technology ul, + #where-to-collaborate ul { + grid-template-columns: repeat(3, 1fr); + } +} + + +/* This part is used for distinct tiles */ +#events-list ul > * { + background-color: var(--white); + border: 1px solid var(--grey); + border-radius: 0.5rem; + padding: 1rem; +} + +/* This part is used for very distinct tiles */ +#hosted-pod-services ul > *, +#solid-organizations ul > * { + background-color: var(--white); + border: 1px solid var(--grey); + border-radius: 0.5rem; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); + padding: 2rem; +} + +/* + * This class are applied to description lists that describe legends + */ +.legend { + display: flex; + align-items: center; + line-height: 1.5rem; + margin: 1rem 0; + gap: 0.5rem; +} + +.legend dt, +.legend dd { + margin: 0; +} + +.legend dd { + margin-right: 2rem; +} + +.legend img { + display: block; +} + +/* + * "button" applied to elements that looks like buttons. + */ +#features a, +#where-to-collaborate a { + background-color: var(--purple); + padding: 0.75rem 1.5rem; + color: var(--white); + display: inline-block; + line-height: 1.25rem; + text-decoration: none; + border-radius: 0.5rem; + width: max-content; + height: max-content; +} + +#homepage main > article { align-items: center; } -main>article>h1, -main>article>p { +main > article { + display: flex; + flex-direction: column; +} + +main > article > h1, +main > article > p { color: var(--white); font-weight: 400; padding: 0 2rem; } -footer>div { +body > footer > div { display: flex; padding: 2rem 4rem; align-items: center; } -footer dl { +body > footer dl { margin-block-start: 0; margin-block-end: 0; } -footer dd { +body > footer dd { margin-inline-start: 0; } -footer>div>img { +body > footer > div > img { height: 40px; width: 40px; } -footer>div>dl>dd>ul { +body > footer > div > dl > dd > ul { + align-items: center; display: flex; color: var(--white); width: min-content; list-style: none; margin-block-start: 0; margin-block-end: 0; + margin-left: 1rem; + margin-inline-start: 1rem; padding-inline-start: 0; + gap: 1rem; } -footer>div>dl>dd>ul li { - margin-left: 1rem; +body > footer > div > dl > dd > ul li img { + display: block; + filter: invert(100%) hue-rotate(180deg); } -footer>div>dl>dd>ul li img { - filter: invert(100%) hue-rotate(180deg); +h1 { + font-size: 3rem; + line-height: 1.25em; +} + +#homepage h1 { + font-size: 2.5rem; + font-weight: 400; + line-height: 2rem; +} + +#homepage h3 { + font-size: 1.5rem; + line-height: 2rem; + font-weight: 700; } h1 { @@ -126,17 +370,20 @@ h1 { font-size: 1.5rem; line-height: 2.5rem; } + #for-developers h2 { font-size: 2rem; font-weight: 700; line-height: 3rem; } + #homepage h1 + p { font-size: 1.5rem; font-weight: 400; text-align: center; line-height: 2rem; } + #features li a:last-child { background-color: var(--purple); padding: 12px 24px; @@ -147,31 +394,45 @@ h1 { width: max-content; height: max-content; } + h2 + div > p:first-child { font-size: 1.25rem; line-height: 2rem; } -#about main>article>h1 ~ p:not(div ~ p):last-of-type { - margin-block-start:0; + +#about main > article > h1 ~ p:not(div ~ p):last-of-type { + margin-block-start: 0; } -main>article>h1 ~ p:not(div ~ p) { + +main header { + color: var(--white); font-size: 1.5rem; - line-height: 2.5rem; - font-weight: 400; } + #developer-tutorials li { list-style: none; } + #developer-tutorials li a { color: var(--dark); } -#solid-server-implementations li a{ + +#solid-server-implementations li a { color: var(--purple); font-size: 1.25rem; line-height: 2.5rem; } -#features>h2, +#about #features { + margin-top: 2rem; +} + +#features ul { + margin: 0; + padding: 0; +} + +#features > h2, #accounts dt, #hosted-pod-services dt { display: none; @@ -182,45 +443,53 @@ main>article>h1 ~ p:not(div ~ p) { font-weight: 700; } -#homepage main>article>div>section img { +#homepage main > article > div > section img { width: 63px; height: 63px; padding-right: 2rem; } -#homepage main>article>div>section>div>ul, +#homepage main header { + text-align: center; +} + #developer-tutorials { - padding: 4rem; - background-color: #fff; - color: #202542; + margin-bottom: 2rem; + margin-block-end: 2rem; } -#about main>article>h1, -#about main>article>div>p, -#for-organizations main>article>h1, -#for-organizations main>article>p, -#events>h2, -#events>div>p { +#homepage main > article > div > section > div > ul, +#developer-tutorials { + background-color: var(--white); + color: var(--dark); +} + +#about main > article > h1, +#about main > article > div > p, +#for-organizations main > article > h1, +#for-organizations main > article > p, +#events > h2, +#events > div > p { padding: 0 2rem; } -#homepage main>article>div>section>div>ul { +#homepage main > article > div > section > div > ul { list-style: none; + display: grid; + grid-template-columns: 1fr; + gap: 4rem; } -#about main>article, -#for-organizations main>article, +#for-organizations main > article, #community { - color: #fff; + color: var(--white); } -#about main>article>div>section, #hosted-pod-services, #solid-organizations, #solid-server-implementations { - color: #000; - background-color: #fff; - padding: 2rem; + color: var(--black); + background-color: var(--white); } #events ul, @@ -228,31 +497,35 @@ main>article>h1 ~ p:not(div ~ p) { list-style: none; } -#solid-organizations>div>dl.legend { - display: flex; +#solid-description, +#solid-and-servers-pods { + font-size: 1.25rem; } -#solutions-using-solid-technology h2 { - padding: 0 2rem; +#solid-description section, +#solid-and-servers-pods section { + clear: both; } -#solid-organizations>div>ul { +#events ul, +#solutions-using-solid-technology ul { list-style: none; } #about section#features ul li, -#hosted-pod-services>div>ul li, -#solid-organizations>div>ul li, -#where-to-collaborate, -#events>div>ul { - background-color: #fff; +#events > div > ul { + background-color: var(--white); border-radius: 0.5rem; padding: 2rem; - color: #000; + color: var(--black); } -#events li { - margin: 3rem 0; +#events-list { + display: flex; + flex-direction: column; + gap: 3rem; + margin: 0; + padding: 0; } #events details summary { @@ -280,17 +553,7 @@ main>article>h1 ~ p:not(div ~ p) { transform: translateY(calc(-50% + 0.5rem)) rotate(0deg); } -#where-to-collaborate>div>ul, -#events>div>ul>li>details>ul { - list-style: none; -} - -#events>div>ul>li>details>ul li { - border: 1px solid #979797; - border-radius: 0.5rem; -} - -#events>div>ul>li>details>ul li dt { +#events > div > ul > li > details > ul li dt { display: none; } @@ -308,67 +571,44 @@ main>article>h1 ~ p:not(div ~ p) { margin: 0 } -#events details li { - margin-top: 0; -} - -#solutions-using-solid-technology>div>ul, -#hosted-pod-services>div>ul, -#solid-organizations>div>ul, +#solutions-using-solid-technology > div > ul, +#hosted-pod-services > div > ul, #features ul { list-style: none; } -#hosted-pod-services>div>ul li, -#solid-organizations>div>ul li { - background-color: #FEFEFE; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); - margin-bottom: 2rem; -} - -#about section#features ul li a, -#where-to-collaborate ul li a { - background-color: #7B4DFF; - padding: 0.8rem 1.5rem; - color: #fff; - text-decoration: none; - text-wrap: nowrap; -} - -#developer-tutorials { - margin: 0; -} - - /* Desktop styles */ @media (min-width: 767px) { - header { + body > header { flex-direction: row; align-items: center; } - header a, - footer a { + body > header a, + body > footer a { text-wrap: nowrap; } + h1 { + font-size: 4rem; + } + nav ul { + align-items: center; display: flex; align-self: flex-end; + gap: 2rem; + text-align: center; } - main { - padding: 104px 128px; - } - - main>article { + main > article { display: flex; flex-direction: column; } - main>article>h1, - main>article>p { - color: #fff; + main > article > h1, + main > article > p { + color: var(--white); font-weight: 700; padding: 0 6rem; } @@ -424,132 +664,129 @@ main>article>h1 ~ p:not(div ~ p) { #homepage main>article>div>section>div>ul li :nth-child(4) { grid-area: 3 / 2 / 4 / 3; } - + #about main, #for-developers main, #for-organizations main { padding: 0; } - #about main>article>h1, - #about main>article>div>p, - #for-organizations main>article>h1, - #for-organizations main>article>p { + #about main > article > h1, + #about main > article > div > p, + #for-organizations main > article > h1, + #for-organizations main > article > p { padding: 0 6rem; } - #events>h2, - #events>div>p, - #community>main>article>h1, - #community>main>article>p { + #events > h2, + #events > div > p, + #community > main > article > h1, + #community > main > article > p { padding: 0; } - #about section#features ul li, - #hosted-pod-services>div>ul li, - #solid-organizations>div>ul li, - #where-to-collaborate, - #events>div>ul { + #events > div > ul { padding: 2rem; margin-right: 2rem; } - #about main>article, - #for-organizations main>article, + #about main > article, + #for-organizations main > article, #community { align-items: flex-start; } - + #about main>article>div>section, #hosted-pod-services, #solid-organizations, #solid-server-implementations { padding: 2rem 6rem; } - + #hosted-pod-services { display: block; padding-bottom: 0; } - #about main>article img { + #about main > article img { width: 300px; float: right; } #about section#features { - background-color: #202542; + background-color: var(--dark); } - #about section#features ul { - display: flex; - list-style: none; + #events-list { + gap: 2rem; } - #where-to-collaborate>div>ul li { - margin-right: 3rem; + #events li dl dd:not(:last-child) { + font-size: 0.75rem; + text-transform: uppercase; } - #events li { - margin-right: 2rem; - margin-bottom: 2rem; + #for-developers main > article > div, + #for-organizations main > article > div, + #community main > article > div { + width: 100%; } - #events li dl dd:not(:last-child) { - font-size: 0.75rem; - text-transform: uppercase; + #developer-tutorials { + font-size: 1.25rem; + line-height: 2.5rem; } - #where-to-collaborate>div>ul, - #events>div>ul>li>details>ul { - display: flex; + #terms { + color: var(--white); } +} - #events>div>ul>li>details>ul li { - width: 25%; +@media screen and (min-width: 1023px) { + #homepage main > article > div > section > div > ul { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-column-gap: 0; + grid-row-gap: 0; } - #about section#features ul li a, - #where-to-collaborate ul li a { - background-color: #7B4DFF; - padding: 0.8rem 1.5rem; - color: #fff; - text-decoration: none; - border-radius: 0.5rem; - text-wrap: nowrap; + #homepage main > article > div > section > div > ul { + border-radius: 30px; } - #for-developers main>article>div, - #for-organizations main>article>div, - #community main>article>div { - width: 100%; + #homepage main > article > div > section > div > ul li { + display: grid; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(3, auto); + grid-column-gap: 0; + grid-row-gap: 0; + padding: 4rem; } - #developer-tutorials { - margin: 4rem; - font-size: 1.25rem; - line-height: 2.5rem; + #homepage main > article > div > section > div > ul > :nth-child(1), + #homepage main > article > div > section > div > ul > :nth-child(3) { + border-right: 1px solid var(--grey); } - #solid-server-implementations { - margin-top:-2em; - margin-bottom: 4rem; + #homepage main > article > div > section > div > ul > :nth-child(1), + #homepage main > article > div > section > div > ul > :nth-child(2) { + border-bottom: 1px solid var(--grey); } - #hosted-pod-services>div>ul, - #solid-organizations>div>ul { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 2rem; - margin-inline-start: 0; - padding-inline-start: 0; - margin-block-end:0; - width: 100%; - word-break: break-word + #homepage main > article > div > section > div > ul li :nth-child(1) { + grid-area: 1 / 1 / 2 / 2; } - #terms { - color: #fff; + #homepage main > article > div > section > div > ul li :nth-child(2) { + grid-area: 1 / 2 / 2 / 3; + } + + #homepage main > article > div > section > div > ul li :nth-child(3) { + grid-area: 2 / 2 / 3 / 3; } + #homepage main > article > div > section > div > ul li :nth-child(4) { + grid-area: 3 / 2 / 4 / 3; + } } \ No newline at end of file diff --git a/terms.html b/terms.html index 32e49a1d..667a1784 100644 --- a/terms.html +++ b/terms.html @@ -78,8 +78,8 @@

    URI Persistence Policy

  • For Developers
  • For Organizations
  • Community
    • -
  • License
    • -
  • Code of Conduct
    • +
  • License
    • +
  • Code of Conduct