made mockup
commit
a1cd63b9af
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -0,0 +1,51 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="7.5pt"
|
||||||
|
height="7.5pt"
|
||||||
|
viewBox="0 0 2.6458333 2.6458333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-13.345129,-10.091206)">
|
||||||
|
<rect
|
||||||
|
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234"
|
||||||
|
width="0.59846729"
|
||||||
|
height="2.2097251"
|
||||||
|
x="11.023683"
|
||||||
|
y="10.218054" />
|
||||||
|
<rect
|
||||||
|
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234-3"
|
||||||
|
width="0.59846729"
|
||||||
|
height="2.2097251"
|
||||||
|
x="11.023683"
|
||||||
|
y="-12.427779"
|
||||||
|
transform="rotate(90)" />
|
||||||
|
<rect
|
||||||
|
style="fill:#b87676;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234-6"
|
||||||
|
width="0.64499003"
|
||||||
|
height="2.3815017"
|
||||||
|
x="11.091627"
|
||||||
|
y="-15.858796"
|
||||||
|
transform="rotate(90)" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffe680;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="path5686"
|
||||||
|
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
|
||||||
|
transform="matrix(0.29560478,0,0,0.29560478,9.0917534,9.9442229)" />
|
||||||
|
<path
|
||||||
|
style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="path5686-3"
|
||||||
|
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
|
||||||
|
transform="matrix(0.29560478,0,0,0.29560478,12.744892,9.9665217)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,51 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="7.5pt"
|
||||||
|
height="7.5pt"
|
||||||
|
viewBox="0 0 2.6458333 2.6458333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-10,-10)">
|
||||||
|
<rect
|
||||||
|
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234"
|
||||||
|
width="0.59846729"
|
||||||
|
height="2.2097251"
|
||||||
|
x="11.023683"
|
||||||
|
y="10.218054" />
|
||||||
|
<rect
|
||||||
|
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234-3"
|
||||||
|
width="0.59846729"
|
||||||
|
height="2.2097251"
|
||||||
|
x="11.023683"
|
||||||
|
y="-12.427779"
|
||||||
|
transform="rotate(90)" />
|
||||||
|
<rect
|
||||||
|
style="fill:#b87676;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234-6"
|
||||||
|
width="0.64499003"
|
||||||
|
height="2.3815017"
|
||||||
|
x="11.091627"
|
||||||
|
y="-15.858796"
|
||||||
|
transform="rotate(90)" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffe680;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="path5686"
|
||||||
|
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
|
||||||
|
transform="matrix(0.29560478,0,0,0.29560478,9.0917534,9.9442229)" />
|
||||||
|
<path
|
||||||
|
style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="path5686-3"
|
||||||
|
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
|
||||||
|
transform="matrix(0.29560478,0,0,0.29560478,12.744892,9.9665217)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,23 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="7.499999pt"
|
||||||
|
height="7.4999995pt"
|
||||||
|
viewBox="0 0 2.645833 2.6458331"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-20.479671,-10.051588)">
|
||||||
|
<path
|
||||||
|
style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="path5686-3"
|
||||||
|
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
|
||||||
|
transform="matrix(0.29560478,0,0,0.29560478,12.744892,9.9665217)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 855 B |
|
|
@ -0,0 +1,51 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="7.499999pt"
|
||||||
|
height="7.4999995pt"
|
||||||
|
viewBox="0 0 2.645833 2.6458331"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-16.826532,-10.043116)">
|
||||||
|
<rect
|
||||||
|
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234"
|
||||||
|
width="0.59846729"
|
||||||
|
height="2.2097251"
|
||||||
|
x="11.023683"
|
||||||
|
y="10.218054" />
|
||||||
|
<rect
|
||||||
|
style="fill:#449f84;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234-3"
|
||||||
|
width="0.59846729"
|
||||||
|
height="2.2097251"
|
||||||
|
x="11.023683"
|
||||||
|
y="-12.427779"
|
||||||
|
transform="rotate(90)" />
|
||||||
|
<rect
|
||||||
|
style="fill:#b87676;fill-opacity:1;stroke-width:0.499997;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="rect234-6"
|
||||||
|
width="0.64499003"
|
||||||
|
height="2.3815017"
|
||||||
|
x="11.091627"
|
||||||
|
y="-15.858796"
|
||||||
|
transform="rotate(90)" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffe680;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="path5686"
|
||||||
|
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
|
||||||
|
transform="matrix(0.29560478,0,0,0.29560478,9.0917534,9.9442229)" />
|
||||||
|
<path
|
||||||
|
style="fill:#e6e6e6;fill-opacity:1;stroke-width:0.447528;stroke-linejoin:round;stop-color:#000000"
|
||||||
|
id="path5686-3"
|
||||||
|
d="m 30.641235,0.54108524 1.371803,2.77957586 3.067444,0.4457258 -2.219623,2.163598 0.523982,3.0550496 L 30.641235,7.5426357 27.89763,8.9850343 28.421612,5.9299849 26.201989,3.7663867 29.269433,3.3206611 Z"
|
||||||
|
transform="matrix(0.29560478,0,0,0.29560478,12.744892,9.9665217)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,126 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="operating-system-card">
|
||||||
|
<div class="distro-header">
|
||||||
|
<div>
|
||||||
|
<h2>Operating System</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="distro-icon" src="assets/distro-fedora.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="distro-links">
|
||||||
|
<a>wiki</a><a>download</a><a>website</a>
|
||||||
|
</div>
|
||||||
|
<p class="os-quick-summary">
|
||||||
|
Non nesciunt voluptatibus numquam quidem in fugit. Error perspiciatis qui tempore labore architecto vitae. Id et ut harum molestiae fugit cupiditate. Nesciunt quidem rerum exercitationem aperiam optio cum dolorum quia.
|
||||||
|
</p>
|
||||||
|
<div class="operating-system-columns">
|
||||||
|
<span>
|
||||||
|
<h3>Freedom</h3>
|
||||||
|
<ul>
|
||||||
|
<li p>Ducimus fuga</li>
|
||||||
|
<li p>Quaerat nostrum</li>
|
||||||
|
<li p>Ducimus fuga</li>
|
||||||
|
<li p>Quaerat nostrum</li>
|
||||||
|
<li p>Quaerat nostrum</li>
|
||||||
|
<br>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
</ul>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<h3>Usability</h3>
|
||||||
|
<ul>
|
||||||
|
<li p>Ducimus fuga</li>
|
||||||
|
<li p>Quaerat nostrum</li>
|
||||||
|
<li p>Ducimus fuga</li>
|
||||||
|
<li p>Ducimus fuga</li>
|
||||||
|
<li p>Quaerat nostrum</li>
|
||||||
|
<li p>Quaerat nostrum</li>
|
||||||
|
<br>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
</ul>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<h3>Privacy</h3>
|
||||||
|
<ul>
|
||||||
|
<li p>Ducimus fuga</li>
|
||||||
|
<li p>Quaerat nostrum</li>
|
||||||
|
<br>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
<li n>Possimus delectus</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="star-columns">
|
||||||
|
<span>
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||||||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||||||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star.svg">
|
||||||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||||||
|
<img class="star" src="assets/icons_star-empty.svg">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="operating-system-card">
|
||||||
|
<h2>Operating System</h2>
|
||||||
|
<p class="os-quick-summary">
|
||||||
|
Non nesciunt voluptatibus numquam quidem in fugit. Error perspiciatis qui tempore labore architecto vitae. Id et ut harum molestiae fugit cupiditate. Nesciunt quidem rerum exercitationem aperiam optio cum dolorum quia.
|
||||||
|
</p>
|
||||||
|
<div class="operating-system-columns">
|
||||||
|
<span>
|
||||||
|
<h3>Freedom</h3>
|
||||||
|
<ul>
|
||||||
|
<li p>a</li>
|
||||||
|
<li n>a</li>
|
||||||
|
<li p>a</li>
|
||||||
|
</ul>
|
||||||
|
<h2 class="score"><span>5/10</span></h2>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<h3>Usability</h3>
|
||||||
|
<ul>
|
||||||
|
<li p>a</li>
|
||||||
|
<li n>a</li>
|
||||||
|
<li p>a</li>
|
||||||
|
</ul>
|
||||||
|
<h2 class="score"><span>5/10</span></h2>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<h3>Privacy</h3>
|
||||||
|
<ul>
|
||||||
|
<li p>a</li>
|
||||||
|
<li n>a</li>
|
||||||
|
<li p>a</li>
|
||||||
|
</ul>
|
||||||
|
<h2 class="score"><span>5/10</span></h2>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
html {
|
||||||
|
font: 100% monospace, sans-serif;
|
||||||
|
color: black;
|
||||||
|
background-color: #DDDF;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
max-width: 1040px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.1em auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
margin: 1px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.internal {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #99FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operating-system-card {
|
||||||
|
background-color: #FFFF;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 2em 2em;
|
||||||
|
margin: 1em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operating-system-columns {
|
||||||
|
display: grid;
|
||||||
|
left:0;right:0;
|
||||||
|
grid-gap: 10px 5px;
|
||||||
|
grid-template-columns: repeat(3, 33%);
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-columns {
|
||||||
|
display: grid;
|
||||||
|
left:0;right:0;
|
||||||
|
grid-gap: 10px 5px;
|
||||||
|
grid-template-columns: repeat(3, 33%);
|
||||||
|
margin-top: 1em;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.star-columns > span {
|
||||||
|
padding: 0.5em 2em;
|
||||||
|
border-width: 0;
|
||||||
|
border-left: 1px;
|
||||||
|
border-right: 1px;
|
||||||
|
border-color: gray;
|
||||||
|
border-style: inset;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operating-system-columns > span {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border-width: 0;
|
||||||
|
border-left: 1px;
|
||||||
|
border-right: 1px;
|
||||||
|
border-color: gray;
|
||||||
|
border-style: inset;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li[p] {
|
||||||
|
color: green;
|
||||||
|
list-style-image: url("assets/icons_positive.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
li[n] {
|
||||||
|
color: red;
|
||||||
|
list-style-image: url("assets/icons_negative.svg");
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.score {
|
||||||
|
text-align: right;
|
||||||
|
padding: 0.3em 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.star {
|
||||||
|
min-width: 2em;
|
||||||
|
min-height: 2em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.distro-header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 90% 0em
|
||||||
|
}
|
||||||
|
|
||||||
|
img.distro-icon {
|
||||||
|
max-width: 3em;
|
||||||
|
max-height: 3em;
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.distro-links {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.distro-links > a {
|
||||||
|
display: inline;
|
||||||
|
color: white;
|
||||||
|
background-color: #44AF;
|
||||||
|
border-color: black;
|
||||||
|
margin: 0;
|
||||||
|
margin-right: 1em;
|
||||||
|
text-decoration: underline;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: fit-content;
|
||||||
|
line-height: 2em;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue