andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: adjustment fullscreen and remove quotes

Browse Source
This commit is contained in:
Felipe da Silva
2018-03-27 13:58:50 -03:00
parent 36cb04d76f
commit 318ebb3652
2 changed files with 28 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
fullscreen.md
View File

@ -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
<style>
.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;
}
</style>
@ -97,8 +97,9 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the
#### Browser support
<span class="snippet__support-note">92%<</span>
<span class="snippet__support-note">83.38</span>
* https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
* https://caniuse.com/#feat=fullscreen
<!-- tags: animation -->

43
quotes.md
View File

@ -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
<q> CSS is awesome! </q>
```
#### CSS
```css
q {
quotes: "“" "”";
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__sinppet-quotes">
<q> CSS is amazing! </q>
</div>
</div>
<style>
q {
quotes: "“" "”";
}
</style>
#### Explanation
1. `quotes: "“" "”";` quotes CSS property indicates how user agents should render quotation marks.
#### Browser support
<span class="snippet__support-note">94.5%<</span>
* http://smartquotesforsmartpeople.com/
<!-- tags: animation -->