oss/Radicale
oss/Radicale
1
0
Fork 0
mirror of https://github.com/Kozea/Radicale.git synced 2025-07-02 16:58:30 +00:00
Code Wiki Activity

Use Sass instead of Scss

Browse source
This commit is contained in:
Guillaume Ayoub 2016-09-02 18:12:46 +02:00
parent c3a50507a2
commit c16fac4a5c
2 changed files with 174 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

174
css/main.sass Normal file
View file

@ -0,0 +1,174 @@
---
# Sass for Radicale
---
@charset "utf-8"
@import url(https:\/\/fonts.googleapis.com/css?family=Oxygen:400,300)
body
background: #e4e9f6
color: #424247
display: flex
flex-direction: column
font-family: Oxygen, sans
font-size: 14pt
line-height: 160%
margin: 0
min-height: 100vh
a
color: inherit
nav, footer
background: #a40000
color: white
padding: 0 20%
ul
display: flex
flex-wrap: wrap
margin: 0
padding: 0
li
display: block
padding: 0 1em 0 0
a
color: inherit
display: block
padding: 1em 0.5em 1em 0
text-decoration: inherit
transition: 0.2s
&:hover,
&:focus
color: black
outline: none
header
background: url(logo.svg), linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1))
background-position: 22% 45%
background-repeat: no-repeat
color: #efdddd
font-size: 1.5em
min-height: 250px
overflow: auto
padding: 3em 22%
text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5)
& > *
padding-left: 220px
h1
font-size: 2.5em
font-weight: lighter
margin: 0.5em 0
main
flex: 1
section
padding: 0 20% 2em
&:not(:last-child)
border-bottom: 1px dashed #ccc
h1
background: linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1))
color: #e5dddd
font-size: 2.5em
margin: 0 -33.33% 1em
padding: 1em 33.33%
h2, h3, h4
font-weight: lighter
margin: 1.5em 0 1em
article
border-top: 1px solid transparent
position: relative
margin: 3em 0
aside
box-sizing: border-box
color: #aaa
font-size: 0.8em
right: -30%
top: 0.5em
position: absolute
&:before
border-top: 1px dashed #ccc
content: ''
display: block
left: -33.33%
position: absolute
right: -33.33%
pre
border-radius: 3px
background: black
color: #d3d5db
margin: 0 -1em
overflow-x: auto
padding: 1em
table
border-collapse: collapse
font-size: 0.8em
margin: auto
td
border: 1px solid #ccc
padding: 0.5em
dl
dt
margin-bottom: 0.5em
margin-top: 1em
@media (max-width: 800px)
body
font-size: 12pt
header, section
padding-left: 2em
padding-right: 2em
nav, footer
padding-left: 0
padding-right: 0
ul
justify-content: center
li
padding: 0 0.5em
a
padding: 1em 0
header
background-position: 50% 30px, 0 0
padding-bottom: 0
padding-top: 330px
text-align: center
& > *
margin: 0
padding-left: 0
section h1
margin: 0 -0.8em 1.3em
padding: 0.5em 0
text-align: center
article
aside
top: 0.5em
right: -1.5em
&:before
left: -2em
right: -2em

191
css/main.scss
View file

@ -1,191 +0,0 @@
---
# Scss for Radicale
---
@charset "utf-8";
@import url(https:\/\/fonts.googleapis.com/css?family=Oxygen:400,300);
body {
background: #e4e9f6;
color: #424247;
display: flex;
flex-direction: column;
font-family: Oxygen, sans;
font-size: 14pt;
margin: 0;
min-height: 100vh;
}
a {
color: inherit;
}
nav, footer {
background: #a40000;
color: white;
padding: 0 20%;
ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
li {
display: block;
padding: 0 1em 0 0;
a {
color: inherit;
display: block;
padding: 1em 0.5em 1em 0;
text-decoration: inherit;
transition: 0.2s;
&:hover,
&:focus {
color: black;
outline: none;
}
}
}
}
}
header {
background: url(logo.svg), linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1));
background-position: 22% 45%;
background-repeat: no-repeat;
color: #efdddd;
font-size: 1.5em;
min-height: 250px;
overflow: auto;
padding: 3em 22%;
text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5);
& > * {
padding-left: 220px;
}
h1 {
font-size: 2.5em;
font-weight: lighter;
margin: 0.5em 0;
}
}
main {
flex: 1;
}
section {
padding: 0 20% 2em;
&:not(:last-child) {
border-bottom: 1px dashed #ccc;
}
h1 {
background: linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1));
color: #e5dddd;
font-size: 2.5em;
margin: 0 -33.33% 1em;
padding: 1em 33.33%;
}
h2, h3, h4 {
font-weight: lighter;
margin: 1.5em 0 1em;
}
}
article {
border-top: 1px solid transparent;
position: relative;
margin: 3em 0;
aside {
box-sizing: border-box;
color: #aaa;
font-size: 0.8em;
right: -30%;
top: 0.5em;
position: absolute;
}
&:before {
border-top: 1px dashed #ccc;
content: '';
display: block;
left: -33.33%;
position: absolute;
right: -33.33%;
}
}
pre {
border-radius: 3px;
background: black;
color: #d3d5db;
margin: 0 -1em;
overflow-x: auto;
padding: 1em;
}
@media (max-width: 800px) {
body {
font-size: 12pt;
}
header, section {
padding-left: 2em;
padding-right: 2em;
}
nav, footer {
padding-left: 0;
padding-right: 0;
ul {
justify-content: center;
li {
padding: 0 0.5em;
a {
padding: 1em 0;
}
}
}
}
header {
background-position: 50% 30px, 0 0;
padding-bottom: 0;
padding-top: 330px;
text-align: center;
& > * {
margin: 0;
padding-left: 0;
}
}
section h1 {
margin: 0 -0.8em 1.3em;
padding: 0.5em 0;
text-align: center;
}
article {
aside {
top: 0.5em;
right: -1.5em;
}
&:before {
left: -2em;
right: -2em;
}
}
}