The design and content of the website are hosted by a software called 'Notion', which is essentially a note-taking software with really great database features.
See this page for a quick run-down of how to use Notion and what it's all about:
Quick guide to using NotionWhere the website is hosted
A great feature of Notion is that pages can be shared on the internet for open access. The downside of this is you are confined to use the Notion URL and the design options are limited by what you can create in Notion.
What we have done is created our website in Notion, then hosted it using Super which turns a Notion page into a website with a custom domain and customizable HTML.
The entire website is hosted on the custom subdomain https://classroom-physicists.physics.mcgill.ca/ as a part of the McGill Physics webpage. It can be accessed from the Physics webpage under the 'Equity, Diversity, and Inclusion' tab as 'Classroom Physicists'.
Making changes to the website in Notion
In order to make changes to the website content, you simply update the Notion page itself. The changes will propagate to the live website in a few minutes, and can be sped up by opening up the Super website, visiting the website dashboard, and refreshing (depending on the scale of the changes, this could take a while).
Changes are best made directly in the Notion desktop application. To access the website page with full editing rights, log into the Notion account associated with classroomphysicists@physics.mcgill.ca, and the page that is linked with the website is found there.
It is possible to share the Notion page with another person so they can edit it as well (here is a tutorial on how to give guest access to someone else), but this hopefully won't be necessary.
To see how to contribute to the website, visit the page below:
Adding contributions to the websiteUsing Super
Customizing with code
An excellent feature of Super is the ability to add in HTML and CSS on top of the Notion page, in order to add custom features such as the navigation bar, different font sizes, overriding default styles with CSS. This can be added to the entire website, or individual pages. Some basic documentation for adding custom code to the page is below:
And a really helpful resource for learning the basics of CSS is here:
You do not need to add any code to update the website with new slides, or even to reformat the website. Adding code is for very specific additions that Notion doesn't offer. Currently there is a custom navigation bar added to the website not provided by Notion, made with the following code segments:
For the <body>:
<nav class="nav">
<a class="nav-link" href="/">Home </a> /
<a class="nav-link" href="https://classroom-physicists.super.site/about-us"> About us</a> /
<a class="nav-link" href="https://classroom-physicists.super.site/search-by-physics-topic">Search by Physics topic</a>/
<a class="nav-link" href="https://classroom-physicists.super.site/search-by-mcgill-course">Search by McGill Course</a> /
<a class="nav-link" href="https://classroom-physicists.super.site/recommend-a-physicist">Recommend a Physicist</a>
</nav>For the <style>:
.nav {
background: #F3CFD9;
backdrop-filter: blur(20px);
color: #000000 !important;
align-items: center;
padding-left: 20px;
position: fixed;
z-index: 9999;
display: inline-flex;
justify-content: center;
height: 64px;
width: 100%;
}
.nav-link {
transition: all .3s ease-in-out;
justify-content: center;
align-items: center;
padding: 0 20px 4px;
font-size: 18px;
display: flex;
height: 100%;
color: #000000;
}
.nav-link:hover {
color: #CA49C0 !important;
}
.notion-text__content{
font-size: 17px;
}
.notion-page__title{
font-size: 17px;
}
.notion-file{
font-size: 17px;
}These two sections of code define and customize a navigation bar, and adjust some font sizes in the page.
I was wanting to change the font size of the description, which I was able to do by overwriting the following section in the 'add custom code' section in Super on the Search by Physics Topic page:
.notion-header__description{
font-size: 17px;
}in the <style> section.
You can also replace .notion-header__description part of this code with a data block id if there is no unique attribute name, for example:
You can change the alignment of this specific text with the following code using it's ID:
#block-9f0c175fd95c4449bbeb11f15302a9ce{
text-align: center;
}This can be done with any element on the website.
Customizing pages
In the 'Pages' tab in Super, it's possible to password protect and add custom code to individual subpages of the website. For example, this documentation page is password protected.
Visit the Super website below to look into the in-detail documentation. (Note: this is not necessary to operate or update the website on a basic level)
