markdown Gist嵌入样本：CSS

Posted 2021-05-06

/*
Theme Name: Controlled Chaos
Theme URI: https://github.com/ControlledChaos/controlled-chaos-theme
Author: Controlled Chaos Design
Author URI: http://ccdzine.com/
Description: An object-oriented WordPress starter theme.
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: controlled-chaos
Tags: one-column, accessibility-ready, custom-colors, custom-header, custom-menu, editor-style, featured-images, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
*/

body {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background-color: rebeccapurple;
	background-image: url(assets/images/background.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}

.entry-content {
	background: linear-gradient(
		to bottom,
		transparent 0%,
		yellow 50px,
		#687530 100%
	);
	-webkit-box-shadow: 10px 10px 0.3em rgba(0,0,0,0.5);
	        box-shadow: 10px 10px 0.3em rgba(0,0,0,0.5);
}

#secondary {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
	grid-column-gap: 3vw;
	grid-row-gap: 2vw;
}

@supports not ( (display: grid) ) {
	#secondary {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
	}
}

@supports not ( ( ((display: -webkit-box) or (display: flex)) ) or (display: flexbox) ) {
	#secondary {
		display: block;
	}

	.widget {
		width: 33.33325%;
		width: calc(100% / 3);
		float: left;
	}
}

a,
a:link,
a:visited,
a[data-value*="fancybox"],
a[href$='.jpg'] {
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
font-size: 1rem;
	color: dodgerblue;
	text-shadow: 0.03em 0.03em 0.03em rgba(255, 255, 255, 0.3);

}

a:hover,
a:focus,
a:active {
	color: #fff;
}

a:before,
a:after {
	content: '';
	display: block;
	left: 0;
	width: 100%;
	height: 2px;
	background: burlywood;
	opacity: 0;
	-webkit-transform: scale(0) matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824);
	        transform: scale(0) matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824);
	-webkit-transition: opacity .1s, -webkit-transform 350ms;
	transition: opacity .1s, -webkit-transform 350ms;
	transition: opacity .1s, transform 350ms;
	transition: opacity .1s, transform 350ms, -webkit-transform 350ms;
	-webkit-transition-delay: 0.025s;
	        transition-delay: 0.025s;
}

a:before {
	top: -7px;
}

a:after {
	bottom: -7px;
}

a:not(.no-border):hover:before,
a:not(.no-border):hover:after {
	opacity: 1;
	-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px);
	        transform: scale(1) rotate(0deg) translate(0px, 0px);
}

label + input:not([type="checkbox"]):not([type="radio"]),
label ~ input:not([type="checkbox"]):not([type="radio"]) {
	margin: 0;
}

## Gist Embed Sample: CSS

Code is for display purposes only.