Difference between revisions of "Template:NCKU Tainan/css/improve"

Revision as of 13:57, 2 October 2018 (view source) Oscarliu117 (Talk | contribs) ← Older edit		Latest revision as of 17:52, 17 October 2018 (view source) I-Chu (Talk | contribs)
(19 intermediate revisions by 3 users not shown)
Line 1:		Line 1:
−	.result{	+	.fig {
−	height: 700px !important;	+	margin-bottom: 50px !important;
−	width: auto !important;	+	}
−	padding-left: 100px !important;	+
−	}	+
−	.appimg{	+	.result {
−	height: 500px !important;	+	height: 500px !important;
−	width: auto !important;	+	width: auto !important;
−	}	+	padding-left: 200px;
		+	}
−	#HQ_page p {	+	#HQ_page p {
−	font-size: 20px;	+	font-size: 20px;
−	margin: 0;	+	margin: 0;
−	background-color: #010E00;	+	background-color: #010E00;
−	color: white;	+	color: white;
−	}	+	}
−	body {	+	body {
−	background-color: #272625;	+	background-color: #272625;
−	}	+	}
−	/*header*/	+	/*header*/
−	.carousel-item {	+	.carousel-item {
−	height: 100vh;	+	height: 100vh;
−	min-height: 300px;	+	min-height: 300px;
−	background: no-repeat center center scroll;	+	background: no-repeat center center scroll;
−	-webkit-background-size: cover;	+	-webkit-background-size: cover;
−	-moz-background-size: cover;	+	-moz-background-size: cover;
−	-o-background-size: cover;	+	-o-background-size: cover;
−	background-size: cover;	+	background-size: cover;
−	}	+	}
−	.head2 {	+	.head2 {
−	color: white;	+	color: white;
−	width: 30%;	+	width: 30%;
−	font-size: 50px;	+	font-size: 50px;
−	font-weight: 700;	+	font-weight: 700;
−	border-bottom: 10px solid #7ae26f !important;	+	border-bottom: 10px solid #7ae26f !important;
−	position: relative;	+	position: relative;
−	}	+	}
−	.head4 {	+	.head4 {
−	color: white;	+	color: white;
−	width: 40%;	+	width: 40%;
−	font-size: 50px;	+	font-size: 50px;
−	font-weight: 700;	+	font-weight: 700;
−	border-bottom: 10px solid #7ae26f !important;	+	border-bottom: 10px solid #7ae26f !important;
−	position: relative;	+	position: relative;
−	}	+	}
−	/* paragraph content*/	+	/* paragraph content*/
−	#pt{	+	#pt {
−	padding-top: 10px;	+	padding-top: 10px;
−	}	+	}
−	h10 {	+	h10 {
−	color: white;	+	color: white;
−	font-size: 1.4rem;	+	font-size: 1.4rem;
−	line-height: 150%;	+	line-height: 150%;
−	}	+	}
−	h8 {	+	h8 {
−	color: white;	+	color: white;
−	font-size: 1.8rem;	+	font-size: 1.8rem;
−	line-height: 150%;	+	line-height: 150%;
−	}	+	}
−	h3 {	+
−	color: white;	+
−	font-size: 35px;	+
−	line-height: 50px;	+
−	}	+
−	.navbar {	+	h3 {
−	padding-top: 10px;	+	color: white;
−	margin-bottom: 0;	+	font-size: 35px;
−	}	+	line-height: 50px;
−	.navbar-brand {	+	}
−	font-size: 30px;	+
−	}	+
−	.nav-link {	+
−	font-size: 20px;	+
−	}	+
−	a.dropdown-item {	+
−	color: #4F7F52;	+
−	}	+
−	a.dropdown-item:active {	+
−	background-color: #4F7F52;	+
−	}	+
−	.caret {	+
−	display: inline-block;	+
−	width: 0;	+
−	height: 0;	+
−	margin-left: 2px;	+
−	vertical-align: middle;	+
−	border-top: 4px solid;	+
−	border-right: 4px solid transparent;	+
−	border-left: 4px solid transparent;	+
−	}	+
−	/*滑到navbar就展開*/	+
−	.dropdown-menu li:hover .sub-menu {visibility: visible;}	+
−	.dropdown:hover .dropdown-menu {display: block;}	+
−		+
−	.head {	+
−	color: white;	+
−	width: 50%;	+
−	font-size: 50px;	+
−	font-weight: 700 !important;	+
−	border-bottom: 10px solid #7ae26f !important;	+
−	position: relative;	+
−	}	+
−	.container.content {	+
−	margin-top: 80px;	+
−	}	+
−	@media (min-width: 992px) {	+	a.dropdown-item {
−	.navbar {	+	color: #4F7F52;
−	padding-left: 80px;	+	}
−	padding-right: 80px;	+
−	}	+
−	}	+
−	@media (max-width: 768px) {	+
−	.navbar-right form {	+
−	display: none;	+
−	}	+
−	}	+
−	@media (max-width: 568px) {	+
−	footer {	+
−	text-align: center;	+
−	}	+
−	.list-group {	+
−	display: none;	+
−	}	+
−	}	+
−	/*folded-corner*/	+	a.dropdown-item:active {
−	.post {	+	background-color: #4F7F52;
−	position: relative;	+	}
−	}	+
−	.folded-corner {	+
−	position: absolute;	+
−	bottom: 0px;	+
−	right: 0px;	+
−	border-width: 0;	+
−	border-style: solid;	+
−	background: hsla(260,100%,100%,0.2);	+
−	box-shadow: 0px -4px 0px rgba(0,0,0,0.3), -1px -4px 0px rgba(0,0,0,0.1);	+
−	border-radius: 15px 0 0 0;	+
−	border-color: transparent #B9DEBB transparent transparent;	+
−	transition: border-width 0.2s ease-out;	+
−	}	+
−	.post:hover .folded-corner {	+
−	border-width: 40px 40px 0 0;	+
−	}	+
−	.photo .folded-corner {	+
−	background: hsla(260,5%,75%,0.5);	+
−	}	+
−	[class*="col-"] {	+	.caret {
−	float: left;	+	display: inline-block;
−	padding: 13px;	+	width: 0;
−	}	+	height: 0;
−	a.list-group-item:visited {	+	margin-left: 2px;
−	color: white;	+	vertical-align: middle;
−	}	+	border-top: 4px solid;
−	a:hover {	+	border-right: 4px solid transparent;
−	background-color: transparent;	+	border-left: 4px solid transparent;
−	}	+	}
−	.list-group {	+
−	margin-top: 100px;	+
−	}	+
−	.col-2.side {	+
−	padding: 0;	+
−	}	+
−	.list-group-item {	+
−	padding: .55rem .35rem;	+
−	background-color: #272625;	+
−	color: white;	+
−	border: none;	+
−	font-size: 19px;	+
−	}	+
−	a.list-group-item.list-group-item-action {	+
−	background-color: transparent;	+
−	}	+
−	a.list-group-item.list-group-item-action:hover {	+
−	color: #98CC9B;	+
−	}	+
−	a.list-group-item.list-group-item-action.active {	+
−	background-color: transparent;	+
−	color: #7ae26f;	+
−	}	+
−	.scrollspy-example h4{	+
−	font-size: 2rem;	+
−	}	+
−		+	/*滑到navbar就展開*/
		+	.dropdown-menu li:hover .sub-menu {
		+	visibility: visible;
		+	}
−	img.contentimg {	+	.dropdown:hover .dropdown-menu {
−	width: 100%;	+	display: block;
−	margin: 20px 0;	+	}
−	}	+
−	a.link {	+	.head {
−	font-size: 30px;	+	color: white;
−	color: #4F7F52;	+	width: 50%;
−	}	+	font-size: 50px;
−	#list-item-1 {	+	border-bottom: 10px solid #7ae26f !important;
−	padding-top: 20px;	+	position: relative;
−	text-align:justify;	+	}
−	}	+
−	#list-item-2 {	+	.container.content {
−	padding-top: 20px;	+	margin-top: 80px;
−	text-align:justify;	+	}
−	}	+
−	#list-item-3 {	+	/*folded-corner*/
−	padding-top: 20px;	+	.post {
−	text-align:justify;	+	position: relative;
−	}	+	}
−	#list-item-4 {	+
−	padding-top: 20px;	+	.folded-corner {
−	text-align:justify;	+	position: absolute;
−	}	+	bottom: 0px;
−	#list-item-5 {	+	right: 0px;
−	padding-top: 20px;	+	border-width: 0;
−	text-align:justify;	+	border-style: solid;
−	}	+	background: hsla(260, 100%, 100%, 0.2);
−	a.reference {	+	box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.3), -1px -4px 0px rgba(0, 0, 0, 0.1);
−	color: #4F7F52;	+	border-radius: 15px 0 0 0;
−	}	+	border-color: transparent #B9DEBB transparent transparent;
		+	transition: border-width 0.2s ease-out;
		+	}
		+
		+	.post:hover .folded-corner {
		+	border-width: 40px 40px 0 0;
		+	}
		+
		+	.photo .folded-corner {
		+	background: hsla(260, 5%, 75%, 0.5);
		+	}
		+
		+	[class*="col-"] {
		+	float: left;
		+	padding: 13px;
		+	}
		+
		+	a.list-group-item:visited {
		+	color: white;
		+	}
		+
		+	a:hover {
		+	background-color: transparent;
		+	}
		+
		+	.list-group {
		+	margin-top: 100px;
		+	}
		+
		+	.col-2.side {
		+	padding: 0;
		+	}
		+
		+	.list-group-item {
		+	padding: .55rem .35rem;
		+	background-color: #272625;
		+	color: white;
		+	border: none;
		+	font-size: 19px;
		+	}
		+
		+	a.list-group-item.list-group-item-action {
		+	background-color: transparent;
		+	}
		+
		+	a.list-group-item.list-group-item-action:hover {
		+	color: #98CC9B;
		+	}
		+
		+	a.list-group-item.list-group-item-action.active {
		+	background-color: transparent;
		+	color: #7ae26f;
		+	}
		+
		+	.scrollspy-example h4 {
		+	font-size: 2rem;
		+	}
		+
		+	img.contentimg {
		+	width: 100%;
		+	margin: 20px 0;
		+	}
		+
		+	a.link {
		+	font-size: 30px;
		+	color: #4F7F52;
		+	}
		+	#References {
		+	margin-top: 80px;
		+	}

---

Latest revision as of 17:52, 17 October 2018

.fig {

 margin-bottom: 50px !important;

}

.result {

 height: 500px !important;
 width: auto !important;
 padding-left: 200px;

}

1. HQ_page p {

 font-size: 20px;
 margin: 0;
 background-color: #010E00;
 color: white;

}

body {

 background-color: #272625;

}

/*header*/ .carousel-item {

 height: 100vh;
 min-height: 300px;
 background: no-repeat center center scroll;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

}

.head2 {

 color: white;
 width: 30%;
 font-size: 50px;
 font-weight: 700;
 border-bottom: 10px solid #7ae26f !important;
 position: relative;

}

.head4 {

 color: white;
 width: 40%;
 font-size: 50px;
 font-weight: 700;
 border-bottom: 10px solid #7ae26f !important;
 position: relative;

}

/* paragraph content*/

1. pt {

 padding-top: 10px;

}

h10 {

 color: white;
 font-size: 1.4rem;
 line-height: 150%;

}

h8 {

 color: white;
 font-size: 1.8rem;
 line-height: 150%;

}

h3 {

 color: white;
 font-size: 35px;
 line-height: 50px;

}

a.dropdown-item {

 color: #4F7F52;

}

a.dropdown-item:active {

 background-color: #4F7F52;

}

.caret {

 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px solid;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;

}

/*滑到navbar就展開*/ .dropdown-menu li:hover .sub-menu {

 visibility: visible;

}

.dropdown:hover .dropdown-menu {

 display: block;

}

.head {

 color: white;
 width: 50%;
 font-size: 50px;
 border-bottom: 10px solid #7ae26f !important;
 position: relative;

}

.container.content {

 margin-top: 80px;

}

/*folded-corner*/ .post {

 position: relative;

}

.folded-corner {

 position: absolute;
 bottom: 0px;
 right: 0px;
 border-width: 0;
 border-style: solid;
 background: hsla(260, 100%, 100%, 0.2);
 box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.3), -1px -4px 0px rgba(0, 0, 0, 0.1);
 border-radius: 15px 0 0 0;
 border-color: transparent #B9DEBB transparent transparent;
 transition: border-width 0.2s ease-out;

}

.post:hover .folded-corner {

 border-width: 40px 40px 0 0;

}

.photo .folded-corner {

 background: hsla(260, 5%, 75%, 0.5);

}

[class*="col-"] {

 float: left;
 padding: 13px;

}

a.list-group-item:visited {

 color: white;

}

a:hover {

 background-color: transparent;

}

.list-group {

 margin-top: 100px;

}

.col-2.side {

 padding: 0;

}

.list-group-item {

 padding: .55rem .35rem;
 background-color: #272625;
 color: white;
 border: none;
 font-size: 19px;

}

a.list-group-item.list-group-item-action {

 background-color: transparent;

}

a.list-group-item.list-group-item-action:hover {

 color: #98CC9B;

}

a.list-group-item.list-group-item-action.active {

 background-color: transparent;
 color: #7ae26f;

}

.scrollspy-example h4 {

 font-size: 2rem;

}

img.contentimg {

 width: 100%;
 margin: 20px 0;

}

a.link {

 font-size: 30px;
 color: #4F7F52;

}

1. References {

 margin-top: 80px;

}