Skip to content

Implement Responsive Design in devices.css using getCqi Function and inline-size Container Type #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
scheibome wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Implement Responsive Design in devices.css using getCqi Function and inline-size Container Type #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c37efa8
[TASK] update npm packages
Dec 28, 2023
e9dea26
[FEATURE] Make all tablets responsive
Dec 28, 2023
63debac
[FEATURE] Make all phones responsive
Dec 28, 2023
3049a31
[FEATURE] Make all computers responsive
Dec 28, 2023
bc1b2c7
[FEATURE] Make all watches responsive
Dec 28, 2023
78a89c4
[FEATURE] Make all accessories responsive
Dec 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,876 changes: 950 additions & 926 deletions dist/devices.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/devices.min.css
View file
Open in desktop

Large diffs are not rendered by default.

40 changes: 22 additions & 18 deletions docs/accessories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,17 +91,19 @@ <h2 class="text-assistive">Pure CSS Apple HomePod, Apple Pro Display XDR devices
<h2 class="rework-title" id="homepod">HomePod<a class="ml-2" href="#homepod">#</a></h2>
<h3 class="text-assistive">Pure CSS Apple HomePod, Apple HomePod in pure CSS</h3>
<div class="rework-content">
<p> </p>
<p></p>
</div>
<div class="rework-device accessories">
<div class="device device-homepod">
<div class="device-frame"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
<div class="rework-device-container rework-device-container--homepod">
<div class="device device-homepod">
<div class="device-frame"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>
</div>
</div>
</div>
Expand All @@ -125,14 +127,16 @@ <h3 class="text-assistive">Pure CSS Apple Pro Display XDR, Apple Pro Display XDR
<p>Apple Pro Display XDR. A new 32-inch Retina 6K display with extreme brightness, contrast, color accuracy, and HDR that transforms the way you work.</p>
</div>
<div class="rework-device accessories">
<div class="device device-pro-display-xdr">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-08.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
<div class="rework-device-container">
<div class="device device-pro-display-xdr">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-08.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>
</div>
</div>
</div>
Expand All @@ -142,7 +146,7 @@ <h3 class="text-assistive">Pure CSS Apple Pro Display XDR, Apple Pro Display XDR
<!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:120px;height:240px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="5087273059"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<div class="columns">
<div class="columns">
<ul class="pagination column">
<div class="page-item page-prev"><a href="watches.html">
<div class="page-item-subtitle">Previous</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/css/demo.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/css/devices.min.css
View file
Open in desktop

Large diffs are not rendered by default.

120 changes: 66 additions & 54 deletions docs/computers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,21 +91,23 @@ <h2 class="text-assistive">Pure CSS MacBook Pro, iMac, MacBook Pro (2018), MacBo
<h2 class="rework-title" id="macbook-pro">MacBook Pro<a class="ml-2" href="#macbook-pro">#</a></h2>
<h3 class="text-assistive">Pure CSS MacBook Pro, MacBook Pro in pure CSS</h3>
<div class="rework-content">
<p>The new MacBook Pro. Incredible performance with the M1 Pro or M1 Max chip. Amazing battery life. And a 14” or 16” Liquid Retina XDR display. </p>
<p>The new MacBook Pro. Incredible performance with the M1 Pro or M1 Max chip. Amazing battery life. And a 14” or 16” Liquid Retina XDR display.</p>
</div>
<div class="rework-device computers">
<div class="dots">
<div class="dot tooltip active" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
<div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div>
</div>
<div class="device device-macbook-pro">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-10.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
<div class="rework-device-container">
<div class="device device-macbook-pro">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-10.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -138,14 +140,16 @@ <h3 class="text-assistive">Pure CSS iMac, iMac in pure CSS</h3>
<div class="dot tooltip" style="background:#E9B5A0;" data-tooltip="device-orange"></div>
<div class="dot tooltip" style="background:#C4C4E5;" data-tooltip="device-purple"></div>
</div>
<div class="device device-imac">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-08.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
<div class="rework-device-container">
<div class="device device-imac">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-08.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>
</div>
</div>
</div>
Expand All @@ -155,21 +159,23 @@ <h3 class="text-assistive">Pure CSS iMac, iMac in pure CSS</h3>
<h2 class="rework-title" id="macbook-pro-2018">MacBook Pro (2018)<a class="ml-2" href="#macbook-pro-2018">#</a></h2>
<h3 class="text-assistive">Pure CSS MacBook Pro (2018), MacBook Pro (2018) in pure CSS</h3>
<div class="rework-content">
<p> </p>
<p></p>
</div>
<div class="rework-device computers">
<div class="dots">
<div class="dot active tooltip" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
<div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div>
</div>
<div class="device device-macbook-pro-2018">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-10.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
<div class="rework-device-container">
<div class="device device-macbook-pro-2018">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-10.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>
</div>
</div>
</div>
Expand All @@ -188,14 +194,16 @@ <h3 class="text-assistive">Pure CSS MacBook, MacBook in pure CSS</h3>
<div class="dot tooltip" style="background:#facfc9;" data-tooltip="device-rosegold"></div>
<div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div>
</div>
<div class="device device-macbook">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-07.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
<div class="rework-device-container">
<div class="device device-macbook">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-07.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>
</div>
</div>
</div>
Expand All @@ -205,21 +213,23 @@ <h3 class="text-assistive">Pure CSS MacBook, MacBook in pure CSS</h3>
<h2 class="rework-title" id="surface-book">Surface Book<a class="ml-2" href="#surface-book">#</a></h2>
<h3 class="text-assistive">Pure CSS Surface Book, Surface Book in pure CSS</h3>
<div class="rework-content">
<p> </p>
<p></p>
</div>
<div class="rework-device computers">
<div class="dots">
<div class="dot tooltip active" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
<div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div>
</div>
<div class="device device-surface-book">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-11.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
<div class="rework-device-container">
<div class="device device-surface-book">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-11.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>
</div>
</div>
</div>
Expand All @@ -234,23 +244,25 @@ <h3 class="text-assistive">Pure CSS Surface Book, Surface Book in pure CSS</h3>
<h2 class="rework-title" id="surface-studio">Surface Studio<a class="ml-2" href="#surface-studio">#</a></h2>
<h3 class="text-assistive">Pure CSS Surface Studio, Surface Studio in pure CSS</h3>
<div class="rework-content">
<p> </p>
<p></p>
</div>
<div class="rework-device computers">
<div class="device device-surface-studio">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-12.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
<div class="rework-device-container">
<div class="device device-surface-studio">
<div class="device-frame"><img class="device-screen" src="assets/img/bg-12.jpg" loading="lazy"></div>
<div class="device-stripe"></div>
<div class="device-header"></div>
<div class="device-sensors"></div>
<div class="device-btns"></div>
<div class="device-power"></div>
<div class="device-home"></div>
</div>
</div>
</div>
</div>
</div>
<div class="columns">
<ul class="pagination column">
<div class="columns">
<ul class="pagination column">
<div class="page-item page-prev"><a href="phones.html">
<div class="page-item-subtitle">Previous</div>
<div class="page-item-title h5">Phones</div></a></div>
Expand Down
Loading