Skip to content

Updates to widths and spacing #5

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 1 commit into from
Aug 28, 2018
Merged

Updates to widths and spacing #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
52 changes: 26 additions & 26 deletions variable-fonts/grade.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
.wrapper {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(28rem,1fr));
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
grid-gap: 1rem;
}

textarea {
Expand Down Expand Up @@ -96,7 +96,7 @@
}
</style>
<style class="editable2">
/* Adjusted with slider and custom property */
/* Adjust with slider & custom property */
.container2 * {
font-size: 64px;
font-variation-settings: 'GRAD' var(--text-axis);
Expand All @@ -112,17 +112,17 @@
<p>Grade</p>
</div>
</section>
<textarea class="playable-css1">
/* grade (GRAD) range is 88 (default) up to 150 */
.container1 * {
font-size: 64px;
font-variation-settings: 'GRAD' 88;
}
</textarea>
<textarea id="code1" class="playable-html1">
<div class="container container1">
<p>Grade</p>
</div>
<textarea class="playable-css1">
/* grade (GRAD) range is 88 (default) up to 150 */
.container1 * {
font-size: 64px;
font-variation-settings: 'GRAD' 88;
}
</textarea>
<textarea id="code1" class="playable-html1">
<div class="container container1">
<p>Grade</p>
</div>
</textarea>
</div>
<div class="demo2">
Expand All @@ -131,18 +131,18 @@
<p>Grade</p>
</div>
</section>
<textarea class="playable-css2">
/* Adjusted with slider and custom property */
.container2 * {
font-size: 64px;
font-variation-settings: 'GRAD' var(--text-axis);
}
</textarea>
<textarea id="code2" class="playable-html2">
<div class="container container2">
<p>Grade</p>
</div>
</textarea>
<textarea class="playable-css2">
/* Adjust with slider & custom property */
.container2 * {
font-size: 64px;
font-variation-settings: 'GRAD' var(--text-axis);
}
</textarea>
<textarea id="code2" class="playable-html2">
<div class="container container2">
<p>Grade</p>
</div>
</textarea>
<div class="controls range-slider">
<label for="controls__slider">Adjust Grade: </label><input type="range" name="range-slider" value="88" id="text-axis" class="controls--slider" min="88" max="150">
</div>
Expand Down
72 changes: 36 additions & 36 deletions variable-fonts/italic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
.wrapper {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
grid-gap: 1.5rem;
grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
grid-gap: 1rem;
}

textarea {
Expand Down Expand Up @@ -103,7 +103,7 @@
}
</style>
<style class="editable3">
/* Adjusted with slider and custom property */
/* Adjust with slider & custom property */
.container3 * {
font-variation-settings: 'ital' var(--text-axis);
}
Expand All @@ -118,53 +118,53 @@
<p>Italic</p>
</div>
</section>
<textarea class="playable-css1">
/* italic can only be italic or normal */
.container1 * {
font-style: italic;
}
</textarea>
<textarea id="code1" class="playable-html1">
<div class="container container1">
<p>Italic</p>
</div>
</textarea>
<textarea class="playable-css1">
/* italic can only be italic or normal */
.container1 * {
font-style: italic;
}
</textarea>
<textarea id="code1" class="playable-html1">
<div class="container container1">
<p>Italic</p>
</div>
</textarea>
</div>
<div class="demo2">
<section class="section section2">
<div class="container container2">
<p>Italic</p>
</div>
</section>
<textarea class="playable-css2">
/* italic can only be italic or normal */
.container2 * {
font-variation-settings: 'ital' 1;
}
</textarea>
<textarea id="code2" class="playable-html2">
<div class="container container2">
<p>Italic</p>
</div>
</textarea>
<textarea class="playable-css2">
/* italic can only be italic or normal */
.container2 * {
font-variation-settings: 'ital' 1;
}
</textarea>
<textarea id="code2" class="playable-html2">
<div class="container container2">
<p>Italic</p>
</div>
</textarea>
</div>
<div class="demo3">
<section class="section section3">
<div class="container container3">
<p>Italic</p>
</div>
</section>
<textarea class="playable-css3">
/* Adjusted with slider and custom property */
.container3 * {
font-variation-settings: 'ital' var(--text-axis);
}
</textarea>
<textarea id="code3" class="playable-html3">
<div class="container container3">
<p>Italic</p>
</div>
</textarea>
<textarea class="playable-css3">
/* Adjust with slider & custom property */
.container3 * {
font-variation-settings: 'ital' var(--text-axis);
}
</textarea>
<textarea id="code3" class="playable-html3">
<div class="container container3">
<p>Italic</p>
</div>
</textarea>
<div class="controls range-slider">
<label for="controls__slider">Adjust Italic: </label><input type="range" name="range-slider" value="1" id="text-axis" class="controls--slider" min="0" max="1">
</div>
Expand Down
102 changes: 51 additions & 51 deletions variable-fonts/optical-sizing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
.wrapper {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(29rem,1fr));
grid-gap: 1.5rem;
grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
grid-gap: 1rem;
}

textarea {
Expand Down Expand Up @@ -111,7 +111,7 @@
}
</style>
<style class="editable3">
/* Adjusted with slider and custom property */
/* Adjust with slider & custom property */
.container3 * {
font-size: 64px;
font-variation-settings: 'opsz' var(--text-axis);
Expand All @@ -127,75 +127,75 @@
<p>Optical Size</p>
</div>
</section>
<textarea class="playable-css0">
/* font-optical-sizing can be auto or none */
.container0 * {
font-size: 64px;
font-optical-sizing: none;
}
</textarea>
<textarea id="code1" class="playable-html0">
<div class="container container0">
<p>Optical Size</p>
</div>
</textarea>
<textarea class="playable-css0">
/* font-optical-sizing can be auto or none */
.container0 * {
font-size: 64px;
font-optical-sizing: none;
}
</textarea>
<textarea id="code1" class="playable-html0">
<div class="container container0">
<p>Optical Size</p>
</div>
</textarea>
</div>
<div class="demo1">
<section class="section section1">
<div class="container container1">
<p>Optical Size</p>
</div>
</section>
<textarea class="playable-css1">
/* font-optical-sizing can be auto or none */
.container1 * {
font-size: 64px;
font-optical-sizing: auto;
}
</textarea>
<textarea id="code1" class="playable-html1">
<div class="container container1">
<p>Optical Size</p>
</div>
</textarea>
<textarea class="playable-css1">
/* font-optical-sizing can be auto or none */
.container1 * {
font-size: 64px;
font-optical-sizing: auto;
}
</textarea>
<textarea id="code1" class="playable-html1">
<div class="container container1">
<p>Optical Size</p>
</div>
</textarea>
</div>
<div class="demo2">
<section class="section section2">
<div class="container container2">
<p>Optical Size</p>
</div>
</section>
<textarea class="playable-css2">
/* optical size range is from 8 to 144 */
.container2 * {
font-size: 64px;
font-variation-settings: 'opsz' 64;
}
</textarea>
<textarea id="code2" class="playable-html2">
<div class="container container2">
<p>Optical Size</p>
</div>
</textarea>
<textarea class="playable-css2">
/* optical size range is from 8 to 144 */
.container2 * {
font-size: 64px;
font-variation-settings: 'opsz' 64;
}
</textarea>
<textarea id="code2" class="playable-html2">
<div class="container container2">
<p>Optical Size</p>
</div>
</textarea>
</div>
<div class="demo3">
<section class="section section3">
<div class="container container3">
<p>Optical Size</p>
</div>
</section>
<textarea class="playable-css3">
/* Adjusted with slider and custom property */
.container3 * {
font-size: 64px;
font-variation-settings: 'opsz' var(--text-axis);
}
</textarea>
<textarea id="code3" class="playable-html3">
<div class="container container3">
<p>Optical Size</p>
</div>
</textarea>
<textarea class="playable-css3">
/* Adjust with slider & custom property */
.container3 * {
font-size: 64px;
font-variation-settings: 'opsz' var(--text-axis);
}
</textarea>
<textarea id="code3" class="playable-html3">
<div class="container container3">
<p>Optical Size</p>
</div>
</textarea>
<div class="controls range-slider">
<label for="controls__slider">Adjust Optical Sizing: </label><input type="range" name="range-slider" value="64" id="text-axis" class="controls--slider" min="8" max="144">
</div>
Expand Down
Loading