Skip to content

Commit

Permalink
Merge pull request #43 from MaastrichtU-Library/41
Browse files Browse the repository at this point in the history 
Resolved issue #41 - Revamped CSS for Better Text Wrapping and Responsive Layout
  • Loading branch information
@pedrohserrano
pedrohserrano committed Jul 13, 2023
2 parents 4187e31 + 6b9f4bc commit 89981dd
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 215 deletions.
243 changes: 28 additions & 215 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,229 +1,42 @@

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<style type="text/css">
body {
width: 400px;
height: 200px;
overflow: hidden;
}
</style>
<link href="loader.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
<link href="loader.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script type = "module" src="bundle.js"></script>

<script type="module" src="bundle.js"></script>
<title>the FAIR extension</title>
</head>
<body>

<div class="toppane"><img src="img/logo.png" width="150px" height="170px" class="center"></div>
<br>
<br>

<div class="container">

<div class="leftpane">
<div id = "evaluation" class="boxed center2">

🎓️ No evaluation yet

</div>
<br><br>
<div id = "score" class= "center" role="progressbar" aria-valuenow="0=" aria-valuemin="0" aria-valuemax="100" style="--value:0"></div>
</div>

<div class="rightpane">
<div id = "find" class="boxed2 center3" style="background-color:#bce3f8">
&nbsp 🔍Findable

</div>
<div id = "access" class="boxed2 center3" style="background-color:#f9e0b6">
&nbsp 📬Accessible

</div>
<div id = "inter" class="boxed2 center3" style="background-color:#c8e6c9">
&nbsp ⚙️Interoperable

</div>
<div id = "reuse" class="boxed2 center3" style="background-color:#d1c4e9">
&nbsp ♻️Reusable

</div>
<ul class="doiList">
</ul>
</div>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<header class="toppane">
<img src="img/logo.png" class="center" alt="Logo">
</header>

<main class="container">
<section class="leftpane">
<div id="evaluation" class="boxed center2">🎓️ No evaluation yet</div>
<div id="score" class="center" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</section>

<section class="rightpane">
<div id="find" class="boxed2 center3">🔍Findable</div>
<div id="access" class="boxed2 center3">📬Accessible</div>
<div id="inter" class="boxed2 center3">⚙️Interoperable</div>
<div id="reuse" class="boxed2 center3">♻️Reusable</div>
<ul class="doiList"></ul>
</section>
</main>

<footer>
<div class="w3-container">
<div class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-border-blue">
<p>Copyright (c) 2022 Maastricht University Library</p>
<p>Copyright (c) 2023 Maastricht University Library</p>
<p><a href="https://github.com/MaastrichtU-Library/the-FAIR-extension/blob/main/disclaimer.md">Privacy Disclaimer</a> last update 24/10/22</p>
<p><a href="https://github.com/MaastrichtU-Library/the-FAIR-extension/releases/tag/Beta">the FAIR extension</a> v1.0.0 - beta</p>
</div>
</div>

<style type="text/css">


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: '<number>';
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;
}


</style>
</div>
</footer>
</body>

</html>

Loading

0 comments on commit 89981dd

Please sign in to comment.