Giter Club home page Giter Club logo

system.css's Issues

less of a Issue and more of a question

i want to have the body of my page be black but have a box with content have the defalt background img how would i do that i want it to look like how th origonal system6 running on a monitor with a black margin my current code looks like <body style="background-color: #000000;display: flex;justify-content: center;background-image: none;"> <div class="content" style="size: 90vw, 90vw;box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);"> how would yall do this

somthing like this Screenshot 2023-08-21 at 7 34 21 PM

Add smooth scrolling behavior on click

Hey there , I'm frontend dev

I cam across the website and its quite unique and like vintage i.e. awesome

But in this we can add a smooth scrolling behavior to it which looks good

Cursors

This DeviantArt page has cursors ripped from MacOS 9. I do not know what the license implications would be tho...

Default Button Type

As seen from Apple's HI Guidelines:

Screen Shot 2022-08-13 at 3 21 44 PM

Buttons currently use the border-image property, so this could be achieved the same way.

Nested single list item of menu item do not behave as expected

Hi @sakofchit, nice job working on System.css, I am using it for my blog and I mentioned it as credits! Extremely happy! Thank you for the work. I use version ^0.1.9

If I ever encounter any weird behavior, I override it. One of the things I encountered was using a menu that has an item that is lonely and does not have a nested menu. For example:

<ul role="menu-bar">
   <li role="menu-item" tabIndex={0} aria-haspopup="false"> <!-- this one -->
      <Link aria-label="home page" href="/">
      Home
      </Link>
   </li>
   <li role="menu-item" tabIndex={0} aria-haspopup="true">
      About
      <ul role="menu">
         <li role="menu-item">
            <Link aria-label="about page" href="/about">
            Me
            </Link>
         </li>
         <li role="menu-item">
            <Link aria-label="about page" href="/about-website">
            Website
            </Link>
         </li>
      </ul>
   </li>
</ul>

Link is the link (a tag) Next.js component. The menu works as expected. However, the first element has an attribute of aria-haspopup="false" because I have a single item which is an a children. If I use a plain list item like <li>This is my single item as a plain item</li> the menu item behaves as expected, but in cases to have a children for the list item, then it behaves differently (per child type, in my case an anchor tag).

Using aria-haspopup="false" has no effect so I had to override that:

ul[role="menu-bar"] li[aria-haspopup="false"] * {
  
  /* all tags */
  background-color: inherit;
  color: inherit;
  margin: 0;
  padding: 0;

  /* for a tags */
  text-decoration: none;
}

The expected behavior, in my opinion, is that if a list item contains a children (no matter what type) but does not have a nested menu, that list item should look like the other items.

Do you think that added code is semantically good to work with System.css? If so, should I open a PR and add this to be naturally implemented?
Or, am I off the road here and there is something I am missing?

Styling Select Menu

Just an idea:

Currently, the Select Menu component's appearance is based on the user's OS.
Screen Shot 2022-11-03 at 9 04 05 AM

It'd be nice if it looked like something closer to the Dropdown menu component
Screen Shot 2022-11-03 at 9 05 12 AM

Styling it doesn't seem to be tough a task. However, accessibility is my bigger concern. The component may need a tabindex=0 property in its HTML in order to preserve page tabbing. This is not possible to enforce using CSS alone, so docs may need to reflect the importance of having a tabindex=0 attribute.

Working on fixing the layout

Hey @sakofchit , I was working on fixing the layout of the website, as it is messed up ( Issue #3 ) . So for this I am planning to change the html structure little bit.
I am planning to wrap the aside and main in one container and want to make it a grid.
Here's the codepen.

In this codepen I have created the rough layout . You can see the html structure in the codepen that I am planning to implement in the system.css

So should I change the HTML structure?

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.