Tips for incorporating multiple logo sizes in GitHub README and pkgdown homepage

Currently, I am in the process of developing an R package and utilizing pkgdown for its website. My objective is to have the package logo displayed in a smaller size on the GitHub README but in a larger size on the homepage of the website, similar to how it's done with the data.table package (GitHub, website).

Despite experimenting with various CSS methods, I haven't been able to achieve this effect. Can you advise me on the best approach to make this happen?

https://i.sstatic.net/AJ3Gz168.png

https://i.sstatic.net/jzvTRRFd.png

cssrgithubpkgdown

Answer №1

If you're using pkgdown, you have the option to set a custom index.md file as your home page instead of relying on the default README.md that GitHub typically shows. I followed the steps outlined in this guide, and now my repository for the R package includes a readme, an index.Rmd, and an index.md in a directory named pkgdown with varying markdown formatting.

Here is some markdown content
# Example header <img src="man/figures/logo.png" width = 200 alt="logo" align="right"/>
More markdown content

Answer №2

Even though you mentioned attempting CSS, this solution should be effective if you have tailor-made CSS for the rmarkdown document:

.main img {
    max-width: 36%; /* Adjust according to your preference */
    height: auto; 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating shadow effects along the right border of alternating table cells: a step-by-step guide

How can I set a proper shadow border for alternating td elements in a table? I've been experimenting with the code below. While the shadow effects work, they are getting cut off at each td junction. Can anyone provide assistance? Here is my table: ...

htmlstylesshadowcss

Bootstrap's innovative design for a data grid

I'm currently working on designing a Grid using bootstrap 3. https://i.sstatic.net/DZzcq.png My tools include html5, css, and bootstrap integrated with React.js. The main feature of my project is a data grid (specifically, a Fixed Data Table). ...

javascriptcsshtmltwitter-bootstrapreactjs

Can CSS be used to eliminate shadows from a particular image?

Is it possible to eliminate the shadow from a specific image that is displayed multiple times on various pages of a website? This particular image should not have any shadow. Link to Image The image can be found on pages like this one: Page Link Below ...

css

Using multiple box-shadow declarations in Sass

I'm struggling to create a Sass mixin for the box-shadow property. Here's a snippet of the existing code: #someDiv { -moz-box-shadow:0 0 5px rgba(0,0,0,.25); } #someOtherDiv { -moz-box-shadow:0 0 5px rgba(0,0,0,.25) inset; } #theLastDiv { ...

csssasscompass-sass

Maintain the correlation between x and y data points in R visualizations

I've recently started working with R and I'm experimenting with creating line graphs to track the growth of bacteria over time. Although I can successfully create these graphs, I find that they don't meet my expectations. The issue lies in t ...

rplotaxis-labels

Using the keyboard to access the close button is not an option for me

Despite adding tabindex=0 to the close image button with <img src= "close img link" tabindex="0" alt= "close" title="close" aria-labelledby="close" />, I am unable to use the keyboard to access the bu ...

javascriptcssaccessibility

Button with CSS Sprite

These Sprite buttons are making me lose my mind. I'm so close to getting them to work, but not quite there yet. I've been playing around with this really simple sprite image: If you want to see the jsfiddle project, it's available here, bu ...

htmlcsscss-sprites

loops for the deletion of row identifiers

I am working with a set of data frames in a specific format: Q1_output Q2_output continuing up to: QN_output My goal is to remove the row names for all data frames in this series. Is there a way to utilize a for loop to achieve this? rownames(Q1_outp ...

rloopsfor-loop

iPhone: Fixed position div disappearing

Currently, I am working on creating a mobile menu for my Joomla 3 site located at . The menu is functioning correctly on desktops, however, when attempting to view it on my iPhone, the menu slides in but remains invisible. Despite this, I can still tap on ...

javascripthtmlioscssmobile-safari

Fonts appear altered on a Windows computer

Working on my new website watr.io, I've noticed that the font appears differently on Windows versus Mac. The one displayed on Mac is the desired outcome, but I can't seem to figure out what's causing the discrepancy. I've been troublesh ...

htmlcssmacostwitter-bootstrap

Creating limits for quadratic programming

I am currently working on setting up a basic OLS model in R with some constraints on the coefficients. The code I have included below is functional, but I am looking to make a slight adjustment to the constraints. The current model is represented by: y = ...

rconstraintsquadratic-programming

Should the text underneath the image be placed above the rest of the images?

In the process of developing my game, I encountered a challenge where text needs to be dragged under specific images. To achieve this, I envision creating tabs below the images for the text to be dragged onto. My initial approach involved wrapping each im ...

htmlcssimagetabs

Are there any reliable sources for a complete list of browser CSS properties?

Is there a way to easily access a comprehensive list of CSS properties supported by specific browsers, particularly IE8? Any suggestions on where I can find this information? ...

htmlinternet-explorercssbrowser

Isolate the CSS formatting from the template within an AngularJS directive

Here is an angular directive I created for a template. I wanted to keep the css styling separate from the template so that when I use the custom tag in my html file like <my-box></my-box> or <my-box></my-box>, I can configure the cs ...

javascripthtmlcssangularjsangularjs-directive

Cannot locate the Django bootstrap files

Although I have set up Django with bootstrap by following tutorials, I am facing an issue where Django is unable to locate the static files even when I am replicating the steps shown in the tutorials. The structure of my Project is as follows: webshop ...

pythoncssdjangotwitter-bootstrap

Is there a way to rectify the comparison data displayed on hover for a plotly bar chart featuring stacked percentages?

Trying to create a chart that displays percentages of one group by another, but struggling with tooltips. The hovermode is set to y, which is what I want for "compare data on hover." However, when switching to closest data on hover, it works fine. But swit ...

rplotlystacked-bar-chart

When the width of a tr tag is reduced, an <select> and <span> tag will split into two lines

I am working on creating a table that includes a field for each row along with a symbol to indicate mandatory fields. As the screen width decreases, I want the content to break into a new line at a specific point. Desired behavior: The field width should ...

htmlcssbootstrap-4

Employ ... to adjust a nested list inside a functional block

Currently, I'm working in the R programming language and seeking a solution to transform function parameters provided in ... into values from a predefined list inside a closure function. The ideal scenario would involve achieving something like the f ...

rfunctional-programmingnested-lists

Safari does not support the use of nth-child

My CSS code is functioning properly in Firefox and Chrome but not in Safari (5.1). Even though I have confirmed that Safari supports nth-child, it still does not work. Can someone please help me identify what I'm doing wrong? CSS: option:nth-child ...

htmlcss

My mobile browsing experience is being hindered by a high CLS score due to the image continuously loading late

This is the webpage I am experiencing problems with, and here is the Google Pagespeed report for Mobile. Despite trying to stop lazy loading and preloading the image, there is always a delay in loading. How can this issue be resolved? ...

cssoptimizationresponsivepagespeed