Commit c53b2980 authored by Zach Krall's avatar Zach Krall

correcting h3 anchor tag color

parent ebc6457f
Pipeline #107164234 passed with stages
in 1 minute and 24 seconds
......@@ -2,107 +2,119 @@
<div class="content">
<h1>Tools for Live Coding</h1>
<h2>Made in NY</h2>
<p class="pad-top">
</p>
<p class="pad-top"></p>
<div v-for="tool in allTools">
<div v-if="tool.frontmatter.name" class="tool-card">
<div class="image" v-bind:style="{ backgroundImage: 'url(' + tool.frontmatter.image + ')' }"></div>
<div>
<div>
<h3>{{ tool.frontmatter.name }} <a class="main-link" v-bind:href="tool.frontmatter.link">Website</a></h3>
</div>
<Content v-bind:page-key="tool.key"/>
</div>
<div v-if="tool.frontmatter.name" class="tool-card">
<div
class="image"
v-bind:style="{
backgroundImage: 'url(' + tool.frontmatter.image + ')'
}"
></div>
<div>
<div>
<h3>
{{ tool.frontmatter.name }}
<a class="main-link" v-bind:href="tool.frontmatter.link"
>Website</a
>
</h3>
</div>
<Content v-bind:page-key="tool.key" />
</div>
</div>
</div>
<Content/>
<Content />
</div>
</template>
<script>
export default {
name: 'ToolList',
name: "ToolList",
computed: {
allTools () {
return this.$site.pages.filter(page => page.path.includes('/tool/'));
allTools() {
return this.$site.pages.filter(page => page.path.includes("/tool/"));
}
}
}
};
</script>
<style>
.tool-card{
display:flex;
margin-bottom:2rem;
}
.tool-card h3{
display:inline;
}
.tool-card .image{
width:200px;
height:200px;
border-radius: 50%;
background-size:cover;
background-position: center;
margin-bottom: 1rem;
.tool-card {
display: flex;
margin-bottom: 2rem;
}
.tool-card h3 {
display: inline;
}
.tool-card .image {
width: 200px;
height: 200px;
border-radius: 50%;
background-size: cover;
background-position: center;
margin-bottom: 1rem;
/* Back up image for broken links */
background-image:url('/media/image404.png');
/* Back up image for broken links */
background-image: url("/media/image404.png");
flex-shrink:0;
transform: translate(0px, -0.2rem);
}
@media screen and (max-width: 900px){
.tool-card .image{
width: 100px;
height: 100px;
}
}
.tool-card > div:nth-child(2){
padding-left: 2rem;
}
flex-shrink: 0;
transform: translate(0px, -0.2rem);
}
@media screen and (max-width: 900px) {
.tool-card .image {
width: 100px;
height: 100px;
}
}
.tool-card > div:nth-child(2) {
padding-left: 2rem;
}
.pad-top{
padding-top: 2rem;
}
.tool-card .content__default{
color: var(--gray);
padding:1rem 0;
}
.pad-top {
padding-top: 2rem;
}
.tool-card .content__default {
color: var(--gray);
padding: 1rem 0;
}
h2 a, h3 a{
display:inline-block;
font-size: 1rem;
font-weight: normal;
border:1px solid var(--color);
margin-top: -0.25em;
border-radius: 20px;
padding: 0.2rem 0.7rem;
margin-left: 0.25rem;
margin-bottom:0;
vertical-align: middle;
}
h2 a.header-anchor, h3 a.header-anchor{
display:none;
}
h2 a,
h3 a {
display: inline-block;
font-size: 1rem;
font-weight: normal;
border: 1px solid var(--color);
margin-top: -0.25em;
border-radius: 20px;
padding: 0.2rem 0.7rem;
margin-left: 0.25rem;
margin-bottom: 0;
vertical-align: middle;
color: var(--color);
}
h2 a.header-anchor,
h3 a.header-anchor {
display: none;
}
.content__default{
color: var(--gray);
}
.content__default p{
padding-top:0.5rem;
padding-bottom: 1.5rem;
}
.content__default p a{
color: var(--text);
}
.content__default p a:hover{
color: var(--color);
}
.content__default h1,
.content__default h2,
.content__default h3{
color:var(--text);
}
</style>
\ No newline at end of file
.content__default {
color: var(--gray);
}
.content__default p {
padding-top: 0.5rem;
padding-bottom: 1.5rem;
}
.content__default p a {
color: var(--text);
}
.content__default p a:hover {
color: var(--color);
}
.content__default h1,
.content__default h2,
.content__default h3 {
color: var(--text);
}
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment