Skip to content

Commit

Permalink
init carousel w css cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
mnyrop committed Aug 1, 2021
1 parent 5045e75 commit b70f5cf
Show file tree
Hide file tree
Showing 160 changed files with 37,204 additions and 414 deletions.
13 changes: 13 additions & 0 deletions _includes/blocks/carousel.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="carousel-container">
{% for item in include.items %}
<div class="carousel-item">
<a href="{{ item.link.url }}">
<div class="carousel-resource">
<img aria-label="{{ item.link.label }}" src="{{ item.resource.url | absolute_url }}">
</div>
</a>
<p class="caption">{{ item.resource.caption }}</p>
{% include misc/button.html button_link=item.link.url button_label=item.link.label %}
</div>
{% endfor %}
</div>
4 changes: 4 additions & 0 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,9 @@
{% endif %}
</section>
{%- include footer.html -%}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://kit.fontawesome.com/2c3e99340f.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ 'assets/js/carouselInit.js' | absolute_url }}"></script>
</body>
</html>
163 changes: 163 additions & 0 deletions _sass/iiifc-theme/api-spec.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
.api-sidebar-container {
background-color: $light-blue;
padding-left: 3.5rem;
padding-right: 0;
margin-bottom: 0.75rem;
.menu {
padding: 3rem 3.5rem 2.5rem 0;
}
}

#toc-menu {
.menu-list {
font-family: $family-sans-serif;
a {
color: $greyish-brown;
}
}
}

.toc-sidebar {
font-family: $family-serif;
font-weight: bold;

li {
font-size: 1rem;
}
a:hover {
color: $dark-blue;
}
a:active {
border-left: $dark-blue;
}
}

.copy-button {
display: grid;
grid-auto-flow: column;
align-items: center;
grid-column-gap: 4px;
margin: 1em 1em 0 0;
cursor: pointer;

&::before {
content: "Copy";
}

&::after {
content: "📋";
display: block;
}

// This class will be toggled via JavaScript
&.copied {
&::before {
content: "Copied!";
}

&::after {
content: "✔️";
}
}
}

.api-content {
padding: 3.5rem;
max-width: 100% !important;
margin: unset !important;
line-height: 2;
p,
li,
.code-header,
.highlight {
max-width: $content-max-width;
}
table {
border-collapse: collapse;
display: block;
max-width: -moz-fit-content;
max-width: fit-content;
overflow-x: auto;
td {
border: solid 1px $black;
border-style: inset;
background-color: $white;
}
thead {
background-color: $light-bluer;
color: $dark-blue;
font-size: 1rem;
font-family: $family-serif;
th {
border: solid 1px $black;
border-style: inset;
}
}
tbody tr:last-child td,
.content table tbody tr:last-child th {
border-bottom-width: 1px;
}
}
.rfc {
color: $red;
font-variant: small-caps;
font-style: normal;
font-size: 1.2em;
line-height: 0.8333;
}
.warning {
border-left: 4px solid #E05252;
background: #fbe9e9;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 24px;
}

.alert {
border-left: 4px solid #E0CB52;
background: #FCFAEE;
padding-top: 5px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 24px;
}
}

code.language-plaintext {
padding: 0.2em 0.15em;
font-weight: 400;
background-color: $grey;
border: 1px solid #dddddd;
border-radius: 4px;
font-size: 0.8em;
line-height: 2;
color: $black;
font-family: "Courier Prime", monospace;
}

pre.highlight {
background-color: $black;
color: $white;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
margin: 0 0 1em 0;

white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */

code {
font-family: "Courier Prime", monospace;
}
}

.code-header {
display: flex;
justify-content: flex-end;
background-color: $black;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
Loading

0 comments on commit b70f5cf

Please sign in to comment.