Skip to content

fix(css): Update rgb hsl values as per the latest syntax #158

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

Merged
merged 4 commits into from
Nov 28, 2023
Merged

fix(css): Update rgb hsl values as per the latest syntax #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c5ad916
update rgb hsl syntaxes
dipikabh Nov 24, 2023
78f4eaa
Add slashes
dipikabh Nov 24, 2023
568f0f1
Apply suggestions from code review
bsmth Nov 27, 2023
bfe1480
chore(css) add newlines to HTML EoF, add language to info strings in …
bsmth Nov 27, 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
96 changes: 47 additions & 49 deletions learn/backgrounds-borders/background.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backgrounds and Borders: background</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
.box {
width: 500px;
height: 300px;
padding: 0.5em;
}
</style>

<style class="editable">
.box {
background:
linear-gradient(
105deg,
rgba(255, 255, 255, 0.2) 39%,
rgba(51, 56, 57, 1) 96%
)
center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}
</style>
</head>

<body>
<section class="preview">
<div class="box"></div>
</section>

<textarea class="playable playable-css" style="height: 220px">

<head>
<meta charset="utf-8" />
<title>Backgrounds and Borders: background</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}

.box {
width: 500px;
height: 300px;
padding: 0.5em;
}
</style>

<style class="editable">
.box {
background:
linear-gradient(105deg,
rgb(255 255 255 / 20%) 39%,
rgb(51 56 57 / 100%) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}
</style>
</head>

<body>
<section class="preview">
<div class="box"></div>
</section>

<textarea class="playable playable-css" style="height: 220px">
.box {
background:
linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
linear-gradient(105deg, rgb(255 255 255 / 20%) 39%, rgb(51 56 57 / 100%) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat,
rebeccapurple;
}</textarea
>

<textarea class="playable playable-html" style="height: 130px">
<div class="box"></div></textarea
>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
}</textarea>

<textarea class="playable playable-html" style="height: 130px">
<div class="box"></div></textarea>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>

</html>
91 changes: 46 additions & 45 deletions learn/backgrounds-borders/borders.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backgrounds and Borders: border</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
.box {
width: 500px;
padding: 0.5em;
}
</style>

<style class="editable">
.box {
background-color: #567895;
border: 5px solid #0b385f;
border-bottom-style: dashed;
color: #fff;
}
<head>
<meta charset="utf-8" />
<title>Backgrounds and Borders: border</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}

h2 {
border-top: 2px dotted rebeccapurple;
border-bottom: 1em double rgb(24, 163, 78);
}
</style>
</head>
.box {
width: 500px;
padding: 0.5em;
}
</style>

<body>
<section class="preview">
<div class="box">
<h2>Borders</h2>
<p>Try changing the borders.</p>
</div>
</section>
<style class="editable">
.box {
background-color: #567895;
border: 5px solid #0b385f;
border-bottom-style: dashed;
color: #fff;
}

<textarea class="playable playable-css" style="height: 220px">
h2 {
border-top: 2px dotted rebeccapurple;
border-bottom: 1em double rgb(24 163 78);
}
</style>
</head>

<body>
<section class="preview">
<div class="box">
<h2>Borders</h2>
<p>Try changing the borders.</p>
</div>
</section>

<textarea class="playable playable-css" style="height: 220px">
.box {
background-color: #567895;
border: 5px solid #0b385f;
Expand All @@ -47,20 +49,19 @@ <h2>Borders</h2>

h2 {
border-top: 2px dotted rebeccapurple;
border-bottom: 1em double rgb(24, 163, 78);
}</textarea
>
border-bottom: 1em double rgb(24 163 78);
}</textarea>

<textarea class="playable playable-html" style="height: 130px">
<textarea class="playable playable-html" style="height: 130px">
<div class="box">
<h2>Borders</h2>
<p>Try changing the borders.</p>
</div></textarea
>
</div></textarea>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
91 changes: 46 additions & 45 deletions learn/backgrounds-borders/color.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backgrounds and Borders: background-color</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}
.box {
width: 500px;
padding: 0.5em;
}
</style>

<style class="editable">
.box {
background-color: #567895;
}
<head>
<meta charset="utf-8" />
<title>Backgrounds and Borders: background-color</title>
<link rel="stylesheet" href="../styles.css" />
<style>
* {
box-sizing: border-box;
}

h2 {
background-color: black;
color: white;
}
.box {
width: 500px;
padding: 0.5em;
}
</style>

span {
background-color: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<style class="editable">
.box {
background-color: #567895;
}

<body>
<section class="preview">
<div class="box">
<h2>Background Colors</h2>
<p>Try changing the background <span>colors</span>.</p>
</div>
</section>
h2 {
background-color: black;
color: white;
}

<textarea class="playable playable-css" style="height: 220px">
span {
background-color: rgb(255 255 255 / 50%);
}
</style>
</head>

<body>
<section class="preview">
<div class="box">
<h2>Background Colors</h2>
<p>Try changing the background <span>colors</span>.</p>
</div>
</section>

<textarea class="playable playable-css" style="height: 220px">
.box {
background-color: #567895;
}
Expand All @@ -48,20 +50,19 @@ <h2>Background Colors</h2>
color: white;
}
span {
background-color: rgba(255,255,255,.5);
}</textarea
>
background-color: rgb(255 255 255 / 50%);
}</textarea>

<textarea class="playable playable-html" style="height: 130px">
<textarea class="playable playable-html" style="height: 130px">
<div class="box">
<h2>Background Colors</h2>
<p>Try changing the background <span>colors</span>.</p>
</div></textarea
>
</div></textarea>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>

<div class="playable-buttons">
<input id="reset" type="button" value="Reset" />
</div>
</body>
<script src="../playable.js"></script>
</html>
Loading