From a691427452ff3751c87584153002b4c4705e2755 Mon Sep 17 00:00:00 2001 From: pedrohserrano Date: Thu, 13 Jul 2023 19:32:13 +0200 Subject: [PATCH 1/2] styles modules out of the index --- styles.css | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1a4435f --- /dev/null +++ b/styles.css @@ -0,0 +1,163 @@ +body { + width: 400px; + height: 200px; + overflow: hidden; +} + +body, html { + width: 100%; + height: 100%; + margin: 0; +} + +.container { + width: 100%; + height: 100%; +} + +.leftpane { + width: 35%; + height: 100%; + float: left; + position: relative; + background-color: white; + border-collapse: collapse; +} + +@keyframes growProgressBar { + 0%, 33% { --pgPercentage: 0; } + 100% { --pgPercentage: var(--value); } +} + +@property --pgPercentage { + syntax: ''; + inherits: false; + initial-value: 0; +} + +div[role="progressbar"] { + --size: 6rem; + --fg: #369; + --bg: #def; + + --pgPercentage: var(--value); + animation: growProgressBar 3s 1 forwards; + width: var(--size); + height: var(--size); + border-radius: 50%; + display: grid; + place-items: center; + background: + radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0), + conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0) + ; + font-family: Helvetica, Arial, sans-serif; + font-size: calc(var(--size) / 5); + color: var(--fg); +} + +div[role="progressbar"]::before { + counter-reset: percentage var(--value); + content: counter(percentage) '%'; +} + +.boxed { + background-color: lightgray; + min-height: 30%; + float: center; + font-size: larger; + text-align: center; + top: 50%; +} + +.boxed2{ + background-color: lightblue; + min-height: 30%; + float: center; + font-size: larger; + top: 50%; + margin: 2px 0px; + +} + +.boxed3{ + background-color: lightblue; + min-height: 30%; + float: center; + font-size: x-small; + top: 50%; + margin: 4px 2px; + border: 0.01px solid lightgray; + +} + +.rightpane { + width: 65%; + height: 100%; + position: relative; + float: right; + background-color: white; + border-collapse: collapse; + margin-right: auto; +} + +.toppane { + width: 100%; + height: 100px; + border-collapse: collapse; + background-color: white; +} + +.center { + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} + +.center2{ + display: block; + margin-left: auto; + margin-right: auto; + width: 97%; +} + +.doiList{ + width: 400px; + padding :1px; + font-family: "Open Sans"; + background-color: white; + +} + +.doiList li{ + list-style: none; + border: none; + padding: 10px 20px; + font-family: "Open Sans"; +} + +.doiList button{ + display: inline-block; + outline: 0; + cursor: pointer; + text-align: center; + border: 1px solid #babfc3; + font-family: "Open Sans"; + min-height: 22px; + min-width: 22px; + color: #202223; + background: #ffffff; + border-radius: 4px; + font-weight: 500; + font-size: 14px; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 0px; + position: absolute; + right: 10px; + +} + +button a, a:hover, a:focus, a:active { + color: inherit; + text-decoration: none; +} From 6b9f4bcf30cee42cb42c0056e55d5d6c7d09ba97 Mon Sep 17 00:00:00 2001 From: pedrohserrano Date: Thu, 13 Jul 2023 20:50:10 +0200 Subject: [PATCH 2/2] index updated with rich metadata and aest solved in styles --- index.html | 243 ++++++----------------------------------------------- styles.css | 192 +++++++++++++++++++++--------------------- 2 files changed, 124 insertions(+), 311 deletions(-) diff --git a/index.html b/index.html index 80e092d..0fe7c3a 100644 --- a/index.html +++ b/index.html @@ -1,229 +1,42 @@ - - + - - + + + - - - + + the FAIR extension - -
-
-
- -
- -
-
- - 🎓️ No evaluation yet - -
-

-
-
- -
-
-   🔍Findable - -
-
-   📬Accessible - -
-
-   ⚙️Interoperable - -
-
-   ♻️Reusable - -
-
    -
-
- - +
+ Logo +
+ +
+
+
🎓️ No evaluation yet
+
+
+ +
+
🔍Findable
+
📬Accessible
+
⚙️Interoperable
+
♻️Reusable
+
    +
    +
    + +
    -

    Copyright (c) 2022 Maastricht University Library

    +

    Copyright (c) 2023 Maastricht University Library

    Privacy Disclaimer last update 24/10/22

    the FAIR extension v1.0.0 - beta

    - - -
    + - - diff --git a/styles.css b/styles.css index 1a4435f..3de408f 100644 --- a/styles.css +++ b/styles.css @@ -1,143 +1,92 @@ -body { - width: 400px; - height: 200px; - overflow: hidden; -} - body, html { width: 100%; height: 100%; margin: 0; + font-size: 0.9em; + padding: 0 1em; } .container { - width: 100%; - height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 90vh; /* Limit the height of the flexbox */ } -.leftpane { - width: 35%; - height: 100%; - float: left; - position: relative; +.toppane { + width: 100%; + height: 100px; background-color: white; - border-collapse: collapse; -} - -@keyframes growProgressBar { - 0%, 33% { --pgPercentage: 0; } - 100% { --pgPercentage: var(--value); } -} - -@property --pgPercentage { - syntax: ''; - inherits: false; - initial-value: 0; -} - -div[role="progressbar"] { - --size: 6rem; - --fg: #369; - --bg: #def; - - --pgPercentage: var(--value); - animation: growProgressBar 3s 1 forwards; - width: var(--size); - height: var(--size); - border-radius: 50%; - display: grid; - place-items: center; - background: - radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0), - conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0) - ; - font-family: Helvetica, Arial, sans-serif; - font-size: calc(var(--size) / 5); - color: var(--fg); + display: flex; + justify-content: center; + align-items: center; + padding: 1em; + margin-bottom: 1em; } -div[role="progressbar"]::before { - counter-reset: percentage var(--value); - content: counter(percentage) '%'; +.center { + display: block; + margin: auto; + padding: 1em 0; + width: 150px; + height: 150px; } -.boxed { +.boxed, .boxed2, .boxed3 { background-color: lightgray; - min-height: 30%; - float: center; - font-size: larger; text-align: center; - top: 50%; + padding: 1em; + height: 100px; /* Restrict the height */ + overflow-y: auto; /* Add scrollbar if content overflows */ + flex-shrink: 0; + margin-bottom: 1em; /* Add margin at the bottom */ + font-size: 1.3em; } -.boxed2{ +.boxed2 { background-color: lightblue; - min-height: 30%; - float: center; - font-size: larger; - top: 50%; margin: 2px 0px; - } -.boxed3{ +.boxed3 { background-color: lightblue; - min-height: 30%; - float: center; - font-size: x-small; - top: 50%; - margin: 4px 2px; border: 0.01px solid lightgray; - + padding: 1em; + flex-shrink: 0; } -.rightpane { - width: 65%; - height: 100%; - position: relative; - float: right; - background-color: white; - border-collapse: collapse; - margin-right: auto; +#find { + background-color: #bce3f8; } -.toppane { - width: 100%; - height: 100px; - border-collapse: collapse; - background-color: white; +#access { + background-color: #f9e0b6; } -.center { - display: block; - margin-left: auto; - margin-right: auto; - width: 50%; +#inter { + background-color: #c8e6c9; } -.center2{ - display: block; - margin-left: auto; - margin-right: auto; - width: 97%; +#reuse { + background-color: #d1c4e9; } -.doiList{ - width: 400px; +.doiList { + width: 100%; padding :1px; font-family: "Open Sans"; background-color: white; - } -.doiList li{ +.doiList li { list-style: none; border: none; padding: 10px 20px; font-family: "Open Sans"; + position: relative; } -.doiList button{ +.doiList button { display: inline-block; outline: 0; cursor: pointer; @@ -154,10 +103,61 @@ div[role="progressbar"]::before { box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 0px 0px; position: absolute; right: 10px; - } button a, a:hover, a:focus, a:active { color: inherit; text-decoration: none; } + +footer { + padding: 1em; + font-size: smaller; + flex-shrink: 0; + margin-top: 7em; +} + +/* Responsive design */ +@media screen and (max-width: 600px) { + .container { + font-size: 0.7em; + } +} + +/* the same as before */ +@keyframes growProgressBar { + 0%, 33% { --pgPercentage: 0; } + 100% { --pgPercentage: var(--value); } +} + +@property --pgPercentage { + syntax: ''; + inherits: false; + initial-value: 0; +} + +div[role="progressbar"] { + --size: 6rem; + --fg: #369; + --bg: #def; + + --pgPercentage: var(--value); + animation: growProgressBar 3s 1 forwards; + width: var(--size); + height: var(--size); + border-radius: 50%; + display: grid; + place-items: center; + background: + radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0), + conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0) + ; + font-family: Helvetica, Arial, sans-serif; + font-size: calc(var(--size) / 5); + color: var(--fg); +} + +div[role="progressbar"]::before { + counter-reset: percentage var(--value); + content: counter(percentage) '%'; +}