Fix accessibility.
This commit is contained in:
BoHung Chiu 2021-06-28 22:43:33 +08:00
parent b47e7dae90
commit 774030ce52
19 changed files with 132 additions and 63 deletions

View File

@ -214,7 +214,7 @@
height: 30px; height: 30px;
margin-top: -15px; margin-top: -15px;
margin-left: -15px; margin-left: -15px;
font-size: 30px; font-size: 1.875em;
} }
} }

View File

@ -49,7 +49,7 @@ $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default; $font-family-base: $font-family-sans-serif !default;
$font-size-base: 14px !default; $font-size-base: 0.875em !default;
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
@ -84,17 +84,17 @@ $icon-font-svg-id: "glyphicons_halflingsregular" !default;
// //
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$padding-base-vertical: 6px !default; $padding-base-vertical: 0.375em !default;
$padding-base-horizontal: 12px !default; $padding-base-horizontal: 0.75em !default;
$padding-large-vertical: 10px !default; $padding-large-vertical: 0.625em !default;
$padding-large-horizontal: 16px !default; $padding-large-horizontal: 1em !default;
$padding-small-vertical: 5px !default; $padding-small-vertical: 0.3125em !default;
$padding-small-horizontal: 10px !default; $padding-small-horizontal: 0.625em !default;
$padding-xs-vertical: 1px !default; $padding-xs-vertical: 0.0625em !default;
$padding-xs-horizontal: 5px !default; $padding-xs-horizontal: 0.3125em !default;
$line-height-large: 1.33 !default; $line-height-large: 1.33 !default;
$line-height-small: 1.5 !default; $line-height-small: 1.5 !default;
@ -330,7 +330,7 @@ $container-lg: $container-large-desktop !default;
//## //##
// Basics of a navbar // Basics of a navbar
$navbar-height: 50px !default; $navbar-height: 3.125em !default;
$navbar-margin-bottom: $line-height-computed !default; $navbar-margin-bottom: $line-height-computed !default;
$navbar-border-radius: $border-radius-base !default; $navbar-border-radius: $border-radius-base !default;
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;

View File

@ -11,7 +11,7 @@
cursor: pointer; cursor: pointer;
display: none; display: none;
color: $theme-white; color: $theme-white;
font-size: 12px; font-size: 0.75em;
border-radius: 2px; border-radius: 2px;
z-index: 1050; z-index: 1050;

View File

@ -195,7 +195,7 @@
.w-annc__title{ .w-annc__title{
color: #274255; color: #274255;
font-size: 12pt; font-size: 1em;
} }
} }

View File

@ -157,7 +157,7 @@
width: 100%; width: 100%;
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
color: #999999; color: #999999;
font-size: 10pt; font-size: 0.833em;
margin-right: 60px; margin-right: 60px;
margin-top: -6em; margin-top: -6em;
margin-bottom: 1em; margin-bottom: 1em;

View File

@ -714,7 +714,7 @@
} }
.s-annc__social .print-button { .s-annc__social .print-button {
color: #fff; color: #fff;
font-size: 11px; font-size: 0.6875em;
border-radius: 4px; border-radius: 4px;
padding: 2px 6px; padding: 2px 6px;
background-color: $theme-color-main; background-color: $theme-color-main;

View File

@ -78,7 +78,7 @@
} }
.i-archive__category-item { .i-archive__category-item {
font-size: 13px; font-size: 0.8125em;
display: inline; display: inline;
font-size: .8125rem; font-size: .8125rem;
} }
@ -98,7 +98,7 @@
} }
.i-archive__file-name { .i-archive__file-name {
font-size: 12px; font-size: 0.75em;
font-size: 0.75rem; font-size: 0.75rem;
} }
} }
@ -119,7 +119,7 @@
} }
.i-archive-files-item { .i-archive-files-item {
font-size: 13px; font-size: 0.8125em;
font-family: $main-font; font-family: $main-font;
} }
@ -167,7 +167,7 @@
padding: 10px 12px; padding: 10px 12px;
margin-right: 5px; margin-right: 5px;
border-radius: 4px; border-radius: 4px;
font-size: 15px; font-size: 0.9375em;
&:hover { &:hover {
background-color: darken($theme-color-main, 7%); background-color: darken($theme-color-main, 7%);
@ -192,7 +192,7 @@
} }
.i-archive__archive-title { .i-archive__archive-title {
font-size: 15px; font-size: 0.9375em;
} }
.tab-content { .tab-content {
@ -200,7 +200,7 @@
} }
.i-archive__file-name { .i-archive__file-name {
font-size: 13px; font-size: 0.8125em;
} }
.i-archive__file-wrap { .i-archive__file-wrap {

View File

@ -68,7 +68,7 @@
padding-bottom: 5px; padding-bottom: 5px;
} }
.i-archive__category-item { .i-archive__category-item {
font-size: 13px; font-size: 0.8125em;
display: inline-block; display: inline-block;
font-size: .8125rem; font-size: .8125rem;
margin-bottom: 5px; margin-bottom: 5px;
@ -85,7 +85,7 @@
border: 1px solid lighten($theme-gray-light, 10%); border: 1px solid lighten($theme-gray-light, 10%);
} }
.i-archive__file-name { .i-archive__file-name {
font-size: 12px; font-size: 0.75em;
font-size: 0.75rem; font-size: 0.75rem;
} }
.status-top { .status-top {
@ -118,7 +118,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.index-archives-files-item { .index-archives-files-item {
font-size: 13px; font-size: 0.8125em;
font-family: $main-font; font-family: $main-font;
} }
.index-archives-files-list { .index-archives-files-list {
@ -161,7 +161,7 @@
padding: 10px 12px; padding: 10px 12px;
margin-right: 5px; margin-right: 5px;
border-radius: 4px; border-radius: 4px;
font-size: 15px; font-size: 0.9375em;
&:hover { &:hover {
background-color: darken($theme-color-main, 7%); background-color: darken($theme-color-main, 7%);
} }
@ -184,7 +184,7 @@
} }
.i-archive__archive-title { .i-archive__archive-title {
font-size: 15px; font-size: 0.9375em;
} }
.tab-content { .tab-content {
@ -202,7 +202,7 @@
} }
.i-archive__file-name { .i-archive__file-name {
font-size: 13px; font-size: 0.8125em;
} }
.i-archive__file-wrap { .i-archive__file-wrap {

View File

@ -135,6 +135,50 @@
} }
} }
// Index 4
.index-member-4 {
.i-member-section {
max-width: 500px;
margin: auto;
}
.i-member-status-title {
@extend .unity-title;
}
.i-member-item-inner {
background: none;
border-radius: 0.25rem;
padding: 12px 1rem;
margin-bottom: 16px;
}
.i-member-profile-list {
@include list-reset;
}
.i-member-profile-item {
margin-bottom: 8px;
font-size: $font-13;
word-break: break-word;
}
.i-member-item:nth-child(6n+1) {
clear: both;
}
// RWD
@media screen and (min-width: $screen-sm) {
.i-member-section {
max-width: 100%;
}
.i-member-item-inner {
background: $theme-gray-lighter;
}
}
}
// Show page // Show page
.show-member { .show-member {
padding-top: 1em; padding-top: 1em;

View File

@ -187,7 +187,7 @@
display: block; display: block;
padding: 17px 25px; padding: 17px 25px;
font-family: $main-font; font-family: $main-font;
font-size: 15px; font-size: 0.9375em;
} }
&:hover { &:hover {
background-color: darken(#6E5140, 10%); background-color: darken(#6E5140, 10%);
@ -254,7 +254,7 @@
display: block; display: block;
padding: 17px 25px; padding: 17px 25px;
font-family: $main-font; font-family: $main-font;
font-size: 15px; font-size: 0.9375em;
} }
&:hover { &:hover {
background-color: darken(#6E5140, 10%); background-color: darken(#6E5140, 10%);

View File

@ -6,7 +6,7 @@ body {
color: #000; color: #000;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
line-height: 1.3; line-height: 1.3;
font-size: 12pt; font-size: 1em;
} }
blockquote, blockquote,

View File

@ -5,7 +5,7 @@ html {
} }
body { body {
font-family: Arial, Helvetica, sans-serif, ; font-family: Arial, Helvetica, sans-serif, ;
font-size: 13px; font-size: 0.8125em;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: url(/assets/headerbg.png) center top repeat-x; background: url(/assets/headerbg.png) center top repeat-x;
@ -128,7 +128,7 @@ a:hover {
p {} p {}
h1, .h1 { h1, .h1 {
font-size: 16px; font-size: 1em;
font-weight: bold; font-weight: bold;
color: #000; color: #000;
} }
@ -193,7 +193,7 @@ acronym {
padding-left: 14px; padding-left: 14px;
background: url(/assets/ar2.png) left center no-repeat; background: url(/assets/ar2.png) left center no-repeat;
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 0.8125em;
} }
#submenu li a:hover {color: #666;} #submenu li a:hover {color: #666;}
#submenu li a span { white-space: nowrap; } #submenu li a span { white-space: nowrap; }
@ -261,7 +261,7 @@ acronym {
} }
#topmenu a { #topmenu a {
display: block; display: block;
font-size: 15px; font-size: 0.9375em;
font-weight: bold; font-weight: bold;
color: #3F4450; color: #3F4450;
padding-right: 14px; padding-right: 14px;
@ -291,7 +291,7 @@ acronym {
margin-top: 0; margin-top: 0;
} }
#menu1 li a { #menu1 li a {
font-size: 15px; font-size: 0.9375em;
font-weight: bold; font-weight: bold;
display: block; display: block;
padding: 0 0 0 14px; padding: 0 0 0 14px;
@ -316,7 +316,7 @@ acronym {
padding: 8px 8px 8px 50px; padding: 8px 8px 8px 50px;
background: #948C7C url(/assets/titlebg3.png) 16px center no-repeat; background: #948C7C url(/assets/titlebg3.png) 16px center no-repeat;
color: #fff; color: #fff;
font-size: 21px; font-size: 1.3125em;
line-height: 1; line-height: 1;
} }
#boxEvent ul { #boxEvent ul {
@ -341,7 +341,7 @@ acronym {
} }
#boxEvent .date { #boxEvent .date {
display: block; display: block;
font-size: 11px; font-size: 0.6875em;
font-weight: bold; font-weight: bold;
color: #2C2923; color: #2C2923;
padding-bottom: 6px; padding-bottom: 6px;
@ -352,7 +352,7 @@ acronym {
overflow: hidden; overflow: hidden;
} }
#boxEvent .note a { #boxEvent .note a {
font-size: 13px; font-size: 0.8125em;
display: block; display: block;
padding-left: 26px; padding-left: 26px;
height: 20px; height: 20px;
@ -436,7 +436,7 @@ fieldset {
border: solid 1px #ddd; border: solid 1px #ddd;
margin: 20px 0; margin: 20px 0;
} }
legend { padding: 0 10px; font-size: 13px; font-weight: bold; } legend { padding: 0 10px; font-size: 0.8125em; font-weight: bold; }
input {} input {}
@ -456,7 +456,7 @@ textarea {
overflow: hidden; overflow: hidden;
text-align : right; text-align : right;
color : #ddd; color : #ddd;
font-size: 12px; font-size: 0.75em;
} }
.PageList { display: inline-block; margin-left: 20px; } .PageList { display: inline-block; margin-left: 20px; }
@ -500,7 +500,7 @@ textarea {
text-align : left; text-align : left;
font-weight : bold; font-weight : bold;
padding : 8px 0 8px 24px; padding : 8px 0 8px 24px;
font-size: 15px; font-size: 0.9375em;
background : url(/assets/caption.gif) no-repeat 0 50%; background : url(/assets/caption.gif) no-repeat 0 50%;
} }
.ts_styled input { } .ts_styled input { }
@ -538,7 +538,7 @@ textarea {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
padding: 8px 0 8px 24px; padding: 8px 0 8px 24px;
font-size: 15px; font-size: 0.9375em;
background: url(/assets/caption.gif) no-repeat 0 50%; background: url(/assets/caption.gif) no-repeat 0 50%;
} }
@ -569,7 +569,7 @@ textarea {
text-align : left; text-align : left;
font-weight : bold; font-weight : bold;
padding : 8px 0 8px 24px; padding : 8px 0 8px 24px;
font-size: 15px; font-size: 0.9375em;
background : url(/assets/caption.gif) no-repeat 0 50%; background : url(/assets/caption.gif) no-repeat 0 50%;
} }
.ts_rowsonly caption span { .ts_rowsonly caption span {
@ -589,7 +589,7 @@ textarea {
color: #fff; color: #fff;
line-height: 30px; line-height: 30px;
text-align: right; text-align: right;
font-size: 12px; font-size: 0.75em;
padding: 0 16px; padding: 0 16px;
} }
#corner a { #corner a {
@ -623,7 +623,7 @@ textarea {
#footer_logo { display: none; } #footer_logo { display: none; }
#footer_address { #footer_address {
margin-bottom: 18px; margin-bottom: 18px;
font-size: 11px; font-size: 0.6875em;
line-height: 1.5em; line-height: 1.5em;
} }
#footer_address a {} #footer_address a {}
@ -643,7 +643,7 @@ textarea {
height: 20px; height: 20px;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 1.125em;
line-height: 1; line-height: 1;
padding: 1px 0; padding: 1px 0;
font-family: "微軟正黑體"; font-family: "微軟正黑體";
@ -689,7 +689,7 @@ a#accesskey_extralist { display:none; }
letter-spacing:0; letter-spacing:0;
} }
#page_login #loginstyle #login_id, #page_login #loginstyle #login_pw { #page_login #loginstyle #login_id, #page_login #loginstyle #login_pw {
font-size:12px; font-size:0.75em;
color:#000; color:#000;
width:130px; width:130px;
border:1px solid #ccc; border:1px solid #ccc;

View File

@ -22,7 +22,7 @@
} }
.newsdata h2 { .newsdata h2 {
background-image: url(/assets/titlebg1.png); background-image: url(/assets/titlebg1.png);
font-size: 21px; font-size: 1.3125em;
line-height: 1; line-height: 1;
color: #333; color: #333;
} }
@ -34,13 +34,13 @@
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFUlEQVQIW2M8c+bMfwYgMDExYQTRADU6BAJX0q/TAAAAAElFTkSuQmCC') left bottom repeat-x; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFUlEQVQIW2M8c+bMfwYgMDExYQTRADU6BAJX0q/TAAAAAElFTkSuQmCC') left bottom repeat-x;
} }
.newsdata li a { .newsdata li a {
font-size: 13px; font-size: 0.8125em;
color: #666; color: #666;
line-height: 20px; line-height: 20px;
} }
.newsdata li .date { .newsdata li .date {
color: #999; color: #999;
font-size: 12px; font-size: 0.75em;
font-weight: bold; font-weight: bold;
display: block; display: block;
margin-bottom: 4px; margin-bottom: 4px;
@ -54,7 +54,7 @@
display: inline-block; display: inline-block;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
font-size: 15px; font-size: 0.9375em;
font-weight: bold; font-weight: bold;
color: #666; color: #666;
} }

View File

@ -70,7 +70,7 @@
padding: 5px 10px; padding: 5px 10px;
background: $theme-color-main; background: $theme-color-main;
color:#fff; color:#fff;
font-size: 18px; font-size: 1.125em;
transition:.3s; transition:.3s;
&:hover{ &:hover{
background: $theme-color-second; background: $theme-color-second;

View File

@ -1,11 +1,4 @@
<div id="fb-root"></div> <div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

View File

@ -23,6 +23,14 @@
"en" : "3. Two Columns (category title, photo and customized profile data)" "en" : "3. Two Columns (category title, photo and customized profile data)"
}, },
"thumbnail" : "member_index3_thumb.png" "thumbnail" : "member_index3_thumb.png"
},
{
"filename" : "member_index4",
"name" : {
"zh_tw" : "4. 精簡名片式 ( 類別標題, 個人資料等自訂欄位 )",
"en" : "4. Simple Two Columns (category title, customized profile data)"
},
"thumbnail" : "thumb.png"
} }
] ]
} }

View File

@ -14,8 +14,8 @@
<div class="i-member-profile-data-wrap col-sm-9"> <div class="i-member-profile-data-wrap col-sm-9">
<ul class="i-member-profile-list" data-list="profile_data" data-level="3"> <ul class="i-member-profile-list" data-list="profile_data" data-level="3">
<li class="i-member-profile-item"> <li class="i-member-profile-item">
<span class="i-member-title {{title_class}}">{{title}}</span> <span class="i-member-title {{title_class}}"><strong>{{title}} : </strong></span>
<span class="i-member-value {{value_class}}">: {{value}}</span> <span class="i-member-value {{value_class}}">{{value}}</span>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -14,8 +14,8 @@
<div class="i-member-profile-data-wrap col-sm-8"> <div class="i-member-profile-data-wrap col-sm-8">
<ul class="i-member-profile-list" data-list="profile_data" data-level="3"> <ul class="i-member-profile-list" data-list="profile_data" data-level="3">
<li class="i-member-profile-item"> <li class="i-member-profile-item">
<span class="i-member-title {{title_class}}">{{title}}</span> <span class="i-member-title {{title_class}}"><strong>{{title}} : </strong></span>
<span class="i-member-value {{value_class}}">: {{value}}</span> <span class="i-member-value {{value_class}}">{{value}}</span>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -0,0 +1,24 @@
<div class="i-member index-member-4">
<div data-list="roles" data-level="0">
<div class="i-member-section">
<div data-level="1" data-list="status-list">
<h3 class="i-member-status-title">{{status-title}}</h3>
<div class="i-member-list row" data-level="2" data-list="members">
<div class="i-member-item col-md-2">
<div class="i-member-item-inner clearfix">
<div class="i-member-profile-data-wrap">
<ul class="i-member-profile-list" data-list="profile_data" data-level="3">
<li class="i-member-profile-item">
<span class="i-member-title {{title_class}}"><strong>{{title}} : </strong></span>
<span class="i-member-value {{value_class}}">{{value}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{pagination_goes_here}}