chore: refactor to a css

website/blog/2020-07-06-version-0.63.md

@@ -45,7 +45,7 @@ For more information on LogBox and debugging react native, see the docs [here](h
 
 ## Pressable
 
-React Native is built to enable applications to meet user’s expectations of the platform. This includes avoiding “tells”—little things that give away that the experience was built with React Native. One major source of these tells has been the Touchable components: `Button`, `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity`, `TouchableNativeFeedback`, and `TouchableBounce`. 
+React Native is built to enable applications to meet user’s expectations of the platform. This includes avoiding “tells”—little things that give away that the experience was built with React Native. One major source of these tells has been the Touchable components: `Button`, `TouchableWithoutFeedback`, `TouchableHighlight`, `TouchableOpacity`, `TouchableNativeFeedback`, and `TouchableBounce`.
 
 These components make your application interactive by allowing you to provide visual feedback to user interactions. However, because they include built-in styles and effects that don’t match the platform interaction, users can tell when experiences are written with React Native.
 
@@ -67,7 +67,7 @@ import { Pressable, Text } from 'react-native';
 </Pressable>;
 ```
 
-<p style="text-align: center; font-size: 12px">
+<p class="snippet-caption">
 A simple example of a Pressable component in action
 </p>
 
@@ -86,12 +86,12 @@ For example, on iOS, the [system provides a color called `labelColor`](https://d
 ```jsx
 import { Text, PlatformColor } from 'react-native';
 
-<Text style={{color: PlatformColor('labelColor') }}>
+<Text style={{ color: PlatformColor('labelColor') }}>
   This is a label
-</Text>
+</Text>;
 ```
 
-<p style="text-align: center; font-size: 12px">
+<p class="snippet-caption">
 Sets the color of the Text component to labelColor as defined by iOS.
 </p>
 
@@ -108,7 +108,7 @@ import { View, Text, PlatformColor } from 'react-native';
 </View>;
 ```
 
-<p style="text-align: center; font-size: 12px">
+<p class="snippet-caption">
 Sets the background color of the View component to colorButtonNormal as defined by Android.
 </p>
 
@@ -129,7 +129,7 @@ const customDynamicTextColor = DynamicColorIOS({
 </Text>;
 ```
 
-<p style="text-align: center; font-size: 12px">
+<p class="snippet-caption">
 Changes the text color based on the system theme
 </p>
 

website/static/css/blog.css

@@ -11,6 +11,11 @@
   transition: none;
 }
 
+.blogContainer .snippet-caption {
+  text-align: center;
+  font-size: 12px;
+}
+
 /* Put the image on the left of the block */
 .blogContainer .postHeader .authorBlock {
   flex-direction: row-reverse;