Updates CodePens and links

GoogleChrome · Nov 2, 2021 · 204756b · 204756b
1 parent 3a5f57b
commit 204756b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/src/site/content/en/learn/design/intro/index.md b/src/site/content/en/learn/design/intro/index.md
@@ -121,7 +121,7 @@ On a narrow screen, the user would have to move the whole page left and right to
  tab: 'result'
 } %}
 
-<figcaption class="w-figcaption">Open <a href="https://codepen.io/adactio/full/WNOKexX">the liquid layout example</a> 
+<figcaption class="w-figcaption">Open <a href="https://codepen.io/web-dot-dev/pen/YzxEzpE">the liquid layout example</a> 
 in a new browser window to see how changing the size of the window stretches the design.</figcaption>
 </figure>
 
@@ -172,7 +172,7 @@ But given the variety of device sizes, chances are the layout will look less tha
  theme: 'dark',
  tab: 'result'
 } %}
-<figcaption class="w-figcaption">Open <a href="https://codepen.io/adactio/full/jOwpNgX">the adaptive layout example</a> 
+<figcaption class="w-figcaption">Open <a href="https://codepen.io/web-dot-dev/pen/oNeoNYw">the adaptive layout example</a> 
 in a new browser window to see how changing the size of the window causes the design to jump between layouts.</figcaption>
 </figure>
 
@@ -188,7 +188,7 @@ If adaptive layouts are a mashup of media queries and fixed-width layouts, respo
  theme: 'dark',
  tab: 'result'
 } %}
-<figcaption class="w-figcaption">Open <a href="https://codepen.io/adactio/full/VwWBKPV">the responsive design example</a> 
+<figcaption class="w-figcaption">Open <a href="https://codepen.io/web-dot-dev/pen/JjyOjbE">the responsive design example</a> 
 in a new browser window to see how changing the size of the window causes the design to fluidly change layout.</figcaption>
 </figure>
 

diff --git a/src/site/content/en/learn/design/media-queries/index.md b/src/site/content/en/learn/design/media-queries/index.md
@@ -132,8 +132,8 @@ Or using separate stylesheets:
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'QWgxXdP',
+ user: 'web-dot-dev',
+ id: 'qBXVowV',
  height: 500,
  theme: 'dark',
  tab: 'result'
@@ -184,8 +184,8 @@ Use the word `and` to combine your media queries:
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'Pojxrep',
+ user: 'web-dot-dev',
+ id: 'GRvOxaw',
  height: 500,
  theme: 'dark',
  tab: 'result'
@@ -212,8 +212,8 @@ Using the `column-count` property, the text is divided into two columns from tha
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'dyRwZxG',
+ user: 'web-dot-dev',
+ id: 'oNeodgd',
  height: 500,
  theme: 'dark',
  tab: 'result'
@@ -240,8 +240,8 @@ Those breakpoints were chosen based on the amount of content.
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'mdwaprw',
+ user: 'web-dot-dev',
+ id: 'JjyOvdM',
  height: 1000,
  theme: 'dark',
  tab: 'result'

diff --git a/src/site/content/en/learn/design/micro-layouts/index.md b/src/site/content/en/learn/design/micro-layouts/index.md
@@ -52,8 +52,8 @@ h1::after {
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'WNOLWvz',
+ user: 'web-dot-dev',
+ id: 'rNzYvxm',
  height: 200,
  theme: 'dark',
  tab: 'result'
@@ -93,8 +93,8 @@ But the image never gets larger than 200 pixels.
 ```
 
 {% Codepen {
- user: 'adactio',
- id: 'rNwXepq',
+ user: 'web-dot-dev',
+ id: 'qBXVYZo',
  height: 300,
  theme: 'dark',
  tab: 'result'
@@ -224,8 +224,8 @@ This demo won't work in every browser. In Google Chrome you can find the `#enabl
 {% endAside %}
 
 {% Codepen {
- user: 'adactio',
- id: 'bGRXqBX',
+ user: 'web-dot-dev',
+ id: 'RwZjyRv',
  height: 500,
  theme: 'dark',
  tab: 'result'