whentimeslows/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve styling for callouts

Browse Source 
Update styles for callouts (warning, caution, note); also avoid applying
callout-specific styles to general block quotes.
This commit is contained in:
Tim Bannister
2020-08-08 15:41:20 +01:00
parent fc3a6220bf
commit 4febf7471d
7 changed files with 30 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/_custom.scss
+25 -13
View File
@@ -268,22 +268,34 @@ main {
// blockquotes and callouts // blockquotes and callouts
blockquote { .td-content, body {
padding: 0.4rem 0.4rem 0.4rem 1rem !important; blockquote.callout {
} padding: 0.4rem 0.4rem 0.4rem 1rem;
border: 1px solid #eee;
border-left-width: 0.5em;
background: #fff;
color: #000;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
blockquote.callout {
border-radius: calc(1em/3);
}
.callout.caution {
border-left-color: #f0ad4e;
}
// callouts are contained in static CSS as well. these require override. .callout.note {
border-left-color: #428bca;
}
.caution { .callout.warning {
border-left-color: #f0ad4e !important; border-left-color: #d9534f;
} }
.note { h1:first-of-type + blockquote.callout {
border-left-color: #428bca !important; margin-top: 1.5em;
} }
.warning {
border-left-color: #d9534f !important;
} }
.deprecation-warning { .deprecation-warning {
layouts/partials/css.html
+1 -1
View File
@@ -16,7 +16,7 @@
{{- end }} {{- end }}
<link rel="stylesheet" href="{{ "css/jquery-ui.min.css" | relURL }}"> <link rel="stylesheet" href="{{ "css/jquery-ui.min.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/callouts.css" | relURL }}"> <link rel="stylesheet" href="{{ "css/feature-states.css" | relURL }}">
<link rel="stylesheet" href="{{ "css/custom-jekyll/tags.css" | relURL }}"> <link rel="stylesheet" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
{{- if .Site.Params.announcement }} {{- if .Site.Params.announcement }}
<link rel="stylesheet" href="{{ "css/announcement.css" | relURL }}"> <link rel="stylesheet" href="{{ "css/announcement.css" | relURL }}">
layouts/shortcodes/caution.html
+1 -1
View File
@@ -1,3 +1,3 @@
<blockquote class="caution"> <blockquote class="caution callout">
<div><strong>{{ T "caution" }}</strong> {{ trim .Inner " \n" | markdownify }}</div> <div><strong>{{ T "caution" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
</blockquote> </blockquote>
layouts/shortcodes/deprecationfilewarning.html
+1 -1
View File
@@ -1,3 +1,3 @@
<blockquote class="deprecation_file_warning"> <blockquote class="deprecation_file_warning callout">
<div><h4>{{ T "deprecation_file_warning" }}</h4> {{ .Inner | markdownify }}</div> <div><h4>{{ T "deprecation_file_warning" }}</h4> {{ .Inner | markdownify }}</div>
</blockquote> </blockquote>
layouts/shortcodes/note.html
+1 -1
View File
@@ -1,3 +1,3 @@
<blockquote class="note"> <blockquote class="note callout">
<div><strong>{{ T "note" }}</strong> {{ trim .Inner " \n" | markdownify }}</div> <div><strong>{{ T "note" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
</blockquote> </blockquote>
layouts/shortcodes/warning.html
+1 -1
View File
@@ -1,3 +1,3 @@
<blockquote class="warning"> <blockquote class="warning callout">
<div><strong>{{ T "warning" }}</strong> {{ trim .Inner " \n" | markdownify }}</div> <div><strong>{{ T "warning" }}</strong> {{ trim .Inner " \n" | markdownify }}</div>
</blockquote> </blockquote>
static/css/callouts.css → static/css/feature-states.css
-21
View File
@@ -1,24 +1,3 @@
/* Callouts */
.caution, .note, .warning {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
}
.caution {
border-left-color: #f0ad4e;
}
.note {
border-left-color: #428bca;
}
.warning {
border-left-color: #d9534f;
}
/* Feature States */ /* Feature States */
.beta, .stable, .alpha, .deprecated { .beta, .stable, .alpha, .deprecated {