Skip to content
This repository has been archived by the owner on Aug 2, 2022. It is now read-only.

Add solarized-light theme #71

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add solarized-light theme #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
252692b
Add solarized-light theme
cjbassi Jul 18, 2019
6ff08de
Fix gulp error
cjbassi Jul 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,15 @@ Option #2: hot-link the css files:
<body class="hack dark-grey"></body>

<!-- solarized-dark theme -->
<link rel="stylesheet" href="/path/to/solarized-dark.css">
<link rel="stylesheet" href="/path/to/solarized.css">
<body class="hack solarized-dark"></body>
```

<!-- solarized-light theme -->
<link rel="stylesheet" href="/path/to/solarized.css">
<body class="hack solarized-light"></body>
```

It's also available on [CDNJS](https://cdnjs.com/libraries/hack), [jsDelivr](http://cdn.jsdelivr.net/npm/hack/dist/) and [UNPKG](https://unpkg.com/hack/).

For more usages and style guideline head to [the website](http://hackcss.egoist.moe/) 🎉
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"devDependencies": {
"color-preset": "^0.1.1",
"cssnano": "^3.7.3",
"gulp": "^3.9.1",
"gulp": "v3",
"gulp-jade": "^1.1.0",
"gulp-postcss": "^6.1.1",
"gulp-serve": "^1.4.0",
Expand Down
31 changes: 27 additions & 4 deletions src/css/themes/solarized-dark.css → src/css/themes/solarized.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,33 @@

.solarized-dark {
background-color: $solarized-dark-color-bg;

& pre {
background-color: $solarized-dark-color-bg;
}

& .form-group {
&.form-textarea label:after {
background-color: $solarized-dark-color-bg;
}
}
}

.solarized-light {
background-color: $solarized-light-color-bg;

& pre {
background-color: $solarized-light-color-bg;
}

& .form-group {
&.form-textarea label:after {
background-color: $solarized-light-color-bg;
}
}
}

.solarized-dark, .solarized-light {
color: $blue-grey-400;

& h1,
Expand All @@ -24,7 +51,6 @@
}

& pre {
background-color: $solarized-dark-color-bg;
padding: 0;
border: none;
& code {
Expand Down Expand Up @@ -83,9 +109,6 @@
color: $blue-grey-400;
border-color: $blue-grey-300;
}
&.form-textarea label:after {
background-color: $solarized-dark-color-bg;
}
}

& .form-control {
Expand Down
1 change: 1 addition & 0 deletions src/css/vars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
$light-grey: rgba(95, 95, 95, 0.78);
$dark-grey-bg: #181818;
$solarized-dark-color-bg: #073642;
$solarized-light-color-bg: #fdf6e3;
2 changes: 1 addition & 1 deletion src/html/index.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ html

p As you can see, this website is proudly built using hack.css.

.alert.alert-info New! <a href="/dark.html">dark</a>, <a href="/dark-grey.html">dark-grey</a>, <a href="/solarized-dark.html">solarized-dark</a> and <a href="/standard.html">standard</a> modes are now available!
.alert.alert-info New! <a href="/dark.html">dark</a>, <a href="/dark-grey.html">dark-grey</a>, <a href="/solarized-dark.html">solarized-dark</a>, <a href="/solarized-light.html">solarized-light</a> and <a href="/standard.html">standard</a> modes are now available!

include carbon

Expand Down
4 changes: 2 additions & 2 deletions src/html/solarized-dark.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ html
title solarized-dark mode of hack.css
link(rel="stylesheet" href="./prism.css")
link(rel="stylesheet" href="./hack.css?t=#{time}")
link(rel="stylesheet" href="./solarized-dark.css?t=#{time}")
link(rel="stylesheet" href="./solarized.css?t=#{time}")
link(rel="stylesheet" href="./site.css?t=#{time}")
link(rel="stylesheet" href="./site-dark.css?t=#{time}")
body.hack.solarized-dark
Expand All @@ -23,7 +23,7 @@ html
:marked
```html
<link rel="stylesheet" href="/path/to/hack.css" />
<link rel="stylesheet" href="/path/to/solarized-dark.css" />
<link rel="stylesheet" href="/path/to/solarized.css" />
<body class="hack solarized-dark">
...
</body>
Expand Down
37 changes: 37 additions & 0 deletions src/html/solarized-light.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
doctype html
html
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
meta(name="viewport" content="width=device-width, initial-scale=1")
title solarized-light mode of hack.css
link(rel="stylesheet" href="./prism.css")
link(rel="stylesheet" href="./hack.css?t=#{time}")
link(rel="stylesheet" href="./solarized.css?t=#{time}")
link(rel="stylesheet" href="./site.css?t=#{time}")
link(rel="stylesheet" href="./site-dark.css?t=#{time}")
body.hack.solarized-light
.main.container
p
a(href="/") &laquo; Back to home
h2 Solarized Light mode
p Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit. Sint vero maiores quam culpa sed, dolor delectus omnis ab repellat dolorum, atque obcaecati inventore ex ratione hic numquam quia, iste necessitatibus.

include carbon

h2 Usage
:marked
```html
<link rel="stylesheet" href="/path/to/hack.css" />
<link rel="stylesheet" href="/path/to/solarized.css" />
<body class="hack solarized-light">
...
</body>
```

h2 Components

include components

script(src="./prism.js" async)
script(src="./app.js" async)
Loading