GNOME HIG CSS Library issues
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues
2023-03-27T14:52:30Z
https://gitlab.gnome.org/Teams/Engagement/websites/gnome-css-library/-/issues/56
Code Tag
2023-03-27T14:52:30Z
Arijit Kundu
Code Tag
# Table of contents
* [Evaluation](#evaluation)
* [Main Website](#1-main-website)
* [Extensions](#2-extensions)
* [Events](#3-events-portal)
* [Planet](#4-planet)
* [Discourse](#5-discourse)
* [Developer Center](#6-developer-...
# Table of contents
* [Evaluation](#evaluation)
* [Main Website](#1-main-website)
* [Extensions](#2-extensions)
* [Events](#3-events-portal)
* [Planet](#4-planet)
* [Discourse](#5-discourse)
* [Developer Center](#6-developer-center)
* [Wiki](#7-wiki)
* [Apps](#8-apps)
* [Forty](#9-forty)
* [Os](#10-os)
* [Circle](#11-circle)
* [Release](#12-release)
* [Mockups](#mockups)
# Evaluation
## [#1 - Main Website](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/1)
None
## [#2 - Extensions](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/2)
### Screenshot 1
![image](/uploads/0acbf34e65641bf80806d7d4995e5323/image.png)
### Elements used:
* `<code>`
# **`<code>`**
#### Typography:
- font-size: `90%`;
- font-family: `Menlo, Monaco, Consolas, "Courier New", monospace`;
#### Color:
- background: `rgba(0,0,0,0.1)`;
- color: `#c7254e`;
#### Spacing:
- padding: `1px`;
- border-radius: `4px`;
- padding: `1px`;
- line-height: `1.6`;
## [#3 - Events Portal](https://events.gnome.org/)
None
## [#4 - Planet](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/4)!
### Screenshot 1
![image](/uploads/5c796833b229e08031120ecc8386dc72/image.png)
### Elements used:
* `<pre>`
* `<code>`
# **`<pre>`**
#### Typography:
- font-size: `13px`;
- font-family: `Source Code Pro, Monaco, Bitstream Vera Sans Mono, Lucida Console, monospace`;
#### Color:
- color: `#777`;
- background-color: `#f5f5f5`;
#### Spacing:
- margin: `auto 1em auto 1em`;
- padding-left: `1em`;
- padding: `9.5px`;
- display: `block`;
- line-height: `1.42857`;
#### Other CSS:
- word-break: `break-all`;
- word-wrap: `break-word`;
#### Border:
- border: `1px solid #ccc`;
- border-left: `5px solid #ddd`;
- border-radius: `2px`;
# **`<code>`**
#### Typography:
- font-size: `inherit`;
#### Color:
- color: `inherit`;
- background-color: `transparent`;
#### Spacing:
- padding: `0`;
#### Other CSS:
- white-space: `pre-wrap`;
#### Border:
- border-radius: `0`;
<hr>
### Screenshot 2
![image](/uploads/cd62be219dc6ed63e0493b400bc7ff01/image.png)
### Elements used:
* `<blockquote>`
* `<code>`
# **`<blockquote>`**
#### Typography:
- font-size: `17.5px`;
#### Color:
- color: `#777`;
- background-color: `#d9edf7`;
#### Spacing:
- margin: `auto 1em auto 1em`;
- padding-left: `1em`;
- padding: `15px`;
#### Border:
- border: `1px solid transparent`;
- border-left: `5px solid #ddd`;
- border-radius: `2px`;
- border-color: `#bce8f1`;
# **`<code>`**
#### Typography:
- font-size: `90%`;
- font-family: `Source Code Pro, Monaco, Bitstream Vera Sans Mono, Lucida Console, monospace`;
#### Color:
- color: `#c7254e`;
- background-color: `#f9f2f4`;
#### Spacing:
- padding: `2px 4px`;
#### Border:
- border-radius: `2px`;
## [#5 - Discourse](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/5)
### Screenshot 1
![image](/uploads/9b77114be655db53e6a7ebfff3ab9a15/image.png)
### Elements used:
* `<code>`
# **`<code>`**
#### Typography:
- font-size: `1em/15.008px`;
- font-family: `Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace`;
#### Color:
- color: `#c7c7c7`;
- background: `#333`;
#### Spacing:
- line-height: `1.4`;
### Screenshot 2
![image](/uploads/d366627c2fe1238323c8e79274fdcb32/image.png)
### Elements used:
* `<pre>`
* `<code>`
# **`<pre>`**
#### Typography:
- font-family: `Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace`;
- font-size: `1em/15.008px`;
#### Spacing:
- margin: `1em 0px`;
- line-height-large: `1.4`;
- width: `690px`;
# **`<code>`**
#### Color:
- color: `#c7c7c7`;
- background: `#3c3c3c`;
#### Spacing:
- padding: `0.5em/7.504px`;
## [#6 - Developer Center](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/6)
### Screenshot 1
![image](/uploads/ff44c4e2cdc24c8ca77c62cf65ca8daa/image.png)
### Elements used:
* `<code>`
# **`<code>`**
#### Typography:
- font-stack--monospace: `"SFMono-Regular",Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace`;
- font-weight: `400`;
- font-size--small--2: `81.25%`;
#### Color:
- background: `#1a1c1e`;
- color: `rgb(255 255 255 / 80%)`;
- border-color: `#303335`;
#### Spacing:
- border-radius: `0.2em`;
- border: `1px solid`;
- padding: `0.1em 0.2em`;
- line-height: `1.5`;
### Screenshot 2
![image](/uploads/82244128d4f677a9ba10aee525938c3d/image.png)
### Elements used:
* `<pre>`
# **`<pre>`**
#### Typography:
- font-stack--monospace: `"SFMono-Regular",Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace`;
- font-size--small--2: `81.25%`;
- font-weight: `400`;
#### Color:
- background: `#202020`;
- color: `#d0d0d0`;
#### Spacing:
- line-height: `1.5`;
- width: `720px`;
- padding: `0.625rem 0.875rem`;
## [#7 - Wiki](https://gitlab.gnome.org/Teams/Engagement/websites/gnome-websites-framework/-/issues/8)
None
## [#8 - Apps](https://apps.gnome.org/)
None
## [#9 - Forty](https://forty.gnome.org/)
None
## [#10 - Os](https://os.gnome.org/)
None
## [#11 - Circle](https://circle.gnome.org/)
None
## [#12 - Release](https://release.gnome.org/)
### Screenshot 1
![image](/uploads/2375a1829a6ec886589745b3fe0d7cf2/image.png)
### Elements used:
* `<kbd>`
# **`<kbd>`**
#### Typography:
- font-family: `monospace`;
- font-size: `70%/12.6px`;
- font-weight: `400`;
#### Color:
- background-color: `rgb(0 0 0 / 30%)`;
- color: `#ffffff`;
#### Spacing:
- padding: `0.2rem 0.4rem/3.6px 7.2px`;
- border-radius: `2px`;
- line-height: `1.6`;
### Screenshot 2
![image](/uploads/cc32502a84dee042a249bb68a848241f/image.png)
### Elements used:
* `<code>`
# **`<code>`**
#### Typography:
- font-family: `monospace`;
- font-size: `18px`;
- font-weight: `400`;
#### Color:
- color: `#ffffff`;
#### Spacing:
- line-height: `1.6`;
- width: `auto`;
# Mockups
![image](/uploads/77d90cc0935e7cd7ae7c74abfed1442c/image.png)