Skip to content

Commit

Permalink
Add captions pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
joelpittet committed Mar 28, 2023
1 parent 4e58c1a commit 5b053b8
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 6 deletions.
Binary file added public/img/leon.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion public/themes/custom/ubccs/css/ckeditor5.css
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,8 @@
}
.ck-content a + figcaption,
.ck-content img + figcaption {
color: #9e4225;
background: #9e4225;
color: #fff;
}
.ck-content blockquote + figcaption {
color: #555;
Expand Down
3 changes: 2 additions & 1 deletion public/themes/custom/ubccs/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,8 @@ figcaption p {

a + figcaption,
img + figcaption {
color: #9e4225;
background: #9e4225;
color: #fff;
}

blockquote + figcaption {
Expand Down
6 changes: 2 additions & 4 deletions public/themes/custom/ubccs/sass/base/_figure.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,8 @@ figcaption p {
// Image captions.
a + figcaption,
img + figcaption {
color: $burnt-sienna;
// Temporary fix for AC 6542-106.
//background: $burnt-sienna;
//color: #fff;
background: $burnt-sienna;
color: #fff;
}

// Blockquote captions.
Expand Down
71 changes: 71 additions & 0 deletions templates/patterns/captions.html.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dolore, dolorem itaque natus pariatur recusandae repellendus rerum sed tempora tenetur, veritatis vero voluptas. Aspernatur, dolorem et iusto minus nobis quidem?
<figure class="caption caption-img">
<img alt="Leon Sigal teaching" src="/img/leon.jpg" width="46.52%" height="4000">
<figcaption>Break text - Associate Professor Leon Sigal teaching CPSC 425</figcaption>
</figure>
<h3 id="electives-from-other-departments-1">Electives from other departments<a class="auto-anchor" title="Permalink to this item" href="#electives-from-other-departments-1">#</a></h3>

<p>When choosing electives,&nbsp;be careful to meet Faculty requirements for your&nbsp;chosen degree. In the Faculty of Science, these include but are not limited to Communications, Arts and Breadth requirements. There is also the requirement of having a sufficient number of upper-level (3rd or 4th year) elective courses. Similarly, the Faculty of Arts has requirements for graduating with a BA.&nbsp;<br>&nbsp;</p>

<figure class="caption caption-img align-left">
<img alt="Leon Sigal teaching" src="/img/leon.jpg" width="46.52%" height="4000">
<figcaption>Align left and wrap text - Associate Professor Leon Sigal teaching CPSC 425</figcaption>
</figure>
<figure class="caption caption-img align-left">
<img alt="Leon Sigal teaching" src="/img/leon.jpg" width="400px" height="4000">
<figcaption>Align left and wrap text - Associate Professor Leon Sigal teaching CPSC 425</figcaption>
</figure>
<h3 id="electives-from-other-departments-2">Electives from other departments<a class="auto-anchor" title="Permalink to this item" href="#electives-from-other-departments-2">#</a></h3>

<p>When choosing electives,&nbsp;be careful to meet Faculty requirements for your&nbsp;chosen degree. In the Faculty of Science, these include but are not limited to Communications, Arts and Breadth requirements. There is also the requirement of having a sufficient number of upper-level (3rd or 4th year) elective courses. Similarly, the Faculty of Arts has requirements for graduating with a BA.&nbsp;<br>&nbsp;Electives from other departments</p>
<p>When choosing electives,&nbsp;be careful to meet Faculty requirements for your&nbsp;chosen degree. In the Faculty of Science, these include but are not limited to Communications, Arts and Breadth requirements. There is also the requirement of having a sufficient number of upper-level (3rd or 4th year) elective courses. Similarly, the Faculty of Arts has requirements for graduating with a BA.&nbsp;<br>&nbsp;</p>

<figure class="caption caption-img align-center">
<img alt="Leon Sigal teaching" src="/img/leon.jpg" width="46.52%" height="4000">
<figcaption>Align center and break text - Associate Professor Leon Sigal teaching CPSC 425</figcaption>
</figure>
<h3 id="electives-from-other-departments-3">Electives from other departments<a class="auto-anchor" title="Permalink to this item" href="#electives-from-other-departments-3">#</a></h3>

<p>When choosing electives,&nbsp;be careful to meet Faculty requirements for your&nbsp;chosen degree. In the Faculty of Science, these include but are not limited to Communications, Arts and Breadth requirements. There is also the requirement of having a sufficient number of upper-level (3rd or 4th year) elective courses. Similarly, the Faculty of Arts has requirements for graduating with a BA.&nbsp;<br>&nbsp;</p>

<figure class="caption caption-img align-right">
<img alt="Leon Sigal teaching" src="/img/leon.jpg" width="46.52%" height="4000">
<figcaption>Align right and wrap text - Associate Professor Leon Sigal teaching CPSC 425</figcaption>
</figure>
<h3 id="electives-from-other-departments-4">Electives from other departments<a class="auto-anchor" title="Permalink to this item" href="#electives-from-other-departments-4">#</a></h3>

<p>When choosing electives,&nbsp;be careful to meet Faculty requirements for your&nbsp;chosen degree. In the Faculty of Science, these include but are not limited to Communications, Arts and Breadth requirements. There is also the requirement of having a sufficient number of upper-level (3rd or 4th year) elective courses. Similarly, the Faculty of Arts has requirements for graduating with a BA.&nbsp;<br><br>Please see the <a href="https://science.ubc.ca/students/requirements/faculty" target="_blank" rel="noopener nofollow">Faculty of Science</a>&nbsp;and <a href="http://www.calendar.ubc.ca/vancouver/index.cfm?tree=12,197,282,55" target="_blank" rel="noopener nofollow">Faculty of Arts</a> websites for details<strong>.</strong> Be sure to pay attention to promotion requirements, including the minimum and maximum number of credits.</p>
<p>Please see the <a href="https://science.ubc.ca/students/requirements/faculty" target="_blank" rel="noopener nofollow">Faculty of Science</a>&nbsp;and <a href="http://www.calendar.ubc.ca/vancouver/index.cfm?tree=12,197,282,55" target="_blank" rel="noopener nofollow">Faculty of Arts</a> websites for details<strong>.</strong> Be sure to pay attention to promotion requirements, including the minimum and maximum number of credits.
<img src="/img/leon.jpg" alt="Leon Sigal teaching" width="46.52%" height="4000"> In line (no caption) - Please see the <a href="https://science.ubc.ca/students/requirements/faculty" target="_blank" rel="noopener nofollow">Faculty of Science</a>&nbsp;and <a href="http://www.calendar.ubc.ca/vancouver/index.cfm?tree=12,197,282,55" target="_blank" rel="noopener nofollow">Faculty of Arts</a> websites for details<strong>.</strong> Be sure to pay attention to promotion requirements, including the minimum and maximum number of credits.</p>



<p>The <code>figure</code> element is used to annotate illustrations, diagrams, photos, code listings or provide a citation for an excerpted piece of content. The following examples show a section of pre-formatted text, a quotation and an image:</p>


<figure class="caption caption-img">
<img src="/img/leon.jpg" alt="" width="640">
<figcaption>
<p>No alignment of image, with supporting caption.</p>
</figcaption>
</figure>

<figure class="caption caption-img align-right">
<img src="/img/leon.jpg" alt="" width="200">
<figcaption>
<p>Right aligned image in figure with caption.</p>
</figcaption>
</figure>
<figure class="caption caption-img align-left">
<img src="/img/leon.jpg" alt="" width="200">
<figcaption>
<p>Left aligned image in figure with caption</p>
</figcaption>
</figure>
<figure class="caption caption-img align-center">
<img src="/img/leon.jpg" alt="" width="300">
<figcaption>
<p>Centered aligned image in figure with caption</p>
</figcaption>
</figure>

0 comments on commit 5b053b8

Please sign in to comment.