Giter Site home page Giter Site logo

bluemoondragon07 / obsidian-big-and-bold Goto Github PK

View Code? Open in Web Editor NEW
36.0 2.0 3.0 54.23 MB

A bold theme designed in the style of a WYSIWYG Editor, created for maximum focus and a modern look.

License: Creative Commons Zero v1.0 Universal

obsidian-md obsidian-theme obsidian-css

obsidian-big-and-bold's Introduction

Big and Bold was designed to imitate WYSIWYG editors and maximize focus. Drawing inspiration from several apps including Microsoft Word, Anytype, and Notion, this theme was built for long periods of uninterrupted, highly concentrated writing.

What You See is What You Get.

My first goal for Big and Bold was to make Obsidian look as not-Obsidian as possible. I probably could have pushed it much further, but the main way I decided to execute this was by imitating a WYSIWYG editor.

Paragraphs in live preview and reading mode are spaced in exactly the same way. Whether you press Enter once or twice, a properly spaced paragraph, identical to all other paragraphs, will be created (although you still need to press Enter twice to indent).

No inconsistencies, no surprises with paragraphs. Just keep writing and focus on writing.

An Expansive Space

When you are using Big and Bold, the note pane takes up as much space on the screen as possible. Distractions are minimized and the note itself is made the focal point. No more messing around with plug-ins in the sidebar while you're supposed to be writing that paper. No more getting lost in your graph view while you're meant to be taking Science notes. And hopefully, no more opening the developer tools and staying up 'till 3:00 AM making a theme when you're supposed to be speedrunning your math assignments, because you'll be so deeply engulfed on what really matters--the note in front of you.

A Unified Experience

Almost every element in Obsidian has been styled for you. Even Dataview tables, Page Gallery cards, and Database Folder tables are reworked with care to give you the best, most unified Obsidian experience.

Other Features

Float Images

Use the alt right or left to float an image into the corresponding position.

Example

![right](sky.png)
![left](forest.png)

Drop Caps

[!quote] and [!cite] callouts automatically contain them, but drop caps can also be inserted anywhere on the page using <div> elements.

# Chapter 1
  
<div class=drop-cap> It had just rained in the town of E-Ville.
  The sidewalks shimmered with droplets throughout the foggy streets.
  The streetlamps glared haughtily.
  And the air stank of malicous intent...coming from the back window of Micah's house. </div>

The result is a drop cap on the first letter of the first paragraph contained within the <div>.

Note Title Icons

Display the first character in a note title as an icon.

Put cssClass: icon in a note's frontmatter to display the first character in the title as an icon. Recommended for notes in which the first character is an emoji.

Style Settings

Download the Style Settings plug-in to unlock a plethora of customization options!

Warning

I'm not a theme developer, just a 15-year-old who likes messing around with CSS instead of doing my homework. But this time it's worth it, because it will help me focus on my homework. Anyway, I'm not a professional, so expect some issues here and there. Don't be shy to submit a pull request or an issue to help me improve this theme!

It's also under Creative Commons, so do whatever you want with it!

obsidian-big-and-bold's People

Contributors

bluemoondragon07 avatar olh21 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

liemeister olh21

obsidian-big-and-bold's Issues

Noice!

Well done 👍
Are you sure you're just a 15-year old? 🤣

Images

2 Questions:

  1. Your theme centers the image and adjusts the size. What can I put in a snippet to avoid that? I just want the image to be on the left and to adjust the size this way: ![[image.png|300]].
  2. This ![right](sky.png) does not work for me.

Improved ribbon menu width

Your theme is really impressive! it has made me want to use obsidian again.

I think the ribbon menu could be improved a bit by adjusting its width:

IMG_20230410_173932
IMG_20230410_173910

I have used the following code

.is-mobile .menu { max-height: calc(100% - 100px); width: calc(100% - 40px); max-width: calc(90% - 20px); min-width: unset; position: absolute; bottom: 0; border-radius: 9px 9px 0 0; padding: 10px 20px; left: 10px !important; top: unset !important; overflow-y: auto; }

I think it needs just one adjustment as you can see in the screenshot (it doesn't quite match the width of the text).

Otherwise it's perfect for me 💯 Thank you !

Bwt: how can I easily change the color or transparency of the text (inline title and content). I have tried with snippets but it doesn't work and within the RGB it makes me completely lost 😂

enhancement: support banner images

Right now, with banner property, this is shown in this way.

image

I'd like the image would be above the title and wouldn't collapse the latter one.

Thanks for your awesome work.

Network usage is prohibited for themes

It appears that your theme uses network connections to load assets (e.g. fonts, icons, or images). This is prohibited by the official Obsidian developer policies because themes should function completely locally.

You can bundle an asset for local use by using data URLs. See this guide.

Your theme will be removed from the official directory in the first week of April 2024, if the issue is not fixed by then.
Please let us know if you have any questions.
Thank you!

line length in reading mode is tiny since updating.

unsure what to do, ive tested by removing and enabling all plug ins and snippits and cant figure out why it is doing this...changing the theme to anything else changes it to a wider line lenght and even have a snippet tto set line length but this theme just does not change. :( i was loving this theme and even was just before the update saying to myself "i love this, ive got it just how i wanted. and then, boom tiny line length.

image

【feature request】support more condense and static Full calendar interface

This is a great theme, thank you for creating it. I use the full calendar plugin daily to arrange my schedule, but when I change to this theme the interface of the full calendar will change and become less compact and more dynamic which is not good for displaying as much information in the limited space.
So, it would be great if you can make an option to keep the default or a more compact and static UI for opening the full calendar with the theme.

Paragraph/line spacing in code block

In the code block the spacing between line ( ie paragraph) is way too big for standard code formatting. The spacing between lines should be different than regular text in notes.
image

Scrollbars

image

Scrollbars are visible and look ugly. I noticed in your screenshots there are no scrollbars, though perhaps only on hover.

How can I achieve that too? There does not seem to be a setting for it in Style Settings.
I am on MacOS, Obsidian 1.1.16.

Tables unstyled

Tables have reverted to an unstylised state.

image

  • Tables remain to the left-hand side of the screen as opposed to the centre.
  • Highlighting no longer works.

Folder and file move to the left

Each time i clic on a folder it moves all the files and folder a little bit to the left and after a few clic the diseapear under the right limit of the column

Capture d’écran 2023-05-24 165524
Capture d’écran 2023-05-24 165446

I hope this can be fixed because I just LOVE this theme it's one of the reason i choose obsidian !!!

H1 Title Centered

H1 Title are allways centered in this Theme wich is quite unusual as default setting
Is it possible to have an option to have them Align on the right like the other title level through the "Theme Setting"

Auto icon

Actually in the css for the school icon there is "exam" so everything that have exam like "example, or "examination" would get the icon . I suggest adding a space "exam " to this one and to all the icon decriptors as well so as to be more specific.

EDIT : aslo mayby double them with a space before " exam" so you can end or begin a title with them

As the choice of couple words/icon is quite personnal i would also suggest :

  • expose the words/icon through the settings
  • if to long/complicate : remove this from the theme and propose it as a snippet so people can edit it as they want

Difficult to get into bottom row of a table

I have a note with a number of tables, but the last table in that note poses a difficulty.
When I try to enter into a cell in the table's bottom row, the cursor jumps outside the table.

table-row.mov

Some small proposals

image

Hey, hello, I really like this theme. It's different in the store.
I have been using it for a day and have encountered some problems when using it.
Actually, it may not be a problem 😂

Can we consider adding a switch to turn off shadows in the future?
When the whole page is of flat design, such an effect will not look beautiful.

image
When using banners, this obvious shadow problem also occurs. https://github.com/noatpad/obsidian-banners
I don't think this is a mistake, but it doesn't look very beautiful. 😊

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.