From 7225aadb00385e77f9e85b272e364dccfba8bd15 Mon Sep 17 00:00:00 2001 From: Felipe da Silva Date: Fri, 23 Mar 2018 11:45:46 -0300 Subject: [PATCH 1/4] new: snippet quotes --- quotes.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 quotes.md diff --git a/quotes.md b/quotes.md new file mode 100644 index 000000000..46a5490e5 --- /dev/null +++ b/quotes.md @@ -0,0 +1,43 @@ +### Quotes + +With more sophisticated CSS you can greatly enhance your website’s typography, an aspect that lots of people overlook. For instance, did you know that the quotation marks you are writing in your code are actually “primes” which are used for measurements and coordinates? When using “q” tags in HTML for quotations, you can automatically insert proper quotation marks (so-called smart quotes) before and after the quotation. + +#### HTML + +```html + CSS is awesome! +``` + +#### CSS + +```css +q { + quotes: "“" "”"; +} +``` + +#### Demo + +
+
+ CSS is amazing! +
+
+ + + +#### Explanation + +1. `quotes: "“" "”";` quotes CSS property indicates how user agents should render quotation marks. + +#### Browser support + +94.5%< + +* http://smartquotesforsmartpeople.com/ + + From 36cb04d76fd126bddfae4bfedfba501b2bbfadb1 Mon Sep 17 00:00:00 2001 From: Felipe da Silva Date: Fri, 23 Mar 2018 12:07:08 -0300 Subject: [PATCH 2/4] [FEATURE] :fullscreen css --- fullscreen.md | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 fullscreen.md diff --git a/fullscreen.md b/fullscreen.md new file mode 100644 index 000000000..3d6739d9e --- /dev/null +++ b/fullscreen.md @@ -0,0 +1,104 @@ +### Fullscreen + +The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode. + +#### HTML + +```html +
+

Click the button below to enter the element into fullscreen mode.

+
+

I'm in fullscreen mode!

+
+
+ +
+``` + +#### CSS + +```css +.container { + margin: 40px auto; + max-width: 700px; +} + +.element { + padding: 20px; + height: 300px; + width: 100%; + background-color: skyblue; +} + +.element p { + text-align: center; + color: white; + font-size: 3em; +} + +.element:-ms-fullscreen p { + visibility: visible; +} + +.element:fullscreen { + background-color: #e4708a; + width: 100vw; + height: 100vh; +} +``` + +#### Demo + +
+
+
+

Click the button below to enter the element into fullscreen mode.

+
+

I'm in fullscreen mode!

+
+ +
+
+
+ + + +#### Explanation + +1. `fullscreen` CSS pseudo-class selector is used to select and style an element that is being displayed in full-screen mode. + +#### Browser support + +92%< + +* https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen + + From 318ebb36520f179e28d2fe15148a18f1d3803131 Mon Sep 17 00:00:00 2001 From: Felipe da Silva Date: Tue, 27 Mar 2018 13:58:50 -0300 Subject: [PATCH 3/4] fix: adjustment fullscreen and remove quotes --- fullscreen.md | 55 ++++++++++++++++++++++++++------------------------- quotes.md | 43 ---------------------------------------- 2 files changed, 28 insertions(+), 70 deletions(-) delete mode 100644 quotes.md diff --git a/fullscreen.md b/fullscreen.md index 3d6739d9e..91c7658d6 100644 --- a/fullscreen.md +++ b/fullscreen.md @@ -19,31 +19,31 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the ```css .container { - margin: 40px auto; - max-width: 700px; + margin: 40px auto; + max-width: 700px; } .element { - padding: 20px; - height: 300px; - width: 100%; - background-color: skyblue; + padding: 20px; + height: 300px; + width: 100%; + background-color: skyblue; } .element p { - text-align: center; - color: white; - font-size: 3em; + text-align: center; + color: white; + font-size: 3em; } .element:-ms-fullscreen p { - visibility: visible; + visibility: visible; } .element:fullscreen { - background-color: #e4708a; - width: 100vw; - height: 100vh; + background-color: #e4708a; + width: 100vw; + height: 100vh; } ``` @@ -63,31 +63,31 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the @@ -97,8 +97,9 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the #### Browser support -92%< +83.38 * https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen +* https://caniuse.com/#feat=fullscreen diff --git a/quotes.md b/quotes.md deleted file mode 100644 index 46a5490e5..000000000 --- a/quotes.md +++ /dev/null @@ -1,43 +0,0 @@ -### Quotes - -With more sophisticated CSS you can greatly enhance your website’s typography, an aspect that lots of people overlook. For instance, did you know that the quotation marks you are writing in your code are actually “primes” which are used for measurements and coordinates? When using “q” tags in HTML for quotations, you can automatically insert proper quotation marks (so-called smart quotes) before and after the quotation. - -#### HTML - -```html - CSS is awesome! -``` - -#### CSS - -```css -q { - quotes: "“" "”"; -} -``` - -#### Demo - -
-
- CSS is amazing! -
-
- - - -#### Explanation - -1. `quotes: "“" "”";` quotes CSS property indicates how user agents should render quotation marks. - -#### Browser support - -94.5%< - -* http://smartquotesforsmartpeople.com/ - - From 82f6f6121978a0937b347e108bd4f19531b98555 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 12 Jan 2019 13:08:40 +0200 Subject: [PATCH 4/4] Fix issues with fullscreen snippet --- fullscreen.md => snippets/fullscreen.md | 50 ++----------------------- 1 file changed, 4 insertions(+), 46 deletions(-) rename fullscreen.md => snippets/fullscreen.md (51%) diff --git a/fullscreen.md b/snippets/fullscreen.md similarity index 51% rename from fullscreen.md rename to snippets/fullscreen.md index 91c7658d6..8a6a6858f 100644 --- a/fullscreen.md +++ b/snippets/fullscreen.md @@ -8,10 +8,10 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the

Click the button below to enter the element into fullscreen mode.

-

I'm in fullscreen mode!

+

I change color in fullscreen mode!


- +
``` @@ -49,51 +49,9 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the #### Demo -
-
-
-

Click the button below to enter the element into fullscreen mode.

-
-

I'm in fullscreen mode!

-
- -
-
-
- - - #### Explanation -1. `fullscreen` CSS pseudo-class selector is used to select and style an element that is being displayed in full-screen mode. +1. `fullscreen` CSS pseudo-class selector is used to select and style an element that is being displayed in fullscreen mode. #### Browser support @@ -102,4 +60,4 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the * https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen * https://caniuse.com/#feat=fullscreen - +